使用单页应用程序（Angular）在上下文结账中使用 PayPal

Posted 2023-02-22

【中文标题】使用单页应用程序（Angular）在上下文结账中使用 PayPal

【英文标题】：PayPal in context checkout with single page app (Angular)

【发布时间】：2016-11-03 06:59:00

【问题描述】：

我正在尝试在单页应用程序中使用 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()，如何在新页面上“重新加载”按钮？

【参考方案1】：

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

paypal-checkout directive

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