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

Contoh tata letak checkout inline yang menunjukkan elemen yang diperlukan

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 tercatat 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 bersamaan dengan checkout inline, menjaga mereka 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

interface CheckoutOptions {
  checkoutUrl: string;
  elementId: string; // Required for inline checkout
  options?: {
    showTimer?: boolean;
    showSecurityBadge?: boolean;
    manualRedirect?: boolean;
    payButtonText?: string;
  };
}

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. Secara default adalah `true`. Ketika dinonaktifkan, Anda akan menerima event `checkout.link_expired` ketika sesi berakhir.
`options.showSecurityBadge`	`boolean`	Tidak	Tampilkan atau sembunyikan badge keamanan. Secara default 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.payButtonText`	`string`	Tidak	Teks kustom untuk ditampilkan pada tombol bayar.

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 Anda:

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 waktu nyata melalui callback onEvent. Untuk checkout inline, checkout.breakdown sangat berguna untuk menyinkronkan UI Anda.

Tipe Event	Deskripsi
`checkout.opened`	Bingkai checkout telah dimuat.
`checkout.breakdown`	Ditembak saat harga, pajak, atau diskon diperbarui.
`checkout.customer_details_submitted`	Detail pelanggan telah diserahkan.
`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 ketika `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

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

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

Data Event Pengalihan Checkout Diminta

Ketika 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, nilai diskon, dan 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 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 Waktu Nyata: Gunakan field tax untuk menunjukkan kepada pengguna bahwa pajak sedang dihitung secara waktu nyata. 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 dalam callback onEvent Anda:

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 meluas untuk mengisi kontainernya.
Sinkronisasi: Gunakan event checkout.breakdown untuk menjaga ringkasan pesanan atau tabel harga kustom Anda tetap sinkron dengan apa yang dilihat pengguna di frame checkout.
Status Skeleton: Tampilkan indikator pemuatan di kontainer Anda hingga event checkout.opened terjadi.
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.

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 Apple Pay

Apple Pay memungkinkan pelanggan untuk menyelesaikan pembayaran dengan cepat dan aman menggunakan metode pembayaran yang telah disimpan. Ketika diaktifkan, pelanggan dapat meluncurkan modal Apple Pay langsung dari overlay checkout di perangkat yang didukung.

Apple Pay didukung di iOS 17+, iPadOS 17+, dan Safari 17+ di macOS.

Untuk mengaktifkan Apple Pay untuk domain Anda di produksi, ikuti langkah-langkah berikut:

Unduh dan unggah file asosiasi domain Apple Pay

Unduh file asosiasi domain Apple Pay.Unggah file tersebut ke server web Anda di /.well-known/apple-developer-merchantid-domain-association. Misalnya, jika situs web Anda adalah example.com, buat file tersebut tersedia di https://example.com/well-known/apple-developer-merchantid-domain-association.

Minta aktivasi Apple Pay

Kirim email ke [email protected] dengan informasi berikut:

URL domain produksi Anda (misalnya, https://example.com)
Permintaan untuk mengaktifkan Apple Pay untuk domain Anda

Anda akan menerima konfirmasi dalam 1-2 hari kerja setelah Apple Pay diaktifkan untuk domain Anda.

Verifikasi ketersediaan Apple Pay

Setelah menerima konfirmasi, uji Apple Pay di checkout Anda:

Buka checkout Anda di perangkat yang didukung (iOS 17+, iPadOS 17+, atau Safari 17+ di macOS)
Verifikasi bahwa tombol Apple Pay muncul sebagai opsi pembayaran
Uji alur pembayaran lengkap

Apple Pay harus diaktifkan untuk domain Anda sebelum muncul sebagai opsi pembayaran di produksi. Hubungi dukungan sebelum go live jika Anda berencana untuk menawarkan Apple Pay.

Dukungan Browser

SDK Dodo Payments Checkout mendukung browser berikut:

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

Checkout Inline vs Overlay

Pilih jenis checkout yang tepat untuk kasus penggunaan Anda:

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

Gunakan checkout inline ketika Anda menginginkan kontrol maksimum atas pengalaman checkout dan branding yang mulus. Gunakan checkout overlay untuk integrasi yang lebih cepat dengan perubahan minimal pada halaman yang 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.

Webhooks

Tangani event pembayaran di sisi server dengan webhooks.

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

​Pemecahan Masalah

​Mengaktifkan Apple Pay

​Dukungan Browser

​Checkout Inline vs Overlay

​Sumber Daya Terkait

Checkout Overlay

API Sesi Checkout

Webhooks

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

Pemecahan Masalah

Mengaktifkan Apple Pay

Dukungan Browser

Checkout Inline vs Overlay

Sumber Daya Terkait