Como integrar Pix com Lovable erro?

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, 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, construtor de apps por prompt com deploy automático, gera a interface e o código. O Supabase, 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 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