通过 Ajax 更新的 PayPal 智能按钮

Question

我有一个通过 Ajax 更新的购物车（数量、删除产品）。如何更新智能按钮 iframe 中的值？当我刷新页面时，它显然可以工作，但是如何在后台使用 Ajax 来做到这一点？我尝试使用绕过相同来源策略的黑客重新加载 PayPal iframe，但它没有用，智能按钮消失了。 这就是我所说的 hack：

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>

Answer 1

改变这一行：

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