Stripe Para Desenvolvedores: Cobranca Recorrente do Zero

Pagamento Recorrente e o Coracao de Todo SaaS

Se voce quer monetizar um produto digital, precisa de cobranca recorrente. O Stripe e a melhor opcao: API clara, documentacao excelente e suporte a Real (BRL).

Fluxo Completo

1. Usuario clica "Assinar"


2. Frontend chama sua API


3. API cria sessao de checkout no Stripe


4. Usuario preenche dados do cartao


5. Stripe envia webhook confirmando pagamento


6. Sua API atualiza o plano do usuario

Configuracao

npm install stripe @stripe/stripe-js @stripe/react-stripe-js

Criando a Sessao de Checkout

// API Route: /api/checkout
import { stripe } from '@/lib/stripe';

export async function POST(req) {
  const session = await stripe.checkout.sessions.create({
    customer: customerId,
    mode: 'subscription',
    ui_mode: 'embedded',
    line_items: [{
      price_data: {
        currency: 'brl',
        unit_amount: 4990, // R$ 49,90
        recurring: { interval: 'month' },
        product_data: { name: 'Plano PRO' }
      },
      quantity: 1
    }],
    return_url: 'https://seusite.com/assinatura?session_id={CHECKOUT_SESSION_ID}'
  });
return Response.json({ clientSecret: session.client_secret });
}

Webhook: O Coracao da Integracao

Webhooks sao notificacoes que o Stripe envia quando algo acontece. Os eventos essenciais:

• checkout.session.completed: pagamento concluido


• customer.subscription.updated: assinatura alterada


• customer.subscription.deleted: cancelamento


• invoice.payment_failed: falha no pagamento

Portal do Cliente

O Stripe tem um portal pronto para o cliente gerenciar sua assinatura (trocar cartao, cancelar, ver faturas):

const session = await stripe.billingPortal.sessions.create({
  customer: stripeCustomerId,
  return_url: 'https://seusite.com/conta'
});

Dicas Importantes

• Sempre verifique a assinatura do webhook com stripe.webhooks.constructEvent


• Use modo teste ate ter tudo funcionando perfeitamente


• Trate invoice.payment_failed enviando email ao usuario


• Nunca confie apenas no frontend — sempre valide no backend via webhook

Checkout Transparente

Em vez de redirecionar para o Stripe, voce pode embutir o checkout direto na sua pagina usando EmbeddedCheckout. E exatamente isso que fazemos na Cafe Inovacao — o formulario de pagamento aparece na propria pagina de assinatura.