Webhooks SaaS Template

Next.js SaaS template for products that need billing state synced from Commet into their own database. It uses Commet webhooks as the source of truth for customer access, subscription status, payments, usage, and local event history.

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

Quick Start#

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

What's Included#

• Two public plans with monthly and yearly prices

• Three metered features: API Calls, Storage, Email Sends

• Checkout and subscription activation flow

• Signed webhook endpoint for Commet events

• Idempotent event recording before critical handlers run

• Customer state sync from customer.state_changed

• Usage updates from usage.recorded

• Local webhook feed for inspecting delivered events

• Dashboard showing plan, status, renewal, and feature access

Key Files#

• app/api/webhooks/commet/route.ts — Signed webhook endpoint with event logging and idempotency

• lib/billing/sync.ts — Customer state snapshot sync

• lib/billing/usage.ts — Usage event persistence

• lib/webhooks/events.ts — Local webhook event recording

• app/(dashboard)/dashboard/events/page.tsx — Webhook feed

• app/(dashboard)/dashboard/page.tsx — Billing state overview

• app/pricing/page.tsx — Dynamic pricing from Commet plans

Production Setup#

• Add COMMET_API_KEY from your Commet sandbox or live organization

• Add COMMET_WEBHOOK_SECRET from the Commet webhook endpoint

• Set NEXT_PUBLIC_APP_URL to your deployed app URL

• Register /api/webhooks/commet as a Commet webhook endpoint

• Subscribe the endpoint to customer, subscription, payment, invoice, checkout, and usage events

Learn More#

• Webhooks

• Consumption Models

• Track Usage

• Customer Portal

Clone the repo to start, check the live demo, or browse the source on GitHub.