我有这段代码应该呈现 PayPal 按钮。
<Head>
<script src="https://www.paypal.com/sdk/js?client-id=KEY"></script>
</Head>
我在 componentDidMount 方法中加载 PayPal 按钮
componentDidMount() {
paypal
.Buttons({
createOrder: (data, actions)=> {
return actions.order.create({
purchase_units: [{
amount: {
currency_code: "USD",
value: amount,
},
}],
});
},
onCancel: function(data){
//console.log(data)
},
onError: function(err){
console.log(err)
}
})
.render("#paypal");
}
<div id="paypal" className=""></div>
在第一个页面加载时，页面抛出一个错误，我猜 PayPal is not defined 我猜是因为调用 componentDidMount 方法时脚本没有完全加载。 我如何才能等到脚本加载完毕才能正确呈现按钮？
最佳答案
const addPayPalScript = () => {
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 将标记它已准备就绪。跟踪它的使用状态
const [sdkReady, setSdkReady] = useState(false);
然后在 useEffect 或 componentDidMount 中调用 addPayPalScript。我使用 useEffect
useEffect(() => {
dispatch(orderDetailRequestStart(paramsId));
if (!window.paypal) {
addPayPalScript();
} else {
// flags that it is ready
setSdkReady(true);
}
}, []);
关于javascript - 等待在 nextjs 页面加载 paypal 脚本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61778707/