Checkout Inline - Dodo Payments Documentation

Ikhtisar

Checkout inline memungkinkan Anda untuk membuat pengalaman checkout yang sepenuhnya terintegrasi yang menyatu dengan situs web atau aplikasi Anda. Berbeda dengan overlay checkout, yang muncul sebagai modal di atas halaman Anda, checkout inline menyisipkan formulir pembayaran langsung ke dalam tata letak halaman Anda. Dengan menggunakan checkout inline, Anda dapat:

Membuat pengalaman checkout yang sepenuhnya terintegrasi dengan aplikasi atau situs web Anda
Membiarkan Dodo Payments dengan aman menangkap informasi pelanggan dan pembayaran dalam bingkai checkout yang dioptimalkan
Menampilkan item, total, dan informasi lain dari Dodo Payments di halaman Anda
Menggunakan metode dan peristiwa SDK untuk membangun pengalaman checkout yang lebih canggih

Cara Kerjanya

Checkout inline bekerja dengan menyisipkan bingkai Dodo Payments yang aman ke dalam situs web atau aplikasi Anda. Bingkai checkout menangani pengumpulan informasi pelanggan dan menangkap detail pembayaran. Halaman Anda menampilkan daftar item, total, dan opsi untuk mengubah apa yang ada di checkout. SDK memungkinkan halaman Anda dan bingkai checkout berinteraksi satu sama lain. Dodo Payments secara otomatis membuat langganan ketika checkout selesai, siap untuk Anda provision.

Bingkai checkout inline menangani semua informasi pembayaran sensitif dengan aman, memastikan kepatuhan PCI tanpa sertifikasi tambahan di pihak Anda.

Apa yang Membuat Checkout Inline yang Baik?

Penting bagi pelanggan untuk mengetahui siapa yang mereka beli, apa yang mereka beli, dan berapa banyak yang mereka bayar. Untuk membangun checkout inline yang sesuai dan dioptimalkan untuk konversi, implementasi Anda harus mencakup:

Contoh checkout inline dengan elemen yang diperlukan diberi label

Informasi berulang: Jika berulang, seberapa sering itu terjadi dan total yang harus dibayar saat pembaruan. Jika percobaan, berapa lama percobaan berlangsung.
Deskripsi item: Deskripsi tentang apa yang dibeli.
Total transaksi: Total transaksi, termasuk subtotal, total pajak, dan total keseluruhan. Pastikan untuk menyertakan mata uang juga.
Footer Dodo Payments: Bingkai checkout inline lengkap, termasuk footer checkout yang memiliki informasi tentang Dodo Payments, syarat penjualan kami, dan kebijakan privasi kami.
Kebijakan pengembalian: Tautan ke kebijakan pengembalian Anda, jika berbeda dari kebijakan pengembalian standar Dodo Payments.

Selalu tampilkan bingkai checkout inline lengkap, termasuk footer. Menghapus atau menyembunyikan informasi hukum melanggar persyaratan kepatuhan.

Perjalanan Pelanggan

Alur checkout ditentukan oleh konfigurasi sesi checkout Anda. Tergantung pada bagaimana Anda mengonfigurasi sesi checkout, pelanggan akan mengalami checkout yang mungkin menyajikan semua informasi di satu halaman atau di beberapa langkah.

Pelanggan membuka checkout

Anda dapat membuka checkout inline dengan mengirimkan item atau transaksi yang sudah ada. Gunakan SDK untuk menampilkan dan memperbarui informasi di halaman, dan metode SDK untuk memperbarui item berdasarkan interaksi pelanggan.

Halaman checkout awal dengan daftar item dan formulir pembayaran

Pelanggan memasukkan detail mereka

Checkout inline pertama-tama meminta pelanggan untuk memasukkan alamat email mereka, memilih negara mereka, dan (di mana diperlukan) memasukkan kode pos atau kode pos mereka. Langkah ini mengumpulkan semua informasi yang diperlukan untuk menentukan pajak dan opsi pembayaran yang tersedia.Anda dapat mengisi detail pelanggan sebelumnya dan menyajikan alamat yang disimpan untuk memperlancar pengalaman.

Pelanggan memilih metode pembayaran

Setelah memasukkan detail mereka, pelanggan disajikan dengan metode pembayaran yang tersedia dan formulir pembayaran. Opsi mungkin termasuk kartu kredit atau debit, PayPal, Apple Pay, Google Pay, dan metode pembayaran lokal lainnya berdasarkan lokasi mereka.Tampilkan metode pembayaran yang disimpan jika tersedia untuk mempercepat checkout.

