0

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

7
  • La respuesta está en que el uso de la página que estás intentando, no está permitido por mercadolibre. Es un estándar de restricción de seguridad que no permite usar páginas de ese dominio dentro de elementos iframe.
    – Alfabravo
    Commented el 15 may. 2020 a las 14:56
  • pero como no estaría permitido si el propio mercadopago brinda esa sdk para utilizarlo de esa forma
    – Gabriel
    Commented el 15 may. 2020 a las 15:02
  • La respuesta está en cómo estás construyendo tu página. Si estás usando iframes, pasa ésto. La documentación que citas no habla de estas condiciones pero el error lo dice claro. Alguien con más experiencia en esta integración seguro puede añadir más info
    – Alfabravo
    Commented el 15 may. 2020 a las 15:06
  • Lo pudiste solucionar? Tengo el mismo error.. Commented el 19 may. 2020 a las 18:36
  • No, me contacte con el soporte de MercadoPago y me dijeron lo siguiente: "Te indicamos que si tu sitio cuenta con CSP no te dejará importar algo externo que no hayas declarado en el Nonce. ¿Podrías validar esto?". Sin embargo, es raro porque con Paypal no tengo problemas.
    – Gabriel
    Commented el 21 may. 2020 a las 17:18

1 respuesta 1

1

Justo hoy me topé con este problema y quiero compartirles mi solución.

Lo que hice fue cambiar el dominio de mercadopago por el correspondiente a mi país. En mi caso es México yo usé el script de la siguiente manera:

<script src="https://www.mercadopago.com.mx/integrations/v1/web-payment-checkout.js" data-preference-id="{{{payId}}}" ></script>

En este caso yo usé "mercadopago.com.mx" Si no sabes cuál es el dominio de tu país, sólo googlea "mercadopago" y por default te dará el dominio de tu país

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.