如何解决为脚本标记自定义自己的 src 时未定义 Paypal
在我的项目中,我使用 PayPal 实现 (https://developer.paypal.com/docs/checkout?keywords=checkout) 使付款成为可能。
首先,我询问客户他喜欢哪种付款方式,并在此基础上生成相应的付款按钮(paypal、信用卡或bancontact)。当我使用下面的代码时,出现以下错误:
未捕获的引用错误:paypal 未定义。
如下所示,我在触发 PayPal 代码之前将正确的脚本标记添加到我的 HTML 代码中,所以这应该不是问题。
HTML 代码 (paypal-div)
<div id="paypal-button-container"></div>
JavaScript 代码
let radios = document.querySelectorAll('.pm');
const script = document.createElement("script");
let src = '';
radios.forEach(radio => {
if (radio.checked) {
supper_data.payment_method = (radio.value).charAt(0).toUpperCase() + (radio.value).slice(1);
if((radio.value).charAt(0).toUpperCase() + (radio.value).slice(1) === "Bancontact") {
src = 'https://www.paypal.com/sdk/js?client-id=ASuRqSAZYj9/*...*/-FEXCHWao5SA7-SADYX6werETXouaJDIBP1UeSAJpJbMbrtCOy59C7C-C¤cy=EUR&disable-funding=card,sofort,credit';
} else if (supper_data.payment_method === "Visa") {
src = 'https://www.paypal.com/sdk/js?client-id=ASuRqSAZYj9/*...*/-FEXCHWao5SA7-SADYX6werETXouaJDIBP1UeSAJpJbMbrtCOy59C7C-C¤cy=EUR&disable-funding=bancontact,credit';
} else {
src = 'https://www.paypal.com/sdk/js?client-id=ASuRqSAZYj9/*...*/-FEXCHWao5SA7-SADYX6werETXouaJDIBP1UeSAJpJbMbrtCOy59C7C-C¤cy=EUR&disable-funding=bancontact,card';
}
}
});
script.type = "text/javascript";
script.src = src;
document.head.append(script);
document.querySelector('#paypal-button-container').style.display = "block";
paypal.Buttons({
style: {
shape: 'pill',color: 'blue'
},createOrder: (data,actions) => {
return actions.order.create({
purchase_units: [{
amount: {
currency_code: "EUR",value: price
}
}]
});
},onApprove: (data,actions) => {
return actions.order.capture().then((details) => {
$.ajax({
url: "./includes/delete-cart.php",method: "GET",success: function (data) {
Swal.fire({
icon: 'success',title: 'Betaling Afgerond',text: 'Uw bestelling is ontvangen.'
}).then(() => {
window.location.reload();
})
console.log(details);
}
});
})
}
}).render('#paypal-button-container');
解决方法
以这种方式加载脚本是异步的并且需要时间,因此您应该使用 onload
事件回调
//Helper function
function loadAsync(url,callback) {
var s = document.createElement('script');
s.setAttribute('src',url); s.onload = callback;
document.head.insertBefore(s,document.head.firstElementChild);
}
// Usage -- callback is inlined here,but could be a named function
loadAsync('https://www.paypal.com/sdk/js?client-id=sb¤cy=USD',function() {
paypal.Buttons({
// Set up the transaction
createOrder: function(data,actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: '0.01'
}
}]
});
},// Finalize the transaction
onApprove: function(data,actions) {
return actions.order.capture().then(function(details) {
//...
});
}
}).render('#paypal-button-container');
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。