Estoy siguiendo los pasos de la documentación de MP pero al hacer click en el boton de Comprar, se abre el Modal de MP y dice "Oh, no, algo anduvo mal.", y en la consola recibo el siguiente error:
[Report Only] Refused to frame 'https://www.mercadopago.com.ar/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' *.mercadolibre.com".
El codigo que tengo hasta ahora es el siguiente, en React:
const mercadopago = require ('mercadopago');
mercadopago.configure({
sandbox: true,
access_token: 'TEST-1912802638413668-013002-510a91a112b7222641c5ca8914999ea6-123456789'
});
let preference = {
items: [
{
title: 'Mi producto',
unit_price: 100,
quantity: 1,
}
]
};
mercadopago.preferences.create(preference)
.then(function(mpResponse){
console.log(mpResponse);
})
.catch(function(mpError){
console.log(mpError)
});
y en HTML (esto muestra el boton de Comprar):
<form action="/procesar-pago" method="POST">
<script src="https://www.mercadopago.com.ar/integrations/v1/web-payment-checkout.js"
data-preference-id="$$id$$">
</script>
</form>
La documentación que estoy siguiendo es esta: https://www.mercadopago.com.ar/developers/es/guides/payments/web-payment-checkout/integration/#editor_1589404763
Edit: hice un codesandbox para que sea mas facil de trabajar y ver: https://codesandbox.io/s/integracion-medios-de-pago-niuw3?file=/src/MercadoPago.js
Desde ya muchas gracias
iframe
.