javascript - 使用单页应用程序(Angular)在上下文结帐中使用 PayPal

Question

我正在尝试在单页应用程序中使用 PayPal 的上下文结账，但每当第二次访问带有 PayPal 按钮的页面时都会出现问题。

我刚刚从这里提取了 PayPal 的示例代码 http://plnkr.co/edit/2GGEyNEFUPCZ7jIIGk9X?p=preview并将其放到我的应用程序的页面上:

<div>
  <div class="container">
    <div class="row product">
      <div class="col-md-4">
        <h3>Toy Story Jessie T-Shirt</h3>
          <p>
            <a href="http://166.78.8.98/cgi-bin/aries.cgi?live=1&returnurl=http://166.78.8.98/cgi-bin/return.htm&cancelurl=http://166.78.8.98/cgi-bin/cancel.htm" id="t1">
            </a>
          </p>
      </div>
    </div>
    <div class="row product">
      <div class="col-md-4">
        <h3>Toy Story Jessie T-Shirt</h3>
          <p>
            <form id="t2" class="ajaxasync" method="POST" action="http://166.78.8.98/cgi-bin/aries.cgi?live=1&returnurl=http://166.78.8.98/cgi-bin/return.htm&cancelurl=http://166.78.8.98/cgi-bin/cancel.htm">
            </form>
          </p>
      </div>
    </div>
  </div>
  <script>
    window.paypalCheckoutReady = function() {
        paypal.checkout.setup("6XF3MPZBZV6HU", {
            environment: 'sandbox',
            click: function(event) {
                event.preventDefault();

                paypal.checkout.initXO();
                $.support.cors = true;
                $.ajax({
                    url: "http://166.78.8.98/cgi-bin/aries.cgi?sandbox=1&direct=1&returnurl=http://166.78.8.98/cgi-bin/return.htm&cancelurl=http://166.78.8.98/cgi-bin/cancel.htm",
                    type: "GET",
                    data: '&ajax=1&onlytoken=1',
                    async: true,
                    crossDomain: true,

                    //Load the minibrowser with the redirection url in the success handler
                    success: function (token) {
                        var url = paypal.checkout.urlPrefix +token;
                        //Loading Mini browser with redirect url, true for async AJAX calls
                        paypal.checkout.startFlow(url);
                    },
                    error: function (responseData, textStatus, errorThrown) {
                        alert("Error in ajax post"+responseData.statusText);
                        //Gracefully Close the minibrowser in case of AJAX errors
                        paypal.checkout.closeFlow();
                    }
                });
            },
            buttons: [
              { container: 't1' }, { container: 't2' }]
        });
    }
  </script>

  <script async src="//www.paypalobjects.com/api/checkout.js"></script>
</div>

我第一次访问该页面时效果很好。然而，在随后的访问中(中间没有硬重新加载)，我得到

Uncaught Error: Attempting to load postRobot twice on the same window

这是因为它试图加载 checkout.js 脚本两次。因此，如果我设置条件不在后续页面浏览中运行 checkout.js 脚本，而是直接跳转到 paypal.checkout.setup，我会得到

Error: You are calling paypal.checkout.setup() more than once. This function can only be called once per page load. Any further calls will be ignored.

并且永远不会生成按钮。

我需要在单击按钮时保持上下文相关体验(弹出的窗口)。我搜索了所有 PayPal 的文档，并在控制台中彻底检查了该对象，但希望我遗漏了什么。

如果我已经加载了 checkout.js 并调用了 paypal.checkout.setup()，我如何才能在新页面上“重新加载”按钮在前一页？

Answer 1

我最终写了一个指令来解决我自己的问题，因为 PayPal 似乎没有任何类型的单页功能。

paypal-checkout directive

该指令运行一次 PayPal 实例化代码，然后后续指令放置将在未来的页面/状态加载时简单地显示已经启动的按钮。