Metode pembayaran yang tersedia dan formulir detail kartu

Checkout selesai

Dodo Payments mengarahkan setiap pembayaran ke pengakuisisi terbaik untuk penjualan tersebut untuk mendapatkan peluang terbaik untuk sukses. Pelanggan memasuki alur kerja sukses yang dapat Anda bangun.

Layar sukses dengan tanda centang konfirmasi

Dodo Payments membuat langganan

Dodo Payments secara otomatis membuat langganan untuk pelanggan, siap untuk Anda provision. Metode pembayaran yang digunakan pelanggan disimpan untuk pembaruan atau perubahan langganan.

Langganan dibuat dengan notifikasi webhook

Memulai dengan Cepat

Mulai dengan Dodo Payments Inline Checkout hanya dalam beberapa baris kode:

import { DodoPayments } from "dodopayments-checkout";

// Initialize the SDK for inline mode
DodoPayments.Initialize({
  mode: "test",
  displayType: "inline",
  onEvent: (event) => {
    console.log("Checkout event:", event);
  },
});

// Open checkout in a specific container
DodoPayments.Checkout.open({
  checkoutUrl: "https://test.dodopayments.com/session/cks_123",
  elementId: "dodo-inline-checkout" // ID of the container element
});

Pastikan Anda memiliki elemen kontainer dengan id yang sesuai di halaman Anda: <div id="dodo-inline-checkout"></div>.

Panduan Integrasi Langkah-demi-Langkah

Instal SDK

Instal Dodo Payments Checkout SDK:

npm install dodopayments-checkout

Inisialisasi SDK untuk Tampilan Inline

Inisialisasi SDK dan tentukan displayType: 'inline'. Anda juga harus mendengarkan event checkout.breakdown untuk memperbarui UI Anda dengan perhitungan pajak dan total secara real-time.

import { DodoPayments } from "dodopayments-checkout";

DodoPayments.Initialize({
  mode: "test",
  displayType: "inline",
  onEvent: (event) => {
    if (event.event_type === "checkout.breakdown") {
      const breakdown = event.data?.message;
      // Update your UI with breakdown.subTotal, breakdown.tax, breakdown.total, etc.
    }
  },
});

Buat Elemen Kontainer

Tambahkan elemen ke HTML Anda di mana bingkai checkout akan disuntikkan:

<div id="dodo-inline-checkout"></div>

Buka Checkout

Panggil DodoPayments.Checkout.open() dengan checkoutUrl dan elementId dari kontainer Anda:

DodoPayments.Checkout.open({
  checkoutUrl: "https://test.dodopayments.com/session/cks_123",
  elementId: "dodo-inline-checkout"
});

Uji Integrasi Anda

Mulai server pengembangan Anda:

npm run dev

Uji alur checkout:
- Masukkan email dan detail alamat Anda di bingkai inline.
- Verifikasi bahwa ringkasan pesanan kustom Anda diperbarui secara real-time.
- Uji alur pembayaran menggunakan kredensial uji.
- Konfirmasi pengalihan berfungsi dengan benar.

Anda harus melihat event checkout.breakdown yang dicatat di konsol browser Anda jika Anda menambahkan log konsol di callback onEvent.

Go Live

Ketika Anda siap untuk produksi:

Ubah mode menjadi 'live':

DodoPayments.Initialize({
  mode: "live",
  displayType: "inline",
  onEvent: (event) => {
    // Handle events
  }
});

Perbarui URL checkout Anda untuk menggunakan sesi checkout langsung dari backend Anda.
Uji alur lengkap di produksi.

Contoh React Lengkap

Contoh ini menunjukkan cara mengimplementasikan ringkasan pesanan kustom di samping checkout inline, menjaga keduanya tetap sinkron menggunakan event checkout.breakdown.

"use client";

import { useEffect, useState } from 'react';
import { DodoPayments, CheckoutBreakdownData } from 'dodopayments-checkout';

