Question

我正在尝试在单页应用中使用PayPal的上下文结帐，但在第二次使用PayPal按钮访问页面时会出现问题。

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

<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实例化代码，然后后续的指令放置将在未来页面/状态加载时显示已经准备好的按钮。

使用单页面应用程序（Angular）进行上下文结帐时的PayPal

1 个答案: