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.

Frame checkout inline menangani semua informasi pembayaran sensitif dengan aman, memastikan kepatuhan PCI tanpa perlu sertifikasi tambahan dari 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:

Inline checkout example with required elements labeled — Example inline checkout layout showing required elements

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 frame checkout inline secara 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.

Customer opens checkout

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

Halaman checkout awal dengan daftar item dan formulir pembayaran

Customer enters their details

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.

Customer selects payment method

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 completed

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 creates subscription

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

Install the SDK

Instal Dodo Payments Checkout SDK:

npm install dodopayments-checkout

yarn add dodopayments-checkout

pnpm add dodopayments-checkout

Initialize the SDK for Inline Display

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.
    }
  },
});

Create a Container Element

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

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

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

Test Your Integration

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 akan melihat event checkout.breakdown dicatat di konsol browser Anda jika Anda menambahkan console log pada 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 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	Wajib	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;
    payButtonText?: string;
    fontSize?: FontSize;
    fontWeight?: FontWeight;
  };
}

Option	Type	Required	Description
`checkoutUrl`	`string`	Yes	URL sesi checkout.
`elementId`	`string`	Yes	`id` dari elemen DOM di mana checkout harus dirender.
`options.showTimer`	`boolean`	No	Tampilkan atau sembunyikan timer checkout. Default ke `true`. Saat dinonaktifkan, Anda akan menerima acara `checkout.link_expired` ketika sesi berakhir.
`options.showSecurityBadge`	`boolean`	No	Tampilkan atau sembunyikan lencana keamanan. Default ke `true`.
`options.payButtonText`	`string`	No	Teks kustom untuk ditampilkan pada tombol bayar.
`options.fontSize`	`FontSize`	No	Ukuran font global untuk checkout.
`options.fontWeight`	`FontWeight`	No	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,
    payButtonText: "Pay Now",
  },
});

Tutup Checkout

Menghapus bingkai checkout secara program dan membersihkan pendengar acara.

DodoPayments.Checkout.close();

Periksa Status

Mengembalikan apakah bingkai checkout saat ini disuntikkan.

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

Acara

SDK menyediakan acara waktu nyata melalui panggilan balik onEvent. Untuk inline checkout, checkout.breakdown sangat berguna untuk sinkronisasi UI Anda.

