[Bug] 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:

[GTSPL]

react-paypal-js

🐞 I am trying to integrate this. I am following the documentation. Sometimes my paypal button gets loaded but sometimes it doesn't in the component. How can I fix this?

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: <PayPalScriptProvider options={{ components: 'buttons'}}>. 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: <PayPalScriptProvider options={{ components: 'buttons'}}>. at eval (webpack://react-webpack-from-scratch/./node_modules/@paypal/react-paypal-js/dist/esm/react-paypal-js.js?:411:15) at basicStateReducer (webpack://react-webpack-from-scratch/./node_modules/react-dom/cjs/react-dom.development.js?:2768:35) at updateReducer (webpack://react-webpack-from-scratch/./node_modules/react-dom/cjs/react-dom.development.js?:2789:68) at updateState (webpack://react-webpack-from-scratch/./node_modules/react-dom/cjs/react-dom.development.js?:2849:400) at Object.useState (webpack://react-webpack-from-scratch/./node_modules/react-dom/cjs/react-dom.development.js?:2913:9333) at useState (webpack://react-webpack-from-scratch/./node_modules/react/cjs/react.development.js?:1431:25) at PayPalButtons (webpack://react-webpack-from-scratch/./node_modules/@paypal/react-paypal-js/dist/esm/react-paypal-js.js?:387:59) at renderWithHooks (webpack://react-webpack-from-scratch/./node_modules/react-dom/cjs/react-dom.development.js?:2719:157) at updateFunctionComponent (webpack://react-webpack-from-scratch/./node_modules/react-dom/cjs/react-dom.development.js?:3224:388) at beginWork (webpack://react-webpack-from-scratch/./node_modules/react-dom/cjs/react-dom.development.js?:3632:549)

🔬 Minimal Reproduction

My index.js code

`import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App.jsx"; import { RouterProvider } from "react-router-dom"; import router from './route.jsx'; import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";

ReactDOM.createRoot(document.getElementById('app')).render(

)` my paypal.jsx `import React from 'react'; import {PayPalButtons } from "@paypal/react-paypal-js"; export default function App() { function createOrder() { return fetch("/my-server/create-paypal-order", { method: "POST", headers: { "Content-Type": "application/json", }, // use the "body" param to optionally pass additional order information // like product ids and quantities body: JSON.stringify({ cart: [ { id: "YOUR_PRODUCT_ID", quantity: "YOUR_PRODUCT_QUANTITY", }, ], }), }) .then((response) => response.json()) .then((order) => order.id); } function onApprove(data) { return fetch("/my-server/capture-paypal-order", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ orderID: data.orderID }) }) .then((response) => response.json()) .then((orderData) => { const name = orderData.payer.name.given_name; alert(`Transaction completed by ${name}`); }); } return ( ); };` ### 😕 Actual Behavior A clear and concise description of what is happening. Please include console logs during the time of the issue, especially error messages. ### 🤔 Expected Behavior A clear and concise description of what you expected to happen. ### 🌍 Environment - Node.js/npm: -v23.0.0/10.9.0 - OS: - Mac Sequoia 15.0.1 - Browser: - Chrome ### ➕ Additional Context Add any other context about the problem here.

[dafariski77]

you must wrap your paypal button with paypal script provider first and specify the components on paypal scrript provider, try like this:

<PayPalScriptProvider options={{ clientId: "", components: "buttons", // render buttons }} > // you button here </PayPalScriptProvider>

[ND-Morsalin]

i am also facing this issue

[ND-Morsalin]

@dafariski77 i have tryed several way including your approch but I can't resolved this problem.

[dafariski77]

@dafariski77 i have tryed several way including your approch but I can't resolved this problem.

try using this version "@paypal/react-paypal-js": "^8.6.0"

[balogun1104]

any update on this bug ?