[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(
<React.StrictMode>
<PayPalScriptProvider options={{
clientId: "my id",
currency: "USD",
intent: "capture",
}}>




</React.StrictMode>
)`

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 (

    <PayPalButtons
        createOrder={createOrder}
        onApprove={onApprove}
    />

);
};`

😕 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"