贝宝订阅按钮未显示在手机上答案

【问题标题】：paypal subscription buttons are not showing on phones贝宝订阅按钮未显示在手机上
【发布时间】：2021-06-07 15:57:44
【问题描述】：

我在应用程序的 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>

【问题讨论】：

也许你需要检查你的 CSS

标签： javascript google-chrome paypal sdk cross-browser

【解决方案1】：

所以问题是按钮被删除了，因为在状态渲染时调用了paypalButton.close()（不知道为什么）。

有关此问题的更多信息，请参阅此问题：

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

通过在渲染前休眠1秒解决，不知道为什么，但这已经解决了问题。

所以我的代码是：

睡眠功能：

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

【讨论】：