通过Ajax更新PayPal智能按钮 [英] PayPal Smart Button updated via Ajax

问题描述

我有一个通过Ajax更新的购物车(数量，产品删除).如何更新智能按钮iframe中的值?当我刷新页面时，它显然可以工作，但是如何在后台使用Ajax做到这一点?我尝试使用一种绕过相同原始策略的黑客方法重新加载PayPal iframe，但此方法无效，智能按钮消失了. 这是我正在谈论的骇客:

I have a shopping cart which is updated via Ajax (quantity, removing of products). How do I update the value in the Smart Button iframe? It obviously works when I refresh the page, but how to do it in the background with Ajax? I have tried reloading the PayPal iframe using a hack which bypasses the same origin policy but it didn't work, the Smart Button disappeared. This is the hack I'm talking about:

const iframe = document.querySelector("iframe");
iframe.src = iframe.src

这是我的智能按钮代码:

This is my Smart Button code:

<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函数，您需要编写该函数并将其作为页面的一部分

To call a JavaScript function, which you will need to write and serve as part of the page

value: getCartTotal()

在某些地方，也许在<script>的顶部，您将拥有类似的东西:

Somewhere, perhaps at the top of the <script>, you will have something like:

window.myCartTotal = '<?php echo number_format($total, 2); ?>';
function getCartTotal() {
  return window.myCartTotal;
}

然后让您的AJAX也更新window.myCartTotal

Then have your AJAX also update window.myCartTotal

有许多更优雅的方式对此进行编码，但这应该可以助您一臂之力.

There are many more elegant ways to code this, but that should get you going.

为了获得最佳结果，您不应该在客户端的createOrder上设置金额，甚至更重要的是不要在客户端捕获.在客户端执行这些操作会使您面临一系列的问题.相反，请客户端在您的服务器上调用两条路由，一条用于创建交易"，另一条用于设置交易"，在此处记录: https://developer.paypal.com/docs/checkout/reference/server-integration/

For best results you shouldn't be setting the amount on the client side's createOrder, and perhaps even more importantly not capturing on the client side. Doing these things on the client side opens you to a whole series of issues and problems. Instead, have the client side call two routes on your server, one for 'Create Transaction' and another for 'Set Up Transaction', documented here: https://developer.paypal.com/docs/checkout/reference/server-integration/

然后，在按钮批准代码的ajax/fetch调用之后使用这两条新路径: https://developer.paypal.com/demo/checkout/#/pattern/server

Then, use those two new routes following button approval code's ajax/fetch calls: https://developer.paypal.com/demo/checkout/#/pattern/server

这篇关于通过Ajax更新PayPal智能按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！