Langsung ke konten utama

​
Ikhtisar

Boilerplate Next.js minimal menyediakan titik awal yang siap digunakan untuk mengintegrasikan Dodo Payments dengan aplikasi Next.js Anda. Template ini mencakup sesi checkout, penanganan webhook, portal pelanggan, dan komponen UI modern untuk membantu Anda mulai menerima pembayaran dengan cepat.
Boilerplate ini menggunakan Next.js 16 App Router dengan TypeScript, Tailwind CSS 4, dan adapter @dodopayments/nextjs.

​
Fitur

  • Quick Setup - Mulai dalam waktu kurang dari 5 menit
  • Payment Integration - Alur checkout yang sudah dikonfigurasi sebelumnya menggunakan @dodopayments/nextjs
  • Modern UI - Halaman harga bergaya gelap yang bersih dengan Tailwind CSS
  • Webhook Handler - Endpoint webhook siap pakai untuk kejadian pembayaran
  • Customer Portal - Manajemen langganan dengan satu klik
  • TypeScript - Sepenuhnya bertipe dengan tipe yang minimal dan fokus
  • Pre-filled Checkout - Menunjukkan cara menyertakan data pelanggan untuk meningkatkan pengalaman pengguna

​
Prasyarat

Sebelum Anda mulai, pastikan Anda memiliki:
  • Node.js 20.9+ (diperlukan untuk Next.js 16)
  • Akun Dodo Payments (untuk mengakses API dan Kunci Webhook dari dasbor)

​
Memulai dengan Cepat

1

Clone the Repository

git clone https://github.com/dodopayments/dodo-nextjs-minimal-boilerplate.git
cd dodo-nextjs-minimal-boilerplate
2

Install Dependencies

npm install
3

Get API Credentials

Daftar di Dodo Payments dan dapatkan kredensial Anda dari dasbor:
Pastikan Anda berada dalam Mode Uji saat sedang mengembangkan!
4

Configure Environment Variables

Buat file .env di direktori root:
cp .env.example .env
Perbarui nilai dengan kredensial Dodo Payments Anda:
DODO_PAYMENTS_API_KEY=your_api_key_here
DODO_PAYMENTS_WEBHOOK_KEY=your_webhook_signing_key_here
DODO_PAYMENTS_RETURN_URL=http://localhost:3000
DODO_PAYMENTS_ENVIRONMENT=test_mode
Jangan pernah meng-commit file .env ke kontrol versi. File tersebut sudah termasuk dalam .gitignore.
5

Add Your Products

Perbarui src/lib/products.ts dengan ID produk Anda yang sebenarnya dari Dodo Payments:
export const products: Product[] = [
  {
    product_id: "pdt_001", // Replace with your product ID
    name: "Basic Plan",
    description: "Get access to basic features and support",
    price: 9999, // in cents
    features: [
      "Access to basic features",
      "Email support",
      "1 Team member",
      "Basic analytics",
    ],
  },
  // ... add more products
];
6

Run the Development Server

npm run dev
Buka http://localhost:3000 untuk melihat halaman harga Anda!

​
Struktur Proyek

src/
├── app/
│   ├── api/
│   │   ├── checkout/          # Checkout session handler
│   │   ├── customer-portal/   # Customer portal redirect
│   │   └── webhook/           # Webhook event handler
│   ├── components/
│   │   ├── Footer.tsx         # Reusable footer
│   │   ├── Header.tsx         # Navigation header
│   │   └── ProductCard.tsx    # Product pricing card
│   ├── globals.css            # Global styles
│   ├── layout.tsx             # Root layout
│   └── page.tsx               # Pricing page (home)
└── lib/
    └── products.ts            # Product definitions

​
Kustomisasi

​
Perbarui Informasi Produk

Edit src/lib/products.ts untuk mengubah:
  • ID Produk (dari dasbor Dodo Anda)
  • Harga
  • Fitur
  • Deskripsi

​
Isi Data Pelanggan Secara Otomatis

Di src/app/components/ProductCard.tsx, ganti nilai yang di-hardcode dengan data pengguna Anda yang sebenarnya: 
customer: {
  name: "John Doe",
  email: "john@example.com",
},

​
Perbarui Portal Pelanggan

Di src/app/components/Header.tsx, ganti ID pelanggan yang di-hardcode: 
const CUSTOMER_ID = "cus_001"; // Replace with actual customer ID
Anda dapat menyelesaikan pembelian uji untuk mendapatkan ID pelanggan untuk pengujian.

​
Peristiwa Webhook

Boilerplate ini menunjukkan penanganan dua kejadian webhook di src/app/api/webhook/route.ts:
  • onSubscriptionActive - Dipicu ketika langganan menjadi aktif
  • onPaymentSucceeded - Dipicu ketika pembayaran berhasil
Tambahkan logika bisnis Anda di dalam penangan ini: 
onSubscriptionActive: async (payload) => {
  // Grant access to your product
  // Update user database
  // Send welcome email
},
Tambahkan lebih banyak peristiwa webhook sesuai kebutuhan. Untuk pengembangan lokal, Anda dapat menggunakan alat seperti ngrok untuk membuat terowongan aman ke server lokal Anda dan menggunakannya sebagai URL webhook Anda.

​
Penyebaran

​
Bangun untuk Produksi

npm run build
npm start

​
Deploy ke Vercel

[ Deploy dengan Vercel ](https://vercel.com/new/clone?repository-url=https://github.com/dodopayments/dodo-nextjs-minimal-boilerplate) Jangan lupa untuk menambahkan variabel lingkungan Anda di dasbor Vercel!

​
Perbarui URL Webhook

Setelah penyebaran, perbarui URL webhook Anda di Dasbor Dodo Payments: 
https://example.com/api/webhook

​
Pemecahan Masalah

Hapus node_modules dan pasang ulang dependensi:
rm -rf node_modules package-lock.json
npm install
Penyebab umum:
  • ID produk tidak valid - pastikan ID tersebut ada di dasbor Dodo Anda
  • Kunci API atau pengaturan lingkungan yang salah di .env
  • Periksa konsol browser dan terminal untuk melihat kesalahan
Untuk pengujian lokal, gunakan ngrok untuk mengekspos server Anda:
ngrok http 3000
Perbarui URL webhook di dasbor Dodo Anda ke URL ngrok. Ingat untuk memperbarui file .env Anda dengan kunci verifikasi webhook yang benar.

​
Pelajari Lebih Lanjut

​
Dukungan

Butuh bantuan dengan boilerplate?