Siapkan pembayaran mendatang
Setup Intents API memungkinkan Anda menyimpan detail pembayaran pelanggan tanpa pembayaran pertama. Hal ini berguna jika Anda ingin melakukan onboarding pelanggan sekarang, menyiapkannya untuk pembayaran, dan menagih mereka di masa mendatang—saat mereka offline.
Gunakan integrasi ini untuk menyiapkan pembayaran rutin atau untuk melakukan pembayaran satu kali dengan jumlah akhir yang ditentukan kemudian, sering kali setelah pelanggan menerima layanan Anda.
Kepatuhan
You’re responsible for your compliance with all applicable laws, regulations, and network rules when saving a customer’s payment details. These requirements generally apply if you want to save your customer’s payment method for future use, such as displaying a customer’s payment method to them in the checkout flow for a future purchase or charging them when they’re not actively using your website or app. Add terms to your website or app that state how you plan to save payment method details and allow customers to opt in.
When you save a payment method, you can only use it for the specific usage you have included in your terms. To charge a payment method when a customer is offline and save it as an option for future purchases, make sure that you explicitly collect consent from the customer for this specific use. For example, include a “Save my payment method for future use” checkbox to collect consent.
To charge them when they’re offline, make sure your terms include the following:
- Persetujuan pelanggan untuk melakukan pembayaran atau serangkaian pembayaran atas nama mereka untuk transaksi tertentu.
- Waktu dan frekuensi pembayaran yang diantisipasi (misalnya, jika charge untuk angsuran terjadwal, pembayaran langganan, atau penambahan saldo tidak terjadwal).
- Cara Anda menentukan jumlah pembayaran.
- Kebijakan pembatalan Anda, jika metode pembayarannya untuk layanan langganan.
Pastikan Anda menyimpan catatan persetujuan tertulis dari pelanggan atas ketentuan ini.
Catatan
Jika Anda perlu menggunakan konfirmasi sisi server manual atau integrasi Anda memerlukan penyajian metode pembayaran secara terpisah, lihat panduan alternatif kami.
Siapkan StripeSisi server
Pertama, buat akun Stripe atau masuk.
Gunakan pustaka resmi kami untuk mengakses API Stripe dari aplikasi Anda:
Aktifkan metode pembayaran
Lihat pengaturan metode pembayaran dan aktifkan metode pembayaran yang ingin Anda dukung. Anda memerlukan setidaknya satu metode pembayaran yang diaktifkan untuk membuat SetupIntent.
Secara default, Stripe mengaktifkan kartu dan metode pembayaran umum lainnya yang dapat membantu Anda menjangkau lebih banyak pelanggan, namun sebaiknya aktifkan metode pembayaran tambahan yang relevan untuk bisnis dan pelanggan Anda. Lihat Opsi integrasi metode pembayaran untuk informasi tentang dukungan produk dan metode pembayaran, dan halaman skema biaya kami untuk mengetahui biayanya.
Buat PelangganSisi server
Untuk menyiapkan metode pembayaran bagi pembayaran mendatang, Anda harus melampirkannya ke Pelanggan. Buat objek Customer
bila pelanggan membuat akun pada bisnis Anda. Objek Customer
memungkinkan penggunaan kembali metode pembayaran dan pelacakan ke beberapa pembayaran sekaligus.
Buat SetupIntentSisi server
Catatan
Jika Anda ingin merender Payment Element tanpa terlebih dahulu membuat SetupIntent, lihat Kumpulkan detail pembayaran sebelum membuat Intent.
SetupIntent adalah objek yang mewakili tujuan Anda untuk menyiapkan metode pembayaran pelanggan untuk pembayaran di masa mendatang. Metode pembayaran yang ditampikan kepada pelanggan saat proses checkout juga disertakan dalam Setupintent. Anda dapat mengizinkan Stripe untuk secara otomatis menarik metode pembayaran dari pengaturan Dashboard Anda atau Anda dapat mencantumkannya secara manual.
Kecuali jika integrasi Anda memerlukan opsi berbasis kode untuk menawarkan metode pembayaran, Stripe merekomendasikan opsi otomatis. Hal ini karena Stripe mengevaluasi mata uang, batasan metode pembayaran, dan paramater lainnya untuk menentukan daftar metode pembayaran yang didukung. Metode pembayaran meningkatkan konversi dan yang paling relevan dengan mata uang dan lokasi pelanggan akan diprioritaskan. Metode pembayaran dengan prioritas yang lebih rendah akan disembunyikan di bawah menu yang dapat diperluas.
Ambil client secret
SetupIntent 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.
Menggunakan Radar
Saat menyimpan metode pembayaran pelanggan tanpa pembayaran pertama, Radar tidak bertindak pada SetupIntent secara default. Jika Anda ingin mengaktifkan ini sebagai default, buka pengaturan Radar dan aktifkan Gunakan Radar pada metode pembayaran yang disimpan untuk penggunaan mendatang.
Kumpulkan detail pembayaranSisi client
Anda siap untuk mengumpulkan detail pembayaran pada client dengan Payment Element. Pembayaran Element adalah komponen UI siap-rakit yang menyederhanakan detail pengumpulan pembayaran untuk berbagai metode pembayaran.
Payment Element berisi iframe yang secara aman mengirim informasi pembayaran ke Stripe melalui koneksi HTTPS. Alamat halaman checkout harus dimulai dengan https://
, bukan http://
agar integrasi Anda dapat berfungsi. Anda dapat mencoba integrasi tanpa melakukannya, tetapi ingatlah untuk mengaktifkan HTTPS 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 sesuai dengan desain situs Anda dengan meneruskan objek penampilan ke dalam options
ketika membuat penyedia Elements
.
Minta token merchant Apple Pay
Jika Anda menerima pembayaran Apple Pay, sebaiknya konfigurasikan antarmuka Apple Pay untuk menghasilkan token merchant untuk mengaktifkan transaksi yang diprakarsai merchant (MIT). Minta tipe token merchant yang relevan dalam Payment Element. Contoh berikut memperlihatkan permintaan untuk token merchant pembayaran yang ditangguhkan.
const paymentElement = elements.create('payment', { applePay: { deferredPaymentRequest: { paymentDescription: 'My deferred payment', managementURL: 'https://example.com/billing', deferredBilling: { amount: 2500, label: 'Deferred Fee', deferredPaymentDate: new Date('2024-01-05') }, } }, // Other options });
Konfigurasikan mata uang
Saat menggunakan SetupIntents dengan automatic_payment_methods, meneruskan mata uang ke dalam options
saat membuat penyedia Elements
, akan memengaruhi metode pembayaran mana yang ditampilkan oleh Element Pembayaran. Elemen Pembayaran menampilkan metode pembayaran yang diaktifkan di Dashboard Stripe yang mendukung mata uang yang disediakan. Lihat Opsi integrasi metode pembayaran untuk detail lebih lanjut tentang apa saja yang didukung.
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.
Serahkan detail pembayaran ke StripeSisi client
Gunakan stripe.confirmSetup untuk menyelesaikan penyiapan menggunakan detail yang dikumpulkan oleh Payment Element. Berikan return_url ke fungsi ini sehingga Stripe dapat mengarahkan ulang pengguna setelah mereka menyelesaikan penyiapan. Kami mungkin pertama kali mengarahkan ulang mereka ke situs perantara, seperti halaman otorisasi bank, sebelum mengarahkan ulang mereka ke return_url
.
Jika pelanggan Anda menyimpan detail kartu mereka, kami segera mengarahkan ulang mereka ke return_url
bila penyiapan berhasil. Jika Anda tidak ingin diarahkan ulang untuk pembayaran kartu, Anda dapat mengatur pengarahan ulang ke if_required
. Ini hanya mengarahkan ulang pelanggan yang memproses pembayaran dengan metode pembayaran berbasis pengarahan ulang.
Pastikan return_url
sesuai dengan halaman di situs web Anda yang menyediakan status dari SetupIntent
. Stripe menyediakan parameter query URL berikut untuk memverifikasi status saat kami mengarahkan ulang pelanggan ke return_url
. Anda juga dapat menambahkan parameter query sendiri ketika memberikan return_url
, dan parameter tersebut tetap ada selama proses pengarahan ulang.
Parameter | Keterangan |
---|---|
setup_intent | Identifier unik untuk SetupIntent . |
setup_intent_client_secret | client secret dari objek SetupIntent . |
Anda dapat menggunakan stripe.retrieveSetupIntent untuk mengambil SetupIntent menggunakan parameter query setup_intent_client_secret
. Konfirmasi SetupIntent yang berhasil akan menyimpan ID PaymentMethod
yang dihasilkan (di result.setupIntent.payment_method
) ke Customer
yang disediakan.
Peringatan
Jika memiliki alat yang melacak sesi browser pelanggan, Anda mungkin perlu menambah domain stripe.com
ke daftar pengecualian perujuk. Pengarahan ulang menyebabkan sejumlah alat membuat sesi baru yang mencegah Anda melacak sesi yang telah selesai.
Charge metode pembayaran yang disimpan nantiSisi server
Kepatuhan
Anda bertanggung jawab atas kepatuhan terhadap semua undang-undang, regulasi, dan aturan jaringan yang berlaku ketika menyimpan detail pembayaran pelanggan. Saat menampilkan metode pembayaran sebelumnya kepada pelanggan akhir untuk pembelian di masa mendatang, pastikan Anda mencantumkan metode pembayaran yang telah mendapatkan persetujuan dari pelanggan untuk menyimpan detail metode pembayaran untuk penggunaan khusus di masa mendatang. Untuk membedakan antara metode pembayaran yang dilampirkan pada pelanggan yang dapat dan tidak dapat ditampilkan kepada pelanggan akhir Anda sebagai metode pembayaran tersimpan untuk pembelian di masa mendatang, gunakan parameter allow_redisplay.
Saat Anda siap untuk men-charge pelanggan Anda di-luar sesi, gunakan ID Pelanggan dan PaymentMethod untuk membuat PaymentIntent. Untuk menemukan metode pembayaran yang akan di-charge, buat daftar metode pembayaran yang terkait dengan pelanggan Anda. Contoh ini mencantumkan kartu, tetapi Anda dapat mencantumkan apa pun yang didukung tipe.
Bila Anda memiliki identifikasi PaymentMethod dan Pelanggan, buat PaymentIntent dengan jumlah dan mata uang pembayaran. Atur beberapa parameter lain untuk melakukan pembayaran di-luar sesi:
- Tetapkan off_session ke
true
untuk mengindikasikan bahwa pelanggan tidak berada dalam alur checkout Anda selama upaya pembayaran dan tidak dapat memenuhi permintaan autentikasi yang dibuat oleh mitra, seperti penerbit kartu, bank, atau lembaga pembayaran lainnya. Jika, selama alur checkout Anda, mitra meminta autentikasi, Stripe meminta pengecualian menggunakan informasi pelanggan dari transaksi di-dalam sesi sebelumnya. Jika syarat pengecualian tidak terpenuhi, PaymentIntent mungkin akan memunculkan kesalahan. - Atur nilai properti confirm PaymentIntent ke
true
, yang akan menyebabkan konfirmasi segera terjadi saat PaymentIntent dibuat. - Atur payment_method ke identifikasi PaymentMethod dan pelanggan ke identifikasi Pelanggan.
Bila upaya pembayaran gagal, permintaan juga gagal dengan kode status HTTP 402 dan status PaymentIntent adalah requires_payment_method. Anda harus memberi tahu pelanggan agar kembali ke aplikasi untuk menyelesaikan pembayaran (misalnya dengan mengirimkan email atau notifikasi dalam-aplikasi).
Periksa kode kesalahan yang dimunculkan oleh pustaka API Stripe. Jika pembayaran gagal karena kode penolakan authentication_required, gunakan client secret PaymentIntent yang ditolak dengan confirmPayment agar pelanggan dapat mengautentikasi pembayaran.
const form = document.getElementById('payment-form'); form.addEventListener('submit', async (event) => { event.preventDefault(); const {error} = await stripe.confirmPayment({ // The client secret of the PaymentIntent clientSecret, confirmParams: { return_url: 'https://example.com/order/123/complete', }, }); if (error) { // This point will only be reached if there is an immediate error when // confirming the payment. Show error to your customer (for example, payment // details incomplete) const messageContainer = document.querySelector('#error-message'); messageContainer.textContent = error.message; } else { // Your customer will be redirected to your `return_url`. For some payment // methods like iDEAL, your customer will be redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } });
Catatan
stripe.confirmPayment
dapat perlu waktu beberapa detik untuk menyelesaikan. Sambil menunggu, nonaktifkan formulir Anda agar tidak diserahkan kembali dan tampilkan indikator menunggu seperti spinner. Jika Anda menerima kesalahan, tampilkan kepada pelanggan, aktifkan kembali formulir, dan sembunyikan indikator menunggu. Jika pelanggan harus melakukan langkah tambahan untuk menyelesaikan pembayaran, seperti autentikasi, Stripe.js akan memandu mereka menjalani proses itu.
Jika pembayaran gagal karena alasan lain, seperti dana tidak mencukupi, kirim pelanggan Anda ke halaman pembayaran untuk memasukkan metode pembayaran baru. Anda dapat menggunakan kembali PaymentIntent yang ada untuk mencoba lagi pembayaran dengan detail pembayaran baru.
Coba integrasi
Gunakan detail pembayaran percobaan dan halaman pengarahan ulang percobaan untuk memverifikasi integrasi Anda. Klik tab di bawah guna melihat detail untuk setiap metode pembayaran.
Coba men-charge PaymentMethod Debit SEPA yang disimpan
Mengonfirmasi SetupIntent menggunakan iDEAL, Bancontact, atau Sofort, menghasilkan PaymentMethod Debit Langsung SEPA. Debit Langsung SEPA adalah metode pembayaran dengan notifikasi tertunda yang berubah menjadi status processing
penengah sebelum nanti transisi beberapa hari menjadi menjadi status succeeded
atau requires_payment_method
.
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.