时间戳

首页 > 解决方案 > 贝宝订阅按钮未显示在手机上

javascript - 贝宝订阅按钮未显示在手机上

问题描述

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

标签： javascriptgoogle-chromepaypalsdkcross-browser

解决方案

所以问题是按钮被删除了，因为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>;

推荐阅读