paypal 訂閱按鈕未顯示在手機上

Question

我在應用程序的 4 個不同位置使用 Paypal 3 個訂閱和一次付款。

一切都在桌面上運行，但訂閱按鈕沒有顯示在手機上。

我覺得問題出在導入庫，這個導入有什么問題嗎？

沒有任何錯誤，我檢查並發現 PayPal 已加載到手機上，但按鈕不顯示。

 <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

所以問題是按鈕被刪除了，因為在 state 渲染時調用了paypalButton.close() （不知道為什么）。

請參閱此問題以獲取有關該問題的更多信息：

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

通過在渲染前休眠 1 秒解決，我不知道為什么，但這已經解決了問題。

所以我的代碼是：

睡眠 function：

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

支付寶； 按鈕組件：

 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>;