# Como integrar Pix com Lovable erro?

> Published 2026-09-26T19:50:12.762Z on https://www.crazystack.com.br/pt/p/como-integrar-pix-com-lovable-erro/
> Source video: https://www.youtube.com/watch?v=C2yzXBjxxw8

Seu app no Lovable coleta nome, e-mail e valor, mas o botão comprar ainda não gera cobrança. O que falta é integrar Pix com Lovable por meio de uma edge function que fale com a AbacatePay, e é exatamente isso que este tutorial resolve.

## Como funciona integrar Pix com Lovable

Integrar Pix com Lovable significa conectar um app gerado por prompt ao checkout da [AbacatePay](https://abacatepay.com), um gateway de pagamentos Pix brasileiro. O front coleta os dados do comprador, o backend cria a cobrança via API e o usuário é redirecionado para a página de pagamento.

O fluxo tem três camadas. O [Lovable](https://lovable.dev), construtor de apps por prompt com deploy automático, gera a interface e o código. O [Supabase](https://supabase.com), backend Postgres com auth e edge functions, executa a chamada à API. A AbacatePay processa a cobrança e devolve a URL do checkout.

Segundo Daniel Lima, CEO da AbacatePay no vídeo original, a requisição de criação de cobrança só é aceita do lado do servidor. Por isso você ativa o Lovable Cloud antes de escrever a integração, e não chama a API direto do navegador.

## O que você precisa antes de começar

Você precisa de três contas e dois links. Crie um projeto no Lovable, ative o Lovable Cloud (que roda sobre o Supabase tenha uma conta na AbacatePay com uma chave de API gerada no painel, em modo teste.

Defina também as duas URLs da cobrança:

- **returnUrl**: para onde o comprador volta ao clicar na seta de retorno dentro do checkout. Use o link do deploy do seu app quando ele existir.
- **completionUrl**: para onde o comprador vai depois de pagar. No vídeo, é um Google Docs com os prompts usados no tutorial.

Gere a chave em **API → nova chave de API** no painel da AbacatePay. A documentação oficial está em [docs.abacatepay.com](https://docs.abacatepay.com) e é a referência do formato exato do payload.

## Passo a passo do checkout Pix

O caminho do vídeo é reproduzível em uma tarde. A ordem importa, porque cada passo depende do anterior.

1. Crie a base do app no Lovable com um prompt descrevendo a loja e o formulário de compra (nome, e-mail, CPF, telefone e valor).
2. Copie o exemplo JavaScript do endpoint **criar cobrança** na documentação da AbacatePay e cole no prompt do Lovable, pedindo uma edge function HTTP que siga aquela estrutura.
3. Monte o payload com `method: PIX`, `frequency` (ONE_TIME ou MULTIPLE_TIMES), os produtos com preço **em centavos** (R$ 40,00 = 4000), `returnUrl` e `completionUrl`.
4. Cole a chave de API quando o Lovable pedir e mande gerar a função.
5. Teste o botão comprar, abra o console do navegador (F12) e confira se a resposta veio com status 200 e o campo `data.url`.

Um detalhe que evita retrabalho: ao receber a resposta, instrua o Lovable redirecionar o usuário em nova aba para `data.url`, o campo da resposta da API que contém o link do checkout. No vídeo, o app só funcionou após esse ajuste explícito.

## Erros comuns e como debugar

O primeiro erro do vídeo foi de payload: mandar `amount` direto no corpo, quando o modo checkout espera um array de `products` com nome, quantidade, preço em centavos e descrição. A tabela abaixo resume os tropeços que aparecem com mais frequência.

| Erro | Causa típica | Correção |
| --- | --- | --- |
| 500 na edge function | Código referencia `window.location` no servidor | Remover dependências de browser do código server-side |
| Payload rejeitado | Enviar `amount` em vez de `products` | Seguir o exemplo de checkout da documentação |
| Checkout não abre | App retorna o objeto inteiro, não a `data.url` | Redirecionar para o campo `url` dentro de `data` |
| Redirect errado ao concluir | `completionUrl` apontando para o projeto do Lovable | Fixar o link final (ex.: Google Docs) em cada requisição |

O erro 'Cannot read properties of undefined' surgiu porque o Lovable gerou código de navegador dentro da edge function, que roda em Deno e não tem `window`. Copiar o log do servidor e pedir a correção no próprio chat resolveu.

Uma dica do CEO: se o checkout não abre, verifique se o prompt não confundiu o endpoint de checkout com o de QR Code estático. São cobranças diferentes na API, e misturá-las quebra o redirecionamento.

## Do modo teste à produção

A migração de teste para produção na AbacatePay pede duas trocas e nenhuma mudança de código. Você substitui a chave de API de teste por uma de produção e atualiza a URL do webhook no painel.

Em modo desenvolvimento, o checkout oferece o botão 'simular pagamento', que confirma a cobrança sem dinheiro real. Foi assim que o vídeo validou o fluxo inteiro: a cobrança de R$ 13 apareceu como pendente no painel e passou a 'sucesso' após a simulação.

No painel você também acessa detalhes da transação, baixa o comprovante em PDF e reenvia ao cliente por e-mail ou WhatsApp. Isso vale para cobranças reais em produção, então já teste esse caminho antes de lançar.

## Perguntas frequentes

- **Preciso saber programar para integrar Pix com Lovable. O vídeo mostra o fluxo inteiro por prompt, colando exemplos da documentação da AbacatePay no chat do Lovable. Ajuda entender o console do navegador (F12) para ler erros e colar logs quando algo falhar.

- **Por que a cobrança precisa passar por uma edge function?** Porque a API da AbacatePay aceita a criação de cobranças apenas do lado do servidor. Chamar direto do navegador expõe sua chave de API e a requisição não é o fluxo recomendado.

- **O preço do produto vai em reais ou centavos?** Em centavos. Um produto de R$ 40,00 deve ser enviado como 4000 no campo de preço. Errar essa unidade é uma das causas clássicas de cobrança com valor errado.

- **A integração funciona para assinaturas ou cobranças recorrentes?** O endpoint mostrado aceita `frequency` ONE_TIME para pagamento único e MULTIPLE_TIMES para um link que pode ser pago várias vezes. Para recorrência automática, confira a documentação atual da AbacatePay antes de decidir.

- **Quais ferramentas aparecem no fluxo?** Lovable para gerar o app, Supabase Lovable Cloud para a edge function e AbacatePay como gateway Pix. Não há necessidade de servidor próprio nem de outro meio de pagamento para este tutorial.

[Source video](https://www.youtube.com/watch?v=C2yzXBjxxw8)