Integre esta api y funciona correctamente pero tengo un problema y es que cuando le doy al boton que empieza el proceso de pago, no abre la ventana modal en el mismo proyecto sino que lo abre en una nueva pestaña y en mi proyecto en la consola aparece este error.
[Report Only] Refused to frame 'https://www.mercadopago.com.co/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' *.mercadolibre.com".
Al parecer el problema es con como esta configurado el CSP(content security policy) en mi sitio, pero honestamente es la primera vez que me sucede y no se exactamente como modificarlo. Al parecer es con las cabeceras en las peticiones, pero no me ha funcionado y la poca informacion que hay en internet no me ha ayudado hasta el momento, si alguno supiera. gracias.
Este es el codigo de lo que he intentado
export const mercadoPagoPayment = async (req, res) => {
res.setHeader(
"Content-security-policy",
"default-src 'self' *.mercadolibre.com"
);
req.header(
"Content-Security-Policy",
"default-src 'self' *.mercadolibre.com"
);
let preference = {
items: [
{
title: "Productos",
unit_price: req.body.price,
quantity: 1,
},
],
back_urls: {
success: "http://localhost:3000/feedback",
failure: "http://localhost:3000/feedback",
pending: "http://localhost:3000/feedback",
},
};
mercadopago.preferences
.create(preference)
.then(function (response) {
global.id = response.body.id;
res.json({ id: response.body });
})
.catch(function (error) {
console.log(error);
});
};
Frontend
const handlePayment = () => {
fetch('/products/payment', {
method: 'POST',
headers: { 'Content-Type': 'application/json', 'Content-security-policy': "default-src 'self' *.mercadolibre.com" },
body: JSON.stringify({ price: getSubTotal() })
})
.then(res => res.json())
.then(data => {
const mp = new MercadoPago('TEST-d59a2f45-8c61-4a7b-92db-e5a9e09956d7', {
locale: 'es-CO'
});
mp.checkout({
preference: {
id: data.id.id
},
autoOpen: true,
});
})
}
Dejo dos fuentes importantes que encontre.