Wait For Loading Paypal Script In Nextjs Page

I have this code that is supposed to render the PayPal buttons.

Solution 1:

constaddPayPalScript = () => {
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.src = `https://www.paypal.com/sdk/js?client-id=${process.env.PAYPAL_CLIENT_ID}`;
    // script.setAttribute("data-namespace", "paypal_sdk");

    script.async = true;
    script.onload = () => {
      setSdkReady(true);
    };
    document.body.appendChild(script);
  };

script.onload will flag that it is ready. Track it in useState

const [sdkReady, setSdkReady] = useState(false);

then call addPayPalScript inside useEffect or componentDidMount. I use useEffect

useEffect(() => {
dispatch(orderDetailRequestStart(paramsId));

  if (!window.paypal) {
    addPayPalScript();
  } else {
    // flags that it is readysetSdkReady(true);
  }

}, []);

Share