> ## 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 sua primeira cobrança pelo WhatsApp

> Implemente sua primeira cobrança pelo WhatsApp passo a passo com o Mercado Pago.

Neste guia você implementará [pagamentos reais](/pt/guias/integracoes/pagamentos/introducao) em um app conversacional no WhatsApp, usando o **Mercado Pago**.

<Note>
  **Pré-requisitos:**

  * Um fluxo no Brain Studio pronto (por exemplo, um AI Agent que gerencie uma venda).
  * Uma conta Mercado Pago com credenciais de teste e produção.
</Note>

Usaremos um app de **tickets de tours**: o usuário escolhe tour, data, quantidade e email; depois você cobra com Mercado Pago no mesmo fluxo.

Este tutorial tem três partes:

1. **Implementação em modo teste (Desenvolvimento)**
2. **Teste no WhatsApp**
3. **Passar para produção**

***

## 1. Implementação em modo teste (Desenvolvimento)

### Vídeo 1: Instalação e configuração no Brain Studio

<Frame caption="Vídeo 1 – Instalação do Mercado Pago + configuração do nó em modo teste">
  <iframe className="mx-auto w-full max-w-3xl aspect-video rounded-xl" src="https://www.youtube.com/embed/UsZsRWtk55c" title="Vídeo 1 – Instalação do Mercado Pago + configuração do nó em modo teste" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
</Frame>

<Note>
  O vídeo pode mostrar uma UI anterior. Para o fluxo atual de instalação e campos do nó, use [Conectar no Brain Studio](/pt/guias/integracoes/pagamentos/provedores/mercado-pago/conectar-no-brain-studio) e [Uso e configuração](/pt/guias/integracoes/pagamentos/provedores/mercado-pago/uso-e-configuracao).
</Note>

***

### Instalar a integração e adicionar o nó

