コンテキスト内チェックアウト：キャッチされない例外SecurityError：ブロックされた起源を持つフレーム：checkout.js：4734スローエラー

Question

私はPayPalのインコンテキストチェックアウトを実装することだし、高度なインコンテキストを使用しています

JavaScriptの設定（https://developer.paypal.com/docs/classic/express-checkout/in-context/javascript_advanced_settings）

マイアプリはリアクションアプリです。だから私はPP APIを使用することはできません彼らはそれを示唆し、それはちょうど<script> ... </script>タグの間のどこかのボタンの下のコードをスローします。 My Reactコンポーネントには、PP関数呼び出し内でサーバーに送信する必要がある状態とデータがあります。だから私はcomponentDidMountメソッドにPPコードを置いた。そして、いくつかの理由のために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(); 
         }); 
        } 
       } 
      ], 
     }); 
    }; 
}, 

：ここ

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

はコードです。それがなぜここにあるのか分かりません。もし私が<script> ... </script>タグの間のページにそれを投げれば、コードはうまくいくのですが、ReactコンポーネントでPPを使うとエラーが起こります。その原因は何ですか？それは反論かPayPalか？

Answer 1

UPD：いいえ、以下は問題の解決策ではありません。場合によっては、Paypalのcheckout.jsスクリプトがエラーをスローします。

しかし、それはthisがなかったthis問題どうやら

、

1）を解く：

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> 

を私がなぜ、どのように知りませんが、すべては今正常に動作します。