export default function CheckoutPage() {
  const [breakdown, setBreakdown] = useState<Partial<CheckoutBreakdownData>>({});

  useEffect(() => {
    // 1. Initialize the SDK
    DodoPayments.Initialize({
      mode: 'test',
      displayType: 'inline',
      onEvent: (event) => {
        // 2. Listen for the 'checkout.breakdown' event
        if (event.event_type === "checkout.breakdown") {
          const message = event.data?.message as CheckoutBreakdownData;
          if (message) setBreakdown(message);
        }
      }
    });

    // 3. Open the checkout in the specified container
    DodoPayments.Checkout.open({
      checkoutUrl: 'https://test.dodopayments.com/session/cks_123',
      elementId: 'dodo-inline-checkout'
    });

    return () => DodoPayments.Checkout.close();
  }, []);

  const format = (amt: number | null | undefined, curr: string | null | undefined) => 
    amt != null && curr ? `${curr} ${(amt/100).toFixed(2)}` : '0.00';

  const currency = breakdown.currency ?? breakdown.finalTotalCurrency ?? '';

  return (
    <div className="flex flex-col md:flex-row min-h-screen">
      {/* Left Side - Checkout Form */}
      <div className="w-full md:w-1/2 flex items-center">
        <div id="dodo-inline-checkout" className='w-full' />
      </div>

      {/* Right Side - Custom Order Summary */}
      <div className="w-full md:w-1/2 p-8 bg-gray-50">
        <h2 className="text-2xl font-bold mb-4">Order Summary</h2>
        <div className="space-y-2">
          {breakdown.subTotal && (
            <div className="flex justify-between">
              <span>Subtotal</span>
              <span>{format(breakdown.subTotal, currency)}</span>
            </div>
          )}
          {breakdown.discount && (
            <div className="flex justify-between">
              <span>Discount</span>
              <span>{format(breakdown.discount, currency)}</span>
            </div>
          )}
          {breakdown.tax != null && (
            <div className="flex justify-between">
              <span>Tax</span>
              <span>{format(breakdown.tax, currency)}</span>
            </div>
          )}
          <hr />
          {(breakdown.finalTotal ?? breakdown.total) && (
            <div className="flex justify-between font-bold text-xl">
              <span>Total</span>
              <span>{format(breakdown.finalTotal ?? breakdown.total, breakdown.finalTotalCurrency ?? currency)}</span>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

Referensi API

Konfigurasi

Opsi Inisialisasi

interface InitializeOptions {
  mode: "test" | "live";
  displayType: "inline"; // Required for inline checkout
  onEvent: (event: CheckoutEvent) => void;
}

Opsi	Tipe	Diperlukan	Deskripsi
`mode`	`"test" \| "live"`	Ya	Mode lingkungan.
`displayType`	`"inline" \| "overlay"`	Ya	Harus diatur ke `"inline"` untuk menyematkan checkout.
`onEvent`	`function`	Ya	Fungsi callback untuk menangani event checkout.

Opsi Checkout

export type FontSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
export type FontWeight = "normal" | "medium" | "bold" | "extraBold";

interface CheckoutOptions {
  checkoutUrl: string;
  elementId: string; // Required for inline checkout
  options?: {
    showTimer?: boolean;
    showSecurityBadge?: boolean;
    manualRedirect?: boolean;
    themeConfig?: ThemeConfig;
    payButtonText?: string;
    fontSize?: FontSize;
    fontWeight?: FontWeight;
  };
}

Opsi	Tipe	Diperlukan	Deskripsi
`checkoutUrl`	`string`	Ya	URL sesi checkout.
`elementId`	`string`	Ya	`id` dari elemen DOM tempat checkout harus dirender.
`options.showTimer`	`boolean`	Tidak	Tampilkan atau sembunyikan timer checkout. Defaultnya adalah `true`. Ketika dinonaktifkan, Anda akan menerima event `checkout.link_expired` ketika sesi berakhir.
`options.showSecurityBadge`	`boolean`	Tidak	Tampilkan atau sembunyikan badge keamanan. Defaultnya adalah `true`.
`options.manualRedirect`	`boolean`	Tidak	Ketika diaktifkan, checkout tidak akan secara otomatis mengalihkan setelah selesai. Sebagai gantinya, Anda akan menerima event `checkout.status` dan `checkout.redirect_requested` untuk menangani pengalihan sendiri.
`options.themeConfig`	`ThemeConfig`	Tidak	Konfigurasi tema kustom.
`options.payButtonText`	`string`	Tidak	Teks kustom untuk ditampilkan di tombol bayar.
`options.fontSize`	`FontSize`	Tidak	Ukuran font global untuk checkout.
`options.fontWeight`	`FontWeight`	Tidak	Berat font global untuk checkout.

Metode

Buka Checkout

Membuka bingkai checkout di kontainer yang ditentukan.

DodoPayments.Checkout.open({
  checkoutUrl: "https://test.dodopayments.com/session/cks_123",
  elementId: "dodo-inline-checkout"
});

Anda juga dapat memberikan opsi tambahan untuk menyesuaikan perilaku checkout:

DodoPayments.Checkout.open({
  checkoutUrl: "https://test.dodopayments.com/session/cks_123",
  elementId: "dodo-inline-checkout",
  options: {
    showTimer: false,
    showSecurityBadge: false,
    manualRedirect: true,
    payButtonText: "Pay Now",
  },
});

Saat menggunakan manualRedirect, tangani penyelesaian checkout di callback onEvent:

DodoPayments.Initialize({
  mode: "test",
  displayType: "inline",
  onEvent: (event) => {
    if (event.event_type === "checkout.status") {
      const status = event.data?.message?.status;
      // Handle status: "succeeded", "failed", or "processing"
    }
    if (event.event_type === "checkout.redirect_requested") {
      const redirectUrl = event.data?.message?.redirect_to;
      // Redirect the customer manually
      window.location.href = redirectUrl;
    }
    if (event.event_type === "checkout.link_expired") {
      // Handle expired checkout session
    }
  },
});

Tutup Checkout

Secara programatik menghapus bingkai checkout dan membersihkan pendengar event.

DodoPayments.Checkout.close();

Periksa Status

Mengembalikan apakah bingkai checkout saat ini disuntikkan.

const isOpen = DodoPayments.Checkout.isOpen();
// Returns: boolean

Event

SDK menyediakan event real-time melalui callback onEvent. Untuk checkout inline, checkout.breakdown sangat berguna untuk menyinkronkan UI Anda.

Tipe Event	Deskripsi
`checkout.opened`	Frame checkout telah dimuat.
`checkout.breakdown`	Ditembak saat harga, pajak, atau diskon diperbarui.
`checkout.customer_details_submitted`	Detail pelanggan telah diserahkan.
`checkout.pay_button_clicked`	Ditembak saat pelanggan mengklik tombol bayar. Berguna untuk analitik dan pelacakan funnel konversi.
`checkout.redirect`	Checkout akan melakukan pengalihan (misalnya, ke halaman bank).
`checkout.error`	Terjadi kesalahan selama checkout.
`checkout.link_expired`	Ditembak saat sesi checkout berakhir. Hanya diterima saat `showTimer` diatur ke `false`.
`checkout.status`	Ditembak saat `manualRedirect` diaktifkan. Berisi status checkout (`succeeded`, `failed`, atau `processing`).
`checkout.redirect_requested`	Ditembak saat `manualRedirect` diaktifkan. Berisi URL untuk mengalihkan pelanggan.

Data Rincian Checkout

Event checkout.breakdown menyediakan data berikut:

interface CheckoutBreakdownData {
  subTotal?: number;          // Amount in cents
  discount?: number;         // Amount in cents
  tax?: number;              // Amount in cents
  total?: number;            // Amount in cents
  currency?: string;         // e.g., "USD"
  finalTotal?: number;       // Final amount including adjustments
  finalTotalCurrency?: string; // Currency for the final total
}

Data Event Status Checkout

Saat manualRedirect diaktifkan, Anda menerima event checkout.status dengan data berikut:

interface CheckoutStatusEventData {
  message: {
    status?: "succeeded" | "failed" | "processing";
  };
}

Data Event Pengalihan Checkout Diminta

Saat manualRedirect diaktifkan, Anda menerima event checkout.redirect_requested dengan data berikut:

interface CheckoutRedirectRequestedEventData {
  message: {
    redirect_to?: string;
  };
}

Memahami Event Rincian

Event checkout.breakdown adalah cara utama untuk menjaga UI aplikasi Anda tetap sinkron dengan status checkout Dodo Payments. Saat ini terjadi:

Saat inisialisasi: Segera setelah bingkai checkout dimuat dan siap.
Saat perubahan alamat: Setiap kali pelanggan memilih negara atau memasukkan kode pos yang mengakibatkan perhitungan ulang pajak.

Detail Field:

Field	Deskripsi
`subTotal`	Jumlah semua item dalam sesi sebelum diskon atau pajak diterapkan.
`discount`	Nilai total semua diskon yang diterapkan.
`tax`	Jumlah pajak yang dihitung. Dalam mode `inline`, ini diperbarui secara dinamis saat pengguna berinteraksi dengan field alamat.
`total`	Hasil matematis dari `subTotal - discount + tax` dalam mata uang dasar sesi.
`currency`	Kode mata uang ISO (misalnya, `"USD"`) untuk subtotal standar, diskon, dan nilai pajak.
`finalTotal`	Jumlah sebenarnya yang dibebankan kepada pelanggan. Ini mungkin termasuk penyesuaian nilai tukar asing tambahan atau biaya metode pembayaran lokal yang bukan bagian dari rincian harga dasar.
`finalTotalCurrency`	Mata uang di mana pelanggan sebenarnya membayar. Ini dapat berbeda dari `currency` jika paritas daya beli atau konversi mata uang lokal aktif.

Tips Integrasi Utama:

Format Mata Uang: Harga selalu dikembalikan sebagai bilangan bulat dalam unit mata uang terkecil (misalnya, sen untuk USD, yen untuk JPY). Untuk menampilkannya, bagi dengan 100 (atau kekuatan 10 yang sesuai) atau gunakan pustaka format seperti Intl.NumberFormat.
Menangani Status Awal: Saat checkout pertama kali dimuat, tax dan discount mungkin adalah 0 atau null sampai pengguna memberikan informasi penagihan mereka atau menerapkan kode. UI Anda harus menangani status ini dengan baik (misalnya, menampilkan dash — atau menyembunyikan baris).
“Total Akhir” vs “Total”: Sementara total memberi Anda perhitungan harga standar, finalTotal adalah sumber kebenaran untuk transaksi. Jika finalTotal ada, itu mencerminkan persis apa yang akan dibebankan ke kartu pelanggan, termasuk penyesuaian dinamis apa pun.
Umpan Balik Real-time: Gunakan field tax untuk menunjukkan kepada pengguna bahwa pajak sedang dihitung secara real-time. Ini memberikan nuansa “langsung” pada halaman checkout Anda dan mengurangi gesekan selama langkah entri alamat.

Opsi Implementasi

Instalasi Manajer Paket

Instal melalui npm, yarn, atau pnpm seperti yang ditunjukkan dalam Panduan Integrasi Langkah-demi-Langkah.

Implementasi CDN

Untuk integrasi cepat tanpa langkah build, Anda dapat menggunakan CDN kami:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dodo Payments Inline Checkout</title>
    
    <!-- Load DodoPayments -->
    <script src="https://cdn.jsdelivr.net/npm/dodopayments-checkout@latest/dist/index.js"></script>
    <script>
        // Initialize the SDK
        DodoPaymentsCheckout.DodoPayments.Initialize({
            mode: "test",
            displayType: "inline",
            onEvent: (event) => {
                console.log('Checkout event:', event);
            }
        });
    </script>
</head>
<body>
    <div id="dodo-inline-checkout"></div>

    <script>
        // Open the checkout
        DodoPaymentsCheckout.DodoPayments.Checkout.open({
            checkoutUrl: "https://test.dodopayments.com/session/cks_123",
            elementId: "dodo-inline-checkout"
        });
    </script>
</body>
</html>

Kustomisasi Tema

Anda dapat menyesuaikan tampilan checkout dengan mengirimkan objek themeConfig dalam parameter options saat membuka checkout. Konfigurasi tema mendukung mode terang dan gelap, memungkinkan Anda untuk menyesuaikan warna, batas, teks, tombol, dan radius batas.

Konfigurasi Tema Dasar

DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    themeConfig: {
      light: {
        bgPrimary: "#FFFFFF",
        textPrimary: "#344054",
        buttonPrimary: "#A6E500",
      },
      dark: {
        bgPrimary: "#0D0D0D",
        textPrimary: "#FFFFFF",
        buttonPrimary: "#A6E500",
      },
      radius: "8px",
    },
  },
});

Konfigurasi Tema Lengkap

Semua properti tema yang tersedia:

DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    themeConfig: {
      light: {
        // Background colors
        bgPrimary: "#FFFFFF",        // Primary background color
        bgSecondary: "#F9FAFB",      // Secondary background color (e.g., tabs)
        
        // Border colors
        borderPrimary: "#D0D5DD",     // Primary border color
        borderSecondary: "#6B7280",  // Secondary border color
        inputFocusBorder: "#D0D5DD", // Input focus border color
        
        // Text colors
        textPrimary: "#344054",       // Primary text color
        textSecondary: "#6B7280",    // Secondary text color
        textPlaceholder: "#667085",  // Placeholder text color
        textError: "#D92D20",        // Error text color
        textSuccess: "#10B981",      // Success text color
        
        // Button colors
        buttonPrimary: "#A6E500",           // Primary button background
        buttonPrimaryHover: "#8CC500",      // Primary button hover state
        buttonTextPrimary: "#0D0D0D",       // Primary button text color
        buttonSecondary: "#F3F4F6",         // Secondary button background
        buttonSecondaryHover: "#E5E7EB",     // Secondary button hover state
        buttonTextSecondary: "#344054",     // Secondary button text color
      },
      dark: {
        // Background colors
        bgPrimary: "#0D0D0D",
        bgSecondary: "#1A1A1A",
        
        // Border colors
        borderPrimary: "#323232",
        borderSecondary: "#D1D5DB",
        inputFocusBorder: "#323232",
        
        // Text colors
        textPrimary: "#FFFFFF",
        textSecondary: "#909090",
        textPlaceholder: "#9CA3AF",
        textError: "#F97066",
        textSuccess: "#34D399",
        
        // Button colors
        buttonPrimary: "#A6E500",
        buttonPrimaryHover: "#8CC500",
        buttonTextPrimary: "#0D0D0D",
        buttonSecondary: "#2A2A2A",
        buttonSecondaryHover: "#3A3A3A",
        buttonTextSecondary: "#FFFFFF",
      },
      radius: "8px", // Border radius for inputs, buttons, and tabs
    },
  },
});

