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

# Fitur Checkout

> Checkout yang dioptimalkan untuk konversi, mematuhi standar global dengan dukungan multi-mata uang, multi-bahasa, perhitungan pajak otomatis, kode diskon, add-on, dan pengumpulan alamat yang cerdas.

<Frame>
  <img src="https://mintcdn.com/dodopayments/Vafy52417ELLVDIx/images/checkout/cover.png?fit=max&auto=format&n=Vafy52417ELLVDIx&q=85&s=2dc0a0db8e021e39fb17e84fc12eb5f9" alt="Checkout page" style={{ maxHeight: '500px', width: 'auto' }} width="2844" height="1556" data-path="images/checkout/cover.png" />
</Frame>

<Info>
  Checkout Dodo Payments dioptimalkan untuk konversi dan patuh secara global, dirancang untuk produk digital dan bisnis SaaS. Checkout ini mendukung berbagai mata uang, bahasa, pajak, diskon, add-on, dan alur kerja kepatuhan yang ramah bisnis.
</Info>

<CardGroup cols={2}>
  <Card title="Checkout Sessions API" icon="code" href="/api-reference/checkout-sessions/create">
    Buat sesi checkout host secara programatis.
  </Card>

  <Card title="Preview Checkout" icon="eye" href="/api-reference/checkout-sessions/preview">
    Hitung harga dan pajak sebelum membuat sesi.
  </Card>

  <Card title="Payment Methods" icon="credit-card" href="/features/payment-methods">
    Metode pembayaran yang didukung dan opsi konfigurasi.
  </Card>
</CardGroup>

## Mata Uang Adaptif

Mata Uang Adaptif memungkinkan pelanggan untuk membayar dalam mata uang lokal yang mereka pilih, meningkatkan kepercayaan dan tingkat konversi.

### Cara Kerjanya

1. **Aktifkan**: Aktifkan Adaptive Currency dari **Settings → Business**
2. **Pilih**: Pelanggan dapat mengganti mata uang langsung di checkout
3. **Konversi**: Harga dikonversi secara dinamis menggunakan nilai tukar FX real-time
4. **Tampilkan**: Jumlah akhir yang harus dibayar ditampilkan secara transparan sebelum pembayaran

<Frame>
  <img src="https://mintcdn.com/dodopayments/Vafy52417ELLVDIx/images/checkout/c1.png?fit=max&auto=format&n=Vafy52417ELLVDIx&q=85&s=c2f9ee4b1748448d4ab7ab23954dcc64" alt="Currency selector on checkout" style={{ maxHeight: '500px', width: '70%' }} width="794" height="858" data-path="images/checkout/c1.png" />
</Frame>

<Card title="Adaptive Currency" icon="money-bill-transfer" href="/features/adaptive-currency">
  Pelajari lebih lanjut tentang mata uang yang didukung, biaya konversi, dan penanganan pengembalian dana.
</Card>

## Checkout Multi-Bahasa

Dodo Payments mendukung beberapa bahasa di halaman checkout, memungkinkan pelanggan untuk menyelesaikan pembayaran dalam bahasa yang mereka nyaman.

<Frame>
  <img src="https://mintcdn.com/dodopayments/Vafy52417ELLVDIx/images/checkout/c2.png?fit=max&auto=format&n=Vafy52417ELLVDIx&q=85&s=ecc6eb8db604e37433d8797c51768577" alt="Language selector on checkout" style={{ maxHeight: '500px', width: '70%' }} width="794" height="858" data-path="images/checkout/c2.png" />
</Frame>

### Sorotan Utama

* Pemilih bahasa tersedia langsung di checkout
* Teks UI, label, dan pesan sistem dilokalisasi
* Meningkatkan aksesibilitas dan konversi internasional

### Bahasa yang Didukung

Halaman checkout mendukung 21 bahasa:

