Billing SDK

Billing SDK adalah sekumpulan komponen billing React open source, dengan CLI yang menghubungkan proyek Anda ke Dodo Payments. CLI membuat rute API, React hook, dan client Dodo Payments untuk framework Anda, serta menambahkan komponen seperti tabel harga dan meter penggunaan.

Ikhtisar

Billing SDK mencakup:

Komponen React: Komponen billing siap pakai dan dapat disesuaikan untuk aplikasi React.
Tooling CLI: Antarmuka command-line yang menginisialisasi proyek dan menambahkan komponen.
Dukungan Framework: Template untuk Next.js, Express.js, Hono, Fastify, NestJS, dan React.
Payment Provider: Integrasi penuh dengan Dodo Payments.

Memulai dengan Cepat

Untuk menyiapkan Billing SDK di proyek yang sudah ada, jalankan CLI dari root proyek:

Install the CLI

Jalankan CLI dengan npx, tanpa menginstalnya:

npx @billingsdk/cli --help

Atau instal secara global untuk penggunaan yang sering. Instalasi global menambahkan perintah billingsdk, misalnya billingsdk init:

npm install -g @billingsdk/cli

Initialize a Project

Jalankan penyiapan interaktif untuk menambahkan billing ke proyek Anda:

npx @billingsdk/cli init

CLI meminta Anda memilih:

Framework Anda: Next.js, Express.js, React, Hono, Fastify, atau NestJS. CLI mendeteksi framework Anda dan menandainya sebagai terdeteksi.
Payment provider Anda: pilih Dodo Payments.

Add Components

Tambahkan komponen penagihan individu ke proyek Anda:

npx @billingsdk/cli add pricing-table-one
npx @billingsdk/cli add subscription-management

Framework yang Didukung

Billing SDK memiliki template Dodo Payments untuk setiap framework berikut:

Framework	Dodo Payments
Next.js	Ya
Express.js	Ya
Hono	Ya
React	Ya
Fastify	Ya
NestJS	Ya

Perintah CLI

`@billingsdk/cli init`

init menyiapkan billing di proyek Anda: CLI menginstal template framework dengan integrasi Dodo Payments, serta dependency yang diperlukan template. Apa yang dilakukan:

Pemilihan Framework: Anda memilih framework dan payment provider.
Instalasi Template: CLI mengunduh template untuk framework dan provider Anda dari registry Billing SDK, lalu menginstal file-nya.
Manajemen Dependency: CLI menginstal dependency template, seperti dodopayments, standardwebhooks, dan zod, dengan npm, pnpm, Yarn, atau Bun.
Pembuatan File: CLI menulis file konfigurasi dan kode boilerplate. Untuk Express.js, Fastify, Hono, dan NestJS, CLI menulisnya di bawah src/.

Contoh:

npx @billingsdk/cli init

Untuk menjalankan init tanpa prompt, teruskan --framework, --provider, dan --yes, misalnya npx @billingsdk/cli init --framework nextjs --provider dodopayments --yes. Tambahkan --dry-run untuk mencantumkan file tanpa menulisnya, --no-install untuk melewati instalasi dependency, atau --package-manager untuk memilih npm, pnpm, yarn, atau bun.

`@billingsdk/cli add`

add menginstal satu komponen billing di proyek Anda melalui sistem registry shadcn/ui. Perintah ini menjalankan shadcn@latest add @billingsdk/<component> dengan runner package manager Anda. Contoh:

# Add a pricing table
npx @billingsdk/cli add pricing-table-one

# Add subscription management
npx @billingsdk/cli add subscription-management

# Add usage monitoring
npx @billingsdk/cli add usage-meter-circle

Yang terjadi:

CLI shadcn mengunduh konfigurasi komponen dari registry.
CLI menginstal file komponen di direktori components/billingsdk/.
CLI memperbarui konfigurasi proyek jika diperlukan.
CLI menginstal dependency tambahan apa pun.

Struktur File yang Dibuat

Setelah Anda menjalankan init, proyek Anda berisi:

Rute API: Endpoint untuk checkout, customer, pembayaran customer, produk, langganan, dan webhook. Template React tidak memiliki rute API.
Hook: React hook useBilling untuk operasi billing, untuk React dan Next.js.
File Library: Penyiapan client Dodo Payments dan fungsi helper, di lib/dodopayments.ts.
Konfigurasi Environment: Contoh file environment, .env.example.

Struktur Contoh Next.js

Untuk Next.js, init menulis file berikut:

your-project/
├── app/api/
│   ├── checkout/route.ts
│   ├── customer/route.ts
│   ├── customer/payments/route.ts
│   ├── customer/subscriptions/route.ts
│   ├── product/route.ts
│   ├── products/route.ts
│   └── webhook/route.ts
├── hooks/
│   └── useBilling.ts
├── lib/
│   └── dodopayments.ts
└── .env.example

Konfigurasi Environment

Setelah inisialisasi, tetapkan environment variables Anda. Dapatkan API key dari Developer → API Keys dan webhook key dari Developer → Webhooks di dashboard:

# DodoPayments
DODO_PAYMENTS_API_KEY=your_api_key_here
DODO_PAYMENTS_ENVIRONMENT=test_mode
DODO_PAYMENTS_WEBHOOK_KEY=your_webhook_key_here

# App URL
NEXT_PUBLIC_APP_URL=http://localhost:3000

Atur DODO_PAYMENTS_ENVIRONMENT ke test_mode atau live_mode. Client Dodo Payments yang dibuat akan menghasilkan error untuk nilai lainnya.

Simpan API key Anda di environment variables. Jangan pernah commit API key ke version control.

Komponen yang Tersedia

Billing SDK menyediakan komponen React dalam grup berikut:

Tabel Harga: Delapan varian, pricing-table-one hingga pricing-table-eight, untuk menampilkan harga produk.
Manajemen Langganan: subscription-management, serta card dan dialog untuk membatalkan langganan atau memperbarui paket.
Pemantauan Penggunaan: Meter penggunaan melingkar dan linear, serta tabel penggunaan untuk billing berbasis penggunaan.
Komponen Checkout: Pemilih metode pembayaran, formulir detail pembayaran, dan card kegagalan pembayaran.
Customer Portal: Pengaturan billing, layar billing, riwayat invoice, dan tagihan mendatang, untuk self-service customer.

Untuk menelusuri semua komponen dengan pratinjau langsung, lihat component library.

Open Source

Billing SDK adalah open source:

Transparansi: Anda dapat membaca cara kerja setiap komponen.
Komunitas: Developer membuatnya untuk developer lainnya.
Keamanan: Siapa pun dapat meninjau kode untuk menemukan masalah keamanan.
Inovasi: Kontribusi komunitas mempercepat pengembangan.

Billing SDK dirilis di bawah GNU General Public License v3.0 (GPL-3.0), yang menjaga proyek tetap terbuka dan gratis.

Mendapatkan Bantuan

Untuk mendapatkan bantuan terkait Billing SDK, gunakan resource berikut:

GitHub Issues: Buka issue
Dokumentasi: Kunjungi billingsdk.com/docs
Dokumentasi Lengkap untuk LLM: billingsdk.com/llms-full.txt

Berkontribusi

Billing SDK menyambut kontribusi. Panduan kontribusi menjelaskan cara untuk:

Melaporkan bug
Meminta fitur
Mengirimkan pull request
Menambahkan komponen baru
Meningkatkan dokumentasi

Pelajari Lebih Lanjut

Full Documentation

Panduan lengkap Billing SDK dengan contoh dan praktik terbaik

CLI Reference

Dokumentasi CLI terperinci untuk semua perintah dan opsi

Component Library

Telusuri semua komponen yang tersedia dengan contoh langsung

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

Ikhtisar

Memulai dengan Cepat

Framework yang Didukung

Perintah CLI

`@billingsdk/cli init`

`@billingsdk/cli add`

Struktur File yang Dibuat

Struktur Contoh Next.js

Konfigurasi Environment

Komponen yang Tersedia

Open Source

Mendapatkan Bantuan

Berkontribusi

Pelajari Lebih Lanjut

Full Documentation

CLI Reference

Component Library

​Ikhtisar

​Memulai dengan Cepat

​Framework yang Didukung

​Perintah CLI

​@billingsdk/cli init

​@billingsdk/cli add

​Struktur File yang Dibuat

​Struktur Contoh Next.js

​Konfigurasi Environment

​Komponen yang Tersedia

​Open Source

​Mendapatkan Bantuan

​Berkontribusi

​Pelajari Lebih Lanjut

Full Documentation

CLI Reference

Component Library

Ikhtisar

Memulai dengan Cepat

Framework yang Didukung

Perintah CLI

`@billingsdk/cli init`

`@billingsdk/cli add`

Struktur File yang Dibuat

Struktur Contoh Next.js

Konfigurasi Environment

Komponen yang Tersedia

Open Source

Mendapatkan Bantuan

Berkontribusi

Pelajari Lebih Lanjut