Hanya Mode Terang

Jika Anda hanya ingin menyesuaikan tema terang:

DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    themeConfig: {
      light: {
        bgPrimary: "#FFFFFF",
        textPrimary: "#000000",
        buttonPrimary: "#0070F3",
      },
      radius: "12px",
    },
  },
});

Hanya Mode Gelap

Jika Anda hanya ingin menyesuaikan tema gelap:

DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    themeConfig: {
      dark: {
        bgPrimary: "#000000",
        textPrimary: "#FFFFFF",
        buttonPrimary: "#0070F3",
      },
      radius: "12px",
    },
  },
});

Penggantian Tema Parsial

Anda dapat mengganti hanya properti tertentu. Checkout akan menggunakan nilai default untuk properti yang tidak Anda tentukan:

DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    themeConfig: {
      light: {
        buttonPrimary: "#FF6B6B", // Only override primary button color
      },
      radius: "16px", // Override border radius
    },
  },
});

Konfigurasi Tema dengan Opsi Lain

Anda dapat menggabungkan konfigurasi tema dengan opsi checkout lainnya:

DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    showTimer: true,
    showSecurityBadge: true,
    manualRedirect: false,
    themeConfig: {
      light: {
        bgPrimary: "#FFFFFF",
        buttonPrimary: "#A6E500",
      },
      dark: {
        bgPrimary: "#0D0D0D",
        buttonPrimary: "#A6E500",
      },
      radius: "8px",
    },
  },
});

