在上下文结帐：未捕获的SecurityError：封闭原点的框架：checkout.js：4734抛出错误

问题描述：

我执行PayPal的在上下文结帐和正在使用先进的环境关联的JavaScript设置（https://developer.paypal.com/docs/classic/express-checkout/in-context/javascript_advanced_settings）在上下文结帐：未捕获的SecurityError：封闭原点的框架：checkout.js：4734抛出错误

我应用程序是一个React应用程序。所以我不能像他们所说的那样使用PP API，那就是在页面下方的按钮下方的<script> ... </script>标签之间插入代码。我的React组件具有需要在PP函数调用中发送给服务器的状态和数据。所以我把PP代码放在componentDidMount的方法中。出于某种原因，PP抛出这个错误：

checkout.js:4734 Uncaught SecurityError: Blocked a frame with origin " http://example.com:3000 " from accessing a frame with origin " https://www.sandbox.paypal.com ". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "https". Protocols must match. (anonymous function) @ checkout.js:4734

checkout.js:4515 GET http://www.paypalobjects.com/api/oneTouch.html net::ERR_EMPTY_RESPONSE

下面是代码：

componentDidMount() { 
    window.paypalCheckoutReady = function() { 
     paypal.checkout.setup(config[NODE_ENV].ppMerchantID, { 
      locale: 'en_US', 
      environment: 'sandbox', 
      buttons: [ 
       { 
        container: 'checkoutBtnContainer', 
        type: 'checkout', 
        color: 'gold', 
        size: 'medium', 
        shape: 'pill', 
        click: (ev)=>{ 
         paypal.checkout.initXO(); 
         $.post('/checkout', { 
          checkoutData: this.props.checkoutData, 
         }) 
         .done(res => { 
          paypal.checkout.startFlow(res.link); 
         }) 
         .fail(err => { 
          paypal.checkout.closeFlow(); 
         }); 
        } 
       } 
      ], 
     }); 
    }; 
},

约跨域政策，我知道。我不明白为什么这里是这种情况。为什么代码工作正常，如果我把它扔在<script> ... </script>标签之间的页面上，但是如果我在我的React组件中使用它，则会抛出一个错误。这是什么原因？它是React错误还是PayPal？

答

UPD：不，下面不是解决问题的方法。有时Paypal的checkout.js脚本会抛出错误。

然而，它解决了this问题

显然，

1）没有this：

window.paypalCheckoutReady = function() { 
    // wrong this is here 
}

我改成：

window.paypalCheckoutReady =() => { 
    // correct this is here now 
}

我不喜欢.bind(this)。

2）我删除<form />标签和设置纯<div>代替：

// before 
<form id="checkoutBtnContainer" method="post" action="/checkout"></form> 

// after 
<div id="checkoutBtnContainer"></div>

我不知道为什么和怎么样，但现在一切工作正常。

在上下文结帐：未捕获的SecurityError：封闭原点的框架：checkout.js：4734抛出错误

相关推荐