单页应用(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实例化代码一次，然后随后的指令放置将在未来的页面/状态加载中简单地显示已经启动的按钮。