Integramos pagos con MercadoPago a una aplicación Next.js de donaciones
HTML-код
- Опубликовано: 8 янв 2024
- Usamos el posiblemente peor ejemplo para integrar MercadoPago (una aplicación de donaciones) para mostrar lo fácil que es hoy en día agregar pagos a una aplicación.
La integración de pagos es una de las cosas que convierte nuestras aplicaciones de fin de semana en productos reales. Pero el miedo de manejar dinero real muchas veces nos tira atrás.
Dejamos en manos de tercero, como MercadoPago, esa responsabilidad y nos centramos en monetizar nuestras geniales ideas, como un medidor de distancia basado en carpinchos.
Si te gusta mi contenido seguime y no te pierdas los streams ni tweets!
Ah, acá tenés el repositorio del proyecto si te interesa: github.com/goncy/donancy 
Наука
Buenas a todos! Se actualizó el sdk de mercadopago. Al dia de la fecha, lo que hay que hacer es. Para obtener las credenciales de prueba (el access token) deben crear una cuenta de prueba, y de ahí, crear un proyecto (tal cual como lo hicieron con su cuenta de mp original). Una vez creada la aplicacion en la cuenta de prueba, obtienen el access_Token (navbar lateral izquierda, abajo). Entonces, no van a tener el problema del minuto 37 ya que le van a pagar a la cuenta de prueba. Una vez hecho todo, obtienen el access_token original de su cuenta de mp, y solo lo reemplazan.
Gracias, lo pineo!
Hermano. TE AMO. No tengo otras palabras. Sos un capo amigo
Este video es como esos buenos libros, apenas terminado ya queria volver a verlo! Gracias Goncy !
Muchas gracias Sofi! Y muy bueno tu proyecto 🙌
Esto es justo lo que estaba buscando, gracias Goncy
Todavia no lo vi entero pero ya le di like! Goncy gracias por compartir tu sabiduria 🙏
Muchas gracias Jose!
Gracias Goncy , tus videos me alegran el dia y siempre aprendo una cosa nueva sobre Next , se agradece ☕👑
Muchas gracias a vos!
Goncy!! Sos el rey de reyes! NADIE TIENE ALGO ACTUALIZADO DE COMO USAR MERCADOPAGO! Muchas gracias y excelentisimo video!!!! Te quiero mucho
Muchas gracias! Me alegro que sirva, yo me diverti un montón
Tremendo! Muchas gracias Goncy!
Soy java developer y se me estaba complicando mucho entender algunas cosas ya que la docu de MP es horrible y en algunas cosas esta incluso desactualizada, y por otro lado, no hay muchos tutoriales en youtube que te ayuden a aplicar esta tecnologia concretamente con java. Aún asi, tu manera detallada y clara de explicar hizo que logre conectar bien mi código incluso siendo que tu lo haces con Node XD. Sos un genio bro, suscrito
Me alegro mucho que haya servido! Se me complicó un poco con la documentación, así que me alegro haya simplificado algo
definitivamente la kbra muy interesante el uso de next con supabase y el sandbox de mercado pago saludos desde DR
Saludos!
Que monstro genial ya me voy a ver el contenido
Hola Goncy, lamentablemente no siempre llego a tus directos porque estoy en viaje desde el laburo, Gracias por todo el contenido!!!!
Gracias por hacerte el tiempo cuando podes!
eres un crack brother, saludos desde Perú.
Muchas gracias! Saludos 🫡
eres grande Goncy sigue así saludos !!!!
Muchas gracias y saludos!
En cuanto a seguridad (cyberseguridad) que tendríamos que tener en cuenta?
Hola Goncy! Gracias por este tipo de contenidos que son aplicables a la vida real. Una consulta, sabras de alguien que haya hecho un tutorial/video relacionado a integraciones con AFIP para realizar facturas? Gracias!
Buenas! Conozco gente que scrapea datos pero no que use apis o similares 🫠
Excelente video Goncy!! Consulta de arquitectura: Cual es la necesidad de usar una DB (e.g: supabase ) para este caso? Entiendo que si vas a hacer más cosas con la Data a futuro, o si necesitás querys más heavy, performance, etc ahí si tenga más sentido guardar la data q retorna MP en una DB propia... pero para el caso de este ejemplo no entiendo xq replicar la data, lo veo redundante.
- Para mostrar listado de donations en UI: se podría directamente consumir la data de MP con los get de la SDK.
- Para notificaciones: cuando el Webhook de MP manda la data del pago exittoso, ya se podría mostrar la notificación directamente con esa data, sin guardarla o "duplicarla" en supabase.
Gracias!!
Buenas! Siempre depende del caso, generalmente vas a querer guardarla en una DB tuya por si querés modificar datos, administrar quien tiene acceso a esos datos, no depender de si está caida la API de MercadoPago (o usar un servicio que funcione más rápido, como un redis cache). Si pretendes acceder a esos datos nunca confiaría en el origen como fuente de verdad. Para lo de las notificaciones, todavía vas a necesitar una manera de vincular esa petición al usuario que está viendo la página, via WS o lo que quieras, me parece que ya que estamos usando Supabase usar esa notificación que tiene nos simplifica las cosas. Pero devuelta, depende bastante del caso de uso
Gracias por el video, igualmente con esto, las donaciones son siempre para un solo destinatario, que es el token del cliente inicial que seteaste. No hay manera de hacer tipo un p2p, que puedas mandar a distitnas personas? Hay alguna herramienta de meli para eso? sin hacerlo engorroso para el end-user obviamente. Quiza enlazar MP en la cuenta de cada usuario y que se hagan p2p no?
Dudo que haya servicios así de MP igualmente no lo haría ya que cada transaccion que haces en pos del usuario (sobre la que podes ejecutar pagos como intermediario, siendo marketplace) se procesan como pago y tienen varias comisiones
te quiero Goncy 🥹❤
Y yo a ustedes ❤️🤝
Muy bueno el video como siempre Goncy!! super claro ! Tengo un problema con mp , a veces (muy de vez en cuendo) me toma el pago con la tarjeta de prueba pero en general SIN CAMBIAR NADA me tira error "Algo salió mal..No pudimos procesar tu pago¿Qué puedo hacer?Usa un medio de pago distinto." saben que puede ser?? de cada 30 intentos 1 me acepta, el resto ni
A mi también me ha pasado, yo asumo que son bajas en el ambiente de prueba de ellos
Claro, bueno a seguir renegando entonces! gracias por contestar!!@@goncypozzo
Necesitamos hacer una integracion de mp en nuestro sitio web, estarias disponible para hacerlo? contactame!
gracias groso saludo
Este video me cambio la vida!! Sos un genio. Por cierto ¿Dónde podría desplegar la aplicación?
En Vercel podrías sin problema!
Muchas Gracias@@goncypozzo
Genial el tutorial 🙌🏻 como se hace para luego de probar con sandbox, hacer la integracion real como para produccion?
Gracias! Usas las credenciales de prod y en vez de usar sandbox_init_point usas init_point de la preferencia
Mil gracias, sos un genio!
En donde configuras los medios de pago, a mí solo me sale tarjeta pero también quiero agregar efectivo
Eso se pone en la configuración de la preferencia
Muchas gracias por compartir. No se si es por un cambio en la versión del sdk de MP, pero no me encuentra sandbox_init_point dentro de preference, por lo que el redirect(preference.sandbox_init_point!) me tira error. Minuto 38 del video!. Muchas gracias!
Hola Gonza, me pasaba lo mismo, lo que hice fue no hacer el redirect en el serverside, enviar la respuesta al cliente de mi app, y ahi le hice un router.push
algo asi me quedo del lado del cliente,
async function handleCart() {
try {
const result = await handleCheckOutAction(cartItems);
if (result) {
router.push(result?.sandbox_init_point);
setPreferenceIDState(result?.id);
}
} catch (error) {
console.log(error);
}
}
Hola goncy, para la api de suscripciones no estoy pudiendo conseguir el card_token_id de donde lo saco? porque en la docu no esta muy claro. gracias!
Buenas! La verdad nunca usé la api de suscriptions, ni idea
Gracias Goncy sirvio bastante, te hago una consulta, si esto se lo tengo que montar a un cliente , le deberia pedir que cree el una integracion con mercado pago (UNA APP) y me comparta las credenciales (apikey) no?
o se realiza de otra manera?
Exacto, la api de mp permite compartir las credenciales con otra cuenta. Asi que puede darte acceso a ellas sin darte acceso a la cuenta
@@goncypozzo Excelente, muchas gracias Goncy :D
Vos sabes Gonzy que justo estaba haciendo una integracion similar, pero me da error de "Una de las partes con la que intentás hacer el pago es de prueba." en el modo de sandbox. Las credenciales de prueba las creaste con tu cuenta personal de MP o usaste una cuenta de prueba ?
Lo que deberías hacer es:
- Abrirlo en incognito y pagar sin cuenta
- Con la cuenta de prueba crear una app y usar ese token en development, iniciar con otra cuenta de prueba y pagar con esa
Cualquiera de las dos opciones van
Hola Goncy, que tal muy bueno tu contenido sabes trabajo en RH y hace un tiempo tengo la necesidad de realizar fotocheck para mis trabajadores, crees que puedas ayudarme con algo siemple para imprimir fotocheck, actualmente lo realizo en excel coloco, un nombre, codigo de barras, cargo y foto. Saludos Crack
Buenas, no se si entendí muy bien la idea, pero mandala al discord y lo vemos
Para los que se mareen con la documentación de mp que en algunas partes todavía está desactualizada, hay un grupo de ds de mercado pago de la comunidad, hay comparten información y tutoriales actualizados
Diego, me podes pasar el grupo?
podrias compartir el grupo por favor
hola goncy esta opcion solo acpeta pagos en los paises latinoamericanos, o tambien de otros continentes??, segundo sirve para integracion a una app tipo fivver??
Buenas, solo en los paises donde está Mercado Pago (que son algunos de Latam), debería servir para cualquier tipo de pagos
lo que no entiendo es si tenes que hacer algo una vez la llevas a producción para que la gente no pueda usar las tarjetas de prueba para seguir probando
Mercadopago te da dos credenciales, una de producción y una de prueba. Cuando hagas el deploy de tu aplicación tiene que tener las que correspondan a las credenciales de producción, haciendo eso las personas ya no pueden utilizar las tarjetas de prueba que brinda Mercadopago
Exactamente como dice el señor MT, también a tomar en cuenta que usamos el sandbox_init_point en vez del init_point y que (creo) que las apps antes de darte las credenciales de prod habilitadas pasan por una revisión (al menos antes era asi)
Se puede hacer con datos reales? y que llegue dinero a mi cuenta real? o solo modo prueba? saludos
Si se puede, usas credenciales de producción, usas init_point en vez de sandbox_init_point y listo
Goncy una pregunta como haces para que en la consola te muestre el tipo de peticiones que se esta haciendo en las rutas ? veo que te salen las de tipo POST ..GET etc como se verian al usar Morgan
Es una configuración de Next.js!
@@goncypozzo sabes dónde puedo ver eso en la documentación o algún vídeo que tengas dónde lo agregues ? 🧐
nextjs.org/docs/app/api-reference/next-config-js/logging @@Deus-lo-Vuilt
@@goncypozzo Gracias Goncy 🚀
No sé por qué me dió gracia la parte de "Y así, ya tenemos el dinero de nuestros usuarios"
Es que es la parte importante, el resto no importa
Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. me aparece este error, sabes q puede ser? muchas gracias
Solamente elementos serializables se pueden mandar, si estás usando mongodb, la key _id es de tipo objectKey (no serializable)
@@goncypozzo estoy haciendo todo el proceso tal y como vos en el aplicativo, me tira ese mensaje y me muestra error en el redirect(preference)
Entonces asumo te falta un await o algo similar (como estar mandando una promise por prop)
hola amigo, donde te puedo contactar? un abrazo
Por twitter está bien
Me dice que las credenciales de prueba no están disponibles con CheckoutPro, qué método sería el más parecido?
Que raro, yo siempre las usé con checkout pro (y no usé otro)
@@goncypozzoparece que es un cambio que implementaron ahora, igualmente la solución que te dan, es crear una app CheckoutPro con una cuenta de prueba y usar sus credenciales de producción para las pruebas
Amigo tuve el mismo problema, te dejo los pasos para arreglarlo:
1- Vas a "Cuentas de prueba" y creas 2 usuarios, uno de vendedor y otro de comprador
2- Ingresas con las credenciales de comprador (desde incognito) y en el menu izquierdo busca "PRODUCCION" y usas las credenciales de produccion (Que siguen siendo de prueba, ya que es un usuario de prueba)
@@patrick6245 Mil gracias rey, por suerte ya lo pude resolver pero fue un dolor de cabeza jajaja
bajale el voltage a las fluces de fondo, lucen muy resplandecientes y molestan
Podes probar apagando el monitor
La maldita cabra, sos un crack goncy
Pongo pausa en el minuto 3 para mirar los iconos de escritorio de gonzy, así de arriba está para mí.
Creo que hay iconos de cosas que instalé y nunca usé
14:42
ruclips.net/user/shortsUz50khHUsec
tuki