> ## 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.

# Ikhtisar Adaptor Framework

> Adaptor yang sudah dibangun sebelumnya untuk framework web populer untuk mengintegrasikan Dodo Payments dalam hitungan menit dengan kode minimal

Dodo Payments menyediakan adaptor framework resmi yang menyederhanakan integrasi pembayaran. Setiap adaptor dirancang untuk bekerja secara mulus dengan konvensi framework Anda, menawarkan checkout, portal pelanggan, dan penanganan webhook secara langsung.

<Tip>
  Adaptor kerangka kerja memungkinkan Anda mengintegrasikan Dodo Payments dalam kurang dari 10 baris kode. Mereka menangani otentikasi, penguraian permintaan, dan pemformatan respons secara otomatis.
</Tip>

## Adaptor Framework yang Tersedia

Pilih adaptor yang sesuai dengan framework Anda:

<CardGroup cols={2}>
  <Card title="Next.js" icon="react" href="/developer-resources/nextjs-adaptor">
    Dukungan App Router dengan handler rute untuk checkout, portal, dan webhook
  </Card>

  <Card title="Nuxt" icon="vuejs" href="/developer-resources/nuxt-adaptor">
    Kerangka kerja full-stack berbasis Vue dengan integrasi rute server
  </Card>

  <Card title="Express" icon="node-js" href="/developer-resources/express-adaptor">
    Handler berbasis middleware untuk kerangka kerja Node.js populer
  </Card>

  <Card title="Fastify" icon="bolt" href="/developer-resources/fastify-adaptor">
    Kerangka kerja Node.js berperforma tinggi dengan arsitektur plugin
  </Card>

  <Card title="Hono" icon="cloud" href="/developer-resources/hono-adaptor">
    Kerangka kerja web super cepat untuk edge, Cloudflare Workers, dan lainnya
  </Card>

  <Card title="Astro" icon="star" href="/developer-resources/astro-adaptor">
    Kerangka kerja berfokus pada konten dengan dukungan endpoint server
  </Card>

  <Card title="SvelteKit" icon="code" href="/developer-resources/sveltekit-adaptor">
    Kerangka kerja Svelte full-stack dengan integrasi hook server
  </Card>

  <Card title="Remix" icon="react" href="/developer-resources/remix-adaptor">
    Kerangka kerja React full-stack dengan handler loader dan action
  </Card>

  <Card title="TanStack Start" icon="chart-line" href="/developer-resources/tanstack-adaptor">
    Kerangka kerja React full-stack tipe-aman dengan fungsi server
  </Card>

  <Card title="Better Auth" icon="shield" href="/developer-resources/better-auth-adaptor">
    Plugin kerangka kerja otentikasi untuk integrasi auth + pembayaran yang mulus
  </Card>

  <Card title="Convex" icon="database" href="/developer-resources/convex-component">
    Komponen Backend-as-a-Service untuk sinkronisasi pembayaran waktu nyata
  </Card>

  <Card title="Bun" icon="bolt" href="/developer-resources/bun-adaptor">
    Handler Bun.serve() native untuk checkout, portal, dan webhook
  </Card>
</CardGroup>

## Fitur Utama

Semua adaptor kerangka kerja menyediakan kemampuan bawaan berikut:

| Fitur                  | Deskripsi                                                       |
| ---------------------- | --------------------------------------------------------------- |
| **Checkout Handler**   | Dukungan untuk alur checkout statis, dinamis, dan berbasis sesi |
| **Customer Portal**    | Handler bawaan untuk manajemen langganan dan penagihan          |
| **Webhook Handler**    | Verifikasi tanda tangan aman dengan handler event bertipe       |
| **Environment Config** | Pengaturan sederhana melalui variabel lingkungan                |
| **Type Safety**        | Dukungan TypeScript penuh dengan payload bertipe                |

## Mulai Cepat

Mulailah dengan adaptor kerangka kerja mana pun dalam tiga langkah:

