Lo que vas a construir

Una pagina de pago donde tus usuarios pueden comprar productos o suscribirse a tu servicio con tarjeta de credito de forma segura. Implementaras Stripe Checkout que se encarga de toda la complejidad: formulario de pago, validacion de tarjetas, cumplimiento PCI y webhooks para confirmar pagos. Al terminar, tendras un flujo de pago completo con paginas de exito y cancelacion, listo para recibir dinero real (empezando en modo test).

Setup

Crear cuenta en stripe.com
Copiar API keys (test mode)
pnpm add stripe @stripe/stripe-js

Paso 1: Pídele a una IA la integración

Necesito integrar pagos con Stripe:
- Checkout Session para pago único
- Webhook para confirmar pago
- Página de éxito/cancelación
- Next.js App Router
- TypeScript

Dame el código completo.

API Route

import Stripe from 'stripe'

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)

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

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

  return Response.json({ url: session.url })
}

Botón de pago

const handleCheckout = async () => {
  const { url } = await fetch('/api/checkout', {
    method: 'POST',
    body: JSON.stringify({ priceId: 'price_xxx' })
  }).then(r => r.json())

  window.location.href = url
}

Próximo paso

→ Emails Transaccionales

Pagos con Stripe