-
-
Save muZk/e11931b3df6aab7c7dd6dd53058c3e41 to your computer and use it in GitHub Desktop.
import React, { useEffect, useState } from 'react'; | |
import { useParams } from "react-router-dom"; | |
const FORM_ID = 'payment-form'; | |
export default function Product() { | |
const { id } = useParams(); // id de producto | |
const [preferenceId, setPreferenceId] = useState(null); | |
useEffect(() => { | |
// luego de montarse el componente, le pedimos al backend el preferenceId | |
axios.post('/api/orders', { productId: id }).then((order) => { | |
setPreferenceId(order.preferenceId); | |
}); | |
}, [id]); | |
useEffect(() => { | |
if (preferenceId) { | |
// con el preferenceId en mano, inyectamos el script de mercadoPago | |
const script = document.createElement('script'); | |
script.type = 'text/javascript'; | |
script.src = | |
'https://www.mercadopago.cl/integrations/v1/web-payment-checkout.js'; | |
script.setAttribute('data-preference-id', preferenceId); | |
const form = document.getElementById(FORM_ID); | |
form.appendChild(script); | |
} | |
}, [preferenceId]); | |
return ( | |
<form id={FORM_ID} method="GET" /> | |
); | |
} |
Hola @marcosdipaolo, no he usado la
v2
, pero por el código que me dices yo lo haría más o menos así:import React, { useEffect, useState } from 'react'; import { useParams } from "react-router-dom"; const FORM_ID = 'payment-form'; function addCheckout() { const mp = new window.MercadoPago('PUBLIC_KEY', { locale: 'es-AR' }); // Inicializa el checkout mp.checkout({ preference: { id: preferenceId, }, render: { container: `#${FORM_ID}`, // Indica el nombre de la clase donde se mostrará el botón de pago label: 'Pagar', // Cambia el texto del botón de pago (opcional) }, }); } export default function Product() { const { id } = useParams(); // id de producto const [preferenceId, setPreferenceId] = useState(null); useEffect(() => { // luego de montarse el componente, le pedimos al backend el preferenceId axios.post('/api/orders', { productId: id }).then((order) => { setPreferenceId(order.preferenceId); }); }, [id]); useEffect(() => { if (preferenceId) { // con el preferenceId en mano, inyectamos el script de mercadoPago const script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'https://sdk.mercadopago.com/js/v2'; script.addEventListener('load', addCheckout); // Cuando cargue el script, se ejecutará la función addCheckout document.body.appendChild(script); } }, [preferenceId]); return ( <form id={FORM_ID} method="GET" /> ); }No he probado el código, pero la idea es agregar el script a mano en el
useEffect
al igual que mi código original, y luego cuando este cargue, ejecutar la lógica que pusiste tú (que está en la funciónaddCheckout
).hola @muZk. he probado tu solución, pero a la hora de hacer click en el boton de pago me aparece lo siguiente:
hacer un POST en la misma url que estoy.. alguna sugerencia?
Me esta pasando lo mismo, pudo alguien encontrar la solución?
Hola! muy buena toda la info! tengo una pregunta, me sale este error, por que podría ser??
pero eso lo puedes suprimir
Hola, pudiste solucionarlo? Estoy teniendo el mismo problema.
Gracias!!
Te recomiendo usar la sdk para react si es que estas con un proyecto de ese tipo. Maneja todas estas cuestiones por atras. https://www.npmjs.com/package/react-sdk-mercadopago
- cuando presiono el boton pagar del checkout pro , me sale la suma de los precios de los productos, pero no la lista de items a que estos corresponden, esto es asi? o es un error en la integracion?
Hola, tengo el mismo problema y googleando encontré ete post. Pudiste solucionarlo?
Al final encontré un método para hacer el pedido a partir de la instancia de mercado pago: mercado.payment.capture(id, mercadopago);
La verdad que floja la documentación de la API..
Algo que me queda resonando es que las notificaciones las mandan continuamente cuando el pago queda pendiente (por lo menos en el modo de prueba). Y en la documentación dice que el post se hace solamente cuando el pago de mercadopago sufre una modificación justamente para no sobrecargar el sistema.. alguien tuvo el mismo problema? le encontró una solución?