Integramos pagos con MercadoPago a una aplicación Next.js de donaciones

Поділитися
Вставка
  • Опубліковано 16 січ 2025

КОМЕНТАРІ • 127

  • @goncypozzo
    @goncypozzo  3 місяці тому +1

    Para los que llegan diciendo que no les funciona algo, acá hice un repo explicativo más nuevo sobre como integrar Mercado Pago con Checkout Pro a una app Next.js github.com/goncy/next-mercadopago

  • @simonfredes9126
    @simonfredes9126 6 місяців тому +20

    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.

    • @goncypozzo
      @goncypozzo  6 місяців тому

      Gracias, lo pineo!

    • @sebamate
      @sebamate 4 місяці тому

      Pude actualizar joya, pero:
      - Cuando hago la modificación al `payment/route.ts` para obtener el json del pago, ese get no me lo escupe la consola al hacer el pago de prueba 🤷‍♂
      Parece que entra, pero no lo puedo recuperar

    • @CristianMartinez-pu2gx
      @CristianMartinez-pu2gx 3 місяці тому +1

      @@sebamate estoy igual, intente el init_point pero igual arroja Payment not found

    • @santiagofederici4455
      @santiagofederici4455 3 місяці тому +1

      @@sebamate Pudiste solucionar? Estoy con el mismo problema

    • @sebamate
      @sebamate 3 місяці тому

      @@santiagofederici4455 hay otro tutorial de Fazt, pero implementa MP en un proyecto de Node (backend) sin framework en el front end, y la diferencia es que usa el modo CheckoutAPI, ahí después de renegar un poco logré atrapar el JSON del webhook, estoy elaborando notas puntillosas viendo donde subirlas

  • @sofiabargues
    @sofiabargues 11 місяців тому +4

    Este video es como esos buenos libros, apenas terminado ya queria volver a verlo! Gracias Goncy !

    • @goncypozzo
      @goncypozzo  11 місяців тому +1

      Muchas gracias Sofi! Y muy bueno tu proyecto 🙌

  • @tomas.menniti
    @tomas.menniti 3 місяці тому

    muchas gracias por compartir capo!! me quedo con esta frase: 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.

  • @sebastiancerutti3944
    @sebastiancerutti3944 Рік тому

    Goncy!! Sos el rey de reyes! NADIE TIENE ALGO ACTUALIZADO DE COMO USAR MERCADOPAGO! Muchas gracias y excelentisimo video!!!! Te quiero mucho

    • @goncypozzo
      @goncypozzo  Рік тому +1

      Muchas gracias! Me alegro que sirva, yo me diverti un montón

  • @Rockoonesong
    @Rockoonesong Рік тому +7

    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

    • @goncypozzo
      @goncypozzo  Рік тому +1

      Me alegro mucho que haya servido! Se me complicó un poco con la documentación, así que me alegro haya simplificado algo

  • @JoseFlores-ol4cc
    @JoseFlores-ol4cc Рік тому +2

    Todavia no lo vi entero pero ya le di like! Goncy gracias por compartir tu sabiduria 🙏

  • @sebamate
    @sebamate 4 місяці тому

    Qué maestro par favarrrrr. Justo vengo necesitando esta data. 100000 gracias 🫶

  • @caceresmauro9767
    @caceresmauro9767 Рік тому +1

    Esto es justo lo que estaba buscando, gracias Goncy

  • @brianbaez2637
    @brianbaez2637 Рік тому +1

    definitivamente la kbra muy interesante el uso de next con supabase y el sandbox de mercado pago saludos desde DR

  • @freetzen
    @freetzen 11 місяців тому +5

    Hermano. TE AMO. No tengo otras palabras. Sos un capo amigo

  • @valentinfeller121
    @valentinfeller121 7 місяців тому +1

    En cuanto a seguridad (cyberseguridad) que tendríamos que tener en cuenta?

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt Рік тому

    Gracias Goncy , tus videos me alegran el dia y siempre aprendo una cosa nueva sobre Next , se agradece ☕👑

  • @sebastianrc1976
    @sebastianrc1976 Рік тому

    Hola Goncy, lamentablemente no siempre llego a tus directos porque estoy en viaje desde el laburo, Gracias por todo el contenido!!!!

    • @goncypozzo
      @goncypozzo  Рік тому

      Gracias por hacerte el tiempo cuando podes!

  • @guillzf
    @guillzf 3 місяці тому

    Que tal, excelente video !! Tendras algun ejemplo de integracion de mercadopago con nuxt js?
    Gracias

    • @goncypozzo
      @goncypozzo  3 місяці тому

      Buenas, la verdad que no! Pero nada de esta implementación usa React o Next.js en realidad así que deberías poder portarlo sin problemas

  • @Ftemari
    @Ftemari 3 місяці тому

    Que haces Goncy! muy buen tutorial.
    Sabes que no estoy pudiendo encontrar la documentación del SDK de node que estuviste usando con los ejemplos y eso en la web de developer de mercadopago?
    Es como que cuando vas a SDK en la sección serverside borraron todo. Sabes porque es eso?

    • @goncypozzo
      @goncypozzo  3 місяці тому

      Mm la verdad no tengo idea, igualmente creo que tenia los types de typescript si de algo sirve

  • @YosipmikeColin
    @YosipmikeColin 8 місяців тому +1

    En donde configuras los medios de pago, a mí solo me sale tarjeta pero también quiero agregar efectivo

    • @goncypozzo
      @goncypozzo  8 місяців тому

      Eso se pone en la configuración de la preferencia

  • @raphauy
    @raphauy 9 місяців тому

    Tremendo! Muchas gracias Goncy!

  • @nicolasrouiller8606
    @nicolasrouiller8606 8 місяців тому

    Genial el tutorial 🙌🏻 como se hace para luego de probar con sandbox, hacer la integracion real como para produccion?

    • @goncypozzo
      @goncypozzo  8 місяців тому +1

      Gracias! Usas las credenciales de prod y en vez de usar sandbox_init_point usas init_point de la preferencia

    • @nicolasrouiller8606
      @nicolasrouiller8606 8 місяців тому

      Mil gracias, sos un genio!

  • @frandepaulo
    @frandepaulo 4 місяці тому

    Muy bueno Goncy. Una pregunta... se puede establecer como predeterminado para que todas las transferencias sean en dolares y no en pesos? Si en el valor pongo 100, que sean dolares

    • @goncypozzo
      @goncypozzo  4 місяці тому

      Mm nunca lo hice, se que ahora MP tiene la posibilidad de usar USD pero no se que tal a nivel api y preferencias, miraría en las docs si a la hora de crear la preferencia tienen un currency o algo parecido

  • @devrogerzen
    @devrogerzen Рік тому

    Que monstro genial ya me voy a ver el contenido

  • @gonzaloquiroga9753
    @gonzaloquiroga9753 8 місяців тому

    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!

    • @javierrivasseau8956
      @javierrivasseau8956 6 місяців тому

      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);
      }
      }

  • @augustoocchiuzzi5722
    @augustoocchiuzzi5722 Рік тому

    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?

    • @goncypozzo
      @goncypozzo  Рік тому

      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

  • @luchodelfuturo
    @luchodelfuturo 11 місяців тому

    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?

    • @goncypozzo
      @goncypozzo  11 місяців тому +1

      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

    • @luchodelfuturo
      @luchodelfuturo 11 місяців тому

      @@goncypozzo Excelente, muchas gracias Goncy :D

  • @anibalmancilla8903
    @anibalmancilla8903 Рік тому

    eres un crack brother, saludos desde Perú.

  • @maurolobo3450
    @maurolobo3450 11 місяців тому

    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

    • @goncypozzo
      @goncypozzo  11 місяців тому +1

      A mi también me ha pasado, yo asumo que son bajas en el ambiente de prueba de ellos

    • @maurolobo3450
      @maurolobo3450 11 місяців тому

      Claro, bueno a seguir renegando entonces! gracias por contestar!!@@goncypozzo

  • @Krivoox-dev
    @Krivoox-dev Рік тому

    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!

    • @goncypozzo
      @goncypozzo  Рік тому

      Buenas! La verdad nunca usé la api de suscriptions, ni idea

  • @arielelias2413
    @arielelias2413 Рік тому

    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!

    • @goncypozzo
      @goncypozzo  Рік тому +1

      Buenas! Conozco gente que scrapea datos pero no que use apis o similares 🫠

  • @nahu-dev
    @nahu-dev Рік тому

    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

    • @MT-ox3gz
      @MT-ox3gz Рік тому +1

      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

    • @goncypozzo
      @goncypozzo  Рік тому +1

      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)

  • @diegomartins8026
    @diegomartins8026 7 місяців тому

    Me dice que las credenciales de prueba no están disponibles con CheckoutPro, qué método sería el más parecido?

    • @goncypozzo
      @goncypozzo  7 місяців тому

      Que raro, yo siempre las usé con checkout pro (y no usé otro)

    • @diegomartins8026
      @diegomartins8026 7 місяців тому

      ​@@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

    • @patrick6245
      @patrick6245 6 місяців тому +3

      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)

    • @diegomartins8026
      @diegomartins8026 6 місяців тому

      @@patrick6245 Mil gracias rey, por suerte ya lo pude resolver pero fue un dolor de cabeza jajaja

  • @guillermoblanco2923
    @guillermoblanco2923 3 місяці тому

    consulta el token queda seguro en el archivo. env?

    • @goncypozzo
      @goncypozzo  3 місяці тому +1

      Mientras no lo uses en el cliente ni lo subas a github si

    • @guillermoblanco2923
      @guillermoblanco2923 3 місяці тому

      @@goncypozzo es mejor hacer una function en firebase? onda guardarlo dentro de una variable?

    • @goncypozzo
      @goncypozzo  3 місяці тому +1

      @@guillermoblanco2923 estas teniendo algun problema con las variables? Tenerlo en el .env deberia ser suficiente si las vas a acceder desde el server

    • @guillermoblanco2923
      @guillermoblanco2923 3 місяці тому

      @@goncypozzo jajaja si... justo estoy con el tema de consumir api rest y la mayoria tienen tokens y me da miedo dejarlos del lado del cliente por eso pregunto de forma tan molesta... jajaj perdon

  • @v1bra387
    @v1bra387 3 місяці тому

    Alguno me da una mano?, los pagos me funcionan bien ,pero no puedo recibir la respuesta del pago con todos los datos, simulo la compra pero el /payment me falla. Estoy usando de back un proyecto con nodeJs

  • @martinarana9698
    @martinarana9698 8 місяців тому

    hola amigo, donde te puedo contactar? un abrazo

    • @goncypozzo
      @goncypozzo  8 місяців тому

      Por twitter está bien

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt 10 місяців тому

    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

    • @goncypozzo
      @goncypozzo  10 місяців тому +1

      Es una configuración de Next.js!

    • @Deus-lo-Vuilt
      @Deus-lo-Vuilt 10 місяців тому

      @@goncypozzo sabes dónde puedo ver eso en la documentación o algún vídeo que tengas dónde lo agregues ? 🧐

    • @goncypozzo
      @goncypozzo  10 місяців тому +1

      nextjs.org/docs/app/api-reference/next-config-js/logging @@Deus-lo-Vuilt

    • @Deus-lo-Vuilt
      @Deus-lo-Vuilt 10 місяців тому

      @@goncypozzo Gracias Goncy 🚀

  • @diegomartins8026
    @diegomartins8026 6 місяців тому

    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

  • @MarianoNicolasMartinezRomero
    @MarianoNicolasMartinezRomero 11 місяців тому

    Necesitamos hacer una integracion de mp en nuestro sitio web, estarias disponible para hacerlo? contactame!

  • @raymarceloibarra334
    @raymarceloibarra334 Рік тому

    eres grande Goncy sigue así saludos !!!!

  • @agustindiazgargiulo3239
    @agustindiazgargiulo3239 11 місяців тому

    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 ?

    • @goncypozzo
      @goncypozzo  11 місяців тому

      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

  • @juanferrer5885
    @juanferrer5885 3 місяці тому

    Goncy podrias algun día hacer un video de como crear un "apency 2"? Me encantaría poder inicializar mi proyecto de next con shadcn + i18n + zod + drizzle + etc... sin tener que añadirlos manualmente

    • @goncypozzo
      @goncypozzo  3 місяці тому +1

      Buenas, el repo de create-appncy es abierto y lo pueden forkear y modificar para agregarle lo que quieran!

  • @Mitnos.
    @Mitnos. 11 місяців тому

    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??

    • @goncypozzo
      @goncypozzo  11 місяців тому

      Buenas, solo en los paises donde está Mercado Pago (que son algunos de Latam), debería servir para cualquier tipo de pagos

  • @facundocostas
    @facundocostas 7 місяців тому

    Se puede hacer con datos reales? y que llegue dinero a mi cuenta real? o solo modo prueba? saludos

    • @goncypozzo
      @goncypozzo  7 місяців тому

      Si se puede, usas credenciales de producción, usas init_point en vez de sandbox_init_point y listo

  • @josephito27
    @josephito27 Рік тому

    te quiero Goncy 🥹❤

  • @jarvs10
    @jarvs10 Рік тому

    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

    • @goncypozzo
      @goncypozzo  Рік тому

      Solamente elementos serializables se pueden mandar, si estás usando mongodb, la key _id es de tipo objectKey (no serializable)

    • @jarvs10
      @jarvs10 Рік тому

      @@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)

    • @goncypozzo
      @goncypozzo  Рік тому

      Entonces asumo te falta un await o algo similar (como estar mandando una promise por prop)

  • @FacuCordobaTs
    @FacuCordobaTs 10 місяців тому

    Este video me cambio la vida!! Sos un genio. Por cierto ¿Dónde podría desplegar la aplicación?

    • @goncypozzo
      @goncypozzo  10 місяців тому +1

      En Vercel podrías sin problema!

    • @FacuCordobaTs
      @FacuCordobaTs 10 місяців тому

      Muchas Gracias@@goncypozzo

  • @tomihq
    @tomihq Рік тому

    No sé por qué me dió gracia la parte de "Y así, ya tenemos el dinero de nuestros usuarios"

    • @goncypozzo
      @goncypozzo  Рік тому +4

      Es que es la parte importante, el resto no importa

  • @fiderosado
    @fiderosado Рік тому

    bajale el voltage a las fluces de fondo, lucen muy resplandecientes y molestan

    • @goncypozzo
      @goncypozzo  Рік тому +4

      Podes probar apagando el monitor

  • @darksitopx
    @darksitopx Рік тому

    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

    • @goncypozzo
      @goncypozzo  Рік тому

      Buenas, no se si entendí muy bien la idea, pero mandala al discord y lo vemos

  • @jonatanguzman-m9u
    @jonatanguzman-m9u 9 місяців тому

    gracias groso saludo

  • @ignaciomatiasdiaz9710
    @ignaciomatiasdiaz9710 Рік тому

    Pongo pausa en el minuto 3 para mirar los iconos de escritorio de gonzy, así de arriba está para mí.

    • @goncypozzo
      @goncypozzo  Рік тому

      Creo que hay iconos de cosas que instalé y nunca usé

  • @frichieri
    @frichieri 5 місяців тому

    Me da Payment not found, a alguien le pasaba y supo solucionarlo?

    • @goncypozzo
      @goncypozzo  5 місяців тому +1

      Fíjate en el pineado, proba de usar init_point en vez de sandbox

    • @frichieri
      @frichieri 5 місяців тому

      @@goncypozzo Gracias! eso habia probado y funciono ok! Una consulta: funciona el webhook para transferencias? no encontre esa info y necesitabamos para transferencias

    • @goncypozzo
      @goncypozzo  5 місяців тому

      @@frichieri La mayoría de las veces usé el IPN en vez del webhook porque me resultó mejor

  • @lean_diaz
    @lean_diaz 11 місяців тому

    14:42

    • @goncypozzo
      @goncypozzo  11 місяців тому

      ua-cam.com/users/shortsUz50khHUsec

  • @sebacampos012
    @sebacampos012 6 місяців тому

    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!!

    • @goncypozzo
      @goncypozzo  6 місяців тому

      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

  • @Diego_NGonzalez
    @Diego_NGonzalez Рік тому

    La maldita cabra, sos un crack goncy

  • @emanuelvillanueva4757
    @emanuelvillanueva4757 10 місяців тому

    tuki

  • @Axnez420
    @Axnez420 3 місяці тому

    dios mio quiero implementar los pagos con mercadopago en mi proyecto de firebase y no puedooooooooooooooooooooooooooooo aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa