Payment Element Stripe

Terima metode pembayaran dari seluruh dunia dengan komponen UI yang aman dan dapat disematkan.

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.

Demo ini hanya menampilkan Google Pay atau Apple Pay jika Anda memiliki kartu aktif dengan salah satu dompet.

API yang kompatibel

Stripe menawarkan dua API pembayaran inti yang kompatibel dengan Elements sehingga memberi Anda fleksibilitas untuk menerima berbagai tipe pembayaran dari pelanggan. Anda dapat mengintegrasikan API ini ke antarmuka pembayaran siap-rakit Stripe. Meski kami merekomendasikan penggunaan Sesi Checkout bagi sebagian besar pengguna, API melayani contoh penggunaan yang sedikit berbeda tergantung cara Anda memilih untuk menyusun alur checkout dan seberapa besar kontrol yang Anda perlukan. Anda dapat membangun halaman checkout dengan Checkout Session API atau membangun integrasi lanjutan dengan Payment Intents API.

Checkout Sessions API memungkinkan Anda membuat model alur checkout pelanggan. Ini meliputi mata anggaran yang disertakan di alamat pembelian, tagihan dan pengirimannya, tarif pajak yang berlaku, serta kupon atau diskon. Sesi Checkout memungkinkan Anda membuat langganan, menghitung tarif pajak dengan Stripe Tax, dan memprakarsai pembayaran.
Payment Intents API memungkinkan Anda membuat model langkah pembayaran. Tidak seperti Checkout Sessions API, yang memerlukan detail mata anggaran, Anda hanya meneruskan jumlah final yang ingin Anda charge. Ini sesuai untuk alur pembayaran, seperti pembayaran di luar sesi. Jika ingin menggunakan Stripe untuk menghitung pajak yang berlaku atau membuat langganan, Anda harus mengintegrasikan masing-masing dengan Stripe Tax API atau Subscriptions API.

Sesi Checkout mencakup informasi pelanggan, pengiriman, pajak, diskon, kupon, dan integrasi pembayaran, sedangkan Payment Intents hanya menangani integrasi pembayaran.

Bangun halaman checkout dengan Payment Element

Bangun integrasi dengan Payment Element menggunakan Checkout Sessions API.

Bangun integrasi lanjutan dengan Payment Element

Bangun integrasi dengan Payment Element menggunakan Payment Intents API.

Gandakan sampel aplikasi di GitHub

HTML · React · Vue

Lihat referensi Stripe.js

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.

Catatan

Anda tidak dapat menghapus perjanjian hukum Link karena diperlukan guna memastikan kepatuhan terhadap kesadaran pengguna yang tepat tentang ketentuan layanan dan kebijakan privasi. Objek ketentuan tidak berlaku untuk perjanjian hukum Link.

Formulir dengan informasi kontak, alamat pengiriman, dan bidang pembayaran. Info kontak diberi label Link Authentication Element, alamat pengiriman diberi label Address Element, dan bidang pembayaran diberi label Payment Element

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

Untuk menyesuaikan lebih lanjut 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, Anda dapat menggunakan metode pembayaran custom.

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.

Contoh dari tiga formulir checkout. Gambar menunjukkan opsi tab, tempat pelanggan memilih dari metode pembayaran yang ditampilkan sebagai tab atau dua opsi akordeon, tempat metode pembayaran dicantumkan secara vertikal. Anda dapat memilih untuk menampilkan tombol radio atau tidak pada tampilan akordeon.

Payment Element dengan tata letak yang berbeda.

Tata letak tab menampilkan metode pembayaran secara horizontal menggunakan tab. Untuk menggunakan tata letak ini, atur nilai untuk layout.type ke tabs. Anda juga dapat menentukan properti lain, seperti layout.defaultCollapsed.

index.js
Lihat sampel lengkap
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.

Contoh mode terang dan gelap untuk formulir checkout elemen pembayaran.

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

index.js
Lihat sampel lengkap
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.

index.js
Lihat sampel lengkap
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

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

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

tata letak	Tata letak untuk Payment Element.
defaultValues	Informasi pelanggan awal untuk ditampilkan di Payment Element.
bisnis	Informasi tentang bisnis Anda untuk ditampilkan di Payment Element.
paymentMethodOrder	Urutan untuk mencantumkan metode pembayaran.
bidang	Apakah akan menampilkan bidang tertentu.
readOnly	Apakah detail pembayaran dapat diubah.
ketentuan	Apakah kuasa atau perjanjian legal lainnya ditampilkan di Payment Element. Perilaku default-nya adalah menampilkannya hanya bila diperlukan.
dompet digital	Apakah akan menampilkan dompet digital seperti Apple Pay atau Google Pay. Default-nya adalah menampilkannya bila memungkinkan.

Kesalahan

Payment Element secara otomatis menampilkan pesan kesalahan lokal yang dilihat pelanggan selama konfirmasi klien untuk kode kesalahan berikut:

generic_decline
insufficient_funds
incorrect_zip
incorrect_cvc
invalid_cvc
invalid_expiry_month
invalid_expiry_year
expired_card
fraudulent
lost_card
stolen_card
card_velocity_exceeded

Untuk menampilkan pesan bagi tipe kesalahan lainnya, lihat kode kesalahan dan penanganan kesalahan.