> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dodopayments.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Billing SDK

> Infrastruktur penagihan lengkap untuk aplikasi web modern dengan komponen React, alat CLI, dan integrasi full-stack

<Frame>
  <iframe className="w-full aspect-video rounded-md" src="https://www.youtube.com/embed/32RVbEllEi0" title="Billing SDK | Dodo Payments" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
</Frame>

Billing SDK adalah solusi open-source yang komprehensif yang menyediakan infrastruktur penagihan lengkap untuk aplikasi web modern. Ini mencakup komponen React, alat CLI, dan dukungan integrasi full-stack untuk berbagai framework dengan Dodo Payments.

## Ikhtisar

Billing SDK menawarkan:

* **Komponen React**: Komponen penagihan yang sudah dibangun sebelumnya dan dapat disesuaikan untuk aplikasi React
* **Alat CLI**: Antarmuka baris perintah untuk inisialisasi proyek dan manajemen komponen
* **Dukungan Framework**: Integrasi dengan Next.js, Express.js, Hono, Fastify, dan React
* **Penyedia Pembayaran**: Integrasi penuh dengan Dodo Payments

## Memulai dengan Cepat

Mulai dengan Billing SDK dalam beberapa menit:

<Steps>
  <Step title="Install the CLI">
    Gunakan npx untuk menjalankan CLI tanpa instalasi:

    ```bash theme={null}
    npx @billingsdk/cli --help
    ```

    Atau instal secara global untuk penggunaan yang sering:

    ```bash theme={null}
    npm install -g @billingsdk/cli
    ```
  </Step>

  <Step title="Initialize a Project">
    Jalankan pengaturan interaktif untuk membuat proyek penagihan baru:

    ```bash theme={null}
    npx @billingsdk/cli init
    ```

    Anda akan diminta memilih:

    * Kerangka kerja pilihan Anda (Next.js, Express.js, Hono, Fastify, React)
    * Penyedia pembayaran Anda (Dodo Payments)
  </Step>

  <Step title="Add Components">
    Tambahkan komponen penagihan individu ke proyek Anda:

    ```bash theme={null}
    npx @billingsdk/cli add pricing-table-one
    npx @billingsdk/cli add subscription-management
    ```
  </Step>
</Steps>

## Framework yang Didukung

Billing SDK mendukung berbagai framework dengan integrasi Dodo Payments yang komprehensif:

| Framework  | Dodo Payments |
| ---------- | ------------- |
| Next.js    | ✅ Ya          |
| Express.js | ✅ Ya          |
| Hono       | ✅ Ya          |
| React      | ✅ Ya          |
| Fastify    | ✅ Ya          |

## Perintah CLI

### `@billingsdk/cli init`

Inisialisasi proyek penagihan baru dengan pengaturan lengkap termasuk konfigurasi framework, integrasi Dodo Payments, dan dependensi penting.

**Apa yang dilakukan:**

1. **Pemilihan Framework**: Pilih framework pilihan Anda
2. **Instalasi Template**: Mengunduh dan menginstal template spesifik framework dengan integrasi Dodo Payments
3. **Manajemen Dependensi**: Secara otomatis menginstal dependensi yang diperlukan
4. **Generasi File**: Membuat file konfigurasi dan kode boilerplate yang diperlukan

**Contoh:**

```bash theme={null}
npx @billingsdk/cli init
```

### `@billingsdk/cli add`

Tambahkan komponen penagihan individu ke proyek yang sudah ada menggunakan sistem registri shadcn/ui.

**Contoh:**

```bash theme={null}
# 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
```

**Apa yang terjadi:**

1. Mengunduh konfigurasi komponen dari registri
2. Menginstal file komponen di direktori `components/billingsdk/`
3. Memperbarui konfigurasi proyek Anda jika diperlukan
4. Menginstal dependensi tambahan apa pun

## Struktur File yang Dihasilkan

Setelah menjalankan `init`, Anda akan mendapatkan struktur proyek lengkap dengan:

* **Rute API**: Titik akhir komprehensif untuk checkout, pelanggan, produk, langganan, dan webhook
* **Hooks**: React hooks untuk operasi penagihan (jika menggunakan React/Next.js)
* **File Perpustakaan**: Inisialisasi klien penyedia pembayaran dan utilitas
* **Konfigurasi Lingkungan**: Contoh file variabel lingkungan

### Contoh Struktur Next.js

```
your-project/
├── app/api/
│   └── (dodopayments)/
│       ├── 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 Lingkungan

Konfigurasikan variabel lingkungan Anda setelah inisialisasi:

```bash theme={null}
# 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
```

<Warning>
  Selalu simpan kunci API Anda secara aman menggunakan variabel lingkungan. Jangan pernah mengirimkannya ke kontrol versi.
</Warning>

## Komponen yang Tersedia

Billing SDK menyediakan koleksi komprehensif komponen React:

* **Tabel Harga**: Beberapa varian untuk menampilkan harga produk
* **Manajemen Langganan**: Komponen untuk mengelola langganan pelanggan
* **Pemantauan Penggunaan**: Komponen visual untuk melacak penagihan berbasis penggunaan
* **Komponen Checkout**: Alur checkout yang sudah dibangun sebelumnya
* **Portal Pelanggan**: Komponen untuk layanan mandiri pelanggan

## Open Source

Billing SDK dibangun berdasarkan prinsip open-source:

* 🔍 **Transparansi**: Visibilitas penuh tentang cara kerja komponen
* 🤝 **Komunitas**: Dibangun oleh pengembang, untuk pengembang
* 🔒 **Keamanan**: Kode terbuka berarti keamanan yang lebih baik melalui tinjauan sejawat
* 📈 **Inovasi**: Iterasi lebih cepat melalui kontribusi komunitas

<Info>
  Billing SDK dirilis di bawah GNU General Public License (GPL), memastikan proyek tetap terbuka dan gratis.
</Info>

## Mendapatkan Bantuan

Butuh bantuan dengan Billing SDK?

* **Masalah GitHub**: [Buka masalah](https://github.com/dodopayments/billingsdk/issues)
* **Dokumentasi**: Kunjungi [billingsdk.com/docs](https://billingsdk.com/docs)
* **Dokumentasi Lengkap LLMs**: [billingsdk.com/llms-full.txt](https://billingsdk.com/llms-full.txt)

## Berkontribusi

Kami menyambut kontribusi! Lihat [panduan kontribusi](https://billingsdk.com/docs/contribution-open-source) kami untuk detail tentang:

* Melaporkan bug
* Meminta fitur
* Mengajukan permintaan tarik
* Menambahkan komponen baru
* Meningkatkan dokumentasi

## Pelajari Lebih Lanjut

<CardGroup cols={3}>
  <Card title="Full Documentation" icon="book" href="https://billingsdk.com/docs">
    Panduan lengkap untuk Billing SDK dengan contoh dan praktik terbaik
  </Card>

  <Card title="CLI Reference" icon="terminal" href="https://billingsdk.com/docs/cli">
    Dokumentasi CLI terperinci untuk semua perintah dan opsi
  </Card>

  <Card title="Component Library" icon="boxes-stacked" href="https://billingsdk.com/docs/components">
    Jelajahi semua komponen yang tersedia dengan contoh langsung
  </Card>
</CardGroup>