Tipe TypeScript

Untuk pengguna TypeScript, semua tipe konfigurasi tema diekspor:

import { ThemeConfig, ThemeModeConfig } from "dodopayments-checkout";

const themeConfig: ThemeConfig = {
  light: {
    bgPrimary: "#FFFFFF",
    // ... other properties
  },
  dark: {
    bgPrimary: "#0D0D0D",
    // ... other properties
  },
  radius: "8px",
};

Penanganan Kesalahan

SDK menyediakan informasi kesalahan yang detail melalui sistem event. Selalu terapkan penanganan kesalahan yang tepat di callback onEvent:

DodoPayments.Initialize({
  mode: "test",
  displayType: "inline",
  onEvent: (event: CheckoutEvent) => {
    if (event.event_type === "checkout.error") {
      console.error("Checkout error:", event.data?.message);
      // Handle error appropriately
    }
  }
});

Selalu tangani event checkout.error untuk memberikan pengalaman pengguna yang baik saat masalah terjadi.

Praktik Terbaik

Desain Responsif: Pastikan elemen kontainer Anda memiliki lebar dan tinggi yang cukup. Iframe biasanya akan berkembang untuk mengisi kontainernya.
Sinkronisasi: Gunakan event checkout.breakdown untuk menjaga ringkasan pesanan kustom atau tabel harga Anda tetap sinkron dengan apa yang dilihat pengguna di frame checkout.
Status Skeleton: Tampilkan indikator pemuatan di kontainer Anda sampai event checkout.opened dipicu.
Pembersihan: Panggil DodoPayments.Checkout.close() saat komponen Anda dibongkar untuk membersihkan iframe dan pendengar event.