<Steps>
  <Step title="Install the Adaptor">
    Gunakan manajer paket Anda untuk menginstal adaptor spesifik kerangka kerja:

    <Tabs>
      <Tab title="Next.js">
        ```bash theme={null}
        npm install @dodopayments/nextjs
        ```
      </Tab>

      <Tab title="Nuxt">
        ```bash theme={null}
        npm install @dodopayments/nuxt
        ```
      </Tab>

      <Tab title="Express">
        ```bash theme={null}
        npm install @dodopayments/express
        ```
      </Tab>

      <Tab title="Hono">
        ```bash theme={null}
        npm install @dodopayments/hono
        ```
      </Tab>

      <Tab title="Astro">
        ```bash theme={null}
        npm install @dodopayments/astro
        ```
      </Tab>

      <Tab title="SvelteKit">
        ```bash theme={null}
        npm install @dodopayments/sveltekit
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Configure Environment Variables">
    Tambahkan kredensial Dodo Payments Anda ke lingkungan Anda:

    ```env theme={null}
    DODO_PAYMENTS_API_KEY=your-api-key
    DODO_PAYMENTS_WEBHOOK_KEY=your-webhook-secret
    DODO_PAYMENTS_RETURN_URL=https://yourdomain.com/checkout/success
    DODO_PAYMENTS_ENVIRONMENT="test_mode" # or "live_mode"
    ```

    <Warning>
      Jangan pernah meng-commit file `.env` atau rahasia Anda ke kontrol versi.
    </Warning>
  </Step>

  <Step title="Create Route Handlers">
    Siapkan rute checkout, portal pelanggan, dan webhook Anda:

    <Tabs>
      <Tab title="Next.js">
        ```typescript theme={null}
        // app/checkout/route.ts
        import { Checkout } from "@dodopayments/nextjs";

        export const GET = Checkout({
          bearerToken: process.env.DODO_PAYMENTS_API_KEY,
          returnUrl: process.env.DODO_PAYMENTS_RETURN_URL,
          environment: process.env.DODO_PAYMENTS_ENVIRONMENT,
        });
        ```
      </Tab>

      <Tab title="Express">
        ```typescript theme={null}
        import { checkoutHandler } from '@dodopayments/express';

        app.get('/api/checkout', checkoutHandler({
          bearerToken: process.env.DODO_PAYMENTS_API_KEY,
          returnUrl: process.env.DODO_PAYMENTS_RETURN_URL,
          environment: process.env.DODO_PAYMENTS_ENVIRONMENT,
        }));
        ```
      </Tab>

      <Tab title="Hono">
        ```typescript theme={null}
        import { Checkout } from "@dodopayments/hono";

        app.get('/checkout', Checkout({
          bearerToken: process.env.DODO_PAYMENTS_API_KEY,
          returnUrl: process.env.DODO_PAYMENTS_RETURN_URL,
          environment: process.env.DODO_PAYMENTS_ENVIRONMENT,
        }));
        ```
      </Tab>
    </Tabs>

    <Check>
      Sekarang Anda siap memproses pembayaran! Kunjungi halaman adaptor individual untuk panduan mendetail dan semua opsi yang tersedia.
    </Check>
  </Step>
</Steps>

## Jenis Alur Checkout

Semua adaptor mendukung tiga jenis alur checkout:

<AccordionGroup>
  <Accordion title="Static Checkout (GET)">
    Gunakan checkout statis untuk tautan pembayaran sederhana yang bisa dibagikan. Sertakan ID produk sebagai parameter kueri:

    ```
    /api/checkout?productId=pdt_xxx&quantity=1
    ```

    Mendukung pengisian awal pelanggan opsional dan penyesuaian melalui parameter kueri.
  </Accordion>

  <Accordion title="Dynamic Checkout (POST)">
    Gunakan checkout dinamis untuk membuat pembayaran secara programatik dengan detail khusus:

    ```json theme={null}
    {
      "product_id": "pdt_xxx",
      "customer": {
        "email": "customer@example.com",
        "name": "John Doe"
      },
      "quantity": 1
    }
    ```

    Mendukung pembayaran satu kali dan langganan.
  </Accordion>

  <Accordion title="Checkout Sessions (POST)">
    Gunakan sesi checkout untuk pengalaman checkout paling fleksibel dengan dukungan keranjang belanja:

    ```json theme={null}
    {
      "product_cart": [
        { "product_id": "pdt_xxx", "quantity": 1 },
        { "product_id": "pdt_yyy", "quantity": 2 }
      ],
      "customer": {
        "email": "customer@example.com"
      }
    }
    ```

    Pelajari lebih lanjut di [Panduan Sesi Checkout](/developer-resources/checkout-session).
  </Accordion>
</AccordionGroup>

## Penanganan Event Webhook

Semua adaptor menyediakan penanganan webhook tipe-aman dengan callback event yang terperinci:

```typescript theme={null}
Webhooks({
  webhookKey: process.env.DODO_PAYMENTS_WEBHOOK_KEY,
  onPayload: async (payload) => {
    // Handle any webhook event
  },
  onPaymentSucceeded: async (payload) => {
    // Handle successful payments
  },
  onSubscriptionActive: async (payload) => {
    // Handle new subscriptions
  },
  // ... 20+ event types supported
});
```

<Info>
  Semua handler webhook secara otomatis memverifikasi tanda tangan dan memvalidasi payload menggunakan skema Zod. Permintaan tidak valid ditolak dengan kode error yang sesuai.
</Info>

## Memilih Adaptor yang Tepat

| Framework          | Terbaik untuk                                  | Runtime        |
| ------------------ | ---------------------------------------------- | -------------- |
| **Next.js**        | Aplikasi React full-stack dengan App Router    | Node.js, Edge  |
| **Nuxt**           | Aplikasi Vue.js full-stack                     | Node.js        |
| **Express**        | API REST dan aplikasi Node.js tradisional      | Node.js        |
| **Fastify**        | API berperforma tinggi                         | Node.js        |
| **Hono**           | Deploy di edge, Cloudflare Workers             | Edge, Node.js  |
| **Astro**          | Situs konten dengan endpoint server            | Node.js, Edge  |
| **SvelteKit**      | Aplikasi Svelte full-stack                     | Node.js        |
| **Remix**          | React full-stack dengan routing bertingkat     | Node.js        |
| **TanStack Start** | React full-stack tipe-aman                     | Node.js        |
| **Better Auth**    | Aplikasi yang sudah menggunakan Better Auth    | Beragam        |
| **Convex**         | Aplikasi yang menggunakan Convex untuk backend | Convex Runtime |
| **Bun**            | Aplikasi server Bun native                     | Bun            |

## Mendapatkan Bantuan

Butuh bantuan dengan adaptor kerangka kerja?

* **Discord**: Bergabunglah dengan [server komunitas](https://discord.gg/bYqAp4ayYh) kami untuk bantuan waktu nyata
* **Email**: Hubungi kami di [support@dodopayments.com](mailto:support@dodopayments.com)
* **GitHub**: Buka isu di repositori adaptor terkait
* **Dokumentasi**: Kunjungi [API reference](/api-reference/introduction) kami