Chuyển đến nội dung chính

Kho lưu trữ GitHub

Bộ khởi động đăng ký Next.js + Supabase + Dodo Payments tối thiểu

Demo trực tiếp

Khám phá bản demo đã triển khai

​
Tổng quan

Một bộ khởi động sẵn sàng cho sản xuất cho các đăng ký sử dụng Next.js 15, React 19, Supabase, Drizzle ORM và Dodo Payments. Nó đi kèm với Google OAuth, thanh toán đăng ký, xử lý webhook, sơ đồ cơ sở dữ liệu và một bảng điều khiển cơ bản.
Nếu bạn chỉ cần các trình xử lý tuyến đường cho một ứng dụng hiện có, hãy xem các bộ điều hợp chuyên dụng: Next.js Adaptor và Express Adaptor.

​
Điều kiện tiên quyết

  • Node.js 18+ (hoặc Bun 1.0+)
  • Dự án Supabase (URL, Anon key, Service role key, Database URL)
  • Tài khoản Dodo Payments (API key, Webhook secret)
  • Google Cloud OAuth client (Client ID và Secret)

​
Bắt đầu nhanh

1

Nhân bản và cài đặt

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

Tạo dự án Supabase

Tạo một dự án Supabase và sao chép:
  • NEXT_PUBLIC_SUPABASE_URL
  • NEXT_PUBLIC_SUPABASE_ANON_KEY
  • SUPABASE_SERVICE_ROLE_KEY
  • DATABASE_URL (Chuỗi kết nối)
3

Cấu hình Google OAuth

Đặt URI chuyển hướng thành: https://[your-project-ref].supabase.co/auth/v1/callback trong Google Cloud, sau đó kích hoạt nhà cung cấp Google trong Supabase Auth bằng Client ID và Secret của bạn.
4

Cấu hình Dodo Payments

Tạo một API key và Webhook secret từ bảng điều khiển Dodo. Đặt môi trường thành test_mode trong quá trình phát triển.
5

Tạo .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
Không bao giờ cam kết bí mật. Sử dụng biến môi trường trong các môi trường triển khai.
6

Cung cấp sơ đồ cơ sở dữ liệu

bun run db:push
# or
npm run db:push
# or
pnpm run db:push
Các bảng đã được tạo: users, subscriptions, payments.
7

Triển khai chức năng 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

Thêm webhook trong Dodo Payments

Đặt URL điểm cuối thành:
https://[your-project-ref].supabase.co/functions/v1/dodo-webhook
Chọn các sự kiện thanh toán và đăng ký.
9

Tạo sản phẩm và tính năng

Trong bảng điều khiển Dodo → Sản phẩm → Tạo sản phẩm. Tùy chọn thêm siêu dữ liệu:
{
  "features": ["Feature 1", "Feature 2", "Feature 3"]
}
Giao diện người dùng giá cả đọc mảng features này và hiển thị nó một cách động.
10

Chạy máy chủ phát triển

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

​
Những gì được bao gồm

  • Xác thực qua Supabase (Google OAuth đã được cấu hình)
  • Thanh toán đăng ký qua Dodo Payments
  • Chức năng Edge của Supabase cho webhook (dodo-webhook)
  • Sơ đồ và di chuyển Drizzle ORM
  • Bảng điều khiển với hóa đơn, trạng thái đăng ký và tính năng kế hoạch
Giữ DODO_PAYMENTS_ENVIRONMENT như test_mode cho đến khi bạn hoàn thành các bài kiểm tra end-to-end.

​
Các tệp và đường dẫn chính

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

​
Biến môi trường

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=

​
Xác minh và khắc phục sự cố

  • Đảm bảo DODO_WEBHOOK_SECRET khớp với giá trị từ bảng điều khiển Dodo
  • Xác nhận bạn đã triển khai chức năng dodo-webhook mới nhất
  • Kiểm tra tên tiêu đề là chính xác trong chức năng của bạn (Dodo-Signature)
  • Kiểm tra cú pháp DATABASE_URL và mạng Supabase egress
  • Chờ ~2–3 phút sau khi tạo dự án trước khi đẩy lần đầu
  • URI chuyển hướng phải là https://[ref].supabase.co/auth/v1/callback
  • Đảm bảo điều tương tự trong Google Cloud và nhà cung cấp Supabase Auth
Bạn hiện có một mô hình SaaS đăng ký hoạt động với Supabase và Dodo Payments.
Kho lưu trữ gốc và các bước chi tiết: dodo-supabase-subscription-starter.