Integração com Stripe

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

O Lovable agora permite que você configure o Stripe inteiramente através do chat.

Configuração automática via chat (recomendado)
Após conectar o Supabase e salvar sua Chave Secreta do Stripe via Adicionar Chave de API, apenas descreva o que você precisa:

• “Adicionar três níveis de assinatura …”
• “Criar um checkout único para meu e-book por $29”
  O Lovable gera as edge functions de checkout/portal, tabelas de banco de dados com RLS e botões de UI—sem codificação manual ou webhooks, a menos que você os solicite.

• Para vendas únicas, certifique-se de que seu carrinho ou página de produto já funciona.
• 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 via chat tanto para assinaturas quanto para pagamentos únicos.
• Nunca cole sua Chave Secreta do Stripe no chat. Configure-a através do formulário Adicionar Chave de API no chat.
• Webhooks são opcionais. O Lovable depende de polling de edge-function, a menos que você solicite webhooks.
• Faça debug no Console do Navegador → Network/Errors, Supabase → Edge Functions → Logs e Stripe Dashboard → Logs.
• Sempre teste no Modo de Teste do Stripe, depois faça o deploy.

Requisitos

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

• O projeto deve estar conectado ao Supabase. Saiba mais sobre o Supabase
• Uma conta do Stripe com produtos devidamente configurados.
• Um frontend e backend funcionais:
  • Para vendas de produtos individuais, certifique-se de que um carrinho de compras e uma página de checkout estejam funcionais.
  • Para assinaturas, configure funcionalidades de login e diferentes níveis de preços.

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

Configuração de Pagamento Stripe (Fluxo de Chat Sem Código)

O Lovable agora gera toda a lógica do Stripe para você. Uma vez que sua Chave Secreta do Stripe esteja configurada através do formulário Adicionar Chave de API no chat e seu projeto esteja conectado ao Supabase, simplesmente diga ao Lovable o que você precisa no chat—não são necessários Links de Pagamento manuais.

1. Passo 1

   Prepare seu projeto

   • Supabase conectado
   • Chave Secreta do Stripe adicionada através do formulário Adicionar Chave de API no chat
   • (Opcional) Preços ou IDs de produtos à mão
2. Passo 2

   Exemplos:

   • Criar um checkout único para meu “Curso Digital” por $29
   • Configurar um plano Premium anual por $99, vinculado ao id de cada usuário
3. Passo 3

   Revisar e aplicar O Lovable auto-estrutura as Edge Functions, tabelas do banco de dados e componentes de UI (todos vinculados ao id do usuário no Supabase). Verifique a prévia, então clique em Aplicar para fazer o deploy.

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

Integração Avançada: Webhooks & Supabase

Para estruturas de pagamento complexas como assinaturas e acesso baseado em funções, o Lovable recomenda usar o Supabase para lidar com segurança com a integração do Stripe. Isso permite o manuseio adequado de webhooks, gerenciamento de assinaturas e controle de acesso baseado em funções com base nos níveis de pagamento.

A Edge Function que lida com as mudanças necessárias na conta do usuário deve ser configurada automaticamente pela IA.

1. Conectar Supabase ao Seu Projeto

   Começar é simples. O 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 do Lovable.
   2. Siga as instruções para vincular seu projeto.
   3. Uma vez conectado, o Supabase permite processamento seguro de pagamentos, gerenciamento de assinaturas, manuseio de webhooks, armazenamento de dados do cliente e tratamento de erros.
2. Processamento Seguro de Pagamentos

   Inicie o processo solicitando ao Lovable:

   Vamos conectar o Stripe ao meu projeto. Começaremos com o processamento seguro de pagamentos.

   O Lovable 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 mudanças.

3. Implementar Edge Functions para Webhooks

   Edge Functions no Supabase atuam como pequenas funções serverless de alta performance que executam próximo ao 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. Testando Sua Integração

   • Use o Modo de Teste do Stripe para testar pagamentos com segurança.
   • Detalhes do cartão de teste:
     • Número do Cartão: 4242 4242 4242 4242
     • Qualquer data de expiração futura
     • Qualquer CVC de 3 dígitos
   • Faça o deploy do seu app—a integração do Stripe não funciona no modo de preview.

Depuração e Solução de Problemas

Verificar Logs do Console

1. Passo 1

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

2. Passo 2

   Procure por erros e revise os logs de eventos do webhook.

3. Passo 3

   Copie as mensagens de erro e peça assistência de depuração ao Lovable.

Revisar Logs do Supabase

1. Passo 1

   Vá para o Painel do Supabase

2. Passo 2

   Edge Functions

3. Passo 3

   Logs para verificar erros de webhook.

Verificar Eventos de Webhook no Stripe

1. Passo 1

   Navegue até o Painel do Stripe

2. Passo 2

   Logs de webhook

3. Passo 3

   Confirme que o Stripe está enviando dados corretamente.

Usar o Modo Chat do Lovable

1. Passo 1

   Mude para o modo chat e faça perguntas de acompanhamento ao Lovable.

2. Passo 2

   Faça perguntas de acompanhamento ao Lovable.

3. Passo 3

   Use o Método do Pato de Borracha e explique seu problema passo a passo para esclarecer o problema.