Paypal 按钮在 https 上不起作用

Posted 2023-02-22

【中文标题】Paypal 按钮在 https 上不起作用

【英文标题】：Paypal button did not work on https

【发布时间】：2017-07-08 20:47:42

【问题描述】：

我的 paypal 按钮（实际上是快速结帐）在 https 上不起作用，当我使用 https 访问我的实时应用时，我意识到了这一点。

不确定是不是我的 https 阻止了这个脚本。

  <script src="https://www.paypalobjects.com/api/checkout.js" data-version-4></script>

我看到该按钮在 localhost（开发环境）上加载没有问题。但是在使用 https 的生产中，我得到了这个错误

ppxo_xc_ppbutton_error Object 

 Error: Document is ready and element #paypal-button does not exist

我正在使用 Angular，这段代码在我的控制器中

    paypal.Button.render(

      env: 'production', // Optional: specify 'sandbox' environment

      payment: function() 

          var env    = this.props.env;
          var client = this.props.client;

          return paypal.rest.payment.create(env, client, 
              transactions: [
                  amount:  total: 5 , currency: 'USD' ,
                  item_list: 
                  items: [
                      "name": "profile",
                      "price": "5",
                      "currency": "USD"
                  ]
                
              ],
              redirect_urls: 
                "return_url": $location.absUrl(),
                "cancel_url": $location.absUrl()
              
          );
      ,

      commit: true, // Optional: show a 'Pay Now' button in the checkout flow

      onAuthorize: function(data, actions) 

          return actions.payment.execute().then(function() 

              actions.payment.get().then(function(data)

                if(data.state === 'approved')
                  $http.post('/paid',qty:$scope.number_of_uses,user_email:user_email)
                  .then(function(response)

                      $scope.done = true;

                  );
                

              );

          );
      

  , '#paypal-button');

我再说一遍，它在 localhost 中运行良好，但在 https（生产）中却不行。

【问题讨论】：

请提供minimal reproducible example。

元素#paypal-button不存在

@MackieE 不，确实如此。它只是在 https 中不起作用，当我在开发 URL 中时它运行良好，即 localhost:3000

@RandoHinn 这与我认为的代码无关，无论如何我添加了部分代码。

【参考方案1】：

按钮实际上为您设置了一个角度组件：

https://github.com/paypal/paypal-checkout/blob/master/docs/frameworks.md#angularjs-element

建议使用它。我怀疑如果您尝试直接在角度控制器中渲染，它可能还没有渲染容器元素，因此您的错误。

【讨论】：

不知道，除非你能提供一个你正在使用的角度代码的例子，也许我可以尝试一个演示页面。

我在我的角度模板完成渲染之前发现了脚本加载。我使用 chrome 的网络工具进行调试，我使用较慢的连接。我设置了paypal功能的超时时间，现在它可以工作了。