Express Checkout Element

Tampilkan beberapa tombol pembayaran sekali klik dengan satu komponen.

UX Checkout yang menampilkan tombol Apple Pay, Link, dan PayPal

Express Checkout Element adalah integrasi untuk menerima pembayaran melalui tombol metode pembayaran sekali klik. Metode pembayaran yang didukung meliputi Link, Apple Pay, Google Pay, PayPal, Klarna, dan Amazon Pay.

Dengan integrasi ini, Anda dapat:

Secara dinamis mengurutkan tombol pembayaran berdasarkan lokasi pelanggan.
Tambahkan tombol pembayaran tanpa perubahan frontend.
Integrasikan Elements secara mulus dengan menggunakan kembali instance Elements yang sudah ada untuk menghemat waktu.

Coba demo

Dalam demo berikut ini, Anda dapat mengganti sejumlah opsi siap-rakit untuk mengubah warna latar belakang, tata letak, ukuran, dan pengumpulan alamat pengiriman dari antarmuka pembayaran. Demo ini hanya menampilkan Google Pay dan Apple Pay pada platform yang tersedia. Tombol Metode Pembayaran hanya ditampilkan di negara-negara yang didukung.

Jika Anda tidak melihat demo, coba lihat halaman ini di browser yang didukung.

Opsi	Keterangan
Negara merchant	Atur ini menggunakan kunci yang dapat dipublikasikan yang Anda gunakan untuk melakukan inisialisasi Stripe.js. Untuk mengubah negara, Anda harus melepas Express Checkout Element, memperbarui kunci yang dapat dipublikasikan, kemudian memasang kembali Express Checkout Element.
Warna latar belakang	Atur warna menggunakan Elements Appearance API. Tema tombol diwariskan dari Appearance API tetapi Anda juga dapat mendefinisikannya secara langsung saat membuat Element.
Ukuran desktop dan seluler	Gunakan dropdown untuk mengatur lebar piksel maksimal dari elemen induk tempat Express Checkout Element dipasang. Anda dapat mengaturnya ke 750px (Desktop) atau 320px (Seluler).
Kolom maksimal dan baris maksimal	Atur nilai ini menggunakan parameter tata letak bila Anda Membuat Express Checkout Element.
Menu perluasan	Atur ini menggunakan parameter tata letak bila Anda Membuat Express Checkout Element.
Kumpulkan alamat pengiriman	Untuk mengumpulkan informasi pengiriman, Anda harus meneruskan opsi ketika membuat Express Checkout Element. Pelajari selengkapnya tentang mengumpulkan detail pelanggan dan menampilkan mata anggaran.

Mulai dengan panduan

Tambahkan dompet digital sekali klik ke halaman checkout Anda

Bangun integrasi dengan Express Checkout Element menggunakan Checkout Sessions API.

Gunakan dompet digital sekali klik dalam integrasi lanjutan

Bangun integrasi dengan Express Checkout Element menggunakan Payment Intents API.

Migrasikan ke Express Checkout Element

Migrasikan dari Payment Request Button Element ke Express Checkout Element web.

Lihat referensi Stripe.js

Metode pembayaran

Express Checkout Element menyajikan metode pembayaran sekali klik yang aktif, didukung, dan disiapkan.

Sejumlah metode pembayaran memerlukan aktivasi di Dashboard.
Metode pembayaran hanya tersedia bila pelanggan menggunakan browser yang didukung dan membayar dalam mata uang yang didukung.
Sejumlah metode pembayaran memerlukan tindakan penyiapan dari pelanggan. Misalnya, pelanggan tidak akan melihat tombol Google Pay jika mereka tidak menyiapkan Google Pay.
Daftarkan domain Anda baik di lingkungan percobaan maupun mode live.

Elemen ini mengurutkan metode pembayaran berdasarkan relevansi dengan pelanggan Anda.

Untuk mengontrol perilaku ini, Anda dapat menyesuaikan metode pembayaran.

Browser yang didukung

Metode pembayaran tertentu dapat digunakan dengan browser tertentu.

	Apple Pay	Google Pay	Link	PayPal	Amazon Pay	Klarna
Chrome¹
Edge
Firefox
Opera
Safari	²
Chrome di iOS 16+
Firefox di iOS 16+
Edge di iOS 16+

¹Browser kromium lainnya mungkin didukung. Untuk informasi selengkapnya, lihat browser yang didukung.

