integración de Mercado Pago con ReactJs - Checkout Pro - ACTUALIZADO 2024
HTML-код
- Опубликовано: 15 дек 2023
- En este video se muestra como funciona la integración de mercado pago checkout pro con React.js
Respecto al codigo del video⭐
No soy un creador de contenido famoso y millonario.
Tampoco me gusta la idea de crear contenido de pago. Prefiero que sea público y gratuito para quien quiera verlo. 😁
Podes apoyarme con mi contenido mediante este link de mercado Pago. mpago.la/1xEiSSE
En cuanto reciba el pago dentro de las 24hs te voy a mandar el código de este vídeo por email. Así nos ayudamos mutuamente! 🍻Gracias!!
❤️ Me dejarías tu ayuda en forma de donación? ☕
Cafecito: cafecito.app/onthecode
Mercado Pago: www.mercadopago.com.ar/subscr...
PayPal: www.paypal.com/donate/?hosted...
Contacto, colaboraciones y mas información :
linktr.ee/onthecode
#reactjs #mercadopago 
Наука
![Cordae - Saturday Mornings (feat. Lil Wayne) [Official Music Video]](http://i.ytimg.com/vi/z2GYJua09F0/mqdefault.jpg)
![Cordae - Saturday Mornings (feat. Lil Wayne) [Official Music Video]](/img/tr.png)
Les dejo este video por si quieren integrar la pasarela de pago como un MODAL en su pagina o hacer una redirección diferente :) ruclips.net/video/1CUGrPL7Yuo/видео.html
Hola Genio! me encanto el video, muchísimas gracias!! Ahora a aplicarlo!! Tengo una consulta importante, hice una pequeña aplicación web con reactjs para que el cliente pueda hacer su pedido (es para una pizzería familiar) y la pagina la corro desde gitHub page, obviamente para que puedan ver la pagina los clientes lo tengo en modo publico. Si yo agrego ahora mercado pago los datos van a quedar expuestos verdad? o no tienen forma de utilizar mis datos de MP?
pude armar un ecomerce con react, firebase y un poco de node, me faltaba esto.Estuve mucho tiempo sin poder integrarlo, y ahora pude terminar la app completa, puedo cobrar con mercado pago, actualizar es el stock en firebase.No puedo pedir mas nada estoy muy contento que encontre tu contenido genio, la verdad que te daria un re abrazo. jaja un Saludo genio
Ya puedo hacer laburitos freelance, para desarrollar a los pequeños comercios, nnaaa muy contento
Mucho exito con todo lo que te propongas hacer en tus paginas web! ojala te salgan muchos laburitos! un abrazo grandee!@@abelsanchez307
Esaaa, bn ahi papa, el otro dia hice el del html , js y estaba desactualizado ... el paquete de mercadopago. Buen aporte
Excelente papaa!! Podrías hacer un video enseñando Checkout API? Para hacer un checkout personalizado
Buen video!!! Faltan más edutubers como vos, ojalá y se te dé el reconocimiento que te mereces
Gracias!! :)
Excelente Video, Gracias!!!
Buen video amigo, gracias por el aporte
Justo estoy vendiendo mi primer pagina web y necesitaba pagos por mercado pago. Busque en youtube y encontre este video, un lujo hermano . Lo que me causa intriga es como subirlo a produccion ? ya que solo me genera el wallet cuando tengo el localhost iniciado.
Que gran video!!!!
que crack amigo, gracias!
Genio, gracias!
bro te hago una consulta, yo hago todo similar pero en un pagina que estoy haciendo, pero cuando apreto en el boton para generar el preferenceId el boton de pagar con mercado pago se me genera dos veces en el front, la verdad proble de todo ya no se que hacer, y por si te lo preguntas ya me fije y no, no me llega dos veces el preference id del backend
Tengo el error "Una de las partes con la que intentas hacer el pago es de prueba" ¿alguno pudo solucionarlo?
exelente video hermano, podrias hacer uno basado en suscripciones y como identificar al usuario comprador? muchas gracias.
Que versión de mercado pago estás manejando en el package.json?
Que grande! gracias por el contenido muy útil, acabo de conocer tu canal y me voy a suscribir. De casualidad sabes como manejar el campo "X-Idempotency-Key" que va en el header de la petición? En la documentación dice que a partir del 01/01 se volverá obligatorio enviarlo, así que asumo que llegado el momento habrá que integrarlo a esta solución?
Gracias por la suscripción! si! en caso mas adelante hago algún video o articulo para mostrar como utilizarlo así nos quedamos actualizados! Saludos!!
Hola podrias hacer un video para cobrar subscripciones pagos recurrentes con mercadopago? gracias.
Hola amigo, me dice que el banco tiene que autorizar mi pago jajaj cualquiera, MP esta en cualquiera, me ayudas?
sos lo mejor que la paso a la humanidad hasta ahora
😁🤣
muchas gracias mi rey
dea
no me crea el boton de pagar con mercado pago
Hola! Solo queria decirte que sos un grande y contarte algo tragicomico que me paso gracias la implementacion de mercadopago...
Resulta que al no contar con un servidor fisico opte por utilizar a vercel como servidor y como back url utilice tu canal tal y como vos hiciste en el video, lo comico esta en que ahora ya termine de hacer la pagina y publicarla, fui a editar el backend en vercel con el link de la pagina y lo actualice perfectamente (cosa que se ve reflejado aun incluso en vercel) pero cuando hago test de compra al volver me sigue redirigiendo a tu canal jajajjaja
jjajaja! es para que siempre te acuerdes de mi :)
Hola para que sirve esto?
Hola!
Gracias por el video. No termino de entender como es el fluo para cobrar en nombres de terceros. Se le brinda un enlace para autorizar el cobro, se hace un POST al endpoint oauth/token y una vez obtenido el access token y el refresh token...???? Se coloca al crear la preferencia? en qué campos? La documentación no es clara.
No se si entiendo la pregunta! Hay que poner las credenciales de la persona que va a recibir el dinero. Mercado pago ofrece una manera de compartir credenciales con un tercero de forma segura.
estuve renegando 10 horas tratando de hacer andar el server.js mal porque el video anterior estaba viejo, mañana me pongo con este, espero que funcione, igual tengo la misma duda que varios, una vez que se pasa a producción esto, que deberíamos cambiar para que funcionen los pagos? Desde ya muchas gracias, a pesar de que no me funciono es la explicación mas clara que vi en un video de youtube hasta ahora, sos crack enseñando.
Hola, el codigo de este video sigue actualizado a la ultima version de la api de Mercado Pago. En cuanto a tu pregunta mi respuesta siempre es la misma. Es el mismo codigo con las credecales de produccion y asegurarse de hacer bien el deploy en donde elijas hacerlo. Saludos!
Gracias!!
Que groso, encontre tu video de casualidad googleando la api... Me voy a sentar a verlo bien porque tengo que armar los pagos en un ecommerce y el cliente queria usar MP ademas de tarjetas, y vi que te deja usar ambas opciones la API de MP, pagas con tarjeta o linkeas tu cuenta y usas lo de ahi...
Me suscribo para estar al tanto de cualquier cosa nueva, buen contenido y gracias por la ayuda pa
Hola, gracias por suscribirte! éxitos con el proyecto para tu cliente, Abrazo!
Excelente hermano me re sirvió! Consulto quizás alguien pueda ayudarme, estoy desarrollando un ecommerce y me gustaría enviar un carrito con varios productos a la pasarela de MP, intenté enviar un array con los objetos (productos) con el formato que mostras en el video pero me devuelve un error 500 en el catch. Un saludo a todos y buena codificación!
Hola, para pasar mas de un producto habría que cambiar un poquito el formato! espero hacer un video haciendo eso. Saludos!
@@onthecode Aah claro, lo que hice fue enviar un solo objeto con el valor total del carrito.
Ahora lo que quisiera implementar (idea para video) es recibir la respuesta si el pago fue exitoso o no, para registrar la venta
@@franciscocanavesio Perfecto! asi es mas simple. Si, esa idea la tengo en mi lista de proximos videos :)
Excelente video y aporte. Faltaria el codigo en algun lado
Hola revise la documentacion pero no encuentro algo que solucione este error:
TypeError: Cannot read properties of undefined (reading 'id')
at file:///C:/Users/Carlos/Desktop/Programacion/2024/PRACTICA%20REACT/Practica%20mp/server/index.js:42:29
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
Esa linea de codigo hace referencia a esto: res.json({
error --> id: result.body.id
});
alguien me ayuda?
idolo
Está subido el código en algún lado ?
Buenas, Muy bueno el contenido!! Por casualidad sabrás como hacer para que el checkout pro se abra en tu misma pagina pero dentro de un modal. En la documentación oficial actual dice que se puede hacer pero no muestra como implementarlo
Si! Eso se puede hacer, ahora no recuerdo como pero no es algo complejo de hacer. Me fijo y quizás haga un vídeo sobre eso. Saludos!
Ehh gracias Ray, la mejor olvídate subscripto!
Tenes idea como se hace la verificacion de una notificacion? eso del template y clave secreta, lo hago tal cual aparece en la documentacion pero no me dan iguales las claves
Nunca lo probé! Si queres pásame tu código por email. Si tengo tiempo le pego una mirada!
tengo una consulta cuando hago el deploy de mi app, me arroja un error que pudo procesar el pago. hay que cambiar algo... en el local si me funciona
supongo que deberias cambiar localhost por el link de tu pagina antes de la /
muy bueno el vídeo y necesario , podrías sumar como recibir los webhook/ipn para ir haciendo seguimiento de esa compra y hacer actualizaciones en las bases de datos . Si no los implementaste escribime. Muy buen video
Si! Ya tengo preparado el vídeo sobre como usar los webhooks. Solo me queda hacerme un tiempo para grabarlo y ahí lo subo!
Si funciona? No te sale un error de uy no pudimos procesar tu pago?
hola on the code. como estas??? muchisimas gracias por tus tutoriales, hice el anterior pero parece que luego cambio la api de mercadolibre asi que ahora hice este video y cuando le doy click a comprar en la terminal de vs code me dice message: 'invalid_token', error: 'bad_request', status: 400, cause: null. Puede ser que haya otro nuevo cambio en la api??? desde ya muchas gracias hermano!
Hola! el video sigue actualizado a la ultima version de mercadoPago. De tanto en tanto testeo el codigo para comprobarlo. Si la Api vuelve a modificarse en su integracion vas a ver cambios significativos en su documentacion (y un video nuevo en mi canal, claro) pero no es el caso. Por lo que mencionas en tu error, puede ser referente a) "invalid_token": chequea las credenciales que le estas pasando(acces_token, public_key). b) Tambien el formato al cual estas enviando la preferencia al backend (un parentesis mal puesto o una llave mal colacada te cambia todo). Tambien proba con la nueva clave obligatoria que mercado Pago pide en sus integraciones: ruclips.net/video/lQyd6y7gu38/видео.htmlsi=yrBmMeWMzGhc2N8S . Saludos!
Hola esta genial tu video y me ayudo mucho, pero! me esta pasando que el al precionar el boton buy, me da error al generar la preferencia por que el id tanto del front como del back me dan indefinidos, que puede ser? No se si a alguien mas le paso, como soluciono?
A mi me pasa exactamente lo mismo. Estoy intentando solucionarlo tambien, por las dudas, vos tenes el back separado del front?
@@219recordz A mi me da un error cuando voy a pagar y no me dice que :(
Perdón que te joda, pero me podrás dar una mano? Me tira este error: {
message: 'client.id unauthorized to create preferences',
error: 'unauthorized_client_id',
status: 401,
cause: null
}
Ya lo arregle, perdon
Buenas! Una pregunta, alguien lo pudo trabajar deployado? Para ver si funciona, gracias!
Yo si lo pude deployar! Es el mismo código con tus credenciales de producción. Hay q asegurase de hacer bien el deploy.
Como puedo escuchar los pagos y obtener por ejemplo el email de los params de la url, para cuando la compra salga bien hacer x cosas
los componentes como rafce? tienen que instalarse? por que mi visual estudio code no toma la referencia para auto completar. Saludos
Si! Hay que instalar la extensión. Es esta: marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets
Hola, primero que nada, ¡muchas gracias por tu contenido! La clase fue fantástica. Me gustaría hacer una pregunta... Al final del proceso, al hacer clic en el botón azul que aparece debajo del verde, el servidor devuelve el siguiente error: escriba: 'non_critical', causa: 'no_preference_provided', mensaje : 'Proporcione un ID de preferencia válido para habilitar la redirección'}
causa
:
"no_preference_provided"
mensaje
:
"Proporcione un ID de preferencia válido para habilitar la redirección"
tipo
:
"no crítico"
¿Podrías ayudarme con esto por favor?
Por lo que veo parece que por algún motivo no puede redireccionar al checkout porque falta el
Id de la preferencia. Por algún motivo el servidor no está enviando el Preference ID al cliente. Yo intentaría con unos simples console.log en el servidor para ver si se está creando el ID. Si es que se creo, chequear por consola que este llegando bien al state de react. Hay que consolear para ver bien q esta pasando con ese ID! El objetivo de todo este codigo es crear un ese preference ID que sirve para armar un link de redireccionamiento al checkout con los datos de tu producto.
Pudiste solucionarlo?
hola buenas, tengo un error.. lo hago con las credenciales de prueba, la tarjeta. pero al momento de darle click, me sale el error FL-0d3dd127, dice oh no algo salió mal .. ojala me puedas orientar lo mas pronto posible, lo necesito urgente
Pudiste solucionarlo?
Tengo este error FL-b3e7b9d3 y solo pasa cuando el metodo de pago es con tarjeta con los demas metodos no sucede esto,
Buenas, pudiste solucionarlo? Me esta pasando lo mismo.
@@SryNotSry33 Buenas, pudiste solucionarlo? Me esta pasando lo mismo
@@matiaslokman Buenas, recién leo tu comentario. Lo solucioné usando las credenciales de prueba (Comprador y Vendedor de prueba)
codigo github ?
ahhh, esto me sirvio :) que tipo groso
:)
es muy diferente utilizar esto con un carro de compras? gracias! buen video!
Sería realmente el mismo funcionamiento. Hay que asegurarse de colocar en unit_price el total a pagar por la compra! Saludos!
Checkout pro ya no permite credenciales de prueba, ahora no sé qué hacer :(
bro, pudiste hacer algo ? me pasó lo mismo
@@gonzalorodriguez3668 mepaso lo mismo
Estoy en la misma!
Solo checa la documentación
me funciona pero hoy actualmente no sale un error de huy algo salió mal no pudimos procesar tu pago , porque ocurre esto? porque bloquea la solicitud de pago, consigue bien la id me lleva a la sección de pago coloco las credenciales de prueba tengo las credenciales del vendedor de prueba . me funcionaba bien hace unos días XD ahora ya no me esta funcionando que paso?
Me pasa lo mismo, lo pudiste solucionar?
@@arielvaldes3019 no, parece que es un error nuevo de mercado pago entre al discord de ellos y le está ocurriendo a todos.
Me sucede lo mismo. Alguna solucion?
Hola! Como están? Parece ser algo interno de mercado pago que ojalá lo solucionen pronto! En cuento tenga tiempo lo reviso bien y en caso de que de que se tenga que modificar algo en el código haré un nuevo vídeo mostrando esos cambios para que funcione :)
Hoy se me dió por probar nuevamente el código sin modificar nada y me funciona!!, asi que seguro era algo del momento de la api. Muchas gracias!@@onthecode
Haces integraciones? estamos buscando desarrollador reactJS contactame!
Siguen buscando?
buena capo! mejor te pregunto a ti porque del soporte quizas ni sepan de que estoy hablando, tengo una app de nextjs y implemente el checkout pro con el sdk-react, en local me funciona todo bien pero cuando trato de deployear en vercel me da este error (a diferencia del error del video es en el front no en el backend)
/vercel/path0/node_modules/@mercadopago/sdk-react/index.js:1
import initMercadoPago from './mercadoPago/initMercadoPago';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at internalCompileFunction (node:internal/vm:73:18)
at wrapSafe (node:internal/modules/cjs/loader:1178:20)
at Module._compile (node:internal/modules/cjs/loader:1220:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
at Module.load (node:internal/modules/cjs/loader:1119:32)
at Module._load (node:internal/modules/cjs/loader:960:12)
at Module.require (node:internal/modules/cjs/loader:1143:19)
at mod.require (/vercel/path0/node_modules/next/dist/server/require-hook.js:64:28)
at require (node:internal/modules/cjs/helpers:119:18)
at 4680 (/vercel/path0/.next/server/pages/checkout.js:1:13403)
> Build error occurred
Error: Failed to collect page data for /checkout
at /vercel/path0/node_modules/next/dist/build/utils.js:1171:15
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
type: 'Error'
}
Error: Command "npm run build" exited with 1
estoy abbsolutamente seguro de que el problema es solo de mercadopago porque si comento el initmercadopago y el render de la wallet el deploy es exitoso, si uso type: module en el package json me re jode toda la aplicacion, todos los modulos son importados con import y export
Y eso para que me sirve? Excelente video pero no tengo claro su uso😅, es como para que si el pago fue exitoso nos muestre algo en un panel o nos llegue una notificación al cliente como comprador?
Maestro funciona todo perfect muchas gracias por el video, lo hice con una currency_id: CLP de Chile. El único detalle que me queda dando vueltas es que al final del pago pide un correo donde dice "Recibe el detalle de pago", coloco un email real para ver si llega algo pero no llega nada; con credenciales de producción será que si se envía ese correo?
Buenísimo tener chequéalo que con solo cambiar la moneda ya funciona para otros países! Si de una, en producción le va a llegar al mail que ponga el comprador.