[Bug] Failed to load the PayPal JS SDK script. Error: The script "https://www.paypal.com/sdk/js?client-id= on Safari

[d-tello]

Library used

react-paypal-js (version 8.1.3)

🐞 Describe the Bug

We are encountering a frequent issue on our website, where the PayPal JS SDK fails to load, especially on certain versions of Safari, most notably in private browsing mode. This results in PayPal buttons not rendering and a significant number of error logs recorded in our Sentry error logging system.

The error message specifically points to a blocked request due to content blockers in Safari, as well as XMLHttpRequest access control checks. This issue affects both desktop and mobile Safari versions.

🔬 Minimal Reproduction

Navigate to petsdeli.de using Mobile Safari or Safari.
Enable private browsing mode.
Observe the error in the browser's developer console.

😕 Actual Behavior

The PayPal JS SDK script fails to load, resulting in the following error in the console:

This issue is primarily observed on Safari browsers (both desktop and mobile), particularly in private mode. We see around 1000 error logs per day from our Sentry system related to this problem.

🤔 Expected Behavior

The PayPal JS SDK script should load successfully, and the PayPal buttons should render correctly, regardless of whether the user is browsing in private mode or has a content blocker enabled.

🌍 Environment

• Node.js: 20.11.0
• OS: iOS/macOS
• Browser:
  • Mobile Safari 17.5 (60% of occurrences)
  • Mobile Safari 17.6 (13% of occurrences)
  • Safari 17.5 (3%)
  • Mobile Safari 16.6 (1%)
  • Other (20%)

➕ Additional Context

• We are using Next.js as the framework for the website.
• Error logging via Sentry shows a significant number of blocked requests, primarily on Safari.

[ctapang]

Seeing the same problem on an iOS Reactjs single-page app. Using the Chrome browser does not fix the issue, so the security setting that prevents loading the Paypal module maybe an iOS setting, at least in our case.

[trailsnail]

we also see this issue

[pointblack]

same here

[Jaikant]

Seeing the same issue, could it be because my client id is of a sandbox user?

[anton-yefanov]

I have experienced the same bug trying to implement checkout page with @paypal/react-paypal-js
For me the problem was that i was taken clientId from enviroment variables. After i put string directly into initialOptions object the problem was fixed

[andr3wV]

Go to your browser's network tab and look for the failed api request. If you click into it, it should tell you a more specific error message. For example mine had the following:

Turns out in production/live mode, you're not supposed to have the buyer-country param!

Also if you're using NextJS, make sure that if you're using env vars that you append NEXT_PUBLIC_ on to the CLIENT_ID: NEXT_PUBLIC_PAYPAL_CLIENT_ID. That way NextJS can access it on the client.