Langsung ke konten utama

Repositori GitHub

Minimal Next.js + Supabase + Dodo Payments boilerplate langganan

Demo Langsung

Jelajahi demo yang dideploy

​
Ikhtisar

Sebuah boilerplate siap produksi untuk langganan menggunakan Next.js 15, React 19, Supabase, Drizzle ORM, dan Dodo Payments. Ini dilengkapi dengan Google OAuth, checkout langganan, penanganan webhook, skema database, dan dasbor dasar.
Jika Anda hanya membutuhkan penangan rute untuk aplikasi yang sudah ada, lihat adaptor khusus: Next.js Adaptor dan Express Adaptor.

​
Prasyarat

  • Node.js 18+ (atau Bun 1.0+)
  • Proyek Supabase (URL, Kunci Anon, Kunci peran layanan, URL Database)
  • Akun Dodo Payments (Kunci API, rahasia Webhook)
  • Klien Google Cloud OAuth (ID Klien dan Rahasia)

​
Memulai dengan Cepat

1

Klon dan instal

git clone https://github.com/dodopayments/dodo-supabase-subscription-starter.git
cd dodo-supabase-subscription-starter
# choose one
bun install
# or
npm install
# or
pnpm install
2

Buat proyek Supabase

Buat proyek Supabase dan salin:
  • NEXT_PUBLIC_SUPABASE_URL
  • NEXT_PUBLIC_SUPABASE_ANON_KEY
  • SUPABASE_SERVICE_ROLE_KEY
  • DATABASE_URL (String koneksi)
3

Konfigurasi Google OAuth

Atur URI pengalihan ke: https://[your-project-ref].supabase.co/auth/v1/callback di Google Cloud, lalu aktifkan penyedia Google di Supabase Auth menggunakan Client ID dan Secret Anda.
4

Konfigurasi Dodo Payments

Hasilkan kunci API dan rahasia Webhook dari dasbor Dodo. Atur lingkungan ke test_mode saat mengembangkan.
5

Buat .env.local

# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://your-project-ref.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role

# Database
DATABASE_URL=postgresql://postgres:[password]@db.[project-ref].supabase.co:5432/postgres

# Dodo Payments
DODO_PAYMENTS_API_KEY=your-dodo-api-key
DODO_WEBHOOK_SECRET=your-webhook-secret
DODO_PAYMENTS_ENVIRONMENT=test_mode
Jangan pernah mengkomit rahasia. Gunakan variabel lingkungan di lingkungan deployment.
6

Provision skema database

bun run db:push
# or
npm run db:push
# or
pnpm run db:push
Tabel yang dibuat: users, subscriptions, payments.
7

Deploy fungsi webhook

# login (one-time)
bunx supabase login
# or
npx supabase login

# deploy the edge function
bun run deploy:webhook --project-ref [your-project-ref]
# or
npm run deploy:webhook -- --project-ref [your-project-ref]
# or
pnpm run deploy:webhook --project-ref [your-project-ref]
cURL
curl -X POST \
  'https://[your-project-ref].supabase.co/functions/v1/dodo-webhook' \
  -H 'Content-Type: application/json' \
  -H 'Dodo-Signature: <signature>' \
  -d '{"type":"payment.succeeded","data":{}}'
8

Tambahkan webhook di Dodo Payments

Atur URL endpoint ke:
https://[your-project-ref].supabase.co/functions/v1/dodo-webhook
Pilih peristiwa pembayaran dan langganan.
9

Buat produk dan fitur

Di dasbor Dodo → Produk → Buat Produk. Opsional tambahkan metadata:
{
  "features": ["Feature 1", "Feature 2", "Feature 3"]
}
UI harga membaca array features ini dan merendernya secara dinamis.
10

Jalankan server dev

bun run dev
# or
npm run dev
# or
pnpm run dev
Buka http://localhost:3000.

​
Apa yang disertakan

  • Autentikasi melalui Supabase (Google OAuth dikonfigurasi)
  • Checkout langganan melalui Dodo Payments
  • Fungsi Edge Supabase untuk webhook (dodo-webhook)
  • Skema dan migrasi Drizzle ORM
  • Dasbor dengan faktur, status langganan, dan fitur rencana
Simpan DODO_PAYMENTS_ENVIRONMENT sebagai test_mode sampai Anda menyelesaikan pengujian end-to-end.

​
File dan jalur kunci

supabase/functions/dodo-webhook/
  index.ts            # webhook handler verifying signatures
  deno.json           # permissions

​
Variabel lingkungan

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=
DATABASE_URL=

DODO_PAYMENTS_API_KEY=
DODO_WEBHOOK_SECRET=
DODO_PAYMENTS_ENVIRONMENT=test_mode|live_mode

GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

​
Verifikasi dan pemecahan masalah

  • Pastikan DODO_WEBHOOK_SECRET cocok dengan nilai dari dasbor Dodo
  • Konfirmasi Anda telah menerapkan fungsi dodo-webhook terbaru
  • Verifikasi nama header benar di fungsi Anda (Dodo-Signature)
  • Periksa sintaks DATABASE_URL dan egress jaringan Supabase
  • Tunggu ~2–3 menit setelah pembuatan proyek sebelum pengiriman pertama
  • URI pengalihan harus https://[ref].supabase.co/auth/v1/callback
  • Pastikan sama di Google Cloud dan penyedia Auth Supabase
Anda sekarang memiliki kerangka kerja SaaS langganan yang berfungsi dengan Supabase dan Dodo Payments.
Repositori asli dan langkah-langkah rinci: dodo-supabase-subscription-starter.