> ## Documentation Index
> Fetch the complete documentation index at: https://docs.jelou.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Tutorial: Implementando tu primer cobro desde WhatsApp

> Implementa tu primer cobro desde WhatsApp paso a paso con Mercado Pago.

En esta guía implementarás [pagos reales](/guides/integraciones/pagos/introduccion) dentro de una app conversacional en WhatsApp, usando **Mercado Pago**.

<Note>
  **Prerrequisitos:**

  * Un flujo en Brain Studio listo (por ejemplo, un AI Agent que maneje una venta).
  * Una cuenta de Mercado Pago con credenciales de prueba y producción.
</Note>

Usaremos una app de **tickets de tours**: el usuario elige tour, fecha, cantidad y correo; luego cobras con Mercado Pago en el mismo flujo.

Este tutorial tiene tres partes:

1. **Implementación en modo test (Desarrollo)**
2. **Prueba en WhatsApp**
3. **Paso a producción**

***

## 1. Implementación en modo test (Desarrollo)

### Video 1: Instalación y configuración en Brain Studio

<Frame caption="Video 1 – Instalación de Mercado Pago + seteo del nodo en modo test">
  <iframe className="mx-auto w-full max-w-3xl aspect-video rounded-xl" src="https://www.youtube.com/embed/UsZsRWtk55c" title="Video 1 – Instalación de Mercado Pago + seteo del nodo en modo test" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
</Frame>

<Note>
  El video puede mostrar una UI anterior. Para el flujo actual de instalación y campos del nodo, usa [Conectar en Brain Studio](/guides/integraciones/pagos/proveedores/mercado-pago/conectar-en-brain-studio) y [Uso y configuración](/guides/integraciones/pagos/proveedores/mercado-pago/uso-y-configuracion).
</Note>

***

### Instalar la integración y agregar el nodo

