reactjs - docs - Recuperación en contexto: Uncaught SecurityError: Bloqueado un marco con origen: checkout.js: 4734 arroja un error
paypal-checkout (2)
UPD: No, a continuación no es una solución para el problema. Ocasionalmente, el script checkout.js de Paypal arroja el error.
Sin embargo, resuelve this problema
Aparentemente,
1) no hubo this :
window.paypalCheckoutReady = function() {
// wrong this is here
}
Cambié a:
window.paypalCheckoutReady = () => {
// correct this is here now
}
No me gusta .bind(this) .
2) Eliminé la etiqueta <form /> y configuré plain <div> lugar:
// before
<form id="checkoutBtnContainer" method="post" action="/checkout"></form>
// after
<div id="checkoutBtnContainer"></div>
No sé por qué ni cómo, pero todo funciona bien ahora.
Estoy implementando el proceso de verificación en contexto de PayPal y estoy usando configuraciones avanzadas de JavaScript en contexto ( https://developer.paypal.com/docs/classic/express-checkout/in-context/javascript_advanced_settings )
Mi aplicación es una aplicación React. Así que no puedo usar PP API como lo sugieren, es solo arrojar un código entre las etiquetas <script> ... </script> en algún lugar de la página debajo de sus botones. Los componentes de My React tienen estado y datos que debo enviar al servidor dentro de las llamadas a función de PP. Así que coloqué el código PP en el método componentDidMount . Y por alguna razón, PP arroja este error:
checkout.js: 4734 Uncaught SecurityError: bloqueó un marco con el origen " http://example.com:3000 " de acceder a un marco con el origen " https://www.sandbox.paypal.com ". El marco que solicita acceso tiene un protocolo de "http", el marco al que se accede tiene un protocolo de "https". Los protocolos deben coincidir. (función anónima) @ checkout.js: 4734
checkout.js: 4515 OBTENGA http://www.paypalobjects.com/api/oneTouch.html net :: ERR_EMPTY_RESPONSE
Aquí está el código:
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();
});
}
}
],
});
};
},
Sé acerca de la política de origen cruzado. No entiendo por qué es el caso aquí. Por qué el código funciona bien si lo lanzo en la página entre las etiquetas <script> ... </script> , pero PP arroja un error si lo uso en mi componente Reaccionar. ¿Cuál es la causa de eso? ¿Es culpa de React o de PayPal?
Parece que nadie ha desarrollado un botón de paypal hasta hoy (para react-native, puede haber uno, pero mi biblioteca es la primera), ¡es por eso que acabo de crear uno para todos!
==========
Para referencia de todos, si desea utilizar el botón de pago exprés de Paypal (simplemente transfiriendo el monto total a pagar)
Utilice react-paypal-express-checkout ( soy el autor ):
Instalar :
npm install --save react-paypal-express-checkout
El ejemplo más simple (pero mostrará el botón de pago exprés de Paypal):
import React from ''react'';
import PaypalExpressBtn from ''react-paypal-express-checkout'';
export default class MyApp extends React.Component {
render() {
const client = {
sandbox: ''YOUR-SANDBOX-APP-ID'',
production: ''YOUR-PRODUCTION-APP-ID'',
}
return (
<PaypalExpressBtn client={client} currency={''USD''} total={1.00} />
);
}
}
==========
Para obtener un documento más detallado, vaya aquí:
https://github.com/thinhvo0108/react-paypal-express-checkout
Esta biblioteca fue desarrollada para reactjs, escrita en ES6, simple pero funcional, por favor revisa mis tutoriales para ver los ejemplos más simples y completos
Esta biblioteca proporciona el botón de pago exprés de Paypal (lo que significa que ahora podemos simplemente pasar el monto total a pagar)
¡Más tarde, vendrán características más avanzadas! La solicitud de Fork & pull es bienvenida, ¡y por favor también dame crédito si la usas o la encuentras interesante!
==========
Mis respuestas a problemas similares:
Hacer un botón de PayPal para pagar artículos en React.js?
¿Cómo usar el pago exprés en contexto de PayPal con ReactJS?
¿Cómo puedo crear un componente de reacción para el pago exprés en contexto de paypal?