paypal subscription buttons are not showing on phones

Question

I'm using Paypal at 4 different places in the app 3 subscriptions and one single payment.

everything works on a desktop, but subscription buttons are not showing on mobiles.

I feel that the problem is in importing the library, is anything wrong with this import?

no errors of any kind, I checked and found PayPal is loaded on phone, but buttons don't show.

 <script
src=`https://www.paypal.com/sdk/js?clientid=${process.env.PAYPAL_CLIENT_ID}
&currency=GBP&disable-funding=credit,card&vault=true&intent=subscription`
></script>

Answer 1

so the problem was that buttons are being removed because the paypalButton.close() is being called when the state render (don't exactly know why).

please see this issue for more info about the problem:

https://github.com/paypal/paypal-checkout-components/issues/1506

solved by sleeping 1 second before rendering, I don't know why, but this has solved the problem.

so my code is:

sleep function:

 function sleep(ms) {
     return new Promise((resolve) => setTimeout(resolve, ms));
  }

paypa; button component:

 const paypalRef = useRef();
 
// options
 const btnOptions = {
    createSubscription: function (data, actions) {
      return actions.subscription.create({
        plan_id: planID,
      });
    },
    onApprove: function (data, actions) {
      alert(data.subscriptionID);
    },
  };

 // effect, make sure to listen to Paypal library load
  useEffect(() => {
    (async () => {
        await sleep(1000)  // sleep second before rendering. <---------------------- solution here;
      if (paypalRef.current) {
        btn = window.paypal.Buttons(btnOptions);
        btn.render(paypalRef.current);
      }
    })();
  }, [window.paypal]);


  return <div className={styles.paypal_btn} ref={paypalRef}></div>;