[Bug] PayPalButtons Component Fails to Render in React 19 and Next.js 15 with Undefined window.paypal.Buttons

[riverscode]

Library used

react-paypal-js

🐞 Describe the Bug

The component from react-paypal-js fails to render, throwing the error: Unable to render because window.paypal.Buttons is undefined. This issue occurs in a project using React 19 and Next.js 15. It appears that the PayPal SDK script is either not loading correctly or not initializing the window.paypal object as expected.

🔬 Minimal Reproduction

1. Create a Next.js 15 project with React 19.
2. Implement the following code snippet to include the and components:

import { createPayPalOrder, payWithPayPal } from "@/services/payments.services";
import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";
import toast from "react-hot-toast";

const PayPalMethod = ({ slug, email, name, country, phone }) => {
  const createOrderWithPayPal = async (data, actions) => {
    const orderResponse = await createPayPalOrder({ slug, email });
    return orderResponse.id;
  };

  const onApproveWithPayPal = async (data, actions) => {
    const response = await payWithPayPal({
      orderID: data.orderID,
      username: name,
      email,
      slug,
      country,
      phone,
    });
    if (response.statusText === "OK") {
      return toast.success("Se realizó el pago con éxito");
    }
    return toast.error("Hubo un error al procesar tu pago");
  };

  return (
    <PayPalScriptProvider
      options={{
        clientId: process.env.NEXT_PUBLIC_PAYPAL_CLIENT_ID!,
        currency: "USD",
        intent: "capture",
        components: "buttons",
      }}
    >
      <PayPalButtons
        style={{
          color: "gold",
          shape: "rect",
          label: "pay",
          height: 50,
          layout: "vertical",
        }}
        createOrder={createOrderWithPayPal}
        onCancel={(data) => console.log("Payment cancelled")}
        onApprove={async (data, actions) => {
          await onApproveWithPayPal(data, actions);
        }}
      />
    </PayPalScriptProvider>
  );
};

export default PayPalMethod;

3. Run the application and attempt to render the component containing .
   The error occurs during runtime, preventing the PayPal buttons from being displayed.

😕 Actual Behavior

The component fails to render, and the following error is logged in the console:

Unable to render <PayPalButtons /> because window.paypal.Buttons is undefined.

This suggests that the PayPal SDK script is either not loaded or not initializing properly in the context of React 19 and Next.js 15.

🤔 Expected Behavior

The component should render correctly, allowing users to interact with the PayPal payment buttons without errors.

🌍 Environment

Framework: Next.js 15
React Version: React 19

➕ Additional Context

• The issue might be related to the compatibility of react-paypal-js with React 19 or Next.js 15.
• The PayPal SDK script may not load properly in server-side rendering contexts in Next.js 15.
• Adding support for the latest versions of React and Next.js would enhance compatibility and developer experience.

[aymanoid]

You have to use the use client directive as PayPal's library requires client-side APIs, checkout https://nextjs.org/docs/app/api-reference/directives/use-client

[riverscode]

Sorry, I forgot to copy that part of the code: But if I use "use client" at the beginning of the code and I still have the same problem