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.

Compatible APIs

Stripe offers two core payments APIs compatible with Elements that give you the flexibility to accept various types of payments from your customers. You can integrate these APIs into Stripe’s prebuilt payment interfaces. While we recommend using Checkout Sessions for most users, the APIs serve slightly different use cases depending on how you choose to structure your checkout flow and how much control you require. You can build a checkout page with the Checkout Session API or build an advanced integration with the Payment Intents API.

• The Checkout Sessions API allows you to model your customer’s checkout flow. This includes the line items included in their purchase, billing and shipping addresses, applicable tax rates, and coupons or discounts. The Checkout Session allows you to create subscriptions, calculate tax rates with Stripe Tax, and initiate payments.
• The Payment Intents API allows you to model the payments step. Unlike the Checkout Sessions API, which requires line item details, you only pass in the final amount you want to charge. This is suitable for payment flows, such as off-session payments. If you want to use Stripe to calculate applicable taxes or create subscriptions, you must integrate with the Stripe Tax API or Subscriptions API, respectively.

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

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.

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: { name: "RocketRides" }
};

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

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.