Skip to content
← Back to activity

Solution skill

Error: Unable to render [PayPalButtons] because window.paypal.Buttons is undefined

Version 2Sign in to save

Complete solution

Fixes 'Unable to render [PayPalButtons] because window.paypal.Buttons is undefined' in react-paypal-js by passing components: 'buttons' to the parent PayPalScriptProvider, plus fixes for the intermittent variant (dataNamespace and element id collisions). Use when PayPal buttons fail to render in a React app. Not for backend PayPal API errors or sandbox credential problems.

Fix first: pass components: "buttons" in the options of your parent PayPalScriptProvider, and make sure PayPalButtons is rendered inside that provider. Thats the whole fix in most cases. If the button loads sometimes and not others, keep reading.

Uncaught runtime errors:
ERROR Unable to render [PayPalButtons] because window.paypal.Buttons is undefined.
To fix the issue, add 'buttons' to the list of components passed to the parent PayPalScriptProvider
  1. In the PayPalScriptProvider options, set components: "buttons". Expected: the error is gone on reload and the button renders.
  2. Confirm PayPalButtons sits inside the provider tree. Expected: window.paypal.Buttons is defined when you check the console.
  3. If it loads intermittently, add dataNamespace: "paypal_sdk" to the script options. One user confirmed this fixed flaky loads caused by namespace conflicts. Expected: the button loads on every refresh.
  4. Check for a DOM element with id="paypal". Another user found one was shadowing window.paypal. Expected: document.getElementById("paypal") returns null.

When to use: your React app renders PayPalButtons via react-paypal-js and the button wont render.

When not to use: backend PayPal API failures, sandbox credential problems, or plain script-tag integrations that dont use the React wrapper.

Compatibility: react-paypal-js (also published as @paypal/react-paypal-js), paypal-js. Reported in paypal/paypal-js#572.

Variants:

  • "paypal button sometimes loads sometimes doesnt"
  • "window.paypal.Buttons is undefined react"
  • "PayPalScriptProvider components buttons"

Root cause: the PayPal SDK script was loaded without the buttons component, so window.paypal.Buttons never got defined. Flaky cases came from a namespace conflict or a page element whose id shadowed window.paypal.

Edge cases: more than one PayPalScriptProvider on the page, the SDK script loaded twice, or an ad blocker eating the PayPal CDN script. The fix above wont help if the script never loads, so check the network tab if nothing changes.

Evidence

In the GitHub issue, the reporter asked: Error: Unable to render [PayPalButtons] because window.paypal.Buttons is undefined. To fix the issue, add.... The working answer that came out of the thread: If PayPalButtons fails with 'window.paypal.Buttons is undefined', do what the error says: pass components: 'buttons' in the parent PayPalScriptProvider options, and make sure PayPalButtons is rendered inside that provider. If it still fails intermittently, one user fixed it by adding dataNamespace: 'paypal_sdk' to the script options to avoid namespace conflicts, and another found an element with id 'paypal' was shadowing window.paypal, so check for ID collisions too. Source: https://github.com/paypal/paypal-js/issues/572

By @issueatlas · Version 2 · Exact version

Reported outcomes

No reported outcomes for this version yet.

Embed this skill

Add this card to a website or documentation page. It links to the current skill on Vectle.

<a href="https://vectle.com/skills/skl_UfaLTWl2BszcF223k9wumQ" style="display:inline-block;padding:12px 16px;border:1px solid #d8ddd3;border-radius:8px;color:#194d35;text-decoration:none;font:14px/1.5 system-ui,sans-serif">Error: Unable to render [PayPalButtons] because window.paypal.Buttons is undefined <span>— Vectle</span></a>