Como integrar Mercado Pago na Lovable: Pix, cartão e webhook

Assista ao Vídeo:

Neste tutorial da LovAcademy, você aprende como integrar o Mercado Pago a um projeto criado na Lovable para receber pagamentos e liberar o acesso do usuário automaticamente. A demonstração prática usa uma cobrança de R$ 1 via Pix, mas a página de pagamento também pode ser preparada para cartão de crédito e o mesmo fluxo pode evoluir para assinaturas recorrentes.

Como funciona a integração Mercado Pago + Lovable

O fluxo criado no vídeo é simples: o usuário preenche os dados de cadastro, é levado para uma página de pagamento, realiza a cobrança e só recebe acesso ao dashboard depois que o Mercado Pago confirma a aprovação. Essa confirmação acontece por webhook, permitindo que a plataforma atualize o status do pagamento e libere o acesso automaticamente.

O que você precisa antes de começar

Você precisa de uma conta ativa no Mercado Pago — CPF ou CNPJ — e de um projeto na Lovable. Também será necessário criar ou acessar uma aplicação no Mercado Pago para obter as credenciais de produção, especialmente o Access Token usado na integração.

1. Crie a página de pagamento na Lovable

No projeto demonstrado, a Lovable recebe a instrução para criar uma página personalizada de pagamento. A lógica definida é: primeiro o usuário informa seus dados de cadastro; depois é direcionado ao checkout; após a confirmação do pagamento, o cadastro é efetivamente liberado e o usuário pode acessar o dashboard.

2. Defina Pix, cartão ou outro modelo de cobrança

A página criada pode oferecer Pix e cartão de crédito. Para simplificar o teste, o tutorial segue apenas com Pix e define uma cobrança única de R$ 1 para liberar o cadastro. Em um projeto real, você pode alterar o valor e adaptar a mesma lógica para planos, produtos ou assinaturas.

3. Crie a integração no Mercado Pago e pegue o Access Token

Dentro da conta do Mercado Pago, acesse a área de negócios e integrações. Se ainda não existir uma aplicação, crie uma nova e selecione o modelo de Checkout Transparente. Depois, abra as credenciais de produção e copie o Access Token solicitado pela Lovable. Essa credencial é sensível e não deve ser exposta publicamente no frontend do projeto.

4. Conecte o Mercado Pago à Lovable

Com o Access Token em mãos, retorne ao projeto e conclua a conexão solicitada pela Lovable. No exemplo, a plataforma cria a integração para gerar o QR Code do Pix e o código Pix Copia e Cola, além de preparar o fluxo que consulta e atualiza o status do pagamento.

5. Configure o webhook para liberar o acesso automaticamente

O webhook é a parte que transforma a cobrança em automação. A URL de notificação gerada para o projeto deve ser configurada no Mercado Pago. Quando o pagamento é aprovado, o Mercado Pago envia a atualização para o sistema, que registra o status e libera o dashboard do usuário sem precisar de conferência manual.

6. Publique o projeto e faça um pagamento de teste

No teste mostrado no vídeo, o projeto é publicado, uma nova conta é criada e a página gera uma cobrança Pix de R$ 1. Depois do pagamento pelo QR Code, o status muda para pagamento aprovado e o acesso é liberado imediatamente. O valor recebido também aparece na conta do Mercado Pago, confirmando que o fluxo completo funcionou.

Como adaptar para assinatura recorrente

O mesmo raciocínio pode ser usado para cobrança recorrente. Em vez de pedir uma cobrança única para liberar a conta, descreva na Lovable que o projeto terá assinatura e defina o comportamento esperado para ativação, renovação e eventual bloqueio do usuário. O vídeo também sugere criar um painel interno para acompanhar quem pagou, quando pagou, valores e situação da assinatura.

Boas práticas para usar Mercado Pago na Lovable

Separe credenciais de produção de qualquer dado exibido ao usuário, valide o webhook antes de liberar recursos pagos e mantenha um registro do status das cobranças no banco. Também vale testar os estados de pagamento pendente, aprovado e recusado antes de colocar o fluxo em produção para clientes reais.

Perguntas frequentes

É possível usar Pix no Mercado Pago com Lovable?

Sim. O tutorial demonstra a geração de uma cobrança Pix com QR Code e Pix Copia e Cola dentro do fluxo de cadastro criado na Lovable.

Posso aceitar cartão de crédito também?

Sim. A página de pagamento criada no tutorial contempla Pix e cartão de crédito, embora o teste completo mostrado no vídeo siga apenas com Pix.

Como o sistema sabe que o Pix foi pago?

A confirmação é feita pelo webhook do Mercado Pago. Quando a cobrança muda para aprovada, o sistema recebe a notificação e pode liberar automaticamente o acesso do usuário.

Dá para cobrar assinatura mensal?

Sim. O fluxo pode ser adaptado para cobrança recorrente, com regras específicas para ativação e acompanhamento da assinatura dentro do aplicativo.

Conclusão

A integração Mercado Pago + Lovable permite criar um checkout conectado ao seu produto sem depender de liberação manual. No exemplo da aula, o usuário se cadastra, paga via Pix, o webhook confirma a cobrança e o dashboard é liberado automaticamente. A partir dessa base, você pode evoluir para cartão, assinaturas, notificações e um painel completo de pagamentos.