PayPal 使用单页应用进行上下文结账 (Angular)

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.

并且永远不会生成按钮。

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

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

Answer 1

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

paypal-checkout directive

该指令运行 PayPal 实例化代码一次，随后的指令放置将仅在未来 page/state 加载时显示已经准备好的按钮。

PayPal 使用单页应用进行上下文结账 (Angular)

PayPal in context checkout with single page app (Angular)

javascript

paypal

paypal-sandbox

angularjs