<Steps>
  <Step title="Obtener credenciales de prueba">
    Copia el **Access Token** de **Credenciales de prueba** en Mercado Pago.

    Sigue [Obtención de credenciales](/guides/integraciones/pagos/proveedores/mercado-pago/obtener-credenciales) si es tu primera vez.

    <Frame caption="Tus integraciones en Mercado Pago">
      <img src="https://mintcdn.com/jelouai/nCvuucLdA-_D8bXJ/assets/images/integraciones/pagos/dashboard-mercado-pago-tus-integraciones.png?fit=max&auto=format&n=nCvuucLdA-_D8bXJ&q=85&s=1d04d517b6a5ed72cce8485281e83501" alt="Dashboard Mercado Pago con Tus integraciones y acceso a Credenciales de prueba" width="2048" height="951" data-path="assets/images/integraciones/pagos/dashboard-mercado-pago-tus-integraciones.png" />
    </Frame>
  </Step>

  <Step title="Conectar Mercado Pago en Brain Studio">
    Instala la integración con credenciales de **prueba** siguiendo [Conectar en Brain Studio](/guides/integraciones/pagos/proveedores/mercado-pago/conectar-en-brain-studio).

    Puedes iniciar desde **Marketplace**, **Jelou Agent**, el nodo **Pagos** en Canvas o un **template**. El modal compartido tiene cuatro pasos: ambiente, API Key, IVA/moneda y confirmación.

    <Frame caption="Paso 2 del modal: ingresa tu API Key de Mercado Pago">
      <img src="https://mintcdn.com/jelouai/BJIoathnR7ANCT6N/assets/images/integraciones/pagos/mercado-pago-conectar-credenciales.png?fit=max&auto=format&n=BJIoathnR7ANCT6N&q=85&s=fc96c1df5cca0f83298a0a521ef0f80e" alt="Modal Conectar Mercado Pago con campo API Key" className="w-full max-w-2xl mx-auto rounded-xl shadow-sm" width="1024" height="566" data-path="assets/images/integraciones/pagos/mercado-pago-conectar-credenciales.png" />
    </Frame>
  </Step>

  <Step title="Agregar el nodo al flujo">
    Agrega **Mercado Pago** desde el nodo **Pagos** en Canvas y conéctalo después de que el usuario confirme la compra.

    Detalle paso a paso en [Uso y configuración — Agregar el nodo al Canvas](/guides/integraciones/pagos/proveedores/mercado-pago/uso-y-configuracion#agregar-el-nodo-al-canvas).
  </Step>
</Steps>

***

### Configurar el nodo (ejemplo tours)

Completa el mínimo para el caso de tours. Referencia completa de campos en [Uso y configuración](/guides/integraciones/pagos/proveedores/mercado-pago/uso-y-configuracion).

<Frame caption="Nodo Mercado Pago con pestaña Datos del pago y salidas en Canvas">
  <img src="https://mintcdn.com/jelouai/BJIoathnR7ANCT6N/assets/images/integraciones/pagos/mercado-pago-nodo-datos-del-pago.png?fit=max&auto=format&n=BJIoathnR7ANCT6N&q=85&s=e7fc93b248400116b7b157c74bb81ada" alt="Nodo Mercado Pago en Canvas con panel Datos del pago y salidas del nodo visibles" width="1024" height="772" data-path="assets/images/integraciones/pagos/mercado-pago-nodo-datos-del-pago.png" />
</Frame>

| Campo                    | Valor de ejemplo (tours)                                  |
| ------------------------ | --------------------------------------------------------- |
| Motivo de pago           | `Tour Valpo Walk - 2 ticket(s)` o variable del flujo      |
| Monto sujeto a impuestos | Neto del cobro (ej. `20168`)                              |
| Monto libre de impuestos | `0` si no aplica                                          |
| Email comprador          | Test user del país (ver abajo)                            |
| Moneda                   | Coherente con credenciales (ej. `CLP`)                    |
| Porcentaje de IVA        | Coherente con la instalación (ej. `19`)                   |
| Guardar respuesta        | `checkout_response` (opcional, para el ejemplo de código) |

<Note>
  En **Desarrollo**, el ambiente del nodo refleja credenciales de **prueba**. **Moneda** e **IVA** deben coincidir con lo definido al instalar la integración.
</Note>

***

### Emails de prueba por país (modo test)

En **Desarrollo**, Mercado Pago solo procesa pagos si **Email comprador** pertenece a un *test user* del **mismo país** que tus credenciales.

<AccordionGroup>
  <Accordion title="🇨🇱 Chile">
    ```txt theme={null}
    test_user_230383680042455079@testuser.com
    ```
  </Accordion>

  <Accordion title="🇵🇪 Perú">
    ```txt theme={null}
    test_user_6344464757279593247@testuser.com
    ```
  </Accordion>

  <Accordion title="🇨🇴 Colombia">
    ```txt theme={null}
    test_user_7600640374023229585@testuser.com
    ```
  </Accordion>

  <Accordion title="🇲🇽 México">
    ```txt theme={null}
    test_user_538195043292703001@testuser.com
    ```
  </Accordion>

  <Accordion title="🇧🇷 Brasil">
    ```txt theme={null}
    test_user_6254528388464257378@testuser.com
    ```
  </Accordion>

  <Accordion title="🇦🇷 Argentina">
    ```txt theme={null}
    test_user_1511189314898568640@testuser.com
    ```
  </Accordion>

  <Accordion title="🇺🇾 Uruguay">
    ```txt theme={null}
    test_user_1178397850300963040@testuser.com
    ```
  </Accordion>
</AccordionGroup>

<Check>
  Si el pago falla sin motivo claro en Desarrollo, revisa primero el email de prueba.
</Check>

***

### Conectar las salidas del nodo

El nodo expone cinco salidas. Conéctalas según el resultado que quieras manejar.

| Salida                      | Qué significa                                   | Qué conectar                              |
| --------------------------- | ----------------------------------------------- | ----------------------------------------- |
| **Mensaje de pago enviado** | Se envió el botón; aún no hay resultado de pago | AI Agent de soporte post-envío (opcional) |
| **Pago exitoso**            | Transacción aprobada                            | Código → Texto (comprobante)              |
| **Pago pendiente**          | En proceso o por acreditar                      | Texto informativo                         |
| **Pago fallido**            | Rechazado o no completado                       | Texto + reintento                         |
| **Error**                   | Error técnico o del proveedor                   | Manejo de error                           |

Descripción detallada y prompt de referencia para **Mensaje de pago enviado** en [Uso y configuración — Salidas del nodo](/guides/integraciones/pagos/proveedores/mercado-pago/uso-y-configuracion#salidas-del-nodo).

<Frame caption="Ejemplo de soporte post-envío del botón de pago en WhatsApp">
  <img src="https://mintcdn.com/jelouai/y5L6vahGrhMqbaUQ/assets/images/integraciones/pagos/soporte-post-cta-ejemplo-whatsapp.png?fit=max&auto=format&n=y5L6vahGrhMqbaUQ&q=85&s=7c82515588c84e1859c9f6ceb0f305c1" alt="Conversación en WhatsApp con botón de Mercado Pago y agente de soporte respondiendo una duda" className="mx-auto rounded-xl shadow-sm" style={{ maxWidth: '320px' }} width="1290" height="1134" data-path="assets/images/integraciones/pagos/soporte-post-cta-ejemplo-whatsapp.png" />
</Frame>

#### Ejemplo: normalizar **Pago exitoso**

Si usaste **Guardar respuesta** = `checkout_response`, puedes mapear lo mínimo a Context:

<Accordion title="Código de normalización (Pago exitoso)">
  ```javascript normalizar-pago.js theme={null}
  const r = $memory.getJson('checkout_response')
  if (!r) throw new Error('checkout_response no existe en memory.')

  const pl = r?.paymentLinkResponse
  if (!pl) throw new Error('checkout_response.paymentLinkResponse no existe (revisa memory).')

  const gw = pl.gateway_response || {}
  const md = pl.metadata || gw.metadata || {}

  const email = String(gw?.payer?.email || md.email || '')

  $context.set('pay_operation_id', String(gw.id || ''))
  $context.set('pay_amount', Number(pl.amount || 0))
  $context.set('pay_currency', String(pl.currency || 'CLP'))
  $context.set('pay_email', email)
  $context.set('pay_status', String(gw.status || 'approved'))
  $context.set(
    'pay_receipt',
    `Listo ✅ Pago aprobado.\n\nN° de operación Mercado Pago: ${String(gw.id || '')}`
  )
  ```
</Accordion>

En un nodo **Texto** conectado a **Pago exitoso**, muestra:

```txt theme={null}
{{$context.pay_receipt}}
```

<Frame caption="Flujo Pago exitoso → Código → Texto">
  <img src="https://mintcdn.com/jelouai/y5L6vahGrhMqbaUQ/assets/images/integraciones/pagos/pago-exitoso-codigo-texto-flujo.png?fit=max&auto=format&n=y5L6vahGrhMqbaUQ&q=85&s=4b616727705b1f014efec707101f090e" alt="Salida Pago exitoso conectada a nodo Código y luego a nodo Texto" className="w-full max-w-3xl mx-auto rounded-xl shadow-sm" width="1640" height="608" data-path="assets/images/integraciones/pagos/pago-exitoso-codigo-texto-flujo.png" />
</Frame>

***

## 2. Prueba en WhatsApp

Valida el flujo de punta a punta desde WhatsApp; el checkout abre en **WebView embebido**.

<Note>
  La prueba debe hacerse desde WhatsApp, no solo desde el preview del Canvas.
</Note>

### Video 2: Prueba desde WhatsApp

<Frame caption="Video 2 – Prueba desde celular con tarjetas de prueba">
  <video controls className="mx-auto w-full max-w-sm aspect-[9/16] rounded-xl" src="https://mintcdn.com/jelouai/Hhs56n83OOsOa4Lx/assets/videos/integraciones/pagos/paso-2-prueba-whatsapp.mp4?fit=max&auto=format&n=Hhs56n83OOsOa4Lx&q=85&s=5ee89f78ebe8400b4bd5d6dccea6a664" data-path="assets/videos/integraciones/pagos/paso-2-prueba-whatsapp.mp4">
    Tu navegador no soporta la reproducción de videos.
  </video>
</Frame>

<Steps>
  <Step title="Abrir Probar en Canvas">
    En la esquina superior derecha, haz clic en **Probar**.

    <Frame caption="Panel Probar proyecto">
      <img src="https://mintcdn.com/jelouai/y5L6vahGrhMqbaUQ/assets/images/integraciones/pagos/probar-proyecto-whatsapp.png?fit=max&auto=format&n=y5L6vahGrhMqbaUQ&q=85&s=51e4b7d84aa11f0169c1ce83cf448097" alt="Panel Probar proyecto con opción de prueba desde WhatsApp" className="mx-auto rounded-xl shadow-sm" style={{ maxWidth: '280px' }} width="708" height="1338" data-path="assets/images/integraciones/pagos/probar-proyecto-whatsapp.png" />
    </Frame>
  </Step>

  <Step title="Iniciar conversación de prueba">
    Ingresa tu número, envía el primer mensaje y completa el flujo hasta el botón de pago.
  </Step>

  <Step title="Completar el pago en el WebView">
    Abre el botón de pago, usa una tarjeta de prueba del país correspondiente y verifica por qué **salida** continúa el flujo.
  </Step>
</Steps>

<Note>
  En algunos países, la app de Mercado Pago puede intentar abrirse desde el WebView. En Desarrollo, ciérrala y vuelve a WhatsApp para usar la tarjeta de prueba.
</Note>

***

### Tarjetas de prueba por país

Mercado Pago publica tarjetas por país para simular aprobación o rechazo:

<AccordionGroup>
  <Accordion title="🇨🇱 Chile">
    [Tarjetas de prueba (Chile)](https://www.mercadopago.cl/developers/es/docs/checkout-bricks/integration-test/test-cards)
  </Accordion>

  <Accordion title="🇵🇪 Perú">
    [Tarjetas de prueba (Perú)](https://www.mercadopago.com.pe/developers/es/docs/your-integrations/test/cards)
  </Accordion>

  <Accordion title="🇨🇴 Colombia">
    [Tarjetas de prueba (Colombia)](https://www.mercadopago.com.co/developers/es/docs/your-integrations/test/cards)
  </Accordion>

  <Accordion title="🇲🇽 México">
    [Tarjetas de prueba (México)](https://www.mercadopago.com.mx/developers/es/docs/shopify/additional-content/your-integrations/test/cards)
  </Accordion>

  <Accordion title="🇧🇷 Brasil">
    [Tarjetas de prueba (Brasil)](https://www.mercadopago.com.br/developers/es/docs/checkout-api-payments/additional-content/your-integrations/test/cards)
  </Accordion>

  <Accordion title="🇦🇷 Argentina">
    [Tarjetas de prueba (Argentina)](https://www.mercadopago.com.ar/developers/es/docs/subscriptions/additional-content/your-integrations/test/cards)
  </Accordion>

  <Accordion title="🇺🇾 Uruguay">
    [Tarjetas de prueba (Uruguay)](https://www.mercadopago.com.uy/developers/es/docs/subscriptions/additional-content/your-integrations/test/cards)
  </Accordion>
</AccordionGroup>

<Check>
  Prueba al menos un caso **aprobado** y uno **rechazado** para validar **Pago exitoso** y **Pago fallido**.
</Check>

***

## 3. Paso a producción

Pasar a producción implica credenciales productivas y datos reales del comprador. La experiencia en WhatsApp se mantiene igual.

### Video 3: Configuración en producción + pago real

<Frame caption="Video 3 – Paso a producción y pago real">
  <iframe className="mx-auto w-full max-w-3xl aspect-video rounded-xl" src="https://www.youtube.com/embed/1sSVuPfs4rI" title="Video 3 – Paso a producción y pago real" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
</Frame>

<Note>
  Para el flujo actual de **Pasar a producción**, sigue [Conectar en Brain Studio](/guides/integraciones/pagos/proveedores/mercado-pago/conectar-en-brain-studio#pasar-a-producción).
</Note>

<Steps>
  <Step title="Obtener Access Token productivo">
    En Mercado Pago, copia el **Access Token** de **Credenciales de producción**.
  </Step>

  <Step title="Pasar a producción">
    Inicia **Pasar a producción** desde la pestaña **Avanzado** del nodo en Canvas o desde **Mercado Pago** en Marketplace.

    Ingresa el Access Token productivo y confirma **IVA** y **moneda**.
  </Step>

  <Step title="Usar datos reales en el nodo">
    Reemplaza el test user en **Email comprador** por el email real capturado en tu flujo.

    Verifica que **Moneda** y **Porcentaje de IVA** sigan siendo coherentes con la instalación productiva.
  </Step>

  <Step title="Probar un cobro real de bajo monto">
    Completa un pago real y confirma **Pago exitoso**, el número de operación y el registro en tu dashboard de Mercado Pago.
  </Step>
</Steps>

<Warning>
  Las transacciones en producción consumen créditos de Brain Studio por intento, además de las comisiones del proveedor.
</Warning>

***

## Próximos pasos

<CardGroup cols={3}>
  <Card title="Uso y configuración" href="/guides/integraciones/pagos/proveedores/mercado-pago/uso-y-configuracion" icon="gear">
    Referencia completa del sidepanel y salidas del nodo.
  </Card>

  <Card title="Cobertura y precios" href="/guides/integraciones/pagos/proveedores/mercado-pago/cobertura-y-precios" icon="globe">
    Países, medios de pago y tarifas referenciales.
  </Card>

  <Card title="Otros proveedores" href="/guides/integraciones/pagos/proveedores" icon="credit-card">
    Catálogo de proveedores por país.
  </Card>
</CardGroup>