PayPal JavaScript SDK button opens about:blank#blocked window in Django template but not in local HT-CodePudding

I've been trying to integrate PayPal buttons on my Django website, but I keep having this problem where the PayPal popup window appears as about:blank#blocked. I can see this error in console:

popup_open_error_iframe_fallback 
{err: 'n: Can not open popup window - blocked\n    at Ie (…owser=false&allowBillingPayments=true:1342:297830', timestamp: '1644780862712', referer: 'www.sandbox.paypal.com', sdkCorrelationID: 'f12370135a997', sessionID: 'uid_d36969c1b2_mtk6mja6mzy', …}

What I don't understand is that the problem isn't there if I just open the HTML file itself in a browser... The script looks like this:

<!-- Set up a container element for the button -->
<div id="paypal-button-container" class='text-center mt-2'></div>

<!-- Include the PayPal JavaScript SDK -->
<script src="https://www.paypal.com/sdk/js?client-id=blahblahmyid&currency=EUR"></script>

<script>
    // Render the PayPal button into #paypal-button-container
    paypal.Buttons({
        locale: 'it_IT',
        style: {
            color: 'gold',
            shape: 'rect',
            layout: 'vertical',
            label: 'pay'
        },

        // Set up the transaction
        createOrder: function(data, actions) {
            return actions.order.create({
                purchase_units: [{
                    amount: {
                        value: '88.44'
                    }
                }]
            });
        },

        // Finalize the transaction
        onApprove: function(data, actions) {
            return actions.order.capture().then(function(orderData) {
                // Successful capture! For demo purposes:
                console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
                var transaction = orderData.purchase_units[0].payments.captures[0];
                alert('Transaction '  transaction.status   ': '   transaction.id   '\n\nSee console for all available details');

                // Replace the above to show a success message within this page, e.g.
                // const element = document.getElementById('paypal-button-container');
                // element.innerHTML = '';
                // element.innerHTML = '<h3>Thank you for your payment!</h3>';
                // Or go to another URL:  actions.redirect('thank_you.html');
            });
        }


    }).render('#paypal-button-container');
</script>

What's the problem ? I don't understand.

CodePudding user response：

Can not open popup window - blocked

Try a different browser with default settings. It appears the one you are using has something non-standard configured or installed which is blocking the checkout.

CodePudding user response：

There's a new feature in django 4.0 that follows the addition of the COOP header in newer browsers which, as I understand it, stops remote sites from opening a window in the same browsing context.

The default setting of SECURE_CROSS_ORIGIN_OPENER_POLICY in django isolates the browsing context to just the current document origin. Setting it to same-origin-allow-popups allows the paypal popup to open in the current context.

See https://docs.djangoproject.com/en/4.0/ref/middleware/#cross-origin-opener-policy

TLDR; set SECURE_CROSS_ORIGIN_OPENER_POLICY='same-origin-allow-popups'