Payment Element Stripe

Payment Element adalah komponen UI untuk web yang menerima 40+ metode pembayaran, memvalidasi input, dan menangani kesalahan. Gunakan komponen ini sendiri atau dengan elemen lain di frontend aplikasi web Anda.

Guna mencoba Payment Element untuk diri Anda sendiri, mulailah dengan salah satu contoh ini:

Buat Payment Element

Kode ini membuat Payment Element dan memasangnya ke DOM:

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = { /* appearance */ };
const options = { layout: 'accordion', /* options */ };
const elements = stripe.elements({ 
clientSecret, appearance });
const paymentElement = elements.create('payment', options);
paymentElement.mount('#payment-element');

Menerima pembayaran dengan Payment Element memerlukan kode backend tambahan. Lihat quickstart atau sampel aplikasi untuk mempelajari cara kerjanya.

Gabungkan elemen

Payment Element saling beroperasi dengan elemen lain. Sebagai contoh, formulir ini menggunakan satu elemen tambahan untuk mengisi otomatis detail checkout, dan elemen lainnya untuk mengumpulkan alamat pengiriman.

Untuk kode lengkap bagi contoh ini, lihat Tambahkan Link ke integrasi Elements.

Anda juga dapat menggabungkan Payment Element dengan Express Checkout Element. Dalam kasus ini, metode pembayaran dompet digital, seperti Apple Pay dan Google Pay, hanya ditampilkan di Express Checkout Element untuk menghindari duplikasi.

Metode pembayaran

Stripe mengaktifkan metode pembayaran tertentu untuk Anda secara default. Kami juga dapat mengaktifkan metode pembayaran tambahan setelah memberi tahu Anda. Gunakan Dashboard untuk mengaktifkan atau menonaktifkan metode pembayaran setiap saat. Dengan Payment Element, Anda dapat menggunakan metode pembayaran dinamis untuk:

• Kelola metode pembayaran di Dashboard tanpa pemrograman
• Tampilkan secara dinamis opsi pembayaran yang paling relevan berdasarkan faktor-faktor seperti lokasi, mata uang, dan jumlah transaksi

Misalnya, jika pelanggan di Jerman membayar dalam EUR, mereka akan melihat semua metode pembayaran aktif yang menerima EUR, mulai dari metode yang banyak digunakan di Jerman.

Tampilkan metode pembayaran dalam urutan yang relevan bagi pelanggan Anda

Guna lebih menyesuaikan cara menampilkan metode pembayaran, seperti dengan memfilter brand kartu yang tidak ingin Anda dukung, lihat Sesuaikan metode pembayaran. Untuk menambahkan metode pembayaran yang terintegrasi di luar Stripe, lihat Metode pembayaran eksternal.

Jika integrasi mengharuskan Anda mencantumkan metode pembayaran secara manual, lihat Cantumkan metode pembayaran secara manual.

Tata letak

Anda dapat menyesuaikan tata letak Payment Element agar sesuai dengan alur checkout Anda. Gambar berikut adalah Payment Element yang sama yang ditampilkan menggunakan konfigurasi tata letak yang berbeda.

Payment Element dengan tata letak yang berbeda.

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = { /* appearance */ };
const options = {
  layout: {
    type: 'tabs',
    defaultCollapsed: false,
  }
};

Penampilan

Gunakan Appearance API untuk mengontrol gaya semua elemen. Pilih tema atau perbarui detail spesifik.

Contohnya, pilih tema “flat” dan kesampingkan warna teks primer.

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = {
  theme: 'flat',
  variables: { colorPrimaryText: '#262626' }
};

Lihat dokumentasi Appearance API untuk daftar lengkap tema dan variabel.

Opsi

Elemen-elemen Stripe mendukung lebih banyak opsi daripada ini. Misalnya, tampilkan nama bisnis Anda menggunakan opsi bisnis.

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = { /* appearance */};
const options = {
  business: "RocketRides"
};

Payment Element mendukung opsi-opsi berikut. Lihat entri referensi setiap opsi untuk informasi selengkapnya.