Untuk implementasi mode gelap, disarankan untuk menggunakan #0d0d0d sebagai warna latar belakang untuk integrasi visual yang optimal dengan frame checkout inline.

Validasi Status Pembayaran

Jangan hanya mengandalkan event checkout inline untuk menentukan keberhasilan atau kegagalan pembayaran. Selalu terapkan validasi sisi server menggunakan webhook dan/atau polling.

Mengapa Validasi Sisi Server Sangat Penting

Meskipun event checkout inline seperti checkout.status memberikan umpan balik real-time, mereka tidak boleh menjadi satu-satunya sumber kebenaran untuk status pembayaran. Masalah jaringan, kerusakan browser, atau pengguna yang menutup halaman dapat menyebabkan event terlewat. Untuk memastikan validasi pembayaran yang dapat diandalkan:

Server Anda harus mendengarkan event webhook - Dodo Payments mengirimkan webhook untuk perubahan status pembayaran
Terapkan mekanisme polling - Frontend Anda harus melakukan polling ke server Anda untuk pembaruan status
Gabungkan kedua pendekatan - Gunakan webhook sebagai sumber utama dan polling sebagai cadangan

Arsitektur yang Direkomendasikan

Langkah-langkah Implementasi

1. Dengarkan event checkout - Ketika pengguna mengklik bayar, mulai mempersiapkan untuk memverifikasi status:

