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

[balogun1104]

any update on this bug ?

[riverscode]

I have the same problem, I've tried with nextjs 14, react 18 and "@paypal/react-paypal-js": "^8.1.3". Any suggestions?

[Valentinmagde]

I have the same problem, I've tried with nextjs 14, react 18 and "@paypal/react-paypal-js": "^8.1.3". Any suggestions?

You can resolve this issue by adding the dataNamespace option when initializing the PayPal script. This ensures the SDK is correctly namespaced and avoids conflicts. Here's how you can do it:

import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";

const initialOptions = {
  clientId: "YOUR_CLIENT_ID", // Replace with your actual client ID
  dataNamespace: "paypal_sdk", // Adding this resolves potential conflicts
  // Add other options as needed
};

export default function PaypalWidget() {
  return (
    <PayPalScriptProvider options={initialOptions}>
       {/* Add necessary props to customize PayPalButtons */}
      <PayPalButtons />
    </PayPalScriptProvider>
  );
}

[Nethzel]

I got the error, but I solved it in a different way. I see that window.paypal was returning a button element, because I had an element with that ID (paypa) . I simply changed the ID to something else, and it worked for me