Terima pembayaran
Terima pembayaran dengan aman secara online.
Buat formulir pembayaran atau gunakan halaman checkout yang telah dibuat sebelumnya untuk mulai menerima pembayaran online.
Bangun integrasi pembayaran custom dengan menyematkan komponen UI pada situs Anda, menggunakan Stripe Elements. Lihat cara membandingkan integrasi ini dengan tipe integrasi Stripe lainnya.
Kode sisi client dan sisi server membuat formulir checkout yang menerima berbagai metode pembayaran.
Upaya integrasi
Tipe integrasi
Gabungkan komponen UI ke dalam alur pembayaran custom
Penyesuaian UI
Penyesuaian tingkat CSS dengan Appearance API
Tertarik menggunakan Stripe Tax, diskon, pengiriman, atau konversi mata uang?
Stripe memiliki integrasi Payment Element yang mengelola pajak, diskon, pengiriman, dan konversi mata uang. Lihat buat halaman checkout untuk mempelajari lebih lanjut.
Siapkan StripeSisi server
Pertama, buat akun Stripe atau masuk.
Gunakan pustaka resmi kami untuk mengakses API Stripe dari aplikasi Anda:
Buat PaymentIntentSisi server
Catatan
Jika Anda ingin merender Payment Element tanpa terlebih dahulu membuat PaymentIntent, lihat Kumpulkan detail pembayaran sebelum membuat Intent.
Objek PaymentIntent mewakili maksud Anda menagih pembayaran dari pelanggan dan melacak upaya charge dan perubahan status selama proses pembayaran.
Buat PaymentIntent
Buat PaymentIntent pada server Anda dengan amount dan currency. Di versi terbaru API, menentukan parameter automatic_
bersifat opsional karena Stripe mengaktifkan fungsionalitasnya secara default. Anda dapat mengelola metode pembayaran dari Dashboard. Stripe menangani pengembalian metode pembayaran yang memenuhi syarat berdasarkan faktor-faktor, seperti jumlah transaksi, mata uang, dan alur pembayaran.
Stripe menggunakan pengaturan metode pembayaran untuk menampilkan metode pembayaran yang telah Anda aktifkan. Untuk melihat cara metode pembayaran Anda ditampilkan kepada pelanggan, masukkan identifikasi transaksi atau tetapkan jumlah pesanan dan mata uang di Dashboard. Untuk mengesampingkan metode pembayaran, cantumkan secara manual hal yang ingin Anda aktifkan menggunakan atribut payment_method_types.
Catatan
Selalu putuskan berapa banyak yang akan di-charge di sisi server, lingkungan tepercaya, bukan di klien. Ini mencegah pelanggan yang berniat jahat untuk dapat memilih harga mereka sendiri.
Ambil client secret
PaymentIntent menyertakan client secret yang digunakan pada sisi client untuk menyelesaian proses pembayaran dengan aman. Anda dapat menggunakan pendekatan berbeda untuk meneruskan client secret ke sisi client.
Kumpulkan detail pembayaranSisi client
Kumpulkan detail pembayaran pada client dengan Payment Element. Payment Element adalah komponen UI siap-rakit yang menyederhanakan pengumpulan detail pembayaran untuk berbagai metode pembayaran.
Payment Element berisi iframe yang mengirimkan informasi pembayaran dengan aman ke Stripe melalui koneksi HTTPS. Hindari penempatan Payment Element dalam iframe lain karena sejumlah metode pembayaran memerlukan pengalihan ke halaman lain untuk konfirmasi pembayaran.
Jika Anda memilih untuk menggunakan iframe dan ingin menerima Apple Pay atau Google Pay, iframe tersebut harus memiliki atribut allow yang diatur sama dengan "payment *"
.
Alamat halaman checkout harus dimulai dengan https://
bukan http://
agar integrasi Anda berfungsi. Anda dapat mencoba integrasi tanpa menggunakan HTTPS, tapi ingatlah untuk mengaktifkannya bila sudah siap menerima pembayaran live.
Payment Element menampilkan formulir dinamis yang memungkinkan pelanggan memilih metode pembayaran. Bagi masing-masing metode pembayaran, formulir akan secara otomatis meminta pelanggan untuk mengisi seluruh detail pembayaran yang diperlukan.
Sesuaikan penampilan
Sesuaikan Payment Element agar sejalan dengan desain situs Anda dengan meneruskan objek penampilan ke dalam options
ketika membuat penyedia Elements
.
Kumpulkan alamat
Secara default, Payment Element hanya mengumpulkan detail alamat tagihan yang diperlukan. Untuk mengumpulkan alamat tagihan lengkap pelanggan (misalnya, untuk menghitung pajak barang dan layanan digital) atau alamat pengiriman, gunakan Address Element.
Minta token merchant Apple Pay
Jika Anda telah melakukan konfigurasi integrasi untuk menerima pembayaran Apple Pay, sebaiknya konfigurasikan antarmuka Apple Pay untuk menghasilkan token merchant agar dapat mengaktifkan transaksi yang diprakarsai merchant (MIT). Minta jenis token merchant yang relevan di Payment Element.
OpsionalSimpan dan ambil metode pembayaran pelanggan
Anda dapat mengonfigurasi Payment Element untuk menyimpan metode pembayaran pelanggan untuk digunakan di masa mendatang. Bagian ini menunjukkan cara mengintegrasikan fitur metode pembayaran tersimpan, yang memungkinkan Payment Element untuk:
- Meminta persetujuan pembeli untuk menyimpan metode pembayaran
- Menyimpan metode pembayaran saat pembeli memberikan persetujuan
- Menampilkan metode pembayaran yang tersimpan kepada pembeli untuk pembelian di masa mendatang
- Secara otomatis memperbarui kartu yang hilang atau kedaluwarsa saat pembeli menggantinya