onEvent: (event) => {
  if (event.event_type === 'checkout.status') {
    // Start polling your server for confirmed status
    startPolling();
  }
}

2. Lakukan polling ke server Anda - Buat endpoint yang memeriksa database Anda untuk status pembayaran (diperbarui oleh webhook):

// Poll every 2 seconds until status is confirmed
const interval = setInterval(async () => {
  const { status } = await fetch(`/api/payments/${paymentId}/status`).then(r => r.json());
  if (status === 'succeeded' || status === 'failed') {
    clearInterval(interval);
    handlePaymentResult(status);
  }
}, 2000);

3. Tangani webhook di sisi server - Perbarui database Anda saat Dodo mengirimkan webhook payment.succeeded atau payment.failed. Lihat dokumentasi Webhook kami untuk detailnya.

Menangani Pengalihan (3DS, Google Pay, UPI)

Saat menggunakan manualRedirect: true, metode pembayaran tertentu memerlukan pengalihan pengguna dari halaman Anda untuk otentikasi:

3D Secure (3DS) - Otentikasi kartu
Google Pay - Otentikasi dompet pada beberapa alur
UPI - Pengalihan metode pembayaran India

Saat pengalihan diperlukan, Anda akan menerima event checkout.redirect_requested. Alihkan pengguna ke URL yang diberikan:

if (event.event_type === 'checkout.redirect_requested') {
  const redirectUrl = event.data?.message?.redirect_to;
  // Save payment ID before redirect, then redirect
  sessionStorage.setItem('pendingPaymentId', paymentId);
  window.location.href = redirectUrl;
}

Setelah otentikasi selesai (berhasil atau gagal), pengguna kembali ke halaman Anda. Jangan menganggap berhasil hanya karena pengguna kembali. Sebagai gantinya:

Periksa apakah pengguna kembali dari pengalihan (misalnya, melalui sessionStorage)
Mulai polling ke server Anda untuk status pembayaran yang dikonfirmasi
Tampilkan status “Memverifikasi pembayaran…” saat melakukan polling
Tampilkan UI keberhasilan/kegagalan berdasarkan status yang dikonfirmasi oleh server

Selalu verifikasi status pembayaran di sisi server setelah pengalihan. Kembalinya pengguna ke halaman Anda hanya berarti otentikasi selesai—itu tidak menunjukkan apakah pembayaran berhasil atau gagal.

Pemecahan Masalah

Frame checkout tidak muncul

Verifikasi bahwa elementId cocok dengan id dari div yang benar-benar ada di DOM.
Pastikan displayType: 'inline' telah diteruskan ke Initialize.
Periksa bahwa checkoutUrl valid.

Pajak tidak diperbarui di UI saya

Pastikan Anda mendengarkan event checkout.breakdown.
Pajak hanya dihitung setelah pengguna memasukkan negara dan kode pos yang valid di frame checkout.

Mengaktifkan Dompet Digital

Untuk informasi lebih lanjut tentang pengaturan Apple Pay, Google Pay, dan dompet digital lainnya, lihat halaman Dompet Digital.

Pengaturan Cepat untuk Apple Pay

Unduh file asosiasi domain

Unduh file asosiasi domain Apple Pay.

Minta aktivasi

Kirim email ke support@dodopayments.com dengan URL domain produksi Anda dan minta aktivasi Apple Pay.

Uji setelah konfirmasi

Setelah dikonfirmasi, pastikan Apple Pay muncul di checkout dan uji seluruh alur prosesnya.

Apple Pay memerlukan verifikasi domain sebelum muncul di produksi. Hubungi dukungan sebelum Anda melakukan live jika Anda berencana untuk menawarkan Apple Pay.

