我在我的nextjs应用程序中集成了这个paypal。当我加载页面时,一切都加载得很好,但是当我在页面之间来回导航的时候。它抛出一个错误
unhandled_error: zoid destroyed all components↵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>我做错了什么?
发布于 2021-02-20 01:42:27
这与当前在Paypal按钮"Zoid“依赖中的open issue有关,与它处理React组件的方式中的一个bug有关。
目前有一个open PR尚未完成/审批,但正在解决这个问题。在这个问题得到解决之后,下一步Paypal团队将负责升级这个依赖项,以最终修复这个bug。
免责声明:我与创建问题和提交PR的人相同,一旦合并,我将更新此评论。
发布于 2021-03-23 17:46:33
这是因为您正在以错误的方式实现它。PayPal有一个separate page,其中包含单页应用程序的文档。
编辑:确保在Next.js应用程序中导入React和ReactDOM。正如您在他们的React示例中所看到的。
发布于 2021-10-14 03:28:10
这是问题的贝宝嵌入JavaScript,创建按钮脚本运行前贝宝初始化。我的解决方案是在运行创建按钮脚本之前加载PayPal脚本
function loadAsync(url: string, callback: () => void) {
const s = document.createElement('script');
s.setAttribute('src', url);
s.onload = callback;
document.head.insertBefore(s, document.head.firstElementChild);
}
export const loadScriptPaypal = (html: string) => {
const regex = /<script\b[^>]*>([\s\S]*?)<\/script>/gm;
const scripts = html.match(regex);
let pureHtml = html;
const src = scripts[0].match(/src="(.*?)"/)[1];
const func = scripts[1].replace(/<\/script>|<script>/g, '');
loadAsync(src, () => {
eval(func);
});
scripts.forEach(script => {
pureHtml = pureHtml.replace(script, '');
});
return pureHtml;
};https://stackoverflow.com/questions/61778961
复制相似问题