Integração com Stripe

Como configurar pagamentos no seu app usando nossa integração com Stripe

Agora o Lovable permite que você configure o Stripe inteiramente via chat.

Configuração automática orientada por chat (recomendado)
Depois de conectar o Supabase e salvar sua Stripe Secret Key via Add API Key, basta descrever o que você precisa:

• “Adicione três níveis de assinatura …”
• “Crie um checkout único para meu e‑book por US$ 29”
  O Lovable gera as funções de borda de checkout / portal, tabelas de banco de dados com RLS e botões de UI — sem necessidade de código manual ou webhooks, a menos que você peça.

• Para vendas avulsas, certifique-se de que seu carrinho ou página de produto já esteja funcionando.
• Para assinaturas, confirme que o Supabase Auth está configurado para que o Lovable possa vincular clientes do Stripe ao id de cada usuário.

​

Principais pontos

• Use o fluxo orientado por chat tanto para assinaturas quanto para pagamentos pontuais.
• Nunca cole sua Stripe Secret Key no chat. Configure-a pelo formulário Add API Key dentro do chat.
• Webhooks são opcionais. A Lovable usa sondagem por funções na Borda, a menos que você solicite webhooks.
• Para depurar, use Browser Console → Network/Errors, Supabase → Edge Functions → Registros de log e Stripe Dashboard → Registros de log.
• Sempre teste no Stripe Test Mode e só então publique.

​

Requisitos

Antes de integrar o Stripe, certifique-se de que os seguintes pré-requisitos tenham sido atendidos:

• O projeto deve estar conectado ao Supabase. Saiba mais sobre Supabase
• Uma conta Stripe com produtos configurados corretamente.
• Um frontend e backend funcionando:
  • Para vendas de produtos individuais, certifique-se de que o carrinho de compras e a página de checkout estejam funcionando.
  • Para assinaturas, configure a funcionalidade de login e diferentes planos de preços.

Atenção A integração com Stripe não funciona na Pré-visualização. Para testar a integração, lembre-se de Publicar. Você também deve se certificar de estar no modo de teste do Stripe ao experimentar a funcionalidade. Ao testar pagamentos, o número do cartão 4242 4242 4242 4242, quaisquer 3 dígitos como CVC e qualquer data futura funcionarão como um cartão.

​

Configuração de pagamentos com Stripe (fluxo de chat sem código)

Lovable agora gera toda a lógica do Stripe para você. Depois que sua Stripe Secret Key estiver configurada pelo formulário Add API Key no chat e seu projeto estiver conectado ao Supabase, basta dizer ao Lovable no chat o que você precisa — sem precisar criar Payment Links manualmente.

1. Etapa 1

   Prepare seu projeto

   • Supabase conectado
   • Stripe Secret Key adicionada pelo formulário Add API Key no chat
   • (Opcional) Preços ou IDs de produto à mão
2. Etapa 2

   Exemplos:

   • Crie um checkout de pagamento único para meu “Digital Course” por $29
   • Configure um plano Premium anual por $99, vinculado ao ID de cada usuário
3. Etapa 3

   Revise e aplique O Lovable cria automaticamente a estrutura das Edge Functions, tabelas de banco de dados e componentes de UI (todos vinculados ao ID do usuário no Supabase). Confira a pré-visualização e, em seguida, clique em Apply para publicar.

• As assinaturas devem sempre estar vinculadas ao id do usuário autenticado no Supabase para garantir acesso seguro baseado em funções (roles).

​

Integração avançada: Webhooks & Supabase

Para estruturas de pagamento complexas, como assinaturas e acesso baseado em função (role-based), a Lovable recomenda usar o Supabase para lidar com a integração com o Stripe de forma segura. Isso permite o tratamento adequado de webhooks, gerenciamento de assinaturas e controle de acesso baseado em função de acordo com os níveis de pagamento.

A Função de borda que trata das alterações necessárias na conta do usuário deve ser configurada automaticamente pela IA.

1. Conectar o Supabase ao seu Projeto

   Começar é simples. A Lovable torna a conexão com o Supabase fácil com uma integração nativa integrada:

   1. Clique no botão Supabase no canto superior direito da Lovable.
   2. Siga as instruções para vincular seu projeto.
   3. Depois de conectado, o Supabase habilita o processamento seguro de pagamentos, o gerenciamento de assinaturas, o tratamento de webhooks, o armazenamento de dados de clientes e o tratamento de erros.
2. Processamento de pagamento seguro

   Inicie o processo enviando um Prompt de IA para a Lovable:

   Vamos conectar o Stripe ao meu projeto. Vamos começar com o processamento de pagamento seguro.

   A Lovable irá gerar o esquema SQL necessário para lidar com pagamentos. Isso inclui tabelas de banco de dados para usuários, assinaturas e pagamentos. Você pode revisar e personalizar essas tabelas para atender às necessidades específicas do seu produto antes de aplicar as alterações.

3. Implementar Edge Functions para Webhooks

   Edge Functions no Supabase atuam como pequenas funções serverless de alto desempenho que rodam perto do usuário, garantindo respostas rápidas. Elas ajudam a processar eventos de webhook, como confirmações de pagamento, antes de atualizar o banco de dados.
4. Adicionar chaves de API com segurança

   Para integrar o Stripe com segurança, evite compartilhar sua chave de API diretamente no chat. Em vez disso:

   
5. Testar sua integração

   • Use o Test Mode do Stripe para testar pagamentos com segurança.
   • Dados de cartão de teste:
     • Número do cartão: 4242 4242 4242 4242
     • Qualquer data de validade futura
     • Qualquer CVC de 3 dígitos
   • Publique seu app — a integração com Stripe não funciona em modo de pré-visualização.

​

Depuração e solução de problemas

Verificar registros de log do Console

1. Etapa 1

   Abra as Ferramentas do desenvolvedor (clique com o botão direito > Inspecionar > Console no Chrome).

2. Etapa 2

   Procure erros e analise os registros de log de eventos de webhook.

3. Etapa 3

   Copie as mensagens de erro e peça ajuda ao Lovable para depurar o problema.

Revisar registros de log do Supabase

1. Etapa 1

   Vá para o Supabase Dashboard

2. Etapa 2

   Edge Functions

3. Etapa 3

   Logs para verificar erros de webhook.

Verificar eventos de webhook no Stripe

1. Etapa 1

   Navegue até o Stripe Dashboard

2. Etapa 2

   Registros de log de webhooks

3. Etapa 3

   Confirme que o Stripe está enviando os dados corretamente.

Usar o Lovable Chat Mode

1. Etapa 1

   Mude para o Chat mode e faça perguntas de acompanhamento ao Lovable.

2. Etapa 2

   Faça perguntas de acompanhamento adicionais ao Lovable.

3. Etapa 3

   Use o Método Rubber Duck e explique seu problema passo a passo para esclarecer o problema.