Checkout Inline

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
}

Opsi	Tipe	Diperlukan	Deskripsi
`checkoutUrl`	`string`	Ya	URL sesi checkout.
`elementId`	`string`	Ya	`id` dari elemen DOM di mana checkout harus dirender.

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"
});

Tutup Checkout

Secara programatis 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`	Bingkai checkout telah dimuat.
`checkout.breakdown`	Ditembak ketika 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.

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
}

Memahami Event Rincian

Event checkout.breakdown adalah cara utama untuk menjaga UI aplikasi Anda tetap sinkron dengan status checkout Dodo Payments. Kapan itu 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 pajak ulang.

Detail Field:

Field	Deskripsi
`subTotal`	Jumlah semua item dalam sesi sebelum diskon atau pajak diterapkan.
`discount`	Nilai total dari 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 yang sebenarnya 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 pangkat 10 yang sesuai) atau gunakan pustaka format seperti Intl.NumberFormat.
Menangani Status Awal: Ketika 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 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>

Dukungan TypeScript

SDK ditulis dalam TypeScript dan mencakup definisi tipe yang komprehensif.

import { DodoPayments, CheckoutEvent } from "dodopayments-checkout";

DodoPayments.Initialize({
  mode: "test",
  displayType: "inline",
  onEvent: (event: CheckoutEvent) => {
    // event is fully typed
    console.log(event.event_type, event.data);
  },
});

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 ketika 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 bingkai checkout.
Status Skeleton: Tampilkan indikator pemuatan di kontainer Anda sampai event checkout.opened terjadi.
Pembersihan: Panggil DodoPayments.Checkout.close() saat komponen Anda dibongkar untuk membersihkan iframe dan pendengar event.

Pemecahan Masalah

Bingkai 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 bingkai checkout.

Dukungan Browser

Dodo Payments Checkout SDK mendukung browser berikut:

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

Apple Pay saat ini tidak didukung dalam pengalaman checkout inline. Kami berencana untuk menambahkan dukungan untuk Apple Pay di rilis mendatang.

Checkout Inline vs Overlay

Pilih jenis checkout yang tepat untuk kasus penggunaan Anda:

Fitur	Checkout Inline	Checkout Overlay
Kedalaman integrasi	Sepenuhnya disematkan 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.

Webhook

Tangani event 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

Memahami Event Rincian

Opsi Implementasi

Instalasi Manajer Paket

Implementasi CDN

Dukungan TypeScript

Penanganan Kesalahan

Praktik Terbaik

Pemecahan Masalah

Dukungan Browser

Checkout Inline vs Overlay

Sumber Daya Terkait

Checkout Overlay

API Sesi Checkout

Webhook

Panduan Integrasi

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

​Memahami Event Rincian

​Opsi Implementasi

​Instalasi Manajer Paket

​Implementasi CDN

​Dukungan TypeScript

​Penanganan Kesalahan

​Praktik Terbaik

​Pemecahan Masalah

​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

Memahami Event Rincian

Opsi Implementasi

Instalasi Manajer Paket

Implementasi CDN

Dukungan TypeScript

Penanganan Kesalahan

Praktik Terbaik

Pemecahan Masalah

Dukungan Browser

Checkout Inline vs Overlay

Sumber Daya Terkait