Langsung ke konten utama

​
Ikhtisar

Boilerplate Astro minimal menyediakan titik awal yang siap digunakan untuk mengintegrasikan Dodo Payments dengan aplikasi Astro 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 Astro 5 dengan TypeScript, Tailwind CSS 4, dan adapter @dodopayments/astro.

​
Fitur

  • Pengaturan Cepat - Mulai dalam waktu kurang dari 5 menit
  • Integrasi Pembayaran - Alur checkout yang sudah dikonfigurasi menggunakan @dodopayments/astro
  • UI Modern - Halaman harga bertema gelap yang bersih dengan Tailwind CSS
  • Penangan Webhook - Titik akhir webhook siap pakai untuk peristiwa pembayaran
  • Portal Pelanggan - Manajemen langganan dengan satu klik
  • TypeScript - Sepenuhnya diketik dengan tipe minimal dan terfokus
  • Checkout Terisi - Menunjukkan pengiriman data pelanggan untuk meningkatkan UX

​
Prasyarat

Sebelum Anda mulai, pastikan Anda memiliki:
  • Node.js versi LTS (diperlukan untuk Astro 5)
  • Akun Dodo Payments (untuk mengakses API dan Kunci Webhook dari dasbor)

​
Memulai dengan Cepat

1

Kloning Repositori

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

Instal Dependensi

npm install
3

Dapatkan Kredensial API

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

Konfigurasi Variabel Lingkungan

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:4321/
DODO_PAYMENTS_ENVIRONMENT=test_mode
Jangan pernah mengkomit file .env Anda ke kontrol versi. Ini sudah termasuk dalam .gitignore.
5

Tambahkan Produk Anda

Perbarui src/lib/products.ts dengan ID produk aktual Anda 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

Jalankan Server Pengembangan

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

​
Struktur Proyek

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

​
Kustomisasi

​
Perbarui Informasi Produk

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

​
Isi Data Pelanggan

Di src/components/ProductCard.astro, ganti nilai yang dikodekan dengan data pengguna aktual Anda: 
customer: {
  name: "John Doe",
  email: "[email protected]",
},

​
Perbarui Portal Pelanggan

Di src/components/Header.astro, ganti ID pelanggan yang dikodekan dengan ID pelanggan aktual dari sistem otentikasi atau database Anda: 
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 peristiwa webhook di src/pages/api/webhook.ts:
  • onSubscriptionActive - Dipicu ketika langganan menjadi aktif
  • onSubscriptionCancelled - Dipicu ketika langganan dibatalkan
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

Boilerplate ini menggunakan output statis dengan rendering sesuai permintaan untuk rute API. Anda perlu menginstal adapter untuk platform penyebaran Anda:
PlatformPanduan
VercelDeploy to Vercel
NetlifyDeploy to Netlify
CloudflareDeploy to Cloudflare
Lihat panduan penyebaran Astro untuk semua platform.

​
Perbarui URL Webhook

Setelah penyebaran, perbarui URL webhook Anda di Dasbor Dodo Payments: 
https://your-domain.com/api/webhook
Juga ingat untuk memperbarui variabel lingkungan DODO_PAYMENTS_WEBHOOK_KEY di lingkungan produksi Anda agar sesuai dengan kunci penandatanganan webhook untuk domain yang telah Anda deploy.

​
Pemecahan Masalah

Hapus node_modules dan instal ulang dependensi:
rm -rf node_modules package-lock.json
npm install
Penyebab umum:
  • ID produk tidak valid - verifikasi bahwa itu ada di dasbor Dodo Anda
  • Kunci API atau pengaturan lingkungan yang salah di .env
  • Periksa konsol browser dan terminal untuk kesalahan
Untuk pengujian lokal, gunakan ngrok untuk mengekspos server Anda:
ngrok http 4321
Perbarui URL webhook di dasbor Dodo Anda ke URL ngrok. Ingat untuk memperbarui file .env Anda dengan kunci verifikasi webhook yang benar.
Ganti CUSTOMER_ID yang dikodekan di src/components/Header.astro dengan ID pelanggan aktual dari dasbor Dodo Anda.Atau integrasikan sistem otentikasi dan database Anda untuk mengambil ID pelanggan secara dinamis.
Boilerplate ini menggunakan output statis dengan rute API sesuai permintaan. Anda perlu menginstal adapter untuk penyebaran:Lihat panduan penyebaran Astro untuk detailnya.

​
Pelajari Lebih Lanjut

​
Dukungan

Butuh bantuan dengan boilerplate?