Adicionar checkout do Stripe (pagamento único e assinaturas)
Realizar pagamentos reais — compras únicas e assinaturas recorrentes.
Quando usar
Quando você estiver pronto para cobrar por um produto, serviço, plano ou depósito de reserva.
Antes de começar
- Uma conta no Stripe — gratuita para criar em stripe.com. Mantenha-se no modo de teste durante a construção; você não precisa de uma conta comercial ativa para experimentar.
- Seus produtos no Stripe: crie cada item que você vende (Painel do Stripe → Produtos), único ou recorrente, e copie o ID de cada preço (começa com
price_). - Sua chave secreta do Stripe (Painel → Desenvolvedores → Chaves de API, a de teste que começa com
sk_test_). Cole-a onde seu construtor armazena segredos — nunca em uma página ou em uma mensagem de chat. - Os logins já devem estar funcionando (os clientes precisam de uma conta para ter uma assinatura).
O prompt
Esses prompts funcionam melhor em inglês — cole-os como estão, mesmo em páginas traduzidas.
Add Stripe payments to my app. Outcome: customers can pay securely for [what I'm selling — e.g., a product / a plan / a booking deposit]. Requirements: - A checkout for [one-time payment of $X / a subscription at $X per month / both]. - A pricing section with [these plans and prices] and a clear call to action. - After payment: a confirmation page, a receipt by email, and mark the order/subscription as active. - Use Stripe Checkout so I never store card details myself. Must-haves: keep all Stripe secret keys on the server (never in the frontend), verify each payment with a Stripe webhook before granting access, and handle declined cards, cancellations and refunds gracefully. Set it up in Stripe TEST mode first. When done, tell me how to test a payment and exactly what to change to go live.
Já está criando? Cole isto no seu projeto. Começando do zero? Abra uma conta gratuita em um criador compatível abaixo.
Crie em
O que isto cria
- Uma página de preços listando o que você vende
- Um fluxo de checkout que direciona o pagamento para a própria página segura do Stripe
- Uma página de agradecimento após o pagamento bem-sucedido
- Um registro de quem pagou pelo quê, para que seu aplicativo saiba o status do usuário
Confira se funcionou
Cole o prompt, espere a construção terminar e então confirme estes pontos — em linguagem simples, sem verificações técnicas:
- Clicar em um botão de compra abre a página de pagamento do Stripe com o preço e a moeda corretos
- Pagar com o cartão de teste do Stripe (4242 4242 4242 4242, qualquer data futura, qualquer CVC) conclui e retorna você para a página de agradecimento
- O pagamento aparece nos pagamentos de teste do seu painel do Stripe
- Seu aplicativo agora trata essa conta como um cliente pagante (o status foi alterado)
- Cancelar na tela de pagamento retorna ao site sem cobrar ou desbloquear nada
Faltou algo? É normal — peça em uma mensagem curta de acompanhamento em vez de rodar o prompt inteiro de novo.
Próximos passos
Deixe os clientes gerenciarem suas próprias assinaturas
Assim que os pagamentos recorrentes estiverem funcionando
Add a "Manage my subscription" button on the account page that sends the customer to Stripe's own customer portal, where they can update their card, change plan or cancel, and then returns them to my site. Show their current plan and next billing date on the account page.
Você saberá que funcionou quando: Um cliente de teste pagante pode cancelar pelo portal, e seu aplicativo mostra o status atualizado posteriormente.
Bloqueie o conteúdo pago corretamente
Logo após o checkout funcionar
Make sure paid-only content is genuinely restricted to paying customers: check that someone with a free account, and someone not logged in at all, cannot reach it by typing the address directly. The restriction must be enforced on the data itself, not only by hiding buttons. Show non-paying visitors a short upgrade message instead.
Você saberá que funcionou quando: Uma conta de teste gratuita vê a mensagem de upgrade e não consegue acessar o conteúdo pago por nenhuma rota que você possa encontrar.
Envie um e-mail de boas-vindas estilo recibo
Uma vez que os pagamentos estejam confiáveis
After a successful payment, send the customer a short friendly email confirming what they bought, what they now have access to, and how to get help. Send me a notification of the sale as well.
Você saberá que funcionou quando: Uma compra de teste gera um e-mail para o cliente e uma notificação para você.
Fique atento a
- O modo de teste parece idêntico ao modo real. Antes do lançamento, troque a chave de teste pela real e realize um pagamento real você mesmo — muitas pessoas descobrem no primeiro cliente que nunca alternaram.
- O sucesso do pagamento e o acesso são duas coisas diferentes. Confirme se o status da conta realmente mudou após o pagamento; se não mudou, diga exatamente isso em uma mensagem de acompanhamento, em vez de executar o prompt novamente.
- Nunca coloque sua chave secreta em uma página ou prompt. Ela vai apenas na área de segredos do seu construtor. Se ela vazar, troque-a imediatamente no Stripe.
- Reembolsos, impostos e faturas ficam no Stripe, não no seu aplicativo — não tente reconstruí-los.
Notas por plataforma
Conecte o Stripe primeiro em todas as três. O Base44 configura o Stripe por prompt com um sandbox de teste; o Lovable gera automaticamente as funções e tabelas do Stripe; o v0 usa a integração de marketplace do Stripe. Sempre teste no modo de teste do Stripe antes de ir para o ambiente de produção.
Gaste menos créditos
Toda plataforma cobra pelo trabalho que a IA dela faz — então o hábito mais barato é pensar antes de construir. Estas seis regras cortam a maior parte do desperdício, qualquer que seja a plataforma.
- Planeje primeiro em um chat gratuito. Esboce tudo no ChatGPT, Claude ou Gemini — páginas, recursos, o que cada formulário coleta, como deve ficar. Pensar lá é grátis; pensar dentro de um builder é cobrado.
- Comece com um prompt escrito, não com uma frase. "Faça um site para mim" é a frase mais cara na construção com IA. Um primeiro prompt completo — como os deste site — economiza dezenas de rodadas de correção.
- Não tenha preguiça dos detalhes. Cada detalhe omitido volta como uma correção que você paga. Nome do negócio, cores, cada página, cada campo de formulário, o que acontece após o envio — coloque tudo no primeiro prompt.
- Depois, uma mudança por mensagem. "Arrume o cabeçalho, e o formulário, e as cores" gera um emaranhado que custa mais para desfazer do que economizou.
- Travou? Pare de remendar. Se a mesma correção falhar umas três vezes, não mande uma quarta — descreva o estado final desejado da seção inteira em uma mensagem nova.
- Comece grátis. Faça upgrade quando precisar de mais. Use a cota gratuita para criar e explorar sua primeira versão. Faça upgrade quando precisar de mais uso ou de recursos pagos, e confira os custos de serviços conectados antes de lançar.
Os prompts desta página foram escritos para fazer a maior parte desse trabalho por você — é esse o objetivo deles.
Leia o guia completoPlaybooks relacionados
Prompts relacionados
Revisado em: 2026-07-27