[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.