Simpan metode pembayaran.

Gunakan kembali metode pembayaran yang disimpan sebelumnya.
Mengaktifkan penyimpanan metode pembayaran di Payment Element
Ketika membuat PaymentIntent pada server Anda, buat juga CustomerSession yang memberikan Identifikasi Pelanggan dan mengaktifkan komponen payment_element untuk sesi Anda. Konfigurasikan fitur metode pembayaran tersimpan yang ingin Anda aktifkan. Misalnya, mengaktifkan payment_method_save menampilkan kotak centang yang menawarkan pelanggan untuk menyimpan detail pembayarannya untuk digunakan di masa mendatang.
Anda dapat menentukan setup_
pada PaymentIntent atau Sesi Checkout untuk mengesampingkan perilaku default penyimpanan metode pembayaran. Hal ini memastikan bahwa Anda secara otomatis menyimpan metode pembayaran untuk digunakan di masa mendatang, sekalipun pelanggan tidak secara eksplisit memilih untuk menyimpannya.
Peringatan
Mengizinkan pembeli menghapus metode pembayaran yang tersimpan dengan mengaktifkan payment_method_remove berdampak pada langganan yang tergantung pada metode pembayaran tersebut. Menghapus metode pembayaran akan melepaskan PaymentMethod dari Pelanggan tersebut.
Instance Elements Anda menggunakan client secret untuk mengakses metode pembayaran yang disimpan pelanggan tersebut. Tangani kesalahan dengan benar saat Anda membuat CustomerSession. Jika terjadi kesalahan, Anda tidak perlu memberikan client secret CustomerSession ke instance Elements, karena bersifat opsional.
Buat instance Elements menggunakan client secrets untuk PaymentIntent dan CustomerSession. Kemudian, gunakan instance Elements ini untuk membuat Payment Element.
// Create the CustomerSession and obtain its clientSecret const res = await fetch("/create-intent-and-customer-session", { method: "POST" }); const { customer_session_client_secret: customerSessionClientSecret } = await res.json(); const elementsOptions = { clientSecret: '{{CLIENT_SECRET}}', customerSessionClientSecret, // Fully customizable with appearance API. appearance: {/*...*/}, }; // Set up Stripe.js and Elements to use in checkout form, passing the client secret // and CustomerSession's client secret obtained in a previous step const elements = stripe.elements(elementsOptions); // Create and mount the Payment Element const paymentElementOptions = { layout: 'accordion'}; const paymentElement = elements.create('payment', paymentElementOptions); paymentElement.mount('#payment-element');
Saat mengonfirmasi PaymentIntent, Stripe.js secara otomatis mengontrol pengaturan setup_future_usage pada PaymentIntent dan allow_redisplay pada PaymentMethod, tergantung pada jika pelanggan mencentang kotak untuk menyimpan detail pembayaran.
Terapkan pengumpulan kembali CVC
Secara opsional, tentukan require_
ketika membuat PaymentIntent untuk memberlakukan pengumpulan kembali CVC saat pelanggan membayar dengan kartu.
Mendeteksi pemilihan metode pembayaran yang disimpan
Untuk mengontrol konten dinamis saat metode pembayaran tersimpan dipilih, dengarkan peristiwa change
elemen pembayaran, yang diisi dengan metode pembayaran yang dipilih.
paymentElement.on('change', function(event) { if (event.value.payment_method) { // Control dynamic content if a saved payment method is selected } })
OpsionalLink di halaman checkout AndaSisi client
Biarkan pelanggan Anda memproses pembayaran lebih cepat dengan menggunakan Link di Payment Element. Anda dapat mengisi ulang otomatis informasi untuk setiap pelanggan yang sudah masuk dan menggunakan Link, terlepas dari jika pelanggan menyimpan informasi di Link dengan bisnis lain atau tidak. Integrasi Payment Element default menyertakan perintah Link dalam formulir kartu. Untuk mengelola Link di Payment Element, buka pengaturan metode pembayaran.

Kumpulkan alamat email pelanggan untuk autentikasi atau pendaftaran Link
Opsi integrasi
Ada dua cara untuk mengintegrasikan Link dengan Payment Element. Dari kedua cara tersebut, Stripe merekomendasikan untuk meneruskan alamat email pelanggan ke Payment Element jika tersedia. Ingatlah untuk mempertimbangkan cara kerja alur checkout Anda saat memutuskan di antara opsi-opsi ini:
Opsi integrasi | Alur checkout | Deskripsi |
---|---|---|
Teruskan alamat email pelanggan ke Payment Element Direkomendasikan |
| Lewatkan secara terprogram alamat email pelanggan ke Payment Element. Dalam skenario ini, pelanggan mengautentikasi Link secara langsung di formulir pembayaran, bukan komponen UI yang terpisah. |
Kumpulkan alamat email pelanggan di Payment Element | Pelanggan Anda memasukkan email dan mengautentikasi atau mendaftarkan dengan Link langsung di Payment Element saat checkout. | Jika pelanggan belum mendaftar dengan Link dan mereka memilih metode pembayaran yang didukung di Payment Element, mereka akan diminta untuk menyimpan detail menggunakan Link. Bagi mereka yang telah mendaftar, Link akan secara otomatis mengisi informasi pembayaran mereka. |
OpsionalAmbil pembaruan dari serverSisi client
Anda sebaiknya memperbarui atribut pada PaymentIntent setelah menampilkan Payment Element, seperti amount (misalnya, kode diskon atau biaya pengiriman). Anda dapat memperbarui PaymentIntent di server, kemudian panggil elements.fetchUpdates untuk melihat jumlah baru yang tercermin di Payment Element. Contoh ini menunjukkan kepada Anda cara membuat endpoint server yang memperbarui jumlah pada PaymentIntent:
Contoh ini memperagakan cara memperbarui UI untuk mencerminkan perubahan ini pada sisi client:
(async () => { const response = await fetch('/update'); if (response.status === 'requires_payment_method') { const {error} = await elements.fetchUpdates(); } })();
Serahkan pembayaran ke StripeSisi client
Gunakan stripe.confirmPayment untuk menyelesaikan pembayaran menggunakan detail dari Payment Element. Berikan return_url ke fungsi ini untuk menunjukkan ke mana Stripe harus mengalihkan pengguna setelah menyelesaikan pembayaran. Pengguna Anda mungkin pertama kali diarahkan ulang ke situs perantara, seperti halaman otorisasi bank, sebelum diarahkan ulang ke return_
. Pembayaran kartu segera dialihkan ke return_
bila pembayaran berhasil.
Jika tidak ingin dialihkan untuk pembayaran kartu setelah pembayaran selesai, Anda dapat mengatur pengalihan ke if_
. Ini hanya mengalihkan pelanggan yang memproses pembayaran dengan metode pembayaran berbasis pengalihan.
Pastikan return_
sesuai dengan halaman pada situs web Anda yang menyediakan status pembayaran. Bila Stripe mengarahkan ulang pelanggan ke return_
, kami menyediakan parameter query URL berikut ini:
Parameter | Keterangan |
---|---|
payment_ | Identifier unik untuk PaymentIntent . |
payment_ | client secret dari objek PaymentIntent . |
Peringatan
Jika memiliki alat yang melacak sesi browser pelanggan, Anda mungkin perlu menambah domain stripe.
ke daftar pengecualian perujuk. Pengarahan ulang menyebabkan sejumlah alat membuat sesi baru, yang mencegah Anda melacak sesi yang telah selesai.
Gunakan salah satu parameter query untuk mengambil PaymentIntent. Periksa status PaymentIntent untuk memutuskan apa yang akan ditampilkan kepada pelanggan Anda. Anda juga dapat menambahkan parameter query Anda sendiri saat memberikan return_
, yang akan tetap ada selama proses pengalihan.
Tangani kejadian pascapembayaranSisi server
Stripe mengirim kejadian payment_intent.succeeded ketika selesai pembayaran. Gunakan alat webhook Dashboard atau ikuti panduan webhook untuk menerima kejadian ini dan menjalankan tindakan, seperti mengirim email konfirmasi pesanan kepada pelanggan Anda, mencatat penjualan di database, atau memulai alur kerja pengiriman.
Dengarkan kejadian ini daripada menunggu callback dari client. Di client, pelanggan dapat menutup jendela browser atau keluar dari aplikasi sebelum callback mengeksekusi, dan klien jahat dapat memanipulasi respons. Penyiapan integrasi untuk mendengarkan kejadian asinkron memungkinkan Anda menyetujui berbagai tipe metode pembayaran dengan satu integrasi tunggal.
Selain menangani kejadian payment_
, kami merekomendasikan penanganan kejadian ini yang lain ketika menagih pembayaran dengan Payment Element:
Kejadian | Keterangan | Tindakan |
---|---|---|
payment_intent.succeeded | Dikirim bila pelanggan berhasil menyelesaikan pembayaran. | Kirimi pelanggan konfirmasi pesanan dan penuhi pesanan mereka. |
payment_intent. pemrosesan | Dikirim bila pelanggan berhasil memprakarsai pembayaran, tetapi pembayaran itu belum selesai. Kejadian ini paling umum dikirim saat pelanggan memprakarsai debit bank. Kejadian diikuti dengan kejadian payment_ atau payment_ di masa mendatang. | Kirimi pelanggan konfirmasi pesanan yang menunjukkan bahwa pembayaran mereka menunggu penyelesaian. Untuk barang digital, Anda mungkin ingin memenuhi pesanan sebelum menunggu pembayaran selesai. |
payment_intent.payment_failed | Dikirim bila pelanggan mencoba melakukan pembayaran, tetapi pembayaran itu gagal. | Jika transisi pembayaran dilakukan dari processing menjadi payment_ , tawarkan upaya lain untuk membayar kepada pelanggan. |
Coba integrasi Anda
Untuk mencoba integrasi pembayaran custom Anda:
- Buat Payment Intent dan ambil client secret.
- Isilah detail pembayaran dengan metode dari tabel berikut.
- Masukkan tanggal mendatang untuk tanggal kedaluwarsa kartu.
- Masukkan nomor 3 angka untuk CVC.
- Masukkan kode pos tagihan.
- Serahkan pembayaran ke Stripe. Anda dialihkan ke
return_
.url - Masuk ke Dashboard dan cari pembayaran pada halaman Transaksi. Jika pembayaran berhasil, Anda akan melihatnya dalam daftar tersebut.
- Klik pembayaran Anda untuk melihat detail selengkapnya, seperti informasi tagihan dan daftar barang yang dibeli. Anda dapat menggunakan informasi ini untuk memenuhi pesanan.
Pelajari selengkapnya tentang percobaan integrasi Anda.
Lihat Pengujian untuk mendapatkan informasi tambahan untuk menguji integrasi Anda.
OpsionalTambahkan metode pembayaran lainnya
Payment Element mendukung banyak metode pembayaran secara default. Anda harus mengambil langkah tambahan untuk mengaktifkan dan menampilkan sebagian metode pembayaran.
Affirm
Untuk mulai menggunakan Affirm, Anda harus mengaktifkannya di Dashboard. Saat membuat PaymentIntent dengan metode pembayaran Affirm, Anda perlu menyertakan alamat pengiriman. Contoh ini menyarankan penerusan informasi pengiriman pada client setelah pelanggan memilih metode pembayaran mereka. Pelajari selengkapnya tentang penggunaan Affirm dengan Stripe.
Coba Affirm
Pelajari cara menguji berbagai skenario menggunakan tabel berikut:
Skenario | Cara mencoba |
---|---|
Pelanggan Anda berhasil membayar dengan Affirm. | Isi formulir (pastikan untuk menyertakan alamat pengiriman) dan autentikasikan pembayaran. |
Pelanggan Anda gagal mengautentikasi di halaman pengarahan ulang Affirm. | Isi formulir dan klik Percobaan pembayaran gagal pada halaman pengarahan ulang. |
Afterpay (Clearpay)
Saat membuat PaymentIntent dengan metode pembayaran Afterpay, Anda perlu menyertakan alamat pengiriman. Pelajari selengkapnya tentang penggunaan Afterpay dengan Stripe.
Anda dapat mengelola metode pembayaran dari Dashboard. Stripe menangani pengembalian metode pembayaran yang memenuhi syarat berdasarkan faktor-faktor, seperti jumlah transaksi, mata uang, dan alur pembayaran. Contoh di bawah menggunakan atribut automatic_payment_methods tetapi Anda dapat mencantumkan afterpay_
dengan tipe metode pembayaran. Di versi terbaru API, menentukan parameter automatic_
bersifat opsional karena Stripe mengaktifkan fungsionalitasnya secara default. Terlepas dari opsi yang Anda pilih, pastikan Anda mengaktifkan Afterpay Clearpay di Dashboard.
Coba Afterpay (Clearpay)
Pelajari cara menguji berbagai skenario menggunakan tabel berikut:
Skenario | Cara mencoba |
---|---|
Pelanggan Anda berhasil membayar dengan Afterpay. | Isi formulir (pastikan untuk menyertakan alamat pengiriman) dan autentikasikan pembayaran. |
Pelanggan Anda gagal mengautentikasi di halaman pengarahan ulang Afterpay. | Isi formulir dan klik Percobaan pembayaran gagal pada halaman pengarahan ulang. |
Apple Pay dan Google Pay
Bila Anda mengaktifkan pembayaran kartu, kami menampilkan Apple Pay dan Google Pay untuk pelanggan yang lingkungannya memenuhi syarat tampilan dompet digital. Untuk menerima pembayaran dari dompet digital ini, Anda juga harus:
- Aktifkan di pengaturan metode pembayaran. Apple Pay diaktifkan secara default.
- Sajikan aplikasi Anda melalui HTTPS dalam pengembangan dan produksi.
- Daftarkan domain Anda.
- Ambil pembaruan dari server jika Anda memperbarui jumlah PaymentIntent untuk menjaga agar modal pembayaran dompet digital tetap sinkron.
Percobaan RegionalIndia
Stripe Elements tidak mendukung Google Pay atau Apple Pay untuk akun dan pelanggan Stripe di India. Oleh karena itu, Anda tidak dapat mencoba integrasi Google Pay atau Apple Pay jika alamat IP pencoba berada di India, sekalipun akun Stripe berlokasi di luar India.
Pelajari selengkapnya tentang penggunaan Apple Pay dan Google Pay dengan Stripe.
ACH Direct Debit
Saat menggunakan Payment Element dengan metode pembayaran ACH Direct Debit, ikuti langkah-langkah ini:
Buat objek Pelanggan.
Tentukan identifikasi pelanggan saat membuat
PaymentIntent
.Pilih metode verifikasi.
Saat menggunakan metode pembayaran ACH Direct Debit dengan Payment Element, Anda hanya dapat memilih automatic
atau instant
.
Pelajari selengkapnya tentang penggunaan ACH Direct Debit dengan Stripe.
Coba ACH Direct Debit
Skenario | Cara mencoba |
---|---|
Pelanggan Anda berhasil membayar dengan rekening bank AS menggunakan verifikasi instan. | Pilih Rekening bank AS dan isi formulir. Klik lembaga percobaan. Ikuti instruksi pada jendela untuk menautkan rekening bank Anda. Klik tombol pembayaran Anda. |
Pelanggan Anda berhasil membayar dengan rekening bank AS menggunakan mikrodeposit. | Pilih Rekening bank AS dan isilah formulir. Klik Masukkan detail bank secara manual saja. Ikuti instruksi pada jendela untuk menautkan rekening bank. Anda dapat menggunakan nomor rekening percobaan ini. Klik tombol pembayaran Anda. |
Pelanggan Anda gagal menyelesaikan proses penautan rekening bank. | Pilih rekening bank AS dan klik lembaga percobaan atau Masukkan detail bank secara manual. Tutup jendela tanpa menyelesaikannya. |
BLIK
Ketika menggunakan Payment Element dengan BLIK, pengguna dapat menutup modal yang memintanya untuk mengotorisasi pembayaran di aplikasi perbankan mereka. Hal ini memicu pengalihan ke return_
Anda dan tidak mengembalikan pengguna ke halaman checkout. Pelajari selengkapnya tentang penggunaan BLIK dengan Stripe.
Untuk menangani pengguna yang menutup modal, di pengendali sisi server untuk return_
, periksa status
Payment Intent untuk melihat apakah succeeded
atau masih requires_
(artinya pengguna telah menutup modal tanpa memberi otorisasi), menangani setiap kasus sesuai kebutuhan.
Metode pembayaran kode QR
Ketika menggunakan Payment Element dengan metode pembayaran berbasis kode QR (WeChat Pay, PayNow, Pix, PromptPay, Cash App Pay), pengguna dapat menutup modal kode QR. Hal ini memicu pengalihan ke return_
Anda dan tidak mengembalikan pengguna ke halaman checkout.
Untuk menangani pengguna yang menutup modal kode QR, di penangan sisi server untuk return_
Anda, periksa status
Payment Intent untuk melihat apakah succeeded
atau masih requires_
(berarti pengguna telah menutup modal tanpa membayar), menangani setiap kasus sesuai kebutuhan.
Atau, cegah pengalihan otomatis ke return_
Anda dengan meneruskan parameter opsional lanjutan redirect=if_
, yang mencegah pengalihan ketika menutup kode QR modal.
Cash App Pay
Payment Element menampilkan formulir dinamis secara berbeda di web desktop atau web seluler karena menggunakan metode autentikasi pelanggan yang berbeda. Pelajari selengkapnya tentang penggunaan Cash App Pay dengan Stripe.
PayPal
Untuk menggunakan PayPal, pastikan Anda menggunakan domain terdaftar.
Ungkapkan Stripe kepada pelanggan Anda
Stripe mengumpulkan informasi tentang interaksi pelanggan dengan Elements untuk memberikan layanan kepada Anda, mencegah penipuan, serta meningkatkan layanannya. Ini termasuk penggunaan cookie dan alamat IP guna mengidentifikasi Elements mana yang dilihat pelanggan selama satu sesi checkout. Anda bertanggung jawab untuk mengungkapkan serta memperoleh semua hak dan persetujuan yang diperlukan agar Stripe dapat menggunakan data dengan cara ini. Untuk informasi selengkapnya, kunjungi pusat privasi kami.