Generando un link de pago usando la API de Mercado Pago

Integrar un sistema de pagos puede parecer algo complejo al principio, pero una vez que nos acostumbramos a la terminología del mundo de los pagos y, sobre todo, implementamos un flujo claro y ordenado, se convierte en una tarea manejable.

Pasarelas de pago

Los procesadores de pago son herramientas esenciales en el mundo online. Servicios como Mercado Pago nos permiten delegar las partes más críticas de la seguridad y manejo de datos sensibles (como tarjetas de crédito) al procesador, reduciendo la complejidad técnica y los riesgos asociados.

Si bien en esta clase vamos a trabajar con Mercado Pago, uno de los servicios con más presencia en Latam, estos conceptos y ejemplos son perfectamente trasladables a otros servicios como Stripe o inclusive Paypal.

Si necesitás usar otro procesador de pagos y se te complica, no dudes en escribirnos en Discord para que te ayudemos. La mayoría de los procesadores de pagos tienen flujos similares, así que adaptar esta guía no va a ser complejo.

Preferencia de pago

En esta clase vamos a cubrir la primera parte del flujo de pago que va a permitirles a nuestros usuarios indicarle a nuestro sistema que queremos pagar un item y luego de un proceso rápido será redirigido a una página segura dentro del sitio de Mercado Pago para elegir el método de pago y concretarlo.

Implementación

Primero, debemos asegurarnos de tener una cuenta activa en Mercado Pago. Ingresá a https://www.mercadopago.com e iniciá sesión con tu cuenta o registrate para crear una nueva.

Sección de Developers

Mercado Pago cuenta con un portal exclusivo para devs donde vamos a poder acceder a la documentación y gestionar todo lo relacionado con la interacción con la API.

https://www.mercadopago.com.ar/developers/es

MercadoPago requiere que registremos una integración o aplicación. Este es un paso técnico necesario para autenticar nuestra comunicación con su API.

Obtener el token de pruebas

A partir de acá, todo lo que tenga que ver con las interacciones con la API de Mercado Pago va a estar relacionado a esta integración. Para comenzar, vamos a obtener nuestro token de pruebas y guardarlo en una variable de entorno local. Más adelante, cuando subamos todo esto a un ambiente productivo vamos a usar el token productivo.

1MP_TOKEN="TEST-2767879193149292-etc-etc-etc"

Recordá ignorar este archivo en tu repo de Git declarándolo en el archivi .gitignore

1.env*.local
2
3node_modules
4dist

Configurar la librería oficial

Mercado Pago cuenta con una API Rest muy bien documentada en su sitio para developers. En este caso vamos a usar la librería oficial de MP para Node.js que nos facilitará la interacción con la API y además está tipada, facilitándonos aún más la integración.

1pnpm install mercadopago

Crear una preferencia de pago

Ahora si, vamos a crear una preferencia de pago en Mercado Pago. Para esto vamos a crear una librería interna que nos oculte todos los detalles referidos a MP y hacerle la vida más fácil al resto de nuestro sistema.

Documentación oficial

1import { MercadoPagoConfig, Payment, Preference } from "mercadopago";
2
3const client = new MercadoPagoConfig({
4  accessToken: process.env.MP_TOKEN
5});
6
7const pref = new Preference(client);
8
9type CreatePrefOptions = {
10  productName: string;
11  productDescription: string;
12  productId: string;
13  productPrice: number;
14  userEmail: string;
15  transactionId: string;
16};
17
18// Recibimos data más generica en esta función
19// para abstraer al resto del sistema
20// de los detalles de mercado pago
21// esto nos permitirá hacer cambios dentro de esta librería
22// sin tener que modificar el resto del sistema
23
24export async function createSingleProductPreference(
25  options: CreatePrefOptions
26) {
27  return pref.create({
28    body: {
29      items: [
30        {
31          id: options.productId,
32          title: options.productName,
33          description: options.productDescription,
34          quantity: 1,
35          currency_id: "ARS",
36          unit_price: options.productPrice,
37        },
38      ],
39      payer: {
40        email: options.userEmail,
41      },
42      // URL de redirección en los distintos casos
43      back_urls: {
44        success: "https://test.com/success",
45        failure: "https://test.com/failure",
46        pending: "https://test.com/pending",
47      },
48      // Esto puede ser el id o algún otro identificador
49      // que te ayude a vincular este pago con el producto más adelante
50      external_reference: options.transactionId,
51    },
52  });
53}

Redirigir al usuario

Finalmente, enviamos al usuario a la página segura de MercadoPago, donde completará la transacción.

1async function initPayment(productId: string): Promise<void> {
2  // invocamos a nuestra API que a su vez 
3  // crea la preferencia y nos devuelve
4  // la URL lista para redirigir al usuario
5  const response = await fetch(`/checkout/${productId}`);
6  const data = await response.json();
7
8  if (data.redirect) {
9    location.href = data.redirect;
10  }
11}
12
13initPayment('h7g23691');

Finalmente

Al delegar la mayor parte de la responsabilidad al procesador de pagos (como hicimos aquí con MercadoPago), evitamos las complicaciones de manejar datos sensibles directamente. Este flujo es el camino más sencillo y seguro, y una vez que entiendas su funcionamiento, verás que otros procesadores tienen pasos similares, con nombres y configuraciones ligeramente diferentes.