Integrar Mercado Pago a mi web o app: guía paso a paso

Para integrar Mercado Pago a tu web tienes tres caminos: un Link de pago (sin programar, en minutos), un plugin si tu tienda está en Shopify, WooCommerce o Tiendanube, o Checkout Pro si tu web o app es a la medida (por ejemplo, hecha con Lovable, Bolt o Cursor). La clave en cualquiera de los tres es la misma: confirmar el pago desde el servidor antes de entregar lo que vendes.

Opciones para integrar Mercado Pago

Opción	Para quién	Programación	Ligado a tus pedidos
Link de pago	Vendes pocos productos o servicios fijos	Ninguna	No (lo concilias a mano)
Plugin (Shopify, WooCommerce, etc.)	Ya tienes tienda en esas plataformas	Mínima	Sí
Checkout Pro	Web o app a la medida	Backend sencillo	Sí
Checkout Bricks / API	Quieres el formulario de pago dentro de tu página	Más trabajo	Sí

Checkout Pro manda al cliente a una página de Mercado Pago para pagar y lo regresa a tu sitio. Es lo más recomendable para empezar porque Mercado Pago se encarga de capturar la tarjeta y tú no tocas datos sensibles.

Comisiones de Mercado Pago (a noviembre de 2026)

Según la página oficial de Link de pago de Mercado Pago México, consultada en noviembre de 2026, para tarjeta, saldo de Mercado Pago y SPEI:

Cuándo recibes el dinero	Comisión
Al instante	3.49% + $4.00
A 7 días	3.19% + $4.00
A 30 días	2.95% + $4.00

La página indica que a la comisión se suma una tasa fija de $4.00 más IVA por venta; confirma en tu cuenta cómo se aplica el IVA a tu caso. También indica que a vendedores recién registrados algunas ventas se les liberan a 7 días, y que los meses sin intereses llevan un cargo adicional que sube con el número de meses. Las comisiones de Checkout Pro y de los plugins pueden configurarse distinto: confírmalas en la sección de costos de tu cuenta. Si quieres comparar con otras opciones, lee qué pasarela de pago elegir para tu app.

Integrar Mercado Pago a mi web sin programar (Link de pago)

1. Entra a tu cuenta de Mercado Pago desde la computadora.
2. Busca la opción de Link de pago en las herramientas para vender.
3. Pon nombre, precio y (opcional) imagen del producto.
4. Copia el enlace y pégalo en un botón de tu página (“Pagar con Mercado Pago”).

Desventaja: tu web no sabe quién pagó. Tienes que revisar los pagos en tu cuenta y conciliarlos a mano. Para un negocio que apenas empieza, es suficiente.

Integrar Mercado Pago a mi app con Checkout Pro

Pasos generales según la documentación de Checkout Pro:

1. Crea tu aplicación y obtén credenciales

En el panel de desarrolladores de Mercado Pago crea una aplicación. Obtienes dos llaves:

• Public Key: puede ir en el navegador.
• Access Token: secreta. Solo en el servidor (por ejemplo, una edge function de Supabase o una función en Vercel).

2. Crea una “preferencia” desde el servidor

Una preferencia es la orden de cobro: qué vendes, cuánto cuesta y a dónde regresa el cliente. Ejemplo con el SDK oficial de Node.js:

import { MercadoPagoConfig, Preference } from "mercadopago";

const client = new MercadoPagoConfig({ accessToken: process.env.MP_ACCESS_TOKEN });

const pref = await new Preference(client).create({
  body: {
    items: [{ title: "Curso básico", quantity: 1, unit_price: 499, currency_id: "MXN" }],
    external_reference: "pedido-1234",
    back_urls: {
      success: "https://tusitio.mx/pago/exito",
      failure: "https://tusitio.mx/pago/error",
      pending: "https://tusitio.mx/pago/pendiente",
    },
    auto_return: "approved",
    notification_url: "https://tusitio.mx/api/webhook-mercadopago",
  },
});

// Redirige al cliente a pref.init_point

external_reference es tu número de pedido; así sabes a qué orden corresponde cada pago.

3. Configura las notificaciones (webhooks)

Un webhook es un aviso automático que Mercado Pago le manda a tu servidor cuando un pago cambia de estado. Al recibirlo, consulta el pago con tu Access Token y solo si su estado es approved marca el pedido como pagado. Nunca confíes solo en que el cliente llegó a la página de “éxito”: esa URL la puede abrir cualquiera.

4. Prueba con cuentas de prueba

Mercado Pago ofrece cuentas de prueba (vendedor y comprador) y credenciales de prueba. Haz compras aprobadas, rechazadas y pendientes antes de pasar a producción.

5. Sal a producción

Cambia a las credenciales de producción, revisa que el webhook apunte a tu dominio real con HTTPS y haz un pago real de monto bajo.

Integrar Mercado Pago en apps hechas con IA

Lovable, Bolt y similares suelen generar la integración en minutos, pero hemos visto patrones de riesgo que conviene revisar:

• El Access Token pegado en el frontend o en el repositorio. Si te pasó, cámbialo ya; lee qué hacer con una API key expuesta.
• El precio se toma del navegador: un usuario puede cambiarlo antes de pagar. El precio debe salir de tu base de datos, en el servidor.
• El pedido se marca pagado en la página de éxito y no en el webhook.
• El webhook no verifica el pago con la API y acepta cualquier aviso.

Errores comunes

• “invalid access token”: estás usando credenciales de prueba en producción o al revés.
• El webhook nunca llega: la URL no es pública, no tiene HTTPS o tu función exige login.
• El cliente no regresa a tu sitio: falta auto_return o las back_urls están mal escritas.
• Pagos en OXXO “pendientes” que nunca se marcan: el pago en efectivo se confirma después; necesitas el webhook para enterarte.

Cuándo pedir ayuda

Si solo vendes un par de productos, el Link de pago te resuelve hoy. Si tu app necesita cobrar por pedido, por suscripción o con varios vendedores, una integración mal hecha cuesta dinero real (cobros sin pedido, pedidos sin cobro, precios manipulados). En Black Engine lo revisamos por WhatsApp y te decimos qué falta para que cobre bien. Si además vas a publicar la app, revisa cómo subir tu página web a internet.