В контекстных Checkout: Uncaught SecurityError: Blocked кадр с происхождения: checkout.js: 4734 броски ошибка

Question

Я внедрения PayPal, Контекстные Checkout и я использую Advanced Контекстные JavaScript настройки (https://developer.paypal.com/docs/classic/express-checkout/in-context/javascript_advanced_settings)

Мои приложение - это приложение React. Поэтому я не могу использовать PP API, поскольку они предлагают это, а просто бросают код между <script> ... </script> тегами где-то на странице под их кнопками. У компонентов My 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>, но PP выдает ошибку, если я использую его в моей компоненте React. В чем причина этого? Это 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> 

Я не знаю, как и почему, но теперь все работает отлично.