Guía Completa: Integración de Mercado Pago

Paso a paso para configurar pagos con OXXO en tu sitio web

Tiempo estimado: 15-20 minutos
1

Crear o Iniciar Sesión en Mercado Pago

Primero necesitas tener una cuenta en Mercado Pago Developers

Ir al sitio de desarrolladores

Abre el navegador y ve a la página de desarrolladores de Mercado Pago

Abrir Mercado Pago Developers

Iniciar sesión o crear cuenta

  • Si ya tienes cuenta: Haz clic en "Ingresar" y usa tu email/contraseña
  • Si no tienes cuenta: Haz clic en "Crear cuenta" y completa el registro
  • Usa tu email real, recibirás códigos de verificación
2

Crear una Nueva Aplicación

Ahora vas a crear tu aplicación para obtener las credenciales

En el panel de control

  1. a Una vez dentro, busca el menú lateral izquierdo
  2. b Haz clic en "Tus integraciones" o "Tus aplicaciones"
  3. c Verás un botón azul que dice "Crear aplicación" o "Nueva aplicación"
  4. d Haz clic en ese botón

Tip: Si no ves "Tus integraciones", busca en el menú superior o ve directamente a: Panel de aplicaciones

3

Completar el Formulario (Aquí está la respuesta)

Te va a preguntar varios datos. Aquí te digo exactamente qué responder

📝 Nombre de la aplicación

Este es solo un nombre interno para identificar tu app

Respuesta sugerida:

Tootal Tickets

O el nombre de tu empresa/proyecto

💼 Modelo de negocio

Cómo vendes o qué tipo de negocio tienes

Respuesta:

Para venta de boletos: Selecciona "Servicios"

💻 Plataforma de eCommerce / Desde dónde integrarás

Esta es la pregunta clave que te hicieron

Respuesta correcta:

Otra plataforma / Desarrollo propio

O puede decir "API" o "Integración personalizada"

¿Por qué esta opción? Porque tu sitio está hecho con Landingsite.ai, que no es una plataforma de eCommerce tradicional (como Shopify, WooCommerce, etc). Es un sitio web personalizado.

Otras opciones que podrías ver:

  • ❌ Shopify - No uses (solo si usaras Shopify)
  • ❌ WooCommerce - No uses (solo para WordPress)
  • ❌ PrestaShop - No uses
  • ✅ API / Desarrollo propio - SÍ USA
  • ✅ Otra plataforma - SÍ USA

📦 Producto / Qué vendes

Describe brevemente qué ofreces

Respuesta sugerida:

Venta de boletos para eventos

O: "Venta de entradas", "Ticketing", "Boletos para conciertos", etc.

🌐 URL de tu sitio web

La dirección de tu página

Tu URL:

https://tootaltickets.com

💡 Si aún no publicas tu dominio, puedes poner una URL temporal y actualizarla después

Una vez completado el formulario:

Haz clic en "Crear aplicación" o "Guardar". Mercado Pago procesará tu solicitud y te llevará al panel de tu aplicación.

4

Obtener tus Credenciales

Ahora vas a copiar las claves que necesitas para el código

Encontrar las credenciales

  1. 1 Una vez creada la aplicación, verás el panel de tu app
  2. 2 Busca en el menú lateral: "Credenciales" o "Credentials"
  3. 3 Verás dos pestañas o secciones:

Credenciales de prueba (TEST)

Para hacer pruebas sin dinero real

Credenciales de producción (LIVE)

Para cobrar dinero real

Empieza con TEST: Primero copia las credenciales de prueba para hacer tus primeras pruebas sin riesgo.

🔓 Public Key (Clave pública)

SEGURA

Esta clave va en el frontend (JavaScript de tu sitio)

Se ve algo así:

TEST-7a1b2c3d-4e5f-6g7h-8i9j-0k1l2m3n4o5p

📋 Qué hacer:

  1. 1. Haz clic en el botón "Copiar" junto a la Public Key
  2. 2. Guárdala en un lugar seguro (notas, documento)
  3. 3. La usarás en el código de tu sitio

🔒 Access Token (Token de acceso)

PRIVADA

Esta clave va en el backend (servidor, NO en JavaScript)

Se ve algo así:

TEST-1234567890123456-070123-abcdef1234567890abcdef1234567890-12345678

Es mucho más larga que la Public Key

⚠️ MUY IMPORTANTE:

  • NUNCA pongas esta clave en el código JavaScript de tu sitio
  • • Solo úsala en tu backend/servidor
  • • No la compartas públicamente
  • • No la subas a GitHub sin encriptar

📋 Qué hacer:

  1. 1. Haz clic en "Copiar" junto al Access Token
  2. 2. Guárdala de forma muy segura
  3. 3. La usarás cuando configures tu backend

Resumen de credenciales

✅ Public Key (TEST)

→ Para el código del sitio

→ Empieza con TEST-

✅ Access Token (TEST)

→ Para el backend

→ Más larga, empieza con TEST-

5

Configurar en tu Sitio

Ahora vas a pegar las credenciales en el código

Actualizar Public Key

📍 Ubicación: Página resumen-pago → Archivo index.js

// Línea 18 aproximadamente

const MERCADOPAGO_PUBLIC_KEY = 'TU_PUBLIC_KEY_AQUÍ'

// Ejemplo:
const MERCADOPAGO_PUBLIC_KEY = 'TEST-7a1b2c3d-4e5f-6g7h-8i9j-0k1l2m3n4o5p'

Acción: Reemplaza TU_PUBLIC_KEY_DE_MERCADO_PAGO con tu Public Key real

Guardar Access Token (para después)

El Access Token lo usarás cuando configures tu backend. Por ahora solo guárdalo de forma segura.

Lo usarás en el PASO 6 cuando configures Firebase Functions, Vercel o tu backend.

¿Y ahora qué? Con la Public Key ya configurada, tu sitio está listo para comunicarse con Mercado Pago. El siguiente paso es crear tu backend para procesar los pagos.

¿Necesitas ayuda adicional?

Si tienes dudas o algo no está claro, podemos ayudarte paso a paso