Introducao ao Stripe - Implementacao de Pagamentos Online

O que voce vai aprender neste tutorial

✓ Configuracao da conta Stripe
✓ Checkout Session
✓ Processamento de Webhook
✓ Assinaturas
✓ Metodos de teste

Step 1: Configuracao

npm install stripe @stripe/stripe-js

// lib/stripe.ts
import Stripe from 'stripe';

export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: '2024-12-18.acacia',
});

Step 2: Criar Checkout Session

// app/api/checkout/route.ts
import { stripe } from '@/lib/stripe';
import { NextResponse } from 'next/server';

export async function POST(request: Request) {
  const { priceId } = await request.json();

  const session = await stripe.checkout.sessions.create({
    mode: 'payment',
    payment_method_types: ['card'],
    line_items: [
      {
        price: priceId,
        quantity: 1,
      },
    ],
    success_url: `${process.env.NEXT_PUBLIC_URL}/success?session_id={CHECKOUT_SESSION_ID}`,
    cancel_url: `${process.env.NEXT_PUBLIC_URL}/cancel`,
  });

  return NextResponse.json({ url: session.url });
}

Step 3: Lado do Cliente

'use client';
import { loadStripe } from '@stripe/stripe-js';

const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!);

export function CheckoutButton({ priceId }: { priceId: string }) {
  const handleClick = async () => {
    const res = await fetch('/api/checkout', {
      method: 'POST',
      body: JSON.stringify({ priceId }),
    });
    const { url } = await res.json();
    window.location.href = url;
  };

  return <button onClick={handleClick}>Comprar</button>;
}

Step 4: Processamento de Webhook

// app/api/webhook/route.ts
import { stripe } from '@/lib/stripe';
import { headers } from 'next/headers';

export async function POST(request: Request) {
  const body = await request.text();
  const sig = headers().get('stripe-signature')!;

  let event;
  try {
    event = stripe.webhooks.constructEvent(
      body,
      sig,
      process.env.STRIPE_WEBHOOK_SECRET!
    );
  } catch (err) {
    return new Response('Webhook Error', { status: 400 });
  }

  switch (event.type) {
    case 'checkout.session.completed':
      const session = event.data.object;
      // Processar pedido
      await handleSuccessfulPayment(session);
      break;
    case 'payment_intent.payment_failed':
      // Processar falha
      break;
  }

  return new Response('OK');
}

Step 5: Assinaturas

// Checkout para assinatura
const session = await stripe.checkout.sessions.create({
  mode: 'subscription',
  line_items: [
    {
      price: 'price_xxxxx', // ID do preco recorrente
      quantity: 1,
    },
  ],
  success_url: `${process.env.NEXT_PUBLIC_URL}/success`,
  cancel_url: `${process.env.NEXT_PUBLIC_URL}/cancel`,
});

// Cancelar assinatura
await stripe.subscriptions.cancel(subscriptionId);

Step 6: Customer Portal

// Criar sessao do portal do cliente
const session = await stripe.billingPortal.sessions.create({
  customer: customerId,
  return_url: `${process.env.NEXT_PUBLIC_URL}/account`,
});

// Redirecionar para session.url

Step 7: Testes

# Instalar Stripe CLI
brew install stripe/stripe-cli/stripe

# Login
stripe login

# Encaminhar Webhook
stripe listen --forward-to localhost:3000/api/webhook

Cartoes de teste:

• Sucesso: 4242 4242 4242 4242
• Falha: 4000 0000 0000 0002
• Requer autenticacao: 4000 0025 0000 3155

Resumo

Com Stripe voce pode implementar pagamentos seguros. Comece facilmente com Checkout Session e automatize o processamento de pedidos com Webhooks.