PayPal API 快速签出错误:文档已准备就绪，元素 [对象对象] 不存在

Question

我正在使用PayPal，我需要在我的表格中渲染多个PayPal快速结帐按钮。

我遵循了在此链接中找到的解决方案

这就是我所做的。

document.querySelectorAll('.btn-paypal').forEach(function(){
var dis = $(this);
var amount = dis.data('amount');
paypal.Button.render({
env: 'sandbox', 
style: {
label: 'checkout',
size:  'medium',    // small | medium | large | responsive
shape: 'rect',     // pill | rect
color: 'gold'      // gold | blue | silver | black
},
client: {
sandbox:    'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-w6Q9rX2BdH1',
production: '<insert production client id>'
},
payment: function(data, actions) {
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: amount, currency: 'JPY' }
}
]
}
});
},
commit: true,
onAuthorize: function(data, actions) {
return actions.payment.get().then(function(paymentDetails) {
console.log(paymentDetails)
swal({ 
title: "Confirm Payment!",
text: "Confirm the amount of ¥"+paymentDetails.transactions[0].amount.total,
type: "info",
confirmButtonClass: "btn btn-danger",
confirmButtonText: "Yes! Continue Payment",
showCancelButton: true,
cancelButtonText: "No! Cancel Transaction"
},
function(){
$('.ajax-loading').show();
return actions.payment.execute().then(function(){
alert('Payment Success');
})
});
});
},
onError: function(err) {
$('.ajax-loading').hide();
swal('Ooops!','Paypal failed to load. Please click the paypal button again!','error');
console.log(err);
}
}, dis);
})

当我尝试运行此代码时，表中没有显示任何按钮，控制台中出现错误，说Uncaught Error: Document is ready and element [object Object] does not exist

我在这里的错误是什么？请帮忙。

谢谢！

Answer 1

我有一个PayPal按钮，但遇到了同样的错误。HTML 示例指出

<div id="paypal-button"></div> 

布伦特里手册

而脚本位于单独的文件中。似乎在加载脚本时尚未呈现div 元素。

我只是将脚本移动到div 元素内，现在出现了按钮。确保脚本在此之前不会加载到其他位置。

Answer 2

例如，如果您使用的是像 Vue 这样的 js 框架，只需先在挂载的钩子中加载它，它应该可以工作。