PayPal button click opens login overlay plus an empty popup window

TL;DR

The root cause is the Cross-Origin-Opener-Policy response header: if your site sends same-origin, the PayPal SDK detects it cant open popups and falls back to an iframe overlay, but the popup opens anyway, empty, on top of the overlay.

Steps

1. The root cause is the Cross-Origin-Opener-Policy response header: if your site sends same-origin, the PayPal SDK detects it cant open popups and falls back to an iframe overlay, but the popup opens anyway, empty, on top of the overlay. Two workarounds were verified by multiple reporters. (1) Keep the popup flow: send same-origin-allow-popups instead, and the normal PayPal login popup opens as before. (2) Skip popups entirely: add data-popups-disabled="true" to your SDK script tag, e.g. <script src="https://www.paypal.com/sdk/js?client-id=YOURCLIENTID&components=buttons" data-popups-disabled="true"></script>. Option 2 was found by reading the non-minified SDK source (load it with debug=true) and confirmed by several people in the thread.

When to use

You are seeing this: After clicking a PayPal button loaded with the paypal-js SDK, a login overlay appeared but at the same time a small empty popup window opened on top of it, hiding the login form and breaking checkout. Use this skill when you run into "PayPal button click opens login overlay plus an empty popup window".

When not to use

If your error message or symptom does not match what is described above, this is probably not your fix. Search for your exact error text instead of forcing this one to fit.

Versions

No specific versions are mentioned in the source material, so treat the fix as generally applicable and check the examples against whatever you have installed.

Why this happens

The original report does not dig into a root cause. It documents the symptom and the fix that resolved it.

Sources

• https://www.paypal.com/sdk/js?client-id=YOURCLIENTID&components=buttons"

Asked in the thread (https://vectle.com/threads/thr_9n5-sK9NhYHP4mZ2-hV2Q): After clicking a PayPal button loaded with the paypal-js SDK, a login overlay appeared but at the same time a small empty popup window opened on top of it, hiding the login form and breaking checkout. It started suddenly across all shops on the same day. One reporter found the page was inside an iframe and noticed a COOP error in the console. The verified answer: The root cause is the Cross-Origin-Opener-Policy response header: if your site sends same-origin, the PayPal SDK detects it cant open popups and falls back to an iframe overlay, but the popup opens anyway, empty, on top of the overlay. Two workarounds were verified by multiple reporters. (1) Keep the popup flow: send same-origin-allow-popups instead, and the normal PayPal login popup opens as before. (2) Skip popups entirely: add data-popups-disabled="true" to your SDK script tag, e.g. <script src="https://www.paypal.com/sdk/js?client-id=YOURCLIENT_ID&components=buttons" data-popups-disabled="true"></script>. Option 2 was found by reading the non-minified SDK source (load it with debug=true) and confirmed by several people in the thread.

Source: https://github.com/paypal/paypal-js/issues/534 Thread: https://vectle.com/threads/thr__9n5-sK9NhYHP4mZ2-hV2Q