Dukungan Browser

SDK Checkout Dodo Payments mendukung browser berikut:

Chrome (terbaru)
Firefox (terbaru)
Safari (terbaru)
Edge (terbaru)
IE11+

Checkout Inline vs Overlay

Pilih jenis checkout yang tepat untuk penggunaan Anda:

Fitur	Checkout Inline	Checkout Overlay
Kedalaman integrasi	Sepenuhnya terintegrasi di halaman	Modal di atas halaman
Kontrol tata letak	Kontrol penuh	Terbatas
Branding	Mulus	Terpisah dari halaman
Usaha implementasi	Lebih tinggi	Lebih rendah
Terbaik untuk	Halaman checkout kustom, alur konversi tinggi	Integrasi cepat, halaman yang sudah ada

Gunakan checkout inline ketika Anda ingin kontrol maksimal atas pengalaman checkout dan branding yang mulus. Gunakan checkout overlay untuk integrasi yang lebih cepat dengan perubahan minimal pada halaman yang sudah ada.

Sumber Daya Terkait

Checkout Overlay

Gunakan checkout overlay untuk integrasi berbasis modal yang cepat.

API Sesi Checkout

Buat sesi checkout untuk mendukung pengalaman checkout Anda.

Webhook

Tangani peristiwa pembayaran di sisi server dengan webhook.

Panduan Integrasi

Panduan lengkap untuk mengintegrasikan Dodo Payments.

Untuk bantuan lebih lanjut, kunjungi komunitas Discord kami atau hubungi tim dukungan pengembang kami.

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

​Ikhtisar

​Cara Kerjanya

​Apa yang Membuat Checkout Inline yang Baik?

​Perjalanan Pelanggan

​Memulai dengan Cepat

​Panduan Integrasi Langkah-demi-Langkah

​Contoh React Lengkap

​Referensi API

​Konfigurasi

​Opsi Inisialisasi

​Opsi Checkout

​Metode

​Buka Checkout

​Tutup Checkout

​Periksa Status

​Event

​Data Rincian Checkout

​Data Event Status Checkout

​Data Event Pengalihan Checkout Diminta

​Memahami Event Rincian

​Opsi Implementasi

​Instalasi Manajer Paket

​Implementasi CDN

​Kustomisasi Tema

​Konfigurasi Tema Dasar

​Konfigurasi Tema Lengkap

​Hanya Mode Terang

​Hanya Mode Gelap

​Penggantian Tema Parsial

​Konfigurasi Tema dengan Opsi Lain

​Tipe TypeScript

​Penanganan Kesalahan

​Praktik Terbaik

​Validasi Status Pembayaran

​Mengapa Validasi Sisi Server Sangat Penting

​Arsitektur yang Direkomendasikan

​Langkah-langkah Implementasi

​Menangani Pengalihan (3DS, Google Pay, UPI)

​Pemecahan Masalah

​Mengaktifkan Dompet Digital

​Pengaturan Cepat untuk Apple Pay

​Dukungan Browser

​Checkout Inline vs Overlay

​Sumber Daya Terkait

Checkout Overlay

API Sesi Checkout

Webhook

Panduan Integrasi

Ikhtisar

Cara Kerjanya

Apa yang Membuat Checkout Inline yang Baik?

Perjalanan Pelanggan

Memulai dengan Cepat

Panduan Integrasi Langkah-demi-Langkah

Contoh React Lengkap

Referensi API

Konfigurasi

Opsi Inisialisasi

Opsi Checkout

Metode

Buka Checkout

Tutup Checkout

Periksa Status

Event

Data Rincian Checkout

Data Event Status Checkout

Data Event Pengalihan Checkout Diminta

Memahami Event Rincian

Opsi Implementasi

Instalasi Manajer Paket

Implementasi CDN

Kustomisasi Tema

Konfigurasi Tema Dasar

Konfigurasi Tema Lengkap

Hanya Mode Terang

Hanya Mode Gelap

Penggantian Tema Parsial

Konfigurasi Tema dengan Opsi Lain

Tipe TypeScript

Penanganan Kesalahan

Praktik Terbaik

Validasi Status Pembayaran

Mengapa Validasi Sisi Server Sangat Penting

Arsitektur yang Direkomendasikan

Langkah-langkah Implementasi

Menangani Pengalihan (3DS, Google Pay, UPI)

Pemecahan Masalah

Mengaktifkan Dompet Digital

Pengaturan Cepat untuk Apple Pay

Dukungan Browser

Checkout Inline vs Overlay

Sumber Daya Terkait