상황에 맞는 체크 아웃 : catch되지 않은 오류 SecurityError : 차단 원점 프레임 : checkout.js : 4734가 발생 오류

Question

내가 페이팔의 상황에 맞는 체크 아웃을 구현하고있어 고급 인 - 컨텍스트를 사용하고

자바 스크립트 설정 (https://developer.paypal.com/docs/classic/express-checkout/in-context/javascript_advanced_settings)

내 앱은 React 앱입니다. 그래서 나는 그것들이 제안하는대로 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를 사용하면 오류가 발생합니다. 그 원인은 무엇입니까? React fault 또는 PayPal입니까?

Answer 1

UPD : 아니요, 아래는이 문제에 대한 해결책이 아닙니다. 때때로 Paypal의 checkout.js 스크립트가 오류를 throw합니다. I로 변경

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

:

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

내가 좋아하지 않는

그러나 더 this이 없었다

1) 분명히 this 문제

, 해결 .bind(this).

2) 나는 <form /> 태그를 제거하고 일반 <div> 대신 설정 :

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

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

내가 왜, 어떻게 모르겠지만, 모두가 지금은 잘 작동합니다.