Question

我正在实施PayPal的上下文检查并使用高级语境内JavaScript设置（http://www.apuebook.com/src.3e.tar.gz）

我的应用是一款React应用。所以我不能像他们建议的那样使用PP API，只是在按钮下的页面某处的componentDidMount标签之间抛出代码。我的React组件具有我需要在PP函数调用中发送到服务器的状态和数据。所以我在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(); }); } } ], }); }; },方法中放置了PP代码。由于某种原因，PP抛出了这个错误：

checkout.js：4734 Uncaught SecurityError：阻止了一个包含起源的框架＆＃34; https://developer.paypal.com/docs/classic/express-checkout/in-context/javascript_advanced_settings＆＃34;从访问带有起源的框架＆＃34; http://example.com:3000＆＃34;。请求访问的帧具有＆＃34; http＆＃34;的协议，被访问的帧具有＆＃34; https＆＃34;的协议。协议必须匹配。   （匿名函数）@ checkout.js：4734

checkout.js：4515 GET https://www.sandbox.paypal.com net :: ERR_EMPTY_RESPONSE

以下是代码：

<script> ... </script>

我了解跨省政策。我不明白为什么会这样。如果我将代码放在{{1}}标记之间的页面上，为什么代码工作正常，但如果我在我的React组件中使用PP，则会抛出错误。这是什么原因？它是React fault还是PayPal？

Answer 1

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：阻止了一个包含origin的帧：checkout.js：4734抛出错误

1 个答案: