PayPal JavaScript SDK 按钮在 Django 模板中打开 about:blank#blocked 窗口，但不在本地 HTML 文件中打开

Question

我一直在尝试在我的 Django 网站上集成 PayPal 按钮，但我一直遇到这个问题，PayPal 弹出窗口显示为 about:blank#blocked。我可以在控制台中看到此错误：

\n

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

\n

我不明白的是，如果我只是在浏览器中打开 HTML 文件本身，问题就不存在......脚本如下所示：

\n

<!-- Set up a container element for the button -->\n<div id="paypal-button-container" class='text-center mt-2'></div>\n\n<!-- Include the PayPal JavaScript SDK -->\n<script src="https://www.paypal.com/sdk/js?client-id=blahblahmyid&currency=EUR"></script>\n\n<script>\n    // Render the PayPal button into #paypal-button-container\n    paypal.Buttons({\n        locale: 'it_IT',\n        style: {\n            color: 'gold',\n            shape: 'rect',\n            layout: 'vertical',\n            label: 'pay'\n        },\n\n        // Set up the transaction\n        createOrder: function(data, actions) {\n            return actions.order.create({\n                purchase_units: [{\n                    amount: {\n                        value: '88.44'\n                    }\n                }]\n            });\n        },\n\n        // Finalize the transaction\n        onApprove: function(data, actions) {\n            return actions.order.capture().then(function(orderData) {\n                // Successful capture! For demo purposes:\n                console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));\n                var transaction = orderData.purchase_units[0].payments.captures[0];\n                alert('Transaction '+ transaction.status + ': ' + transaction.id + '\\n\\nSee console for all available details');\n\n                // Replace the above to show a success message within this page, e.g.\n                // const element = document.getElementById('paypal-button-container');\n                // element.innerHTML = '';\n                // element.innerHTML = '<h3>Thank you for your payment!</h3>';\n                // Or go to another URL:  actions.redirect('thank_you.html');\n            });\n        }\n\n\n    }).render('#paypal-button-container');\n</script>\n

\n

有什么问题 ？我不明白。

\n

Answer 1

django 4.0 中有一个新功能，它在较新的浏览器中添加了 COOP 标头，据我所知，它可以阻止远程站点在同一浏览上下文中打开窗口。

django 中SECURE_CROSS_ORIGIN_OPENER_POLICY的默认设置将浏览上下文隔离到当前文档源。将其设置为same-origin-allow-popups允许在当前上下文中打开 paypal 弹出窗口。

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

太长了；设置 SECURE_CROSS_ORIGIN_OPENER_POLICY='同源允许弹出窗口'

Answer 2

对于 django 4.0 settings.py 添加

SECURE_CROSS_ORIGIN_OPENER_POLICY='同源允许弹出窗口'