En este tutorial vamos a armar un mini proyecto con Next.js para integrar Mercado Pago usando Checkout Pro. Esta guía detalla los pasos esenciales para configurar tanto el frontend como el backend, asegurando una implementación exitosa de la pasarela de pago.
Configuración del Frontend con Next.js
En el archivo principal de Next.js, es fundamental inicializar el SDK de Mercado Pago. Llamamos a initMercadoPago con nuestra API_KEY, la cual se debe obtener desde el panel de Mercado Pago, y la configuración regional adecuada.
Para gestionar la interacción con la pasarela de pago, creamos un estado con useState para guardar el ID de la preferencia de pago. Este ID es crucial para la redirección a la página de pago de Mercado Pago.
Flujo de Envío de Información del Producto
Cuando enviamos la información de nuestro producto al backend, Mercado Pago toma esos datos y genera una preferencia de pago. Esta preferencia es el enlace directo a la transacción.
En el frontend, realizamos un simple POST a nuestra API para enviar los datos de nuestro producto. Para ello, dentro del cuerpo de nuestro POST, enviamos el title (nombre del producto), su precio y también su cantidad.
Implementación del Backend para la Creación de Preferencias
La función encargada de procesar la creación de preferencias en el backend se activa cuando el frontend hace una petición a /api/mercadopago.
Configuración del Cliente de Mercado Pago
Dentro de esta función, usamos MercadoPagoConfig para crear una instancia del cliente, pasándole nuestro accessToken. El accessToken es la clave secreta que se obtiene desde tu cuenta de Mercado Pago y es esencial para autenticar las solicitudes al API.
Creación de la Preferencia de Pago
Con los datos del producto recibidos del frontend (título, precio y cantidad), creamos un objeto llamado preferenceData. Este objeto contendrá toda la información necesaria para que Mercado Pago pueda generar la preferencia de pago.
Utilizando la instancia del cliente, enviamos estos datos a Mercado Pago mediante new Preference(client).create(...). Esta llamada al API de Mercado Pago genera el ID de preferencia único para la transacción.
Manejo de Respuestas y Errores
Una vez que Mercado Pago genera la preferencia, devolvemos ese ID al frontend en formato JSON. Si algo sale mal durante este proceso (por ejemplo, un error en la comunicación con la API de Mercado Pago o datos incorrectos), lo mostramos en consola y devolvemos una respuesta con un estado de error al frontend.
Nodejs MercadoPago - Aceptar Pagos Online
Pruebas y Consideraciones Finales
Con estos pasos ya deberíamos tener lista la pasarela de pago con Checkout Pro, utilizando los datos de nuestro producto.
Antes de cerrar, es importante destacar un video que puede ser de gran ayuda para configurar el ambiente de pruebas de Mercado Pago. La configuración adecuada del entorno de pruebas es crucial para asegurar que la integración funcione correctamente antes de pasar a producción.
tags: #mercadopago #checkout #basico #credencial