In-Context Checkout: Uncaught SecurityError: Blocked a frame with origin: checkout.js:4734 throws error

Question

I'm implementing PayPal's In-Context Checkout and am using Advanced In-Context JavaScript settings (https://developer.paypal.com/docs/classic/express-checkout/in-context/javascript_advanced_settings)

My app is a React app. So I can't use PP API as they suggest it, that is just throw a code between <script> ... </script> tags somewhere in the page under their buttons. My React components have state and data that I need to send to server within PP function calls. So I placed PP code in componentDidMount method. And for some reason PP throws this error:

checkout.js:4734 Uncaught SecurityError: Blocked a frame with origin "http://example.com:3000" from accessing a frame with origin "https://www.sandbox.paypal.com". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "https". Protocols must match. (anonymous function) @ checkout.js:4734

checkout.js:4515 GET http://www.paypalobjects.com/api/oneTouch.html net::ERR_EMPTY_RESPONSE

Here is the code:

componentDidMount() {
    window.paypalCheckoutReady = function() {
        paypal.checkout.setup(config[NODE_ENV].ppMerchantID, {
            locale: 'en_US',
            environment: 'sandbox',
            buttons: [
                {
                    container: 'checkoutBtnContainer',
                    type: 'checkout',
                    color: 'gold',
                    size: 'medium',
                    shape: 'pill',
                    click: (ev)=>{
                        paypal.checkout.initXO();
                        $.post('/checkout', {
                            checkoutData: this.props.checkoutData,
                        })
                        .done(res => {
                            paypal.checkout.startFlow(res.link);
                        })
                        .fail(err => {
                            paypal.checkout.closeFlow();
                        });
                    }
                }
            ],
        });
    };
},

I know about cross-origin policy. I don't understand why it is the case here. Why the code works fine if I throw it on the page between <script> ... </script> tags, but PP throws an error if I use it in my React component. What is the cause of that? Is it React fault or PayPal's?

Answer 1

UPD: No, below is not a solution for the problem. Occasionally Paypal's checkout.js script throws the error.

However, it solves this issue

Apparently,

1) there was no this:

window.paypalCheckoutReady = function() {
    // wrong this is here
}

I changed to:

window.paypalCheckoutReady = () => {
    // correct this is here now
}

I don't like .bind(this).

2) I removed <form /> tag and set plain <div> instead:

// before
<form id="checkoutBtnContainer" method="post" action="/checkout"></form>

// after
<div id="checkoutBtnContainer"></div>

I don't know why and how, but all works fine now.