²Ketika menggunakan iframe, asalnya harus sesuai dengan asal level atas (kecuali untuk Safari 17+ ketika menentukan atribut allow="payment"). Dua halaman memiliki asal yang sama jika protokol, host (nama domain lengkap), dan port (jika ditentukan) sama untuk kedua halaman.

Tata letak

Secara default, bila menampilkan beberapa tombol, Express Checkout Element mengatur tombol-tombol tersebut dalam jaringan berdasarkan ruang yang tersedia, dan menampilkan menu perluasan jika perlu.

Anda dapat mengesampingkan default ini dan menentukan tata letak jaringan sendiri dengan opsi tata letak.

Teks

Anda dapat mengontrol teks tombol dengan memilih buttonType. Setiap dompet digital menawarkan tipenya sendiri.

Link hanya menawarkan satu tipe tombol, yang menyajikan ajakan bertindak “Bayar dengan Link” dan logo Link.

Kami berusaha mendeteksi lokal pelanggan Anda dan menggunakannya untuk melokalkan teks tombol. Anda juga dapat menentukan lokal.

Kode contoh ini menyertakan pesan ajakan bertindak “Beli” atau “Beli sekarang” untuk tombol yang mendukungnya. Kemudian, kode ini menentukan lokal de guna mendapatkan padanannya dalam bahasa Jerman.

const expressCheckoutOptions = {
  buttonType: {
    applePay: 'buy',
    googlePay: 'buy',
    paypal: 'buynow',
    klarna: 'pay',
  }
}
const elements = stripe.elements({
  locale: 'de',

Penampilan

Anda tidak dapat sepenuhnya menyesuaikan penampilan tombol Express Checkout Element karena setiap metode pembayaran mengatur warna brand dan logonya sendiri. Anda dapat menyesuaikan opsi berikut ini:

Tinggi tombol
Radius batas yang menggunakan variabel dengan Appearance API
Tema tombol

Catatan

Tombol Apple Pay secara otomatis berubah ukuran ketika radius batas bertambah melebihi ambang tertentu. Jika mengubah radius batas default, pastikan untuk mengujinya dengan semua metode pembayaran aktif.

Kode contoh ini menyiapkan kelompok elemen dengan tema terang dan radius batas 36 piksel, membuat tombol dengan tinggi 50 piksel, serta mengesampingkan tema untuk menggunakan versi garis putih tombol Apple Pay.

const appearance = {
  theme: 'stripe',
  variables: {
    borderRadius: '36px',
  }
}
const expressCheckoutOptions = {
  buttonHeight: 50,
  buttonTheme: {

Kami mendukung tema-tema berikut ini:

Link memiliki satu tema tombol, yang dapat dibaca pada latar belakang yang terang atau gelap.

Sesuaikan metode pembayaran

Anda tidak dapat menentukan metode pembayaran mana yang akan ditampilkan. Misalnya, Anda tidak dapat memaksa tombol Google Pay muncul jika perangkat pelanggan tidak mendukung Google Pay.

Namun, Anda dapat menyesuaikan perilaku metode pembayaran dengan berbagai cara, seperti:

Anda dapat mengaktifkan atau menonaktifkan metode pembayaran dari Dashboard.
Anda dapat mengesampingkan logika default Stripe yang mengurutkan metode pembayaran menurut relevansi. Gunakan opsi paymentMethodOrder untuk mengatur urutan yang Anda sukai.
Jika ruang terlalu kecil pada tata letak, metode pembayaran dengan relevansi rendah mungkin muncul di menu perluasan. Sesuaikan bila menu muncul menggunakan opsi tata letak.
Untuk mencegah Apple Pay atau Google Pay muncul, atur paymentMethods.applePay atau paymentMethods.googlePay ke never.
Untuk mengizinkan Apple Pay atau Google Pay muncul bila tidak disiapkan, atur paymentMethods.applePay atau paymentMethods.googlePay ke always. Hal ini tidak akan memaksanya muncul pada platform yang tidak didukung, atau bila pembayaran menggunakan mata uang yang tidak didukung.

Pertimbangan wilayah
Finlandia
Swedia

Regulasi di Finlandia dan Swedia mengharuskan Anda menunjukkan metode pembayaran debit terlebih dahulu sebelum menunjukkan metode pembayaran kredit pada saat checkout di negara-negara tersebut.