如何解决通过Ajax更新PayPal智能按钮
我有一个通过Ajax更新的购物车(数量,产品删除)。如何更新智能按钮iframe中的值?当我刷新页面时,它显然可以工作,但是如何在后台使用Ajax做到这一点?我尝试使用一种绕过相同原始策略的黑客方法重新加载PayPal iframe,但此方法无效,智能按钮消失了。 这是我正在谈论的骇客:
const iframe = document.querySelector("iframe");
iframe.src = iframe.src
这是我的智能按钮代码:
<script>
paypal.Buttons({
style: {
shape: "rect",color: "gold",layout: "horizontal",label: "checkout",size: "responsive",tagline: "false"
},createOrder: function(data,actions) {
return actions.order.create({
purchase_units: [{
amount: {
currency_code: "GBP",value: <?php echo number_format($total,2); ?>
},}]
});
},onApprove: function(data,actions) {
return actions.order.capture().then(function(details) {
alert("Dear " + details.payer.name.given_name + ",Thank you for your payment!");
});
},onShippingChange: function(data,actions) {
if (data.shipping_address.country_code !== "GB") {
return actions.reject();
}
return actions.resolve();
}
}).render("#paypal-button-container");
}
</script>
解决方法
更改此行:
value: <?php echo number_format($total,2); ?>
要调用JavaScript函数,您需要编写该函数并将其作为页面的一部分
value: getCartTotal()
在某个地方,也许在<script>
的顶部,您将得到类似的东西:
window.myCartTotal = '<?php echo number_format($total,2); ?>';
function getCartTotal() {
return window.myCartTotal;
}
然后让您的AJAX也更新window.myCartTotal
有许多更优雅的方式对此进行编码,但这应该可以帮助您。
正确的服务器端解决方案
为了获得最佳结果,您不应该在客户端的createOrder上设置金额,甚至更重要的是不要在客户端捕获。在客户端执行这些操作会使您面临一系列的问题。而是让客户端在您的服务器上调用两条路由,一条用于“创建交易”,另一条用于“设置交易”,在此处记录:https://developer.paypal.com/docs/checkout/reference/server-integration/
然后,在按钮批准代码的ajax / fetch调用之后使用这两条新路径:https://developer.paypal.com/demo/checkout/#/pattern/server
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。