<Steps>
  <Step title="Obter credenciais de teste">
    Copie o **Access Token** de **Credenciais de teste** no Mercado Pago.

    Siga [Obtendo credenciais](/pt/guias/integracoes/pagamentos/provedores/mercado-pago/obter-credenciais) se for sua primeira vez.

    <Frame caption="Suas integrações no 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 com Suas integrações e Credenciais de teste" width="2048" height="951" data-path="assets/images/integraciones/pagos/dashboard-mercado-pago-tus-integraciones.png" />
    </Frame>
  </Step>

  <Step title="Conectar Mercado Pago no Brain Studio">
    Instale a integração com credenciais de **teste** seguindo [Conectar no Brain Studio](/pt/guias/integracoes/pagamentos/provedores/mercado-pago/conectar-no-brain-studio).

    Você pode iniciar pelo **Marketplace**, **Jelou Agent**, nó **Pagamentos** no Canvas ou um **template**. O modal compartilhado tem quatro passos: ambiente, API Key, IVA/moeda e confirmação.

    <Frame caption="Passo 2 do modal: insira sua API Key do 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 com 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="Adicionar o nó ao fluxo">
    Adicione **Mercado Pago** pelo nó **Pagamentos** no Canvas e conecte-o após o usuário confirmar a compra.

    Detalhe passo a passo em [Uso e configuração — Adicionar o nó ao Canvas](/pt/guias/integracoes/pagamentos/provedores/mercado-pago/uso-e-configuracao#adicionar-o-nó-ao-canvas).
  </Step>
</Steps>

***

### Configurar o nó (exemplo tours)

Preencha o mínimo para o caso de tours. Referência completa em [Uso e configuração](/pt/guias/integracoes/pagamentos/provedores/mercado-pago/uso-e-configuracao).

<Frame caption="Nó Mercado Pago com aba Dados do pagamento e saídas no 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="Nó Mercado Pago no Canvas com painel Dados do pagamento e saídas visíveis" width="1024" height="772" data-path="assets/images/integraciones/pagos/mercado-pago-nodo-datos-del-pago.png" />
</Frame>

| Campo                    | Valor de exemplo (tours)                                 |
| ------------------------ | -------------------------------------------------------- |
| Motivo do pagamento      | `Tour Valpo Walk - 2 ticket(s)` ou variável do fluxo     |
| Valor sujeito a impostos | Valor líquido (ex. `20168`)                              |
| Valor isento de impostos | `0` se não aplicável                                     |
| Email do comprador       | Usuário de teste do país (veja abaixo)                   |
| Moeda                    | Coerente com credenciais (ex. `CLP`)                     |
| Percentual de IVA        | Coerente com a instalação (ex. `19`)                     |
| Salvar resposta          | `checkout_response` (opcional, para o exemplo de código) |

<Note>
  Em **Desenvolvimento**, o ambiente do nó reflete credenciais de **teste**. **Moeda** e **IVA** devem coincidir com o definido na instalação.
</Note>

***

### Emails de teste por país (modo teste)

Em **Desenvolvimento**, o Mercado Pago só processa pagamentos se **Email do comprador** pertencer a um *usuário de teste* do **mesmo país** das credenciais.

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

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

  <Accordion title="🇨🇴 Colômbia">
    ```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="🇺🇾 Uruguai">
    ```txt theme={null}
    test_user_1178397850300963040@testuser.com
    ```
  </Accordion>
</AccordionGroup>

<Check>
  Se o pagamento falhar sem motivo claro em Desenvolvimento, verifique primeiro o email de teste.
</Check>

***

### Conectar as saídas do nó

O nó expõe cinco saídas. Conecte-as conforme o resultado que deseja tratar.

| Saída                             | Significado                        | Conectar                                 |
| --------------------------------- | ---------------------------------- | ---------------------------------------- |
| **Mensagem de pagamento enviada** | Botão enviado; ainda sem resultado | AI Agent de suporte pós-envio (opcional) |
| **Pagamento bem-sucedido**        | Transação aprovada                 | Código → Texto (comprovante)             |
| **Pagamento pendente**            | Em processamento                   | Texto informativo                        |
| **Pagamento falhou**              | Rejeitado ou não concluído         | Texto + nova tentativa                   |
| **Erro**                          | Erro técnico ou do provedor        | Tratamento de erro                       |

Descrição detalhada e prompt de referência em [Uso e configuração — Saídas do nó](/pt/guias/integracoes/pagamentos/provedores/mercado-pago/uso-e-configuracao#saídas-do-nó).

<Frame caption="Exemplo de suporte pós-envio do botão no 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="Conversa no WhatsApp com botão Mercado Pago e agente de suporte" 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>

#### Exemplo: normalizar **Pagamento bem-sucedido**

Se usou **Salvar resposta** = `checkout_response`, mapeie o mínimo para Context:

<Accordion title="Código de normalização (Pagamento bem-sucedido)">
  ```javascript normalizar-pagamento.js theme={null}
  const r = $memory.getJson('checkout_response')
  if (!r) throw new Error('checkout_response does not exist in memory.')

  const pl = r?.paymentLinkResponse
  if (!pl) throw new Error('checkout_response.paymentLinkResponse does not exist (check 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',
    `Pronto ✅ Pagamento aprovado.\n\nN° de operação Mercado Pago: ${String(gw.id || '')}`
  )
  ```
</Accordion>

Em um nó **Texto** conectado a **Pagamento bem-sucedido**, exiba:

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

<Frame caption="Fluxo Pagamento bem-sucedido → 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="Saída Pagamento bem-sucedido conectada a nó Código e depois 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. Teste no WhatsApp

Valide o fluxo de ponta a ponta pelo WhatsApp; o checkout abre em **WebView embarcado**.

<Note>
  O teste deve ser feito pelo WhatsApp, não apenas pelo preview do Canvas.
</Note>

### Vídeo 2: Teste pelo WhatsApp

<Frame caption="Vídeo 2 – Teste no celular com cartões de teste">
  <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">
    Seu navegador não suporta reprodução de vídeos.
  </video>
</Frame>

<Steps>
  <Step title="Abrir Testar no Canvas">
    No canto superior direito, clique em **Testar**.

    <Frame caption="Painel Testar projeto">
      <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="Painel Testar projeto com opção de teste pelo 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 conversa de teste">
    Insira seu número, envie a primeira mensagem e complete o fluxo até o botão de pagamento.
  </Step>

  <Step title="Completar o pagamento no WebView">
    Abra o botão de pagamento, use um cartão de teste do país correspondente e verifique por qual **saída** o fluxo continua.
  </Step>
</Steps>

<Note>
  Em alguns países, o app Mercado Pago pode tentar abrir a partir do WebView. Em Desenvolvimento, feche-o e volte ao WhatsApp para usar o cartão de teste.
</Note>

***

### Cartões de teste por país

O Mercado Pago publica cartões por país para simular aprovação ou rejeição:

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

  <Accordion title="🇵🇪 Peru">
    [Cartões de teste (Peru)](https://www.mercadopago.com.pe/developers/es/docs/your-integrations/test/cards)
  </Accordion>

  <Accordion title="🇨🇴 Colômbia">
    [Cartões de teste (Colômbia)](https://www.mercadopago.com.co/developers/es/docs/your-integrations/test/cards)
  </Accordion>

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

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

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

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

<Check>
  Teste pelo menos um caso **aprovado** e um **rejeitado** para validar **Pagamento bem-sucedido** e **Pagamento falhou**.
</Check>

***

## 3. Passar para produção

Passar para produção implica credenciais produtivas e dados reais do comprador. A experiência no WhatsApp permanece a mesma.

### Vídeo 3: Configuração em produção + pagamento real

<Frame caption="Vídeo 3 – Passar para produção e pagamento real">
  <iframe className="mx-auto w-full max-w-3xl aspect-video rounded-xl" src="https://www.youtube.com/embed/1sSVuPfs4rI" title="Vídeo 3 – Passar para produção e pagamento real" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
</Frame>

<Note>
  Para o fluxo atual de **Passar para produção**, siga [Conectar no Brain Studio](/pt/guias/integracoes/pagamentos/provedores/mercado-pago/conectar-no-brain-studio#passar-para-produção).
</Note>

<Steps>
  <Step title="Obter Access Token produtivo">
    No Mercado Pago, copie o **Access Token** de **Credenciais de produção**.
  </Step>

  <Step title="Passar para produção">
    Inicie **Passar para produção** pela aba **Avançado** do nó no Canvas ou pela página **Mercado Pago** no Marketplace.

    Insira o Access Token produtivo e confirme **IVA** e **moeda**.
  </Step>

  <Step title="Usar dados reais no nó">
    Substitua o usuário de teste em **Email do comprador** pelo email real capturado no fluxo.

    Verifique se **Moeda** e **Percentual de IVA** permanecem coerentes com a instalação produtiva.
  </Step>

  <Step title="Testar uma cobrança real de valor baixo">
    Complete um pagamento real e confirme **Pagamento bem-sucedido**, o número da operação e o registro no dashboard Mercado Pago.
  </Step>
</Steps>

<Warning>
  Transações em produção consomem créditos do Brain Studio por tentativa, além das taxas do provedor.
</Warning>

***

## Próximos passos

<CardGroup cols={3}>
  <Card title="Uso e configuração" href="/pt/guias/integracoes/pagamentos/provedores/mercado-pago/uso-e-configuracao" icon="gear">
    Referência completa do sidepanel e saídas do nó.
  </Card>

  <Card title="Cobertura e preços" href="/pt/guias/integracoes/pagamentos/provedores/mercado-pago/cobertura-e-precos" icon="globe">
    Países, meios de pagamento e tarifas de referência.
  </Card>

  <Card title="Outros provedores" href="/pt/guias/integracoes/pagamentos/provedores" icon="credit-card">
    Catálogo de provedores por país.
  </Card>
</CardGroup>