[Bug] Paypal Button Click opens Overlay to login and an empty Popup

[dkoenigroer]

Library used

paypal-js as direct script and npm package.

🐞 Describe the Bug

After loading the payment buttons with the paypal-js sdk and choosing on of the payment methods an overlay with the login form appears. But at the same time a small popup window with "about:blank" and a white blank page opens. This popup hides the login overlay so the customer is not able to see it and stops checkout process most times.

This behaviour starts on thursday july 4th on all our online shops at the same time.

🔬 Minimal Reproduction

Go to your paypal integration and click one of the payment methods offered by the paypal-js-sdk.

😕 Actual Behavior

See "Describe the Bug"

Before this change only a blocking overlay with a paypal logo and a hint that the process will continue in a pop appears. The pop opens with the login form of paypal.

Now the loginform is displayed as overlay on top of the blocker and the popup is empty.

🤔 Expected Behavior

Either the login should be displayed as overlay as now is happening and no popup should be opened or the old behavoir when the popup displays the loginform is set back and no login overlay in the background.

🌍 Environment

• Node.js 20, NPM 10.7.0 but also the direct script integration without npm.
• OS: Linux, Windows, MacOSX
• Browser: Chrome, Firefox, Safari

[wiffbi]

We observe the same problem – with the exception that it only happens, when the payment-page, where the Paypal-button is embedded, is inside an iframe.

[dkoenigroer]

I found the problem :/

We added some more security-points to our sites which set the Cross-Origin-Opener-Policy per dafault to same-origin. So i just noticed an error when using a paypal checkout method:

So Paypal SDK detects that it pay not open popups and falls back to an iframe in an overlay. But the problem is that the popup opens nonetheless.

The solutions:

Set the Header: Cross-Origin-Opener-Policy: "same-origin-allow-popups" and the old dirty login pop up opens as it did in good old days and displays the login page :)

[dkoenigroer]

Maybe this should be added to the integration documentation of the paypal sdk.

[pc-coholic]

Thing is, this used to work in the past though - so I'd say there is an issue that PayPal needs to fix; irrespective of documentation update or not.

Perhaps you might consider reopening the issue, so that PayPal can close this once they have updated their server-side code?

[Thomas-C258]

Same error here. I'd much rather have an option to directly display in a modal and prevent the popup's opening...

[ravishekhar]

Acknowledged. We will check and get back.

[joomsch]

Is there any way I can force PayPal to use the fallback mechanism so I can replicate this issue? Some of my customers have reported the same problem, but I'm unable to reproduce it on my end, making it difficult to fix.

[m2hd1]

I'm experiencing the same issue with the blank pop-up. The new modal is fantastic, and I'm glad we're moving away from that pop-up.

[shor-ty]

Hi all, is there any other solution rather than the one mentioned by @dkoenigroer ?

[belthaZornv]

I found the problem :/

We added some more security-points to our sites which set the Cross-Origin-Opener-Policy per dafault to same-origin. So i just noticed an error when using a paypal checkout method:

So Paypal SDK detects that it pay not open popups and falls back to an iframe in an overlay. But the problem is that the popup opens nonetheless.

The solutions:

Set the Header: Cross-Origin-Opener-Policy: "same-origin-allow-popups" and the old dirty login pop up opens as it did in good old days and displays the login page :)

I'd kiss you if I could. - lol - I spent so many hours trying to find whats the popup.

[khalidelassaad]

This workaround did not work for me.

I am experiencing the following behavior - PayPal opens an "about:blank" new tab. Back on the original tab, an iframe is opened and works like a charm.

When I set this header, the change I observe is that PayPal opens an "about:blank" pop-up instead of a new tab. Either way, the iframe is opened and works like a charm.

VERY RARELY, the new tab/pop-up actually loads PayPal, but then fails with an error message along the lines of "We couldn't fulfill your purchase at this time." I have not been able to reliably reproduce this scenario.

All my testing has been using sandbox mode, my app is not ready to collect payments in production yet. A small part of me hopes that it will "just work" in prod...

IDEALLY, there would be a way to specify to the PayPal JS SDK to simply use the iframe from the start. I've been looking and am surprised to not find a supported option - so now I'm trying to figure out what logic PayPal JS SDK uses to determine whether or not to launch a tab/pop-up etc... maybe I'll be able to configure my site in such a way that a new tab is not attempted.

I found the problem :/

We added some more security-points to our sites which set the Cross-Origin-Opener-Policy per dafault to same-origin. So i just noticed an error when using a paypal checkout method:

So Paypal SDK detects that it pay not open popups and falls back to an iframe in an overlay. But the problem is that the popup opens nonetheless.

The solutions:

Set the Header: Cross-Origin-Opener-Policy: "same-origin-allow-popups" and the old dirty login pop up opens as it did in good old days and displays the login page :)

[khalidelassaad]

✅ Found a good workaround! ✅

To disable pop-ups altogether and default to iframe usage, set the following attribute on your PayPal SDK <script> tag:
data-popups-disabled="true"

Example:

<script src="https://www.paypal.com/sdk/js?client-id={{ paypal_api_key }}&components=buttons&currency=USD&enable-funding=venmo,card&disable-funding=paylater"
        data-popups-disabled="true"></script>
<script>

Found this by setting the debug=true query parameter in the SDK src URL and reading the non-minified source:

var SDK_SETTINGS = {
    AMOUNT: "data-amount",
    API_STAGE_HOST: "data-api-stage-host",
    CLIENT_METADATA_ID: "data-client-metadata-id",
    CLIENT_TOKEN: "data-client-token",
    CSP_NONCE: "data-csp-nonce",
    ENABLE_3DS: "data-enable-3ds",
    JS_SDK_LIBRARY: "data-js-sdk-library",
    MERCHANT_ID: "data-merchant-id",
    NAMESPACE: "data-namespace",
    PAGE_TYPE: "data-page-type",
    PARTNER_ATTRIBUTION_ID: "data-partner-attribution-id",
    POPUPS_DISABLED: "data-popups-disabled",
    SDK_INTEGRATION_SOURCE: "data-sdk-integration-source",
    SDK_TOKEN: "data-sdk-client-token",
    SHOPPER_SESSION_ID: "data-shopper-session-id",
    STAGE_HOST: "data-stage-host",
    USER_EXPERIENCE_FLOW: "data-user-experience-flow",
    USER_ID_TOKEN: "data-user-id-token",
};
...
function getMerchantRequestedPopupsDisabled() {
  return (
      "true" ===
      getSDKAttribute(SDK_DATA_ATTRIBUTES.POPUPS_DISABLED)
  );

There is a functionality for merchants to request popups be disabled, though it appears to be undocumented, so tread with caution. This may have been quietly deprecated to enable more complex, pop-up required, payment flows? who knows...

cc @shor-ty since you asked for another workaround