Jenis Acara	Deskripsi
`checkout.opened`	Bingkai checkout telah dimuat.
`checkout.form_ready`	Formulir checkout siap menerima input pengguna. Berguna untuk menyembunyikan status loading dan menampilkan UI checkout.
`checkout.breakdown`	Dipicu ketika harga, pajak, atau diskon diperbarui.
`checkout.customer_details_submitted`	Detail pelanggan telah diserahkan.
`checkout.pay_button_clicked`	Dipicu 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`	Dipicu ketika sesi checkout berakhir. Hanya diterima ketika `showTimer` diatur ke `false`.

Data Breakdown Checkout

Acara 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 Acara Breakdown

Acara checkout.breakdown adalah cara utama untuk menjaga UI aplikasi Anda tetap sinkron dengan status checkout Dodo Payments. Kapan dipicu:

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 line 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, diskon, dan nilai pajak standar.
`finalTotal`	Jumlah sebenarnya yang dibebankan kepada pelanggan. Ini mungkin termasuk penyesuaian tukar tambah atau biaya metode pembayaran lokal tambahan yang bukan bagian dari pemecahan harga dasar.
`finalTotalCurrency`	Mata uang di mana pelanggan benar-benar membayar. Ini dapat berbeda dari `currency` jika paritas daya beli atau konversi mata uang lokal aktif.

Tips Integrasi Kunci:

Pemformatan Mata Uang: Harga selalu dikembalikan sebagai angka bulat dalam satuan mata uang terkecil (misalnya, sen untuk USD, yen untuk JPY). Untuk menampilkannya, bagi dengan 100 (atau pangkat sepuluh yang sesuai) atau gunakan perpustakaan pemformatan seperti Intl.NumberFormat.
Menangani Status Awal: Ketika checkout pertama 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, menunjukkan tanda hubung — atau menyembunyikan baris).
Total Akhir vs Total: Sementara total memberi Anda perhitungan harga standar, finalTotal adalah sumber kebenaran untuk transaksi. Jika finalTotal tersedia, ini mencerminkan dengan tepat apa yang akan dibebankan ke kartu pelanggan, termasuk penyesuaian dinamis apa pun.
Feedback Real-time: Gunakan bidang tax untuk menunjukkan kepada pengguna bahwa pajak sedang dihitung secara real-time. Ini memberikan nuansa “hidup” pada halaman checkout Anda dan mengurangi gesekan selama langkah masuk alamat.

Opsi Implementasi

Instalasi Paket Manager

Instal melalui npm, yarn, atau pnpm seperti yang dijelaskan 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>

Perbarui Metode Pembayaran

Inline checkout mendukung pembaruan metode pembayaran untuk langganan. Ketika pelanggan perlu memperbarui metode pembayaran mereka — apakah untuk langganan aktif atau untuk mengaktifkan kembali langganan yang ditangguhkan — Anda dapat menampilkan alur pembaruan langsung dalam tata letak halaman Anda.

Cara Kerjanya

Panggil API Pembaruan Metode Pembayaran untuk mendapatkan payment_link:

const response = await client.subscriptions.updatePaymentMethod('sub_123', {
  type: 'new',
  return_url: 'https://example.com/return'
});

Berikan payment_link yang dikembalikan sebagai checkoutUrl untuk membuka inline checkout:

DodoPayments.Checkout.open({
  checkoutUrl: response.payment_link,
  elementId: "dodo-inline-checkout"
});

Frame inline hanya menampilkan formulir pengumpulan metode pembayaran. Pelanggan dapat memasukkan detail kartu baru atau memilih metode pembayaran tersimpan tanpa meninggalkan halaman Anda.

Untuk Langganan Ditangguhkan

Ketika memperbarui metode pembayaran untuk langganan dalam status on_hold, Dodo Payments secara otomatis membuat tagihan untuk tunggakan yang tersisa. Pantau webhooks payment.succeeded dan subscription.active untuk mengonfirmasi pengaktifan kembali.

const response = await client.subscriptions.updatePaymentMethod('sub_123', {
  type: 'new',
  return_url: 'https://example.com/return'
});

if (response.payment_id) {
  // Charge created for remaining dues
  // Open inline checkout for payment collection
  DodoPayments.Checkout.open({
    checkoutUrl: response.payment_link,
    elementId: "dodo-inline-checkout"
  });
}

Anda juga dapat menggunakan metode pembayaran tersimpan yang ada daripada mengumpulkan detail baru dengan melewatkan type: 'existing' dengan payment_method_id ke API Pembaruan Metode Pembayaran.

Penanganan Error

SDK menyediakan informasi kesalahan yang detail melalui sistem acara. Selalu terapkan penanganan kesalahan yang tepat dalam panggilan balik 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 acara 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 acara checkout.breakdown untuk menjaga ringkasan pesanan khusus Anda atau tabel harga tetap sinkron dengan apa yang dilihat pengguna dalam bingkai checkout.
Status Kerangka: Tampilkan indikator loading dalam kontainer Anda sampai acara checkout.opened dipicu.
Pembersihan: Panggil DodoPayments.Checkout.close() ketika komponen Anda dihapus untuk membersihkan iframe dan pendengar acara.

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

Validasi Status Pembayaran

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

Mengapa Validasi Sisi Server Penting

Meski acara checkout inline memberikan umpan balik waktu nyata, mereka seharusnya tidak menjadi satu-satunya sumber kebenaran Anda untuk status pembayaran. Masalah jaringan, kerusakan browser, atau pengguna menutup halaman dapat menyebabkan acara terlewat. Untuk memastikan validasi pembayaran yang andal:

Server Anda harus mendengarkan acara webhook - Dodo Payments mengirim webhook untuk perubahan status pembayaran
Implementasikan mekanisme polling - Frontend Anda harus melakukan polling ke server Anda untuk perubahan status
Gabungkan kedua pendekatan - Gunakan webhook sebagai sumber utama dan polling sebagai cadangan

Arsitektur yang Direkomendasikan

Langkah Implementasi

1. Dengarkan acara checkout - Saat pengguna mengklik bayar, mulailah mempersiapkan untuk memverifikasi status:

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

2. Polling server Anda - Buat endpoint yang memeriksa basis data 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 basis data Anda ketika Dodo mengirimkan webhook payment.succeeded atau payment.failed. Lihat dokumentasi Webhook kami untuk detailnya.

Pemecahan Masalah

Checkout frame is not appearing

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

Taxes are not updating in my UI

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

Mengaktifkan Dompet Digital

Untuk informasi lebih detail tentang menyiapkan Apple Pay, Google Pay, dan dompet digital lainnya, lihat halaman Digital Wallets.

Pengaturan Cepat untuk Apple Pay

Verifikasi domain hanya diperlukan untuk pembayaran bawaan (tertanam). Pembayaran overlay, pembayaran host, dan tautan pembayaran tidak membutuhkannya.

Apple Pay diverifikasi per domain dari dasbor.

Open Wallet domains

Pergi ke Pengaturan → Metode Pembayaran dan, di baris Apple Pay, klik Kelola domain.

Tombol Kelola domain di baris Apple Pay dalam pengaturan Metode Pembayaran — Open Wallet domains from the Apple Pay row

Download the domain association file

Dari panel domain Wallet, unduh berkas asosiasi.

Panel domain Wallet dengan tombol Unduh file — Download the Apple Pay domain association file

Klik Daftarkan domain dan masukkan domain tempat Anda menanam pembayaran bawaan (mis. shop.example.com), lalu Lanjutkan.

Formulir pendaftaran domain dengan domain yang dimasukkan — Register the domain where you embed inline checkout

Host the file on your domain

Hosting di:

https://shop.example.com/.well-known/apple-developer-merchantid-domain-association

Itu harus disajikan melalui HTTPS, dapat dijangkau tanpa pengalihan, dan disajikan dengan Content-Type: application/octet-stream atau text/plain.

Verify the domain

Klik Verifikasi domain. Dodo Payments mengonfirmasi file aktif dan mengirimkan domain Anda ke Apple.

Layar verifikasi domain Anda dengan jalur host berkas asosiasi dan tombol Verifikasi domain — Verify the hosted association file

Confirm it's active

Ketika status menunjukkan Aktif, Apple Pay diaktifkan untuk domain tersebut. Gunakan toggle Diaktifkan untuk menghidupkan atau mematikannya per domain.

Daftar domain Wallet yang menunjukkan domain dengan status Apple Pay Aktif dan tombol Diaktifkan — Verified domains show an Active status

Test the integration

Buka checkout di perangkat Apple
Verifikasi tombol Apple Pay muncul
Selesaikan transaksi uji

Dukungan Browser

Dodo Payments Checkout SDK mendukung browser berikut:

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

Checkout Bawaan vs Overlay

Pilih jenis checkout yang tepat untuk kasus penggunaan Anda:

Fitur	Checkout Bawaan	Checkout Overlay
Kedalaman integrasi	Sepenuhnya tertanam di halaman	Modal di atas halaman
Kontrol layout	Kontrol penuh	Terbatas
Branding	Tanpa batas	Terpisah dari halaman
Upaya implementasi	Lebih tinggi	Lebih rendah
Terbaik untuk	Halaman checkout khusus, aliran konversi tinggi	Integrasi cepat, halaman yang ada

Gunakan checkout bawaan jika Anda ingin kontrol maksimum atas pengalaman checkout dan branding yang mulus. Gunakan checkout overlay untuk integrasi lebih cepat dengan perubahan minimal pada halaman yang ada.

Sumber Daya Terkait

Overlay Checkout

Gunakan checkout overlay untuk integrasi cepat berbasis modal.

Checkout Sessions API

Buat sesi checkout untuk memperkuat pengalaman checkout Anda.

Webhooks

Tangani peristiwa pembayaran di sisi server dengan webhooks.

Integration Guide

Panduan lengkap untuk mengintegrasikan Dodo Payments.

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

​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

​Acara

​Data Breakdown Checkout

​Memahami Acara Breakdown

​Opsi Implementasi

​Instalasi Paket Manager

​Implementasi CDN

​Perbarui Metode Pembayaran

​Cara Kerjanya

​Untuk Langganan Ditangguhkan

​Penanganan Error

​Praktik Terbaik

​Validasi Status Pembayaran

​Mengapa Validasi Sisi Server Penting

​Arsitektur yang Direkomendasikan

​Langkah Implementasi

​Pemecahan Masalah

​Mengaktifkan Dompet Digital

​Pengaturan Cepat untuk Apple Pay

​Dukungan Browser

​Checkout Bawaan vs Overlay

​Sumber Daya Terkait

Overlay Checkout

Checkout Sessions API

Webhooks

Integration Guide

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

Acara

Data Breakdown Checkout

Memahami Acara Breakdown

Opsi Implementasi

Instalasi Paket Manager

Implementasi CDN

Perbarui Metode Pembayaran

Cara Kerjanya

Untuk Langganan Ditangguhkan

Penanganan Error

Praktik Terbaik

Validasi Status Pembayaran

Mengapa Validasi Sisi Server Penting

Arsitektur yang Direkomendasikan

Langkah Implementasi

Pemecahan Masalah

Mengaktifkan Dompet Digital

Pengaturan Cepat untuk Apple Pay

Dukungan Browser

Checkout Bawaan vs Overlay

Sumber Daya Terkait