Integración de Mercado Pago en Next.js

En este respositorio vamos a aprender a integrar Mercado Pago en una aplicación de comentarios utilizando Next.js con App Router. El fin de la aplicación es poder agregar mensajes a una lista de mensajes.

Índice

Vamos a tener diferentes carpetas y aplicaciones para cada tipo de integración, así mantenemos el código simple y podemos enfocarnos en lo que nos interesa.

1. Integraciones
   1. Checkout Pro: Los usuarios van a tener que pagar para poder agregar un mensaje a la lista. Usamos Checkout Pro para crear una preferencia de pago y redirigir al usuario a Mercado Pago para que pueda pagar. Configuramos un webhook para recibir notificaciones del pago y verificar la autenticidad de la notificación.
   2. Suscripciones: Los usuarios van a tener que suscribirse para poder agregar un mensaje a la lista. Usamos Suscripciones sin plan asociado con pago pendiente. Configuramos un webhook para recibir notificaciones de suscripción y verificar la autenticidad de la notificación.
   3. Checkout Bricks: Los usuarios van a tener que pagar para poder agregar un mensaje a la lista. Usamos Checkout Bricks para tomar los datos de pago dentro de nuestra aplicación.
   4. Marketplace: Vamos a ser el intermediario entre un usuario de nuestra aplicación que quiere recibir mensajes en su muro y un usuario que quiere pagar para escribir en ese muro. Vamos a usar Checkout Pro con la integración de Marketplace para quedarnos con una ganancia por cada mensaje.
2. Configuración
   1. Clonar el repositorio: Como clonar el repositorio y correr las aplicaciones iniciales.
   2. Crear una aplicación en Mercado Pago: Como entrar al panel de desarrolladores de Mercado Pago y crear una aplicación.
   3. Cuentas de prueba: Como crear cuentas de prueba y usar tarjetas de prueba.
   4. Credenciales: Que son y que tipo de credenciales existen, cuando y como usarlas.
   5. Exponer un puerto públicamente: Como hacer que Mercado Pago se pueda comunicar con nuestra aplicación mientras corre en local, muy útil para recibir notificaciones de pago y suscripciones durante el desarrollo.
   6. Recibir notificaciones de pago y suscripciones: Como configurar un webhook en nuestra aplicación para recibir notificaciones de pago y suscripciones.

---

Si te gusta mi contenido, seguime en Twitter, en Twitch, en YouTube, doname un Cafecito o volvete sponsor en github ✨