Template SaaS con Webhooks

Template SaaS en Next.js para productos que necesitan el estado de billing sincronizado desde Commet a su propia base de datos. Usa los webhooks de Commet como fuente de verdad para acceso del cliente, estado de suscripción, pagos, uso e historial local de eventos.

Stack: Next.js 16, Better Auth, Drizzle ORM, PostgreSQL, Commet SDK

Inicio Rápido#

git clone https://github.com/commet-labs/commet.git
cd commet/examples/webhooks
pnpm install
pnpm dev

Qué Incluye#

• Dos planes públicos con precios mensuales y anuales

• Tres funcionalidades medidas: Llamadas API, Almacenamiento, Envíos de Email

• Flujo de checkout y activación de suscripción

• Endpoint firmado para recibir eventos de Commet

• Registro idempotente de eventos antes de correr handlers críticos

• Sincronización de estado desde customer.state_changed

• Actualizaciones de uso desde usage.recorded

• Feed local para inspeccionar webhooks recibidos

• Dashboard con plan, estado, renovación y acceso por funcionalidades

Archivos Clave#

• app/api/webhooks/commet/route.ts — Endpoint firmado con log de eventos e idempotencia

• lib/billing/sync.ts — Sincronización del snapshot de estado del cliente

• lib/billing/usage.ts — Persistencia de eventos de uso

• lib/webhooks/events.ts — Registro local de eventos webhook

• app/(dashboard)/dashboard/events/page.tsx — Feed de webhooks

• app/(dashboard)/dashboard/page.tsx — Vista general del estado de billing

• app/pricing/page.tsx — Precios dinámicos desde planes de Commet

Setup en Producción#

• Agregar COMMET_API_KEY de tu organización sandbox o live de Commet

• Agregar COMMET_WEBHOOK_SECRET desde el endpoint de webhook en Commet

• Configurar NEXT_PUBLIC_APP_URL con la URL deployada

• Registrar /api/webhooks/commet como endpoint de webhook en Commet

• Suscribir el endpoint a eventos de customer, subscription, payment, invoice, checkout y usage

Más Información#

• Webhooks

• Modelos de Consumo

• Registrar Uso

• Portal de Cliente

Cloná el repo para arrancar, probá la demo en vivo o mirá el código en GitHub.