| Language   | Code |
| ---------- | ---- |
| Arabic     | `ar` |
| Catalan    | `ca` |
| Chinese    | `zh` |
| Dutch      | `nl` |
| English    | `en` |
| French     | `fr` |
| German     | `de` |
| Hebrew     | `he` |
| Indonesian | `id` |
| Italian    | `it` |
| Japanese   | `ja` |
| Korean     | `ko` |
| Malay      | `ms` |
| Polish     | `pl` |
| Portuguese | `pt` |
| Romanian   | `ro` |
| Russian    | `ru` |
| Spanish    | `es` |
| Swedish    | `sv` |
| Thai       | `th` |
| Turkish    | `tr` |

<Tip>
  Anda dapat memaksa bahasa tertentu di checkout dengan mengatur parameter `force_language` saat membuat sesi checkout. Lihat [Checkout Sessions API](/developer-resources/checkout-session#14-forcing-a-language) untuk detailnya.
</Tip>

## Automatic Tax Calculation

Pajak dihitung secara otomatis berdasarkan lokasi tagihan pelanggan, memastikan kepatuhan terhadap persyaratan GST, VAT, dan pajak penjualan tanpa konfigurasi manual.

### How Tax Calculation Works

<Steps>
  <Step title="Location Detection">
    Aturan pajak diterapkan berdasarkan negara pelanggan (dan wilayah jika berlaku).
  </Step>

  <Step title="Dynamic Updates">
    Jumlah pajak diperbarui secara otomatis ketika:

    * Negara berubah
    * Alamat diperbarui
  </Step>

  <Step title="Transparent Display">
    Rincian pajak akhir ditampilkan dengan jelas sebelum pembayaran.
  </Step>
</Steps>

<Tip>
  Perhitungan pajak sepenuhnya otomatis. Tidak diperlukan konfigurasi manual untuk barang digital standar dan produk SaaS.
</Tip>

## Business Tax ID Support

Untuk bisnis terdaftar, checkout memungkinkan pelanggan memasukkan ID Pajak Bisnis mereka (misalnya nomor VAT/GST).

### What Happens When a Tax ID Is Entered

* Kelayakan pajak divalidasi secara waktu nyata
* Pengecualian pajak yang berlaku atau aturan reverse-charge diterapkan
* Jumlah pajak diperbarui secara instan di checkout

<Frame>
  <img src="https://mintcdn.com/dodopayments/Vafy52417ELLVDIx/images/checkout/c3.png?fit=max&auto=format&n=Vafy52417ELLVDIx&q=85&s=76451fed5636a6ef3e5c3ec7f6a96c9f" alt="Business Tax ID entry on checkout" style={{ maxHeight: '500px', width: '70%' }} width="1440" height="1716" data-path="images/checkout/c3.png" />
</Frame>

<Info>
  Ini sangat berguna untuk SaaS B2B dan layanan digital di mana pelanggan bisnis mungkin memenuhi syarat untuk pengecualian pajak.
</Info>

## Discount Codes

Pelanggan dapat menerapkan kode diskon atau promo yang Anda buat di dashboard langsung di halaman checkout.

### Checkout Experience

1. Pelanggan memasukkan kode diskon
2. Diskon divalidasi secara instan
3. Harga yang diperbarui dan penghematan ditampilkan dengan jelas

<Frame>
  <img src="https://mintcdn.com/dodopayments/Vafy52417ELLVDIx/images/checkout/c4.png?fit=max&auto=format&n=Vafy52417ELLVDIx&q=85&s=639dcc94ddd1b41fdd6ff200c2a28e47" alt="Discount code entry on checkout" style={{ maxHeight: '500px', width: '70%' }} width="794" height="858" data-path="images/checkout/c4.png" />
</Frame>

### API Integration

Praterapkan satu atau lebih kode diskon bertumpuk atau aktifkan bidang input diskon:

```typescript theme={null}
const session = await client.checkoutSessions.create({
  product_cart: [
    { product_id: 'prod_abc', quantity: 1 }
  ],
  discount_codes: ['WELCOME20'], // Pre-apply one or more codes (max 20, applied in order)
  feature_flags: {
    allow_discount_code: true // Show discount input field
  },
  return_url: 'https://yoursite.com/return'
});
```

<Info>
  `discount_codes` menerima array hingga 20 kode yang ditumpuk berurutan. Bidang tunggal `discount_code` tidak lagi direkomendasikan tetapi masih berfungsi — integrasi yang ada tidak perlu segera diubah. Beralih ke `discount_codes` bila mudah digunakan untuk penumpukan dan bentuk respons yang lebih kaya.
</Info>

<Card title="Discount Codes" icon="percent" href="/features/discount-codes">
  Pelajari cara membuat dan mengelola kode diskon.
</Card>

<Card title="Validate Discount by Code" icon="tag" href="/api-reference/discounts/get-discount-by-code">
  Cari dan validasi diskon menggunakan nama kode.
</Card>

## Pengumpulan Alamat Cerdas

Checkout mendukung entri alamat yang fleksibel untuk penyelesaian yang lebih cepat.

### Opsi yang Tersedia

| Opsi                        | Deskripsi                            |
| --------------------------- | ------------------------------------ |
| **Google Address Autofill** | Pemilihan cepat dengan autolengkapan |
| **Entri Manual**            | Kontrol penuh untuk alamat lengkap   |
| **Pemilihan Negara**        | Mendorong logika pajak dan kepatuhan |

<Tip>
  Pengumpulan alamat menyeimbangkan kecepatan, akurasi, dan jangkauan global untuk memaksimalkan konversi sambil memastikan kepatuhan.
</Tip>

## Pengumpulan Nomor Telepon

Kontrol apakah bidang nomor telepon muncul di checkout — dan apakah itu diperlukan — menggunakan fitur bendera sesi checkout.

| Bendera                         | Default | Perilaku                                                                                   |
| ------------------------------- | ------- | ------------------------------------------------------------------------------------------ |
| `allow_phone_number_collection` | `true`  | Menampilkan bidang nomor telepon di formulir checkout                                      |
| `require_phone_number`          | `false` | Membuat bidang nomor telepon wajib diisi (validasi formulir memaksakan nilai tidak kosong) |

```typescript theme={null}
const session = await client.checkoutSessions.create({
  product_cart: [{ product_id: 'prod_abc', quantity: 1 }],
  feature_flags: {
    allow_phone_number_collection: true,
    require_phone_number: true
  },
  return_url: 'https://yoursite.com/return'
});
```

<Warning>
  `require_phone_number: true` memerlukan `allow_phone_number_collection: true`. API menolak sesi di mana pengumpulan telepon dinonaktifkan sementara nomor telepon diperlukan.
</Warning>

<Tip>
  Gunakan `require_phone_number` untuk B2B SaaS, industri yang diatur, atau alur mana pun di mana Anda memerlukan saluran kontak terverifikasi untuk dukungan, ulasan kecurangan, atau kepatuhan.
</Tip>

## Bidang Kustom

Kumpulkan informasi tambahan dari pelanggan saat checkout dengan mendefinisikan bidang formulir kustom. Ini berguna untuk mengumpulkan data seperti nama perusahaan, ukuran tim, sumber referensi, atau informasi bisnis spesifik lainnya.

### Jenis Bidang yang Tersedia

| Jenis      | Deskripsi                                  |
| ---------- | ------------------------------------------ |
| `text`     | Input teks satu baris                      |
| `number`   | Input numerik                              |
| `email`    | Alamat email dengan validasi               |
| `url`      | URL dengan validasi                        |
| `date`     | Pemilih tanggal                            |
| `dropdown` | Pilih dari opsi yang ditentukan sebelumnya |
| `boolean`  | Toggle Ya/Tidak                            |

### Contoh

```typescript theme={null}
const session = await client.checkoutSessions.create({
  product_cart: [
    { product_id: 'prod_abc', quantity: 1 }
  ],
  custom_fields: [
    {
      key: 'company_name',
      label: 'Company Name',
      field_type: 'text',
      required: true
    },
    {
      key: 'team_size',
      label: 'Team Size',
      field_type: 'dropdown',
      required: true,
      options: ['1-10', '11-50', '51-200', '200+']
    }
  ],
  return_url: 'https://yoursite.com/return'
});
```

<Info>
  Tanggapan pelanggan secara otomatis termasuk dalam payload webhook (`payment.succeeded`, `subscription.active`) dan tanggapan API melalui array `custom_field_responses`. Anda dapat mendefinisikan hingga 5 bidang kustom per sesi checkout.
</Info>

<Card title="Custom Fields Guide" icon="input-text" href="/developer-resources/checkout-session#15-collecting-custom-fields">
  Pelajari lebih lanjut tentang konfigurasi bidang kustom dan mengakses tanggapan.
</Card>

## Kebijakan Privasi & Penerimaan Syarat

Untuk memastikan transparansi hukum dan kepatuhan:

* [Kebijakan Privasi](https://dodopayments.com/privacy-policy) dan [Syarat Pembeli](https://dodopayments.com/buyer-terms) ditampilkan dengan jelas pada checkout
* Pelanggan secara eksplisit mengakui ini sebelum menyelesaikan pembayaran

<Info>
  Ini membantu memenuhi persyaratan perlindungan konsumen global dan privasi data termasuk kepatuhan GDPR.
</Info>

## Checkout Koleksi

Koleksi Produk memungkinkan pengalaman checkout yang terpadu di mana pelanggan dapat melihat dan memilih dari berbagai produk terkait (mis., paket Starter, Pro, Enterprise) dalam satu checkout.

### Cara Kerjanya

1. **Semua produk ditampilkan**: Pelanggan melihat setiap produk aktif dalam koleksi
2. **Produk pertama dipilih sebelumnya**: Produk pertama dalam koleksi dipilih secara otomatis
3. **Bandingkan opsi**: Pelanggan dapat membandingkan harga dan fitur sebelum memilih
4. **Pemilihan tunggal**: Setelah memilih produk, checkout melanjutkan dengan alur pembayaran standar

### Membuat Checkout Koleksi

```typescript theme={null}
const session = await client.checkoutSessions.create({
  product_collection_id: 'pdc_abc123',
  product_cart: [], // Required: pass an empty array for collection checkout
  return_url: 'https://yoursite.com/return'
});
```

<Warning>
  Saat menggunakan `product_collection_id`, berikan array `product_cart` kosong. Kode diskon tidak dapat diterapkan sebelumnya saat pembuatan sesi.
</Warning>

<Card title="Product Collections" icon="layer-group" href="/features/product-collections">
  Pelajari cara membuat dan mengelola koleksi produk untuk pengalaman checkout yang bersatu.
</Card>

## Konfigurasi Sesi Checkout

Kontrol perilaku checkout menggunakan Checkout Sessions API:

```typescript theme={null}
const session = await client.checkoutSessions.create({
  product_cart: [
    { product_id: 'prod_abc', quantity: 1 }
  ],
  customer: {
    email: 'customer@example.com',
    name: 'Jane Doe'
  },
  billing_currency: 'EUR', // Set specific currency
  discount_codes: ['PROMO10'],
  feature_flags: {
    allow_discount_code: true
  },
  return_url: 'https://yoursite.com/return',
  cancel_url: 'https://yoursite.com/pricing', // Optional: where to redirect on cancel
  metadata: {
    order_ref: 'ORD-12345'
  }
});
```

<Info>
  Setelah pembayaran, pelanggan dialihkan ke `return_url` Anda dengan parameter query ditambahkan secara otomatis -- termasuk `payment_id` atau `subscription_id`, `status`, `email`, dan `license_key` (jika berlaku). Lihat [panduan Sesi Checkout](/developer-resources/checkout-session#request-body) untuk daftar lengkap.
</Info>

<CardGroup cols={2}>
  <Card title="Checkout Sessions API" icon="code" href="/api-reference/checkout-sessions/create">
    Referensi API lengkap untuk sesi checkout.
  </Card>

  <Card title="Checkout Integration Guide" icon="book" href="/developer-resources/checkout-session">
    Panduan langkah demi langkah untuk mengintegrasikan checkout.
  </Card>
</CardGroup>

## Kustomisasi Tema Checkout

Sesuaikan tampilan halaman checkout agar sesuai dengan merek Anda menggunakan parameter `customization.theme_config` saat membuat sesi checkout melalui API. Konfigurasikan warna, font, radius batas, dan teks tombol untuk mode terang dan gelap.

<Frame>
  <img src="https://mintcdn.com/dodopayments/rTHkQICkStFgSdh-/images/checkout/theme-example.png?fit=max&auto=format&n=rTHkQICkStFgSdh-&q=85&s=5277b69d67c90fd87e7c5d9c125fee12" alt="Halaman checkout bertema kustom" style={{ maxHeight: '500px', width: 'auto' }} width="2856" height="1490" data-path="images/checkout/theme-example.png" />
</Frame>

<Card title="Design & Theme Customization" icon="palette" href="/features/design">
  Konfigurasikan tema secara visual dari dasbor dengan tema yang sudah dibuat, tipografi, warna, dan pratinjau langsung.
</Card>

<Info>
  Bagian ini mencakup konfigurasi tema **API sisi server** menggunakan `customization.theme_config`. Jika Anda menggunakan **Checkout SDK** (checkout overlay atau inline), lihat bagian kustomisasi tema di [Overlay Checkout](/developer-resources/overlay-checkout#theme-customization) atau [Inline Checkout](/developer-resources/inline-checkout#theme-customization) yang menggunakan properti camelCase (misalnya, `bgPrimary` bukan `bg_primary`).
</Info>

### Opsi Konfigurasi Tema

| Properti             | Deskripsi                                                                               |
| -------------------- | --------------------------------------------------------------------------------------- |
| `light`              | Konfigurasi warna untuk mode terang                                                     |
| `dark`               | Konfigurasi warna untuk mode gelap                                                      |
| `font_primary_url`   | URL untuk font utama                                                                    |
| `font_secondary_url` | URL untuk font sekunder                                                                 |
| `font_size`          | Ukuran font: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`                                        |
| `font_weight`        | Berat font: `normal`, `medium`, `bold`, `extraBold`                                     |
| `radius`             | Radius batas untuk elemen antarmuka (misalnya, `4px`, `0.5rem`, `8px`)                  |
| `pay_button_text`    | Teks kustom untuk tombol bayar (misalnya, "Selesaikan Pembelian", "Langganan Sekarang") |

### Konfigurasi Warna (Mode Terang/Gelap)

Setiap mode (`light` dan `dark`) mendukung properti warna berikut:

| Properti                 | Deskripsi                            |
| ------------------------ | ------------------------------------ |
| `bg_primary`             | Warna utama latar belakang           |
| `bg_secondary`           | Warna sekunder latar belakang        |
| `text_primary`           | Warna utama teks                     |
| `text_secondary`         | Warna sekunder teks                  |
| `text_placeholder`       | Warna placeholder teks               |
| `text_error`             | Warna kesalahan teks                 |
| `text_success`           | Warna keberhasilan teks              |
| `border_primary`         | Warna utama batas                    |
| `border_secondary`       | Warna sekunder batas                 |
| `button_primary`         | Warna latar belakang tombol utama    |
| `button_primary_hover`   | Warna hover tombol utama             |
| `button_secondary`       | Warna latar belakang tombol sekunder |
| `button_secondary_hover` | Warna hover tombol sekunder          |
| `button_text_primary`    | Warna teks tombol utama              |
| `button_text_secondary`  | Warna teks tombol sekunder           |
| `input_focus_border`     | Warna batas fokus input              |

<Info>
  Semua bidang warna menerima format warna CSS standar:

  * Hex: `#fff`, `#ffffff`, `#ffffffff`
  * RGB/RGBA: `rgb(255, 255, 255)`, `rgba(255, 255, 255, 0.5)`
  * HSL/HSLA: `hsl(120, 100%, 50%)`, `hsla(120, 100%, 50%, 0.5)`
  * Nama warna: `red`, `blue`, `transparent`
</Info>

### Contoh

<Info>
  Bagian ini mencakup konfigurasi tema **API server-side** menggunakan `customization.theme_config`. Jika Anda menggunakan **Checkout SDK** (overlay atau inline checkout), lihat bagian kustomisasi tema di [Overlay Checkout](/developer-resources/overlay-checkout#theme-customization) yang menggunakan properti camelCase (misalnya, `bgPrimary` bukannya `bg_primary`).
</Info>

<Tip>
  Anda tidak perlu menentukan semua properti warna. Properti yang tidak ditentukan akan menggunakan nilai tema default.
</Tip>

| Properti             | Deskripsi                                                                                  |
| -------------------- | ------------------------------------------------------------------------------------------ |
| `light`              | Konfigurasi warna untuk mode terang                                                        |
| `dark`               | Konfigurasi warna untuk mode gelap                                                         |
| `font_primary_url`   | URL untuk font utama                                                                       |
| `font_secondary_url` | URL untuk font sekunder                                                                    |
| `font_size`          | Ukuran font: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`                                           |
| `font_weight`        | Berat font: `normal`, `medium`, `bold`, `extraBold`                                        |
| `radius`             | Radius batas untuk elemen UI (misalnya, `4px`, `0.5rem`, `8px`)                            |
| `pay_button_text`    | Teks kustom untuk tombol pembayaran (misalnya, "Selesaikan Pembelian", "Langgan Sekarang") |

### Konfigurasi Warna (Mode Terang/Gelap)

Setiap mode (`light` dan `dark`) mendukung properti warna berikut:

| Properti                 | Deskripsi                            |
| ------------------------ | ------------------------------------ |
| `bg_primary`             | Warna utama latar belakang           |
| `bg_secondary`           | Warna sekunder latar belakang        |
| `text_primary`           | Warna utama teks                     |
| `text_secondary`         | Warna sekunder teks                  |
| `text_placeholder`       | Warna teks placeholder               |
| `text_error`             | Warna teks kesalahan                 |
| `text_success`           | Warna teks sukses                    |
| `border_primary`         | Warna utama batas                    |
| `border_secondary`       | Warna sekunder batas                 |
| `button_primary`         | Warna latar belakang tombol utama    |
| `button_primary_hover`   | Warna hover tombol utama             |
| `button_secondary`       | Warna latar belakang tombol sekunder |
| `button_secondary_hover` | Warna hover tombol sekunder          |
| `button_text_primary`    | Warna teks tombol utama              |
| `button_text_secondary`  | Warna teks tombol sekunder           |
| `input_focus_border`     | Warna batas fokus input              |

<Info>
  Semua bidang warna menerima format warna CSS standar:

  * Hex: `#fff`, `#ffffff`, `#ffffffff`
  * RGB/RGBA: `rgb(255, 255, 255)`, `rgba(255, 255, 255, 0.5)`
  * HSL/HSLA: `hsl(120, 100%, 50%)`, `hsla(120, 100%, 50%, 0.5)`
  * Warna bernama: `red`, `blue`, `transparent`
</Info>

### Contoh

```typescript theme={null}
const session = await client.checkoutSessions.create({
  product_cart: [
    { product_id: 'prod_abc', quantity: 1 }
  ],
  customization: {
    theme_config: {
      // Custom fonts
      font_primary_url: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap',
      font_size: 'md',
      font_weight: 'medium',
      radius: '8px',
      pay_button_text: 'Complete Purchase',
      
      // Light mode colors
      light: {
        bg_primary: '#ffffff',
        bg_secondary: '#f5f5f5',
        text_primary: '#1a1a1a',
        text_secondary: '#666666',
        button_primary: '#0066ff',
        button_primary_hover: '#0052cc',
        button_text_primary: '#ffffff',
        border_primary: '#e0e0e0'
      },
      
      // Dark mode colors
      dark: {
        bg_primary: '#1a1a1a',
        bg_secondary: '#2d2d2d',
        text_primary: '#ffffff',
        text_secondary: '#a0a0a0',
        button_primary: '#3385ff',
        button_primary_hover: '#4d99ff',
        button_text_primary: '#ffffff',
        border_primary: '#404040'
      }
    }
  },
  return_url: 'https://yoursite.com/return'
});
```

<Tip>
  Anda tidak perlu menentukan semua properti warna. Properti yang tidak ditentukan akan menggunakan nilai tema bawaan.
</Tip>