Simpan kartu tanpa autentikasi bank
Stripe memungkinkan Anda mengumpulkan detail kartu dan men-charge pelanggan Anda di kemudian hari. Di beberapa wilayah, bank mengharuskan formulir autentikasi kedua seperti memasukkan kode yang dikirim ke ponsel. Langkah ekstra menurunkan konversi jika pelanggan Anda tidak secara aktif menggunakan situs web atau aplikasi Anda karena mereka tidak tersedia untuk mengautentikasi pembelian.
Jika Anda menjalankan bisnis utamanya di AS dan Kanada, bank tidak mengharuskan autentikasi, jadi Anda dapat mengikuti integrasi yang lebih sederhana ini. Integrasi ini tidak akan sesuai di negara-negara yang memerlukan autentikasi untuk menyimpan kartu (misalnya, India), jadi membangun integrasi ini berarti bahwa perluasan ke negara lain atau penambahan metode pembayaran lain akan memerlukan perubahan yang signifikan. Pelajari cara menyimpan kartu yang memerlukan autentikasi.
Kepatuhan
Anda bertanggung jawab atas kepatuhan Anda terhadap semua hukum, peraturan, dan aturan jaringan yang berlaku saat menyimpan detail pembayaran pelanggan. Misalnya, jika Anda ingin menyimpan metode pembayaran pelanggan untuk digunakan di masa mendatang, seperti men-charge saat mereka tidak aktif menggunakan situs web atau aplikasi Anda. Tambahkan ketentuan di situs web atau aplikasi Anda yang menyatakan rencana Anda menyimpan detail metode pembayaran dan mengizinkan pelanggan untuk ikut serta. Jika Anda ingin men-charge saat mereka offline, pastikan ketentuan Anda mencakup hal-hal berikut ini:
- 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.
Kumpulkan detail kartuSisi klien
Sebelum memulai panduan ini, Anda membutuhkan akun Stripe. Daftar sekarang.
Buat halaman checkout untuk mengumpulkan detail kartu pelanggan Anda. Gunakan Stripe Elements, pustaka UI yang membantu Anda membuat formulir pembayaran custom. Untuk memulai dengan Elements, sertakan pustaka Stripe.js dengan skrip berikut di halaman checkout Anda.
<script src="https://js.stripe.com/v3/"></script>
Selalu muat Stripe.js secara langsung dari js.stripe.com agar tetap mematuhi PCI. Jangan menyertakan skrip dalam paket atau meng-host sendiri salinannya.
Untuk memanfaatkan fungsionalitas anti-penipuan lanjutan Stripe, sertakan skrip ini di setiap halaman di situs Anda, tidak hanya halaman checkout. Penyertaan skrip ini di setiap halaman memungkinkan Stripe mendeteksi perilaku mencurigakan yang mungkin merupakan indikasi penipuan saat pengguna menjelajahi situs web Anda.
Tambahkan Elements ke halaman Anda
Untuk mengumpulkan detail kartu dengan aman dari pelanggan, Elements membuatkan Anda komponen UI yang di-hosting oleh Stripe. Kemudian komponen tersebut dimasukkan dalam formulir pembayaran, bukan Anda yang membuatnya secara langsung. Untuk menentukan ke mana memasukkan komponen ini, buat (container) element DOM kosong dengan identifikasi unik dalam formulir pembayaran Anda.
<input id="cardholder-name" type="text"> <!-- placeholder for Elements --> <div id="card-element"></div> <div id="card-result"></div> <button id="card-button">Save Card</button>
Berikutnya, buat instance objek Stripe, yang menyediakan kunci API yang dapat dipublikasikan kepada Anda sebagai parameter pertama. Setelah itu, buat instance objek Elements dan gunakan untuk memasangkan elemen card
di DOM.
Element card
menyederhanakan formulir dan meminimalkan jumlah bidang yang diperlukan dengan memasukkan satu bidang input fleksibel yang dengan aman mengumpulkan semua detail kartu yang diperlukan.
Jika tidak, gabungkan Elements cardNumber
, cardExpiry
, dan cardCvc
untuk formulir kartu multiinput yang fleksibel.
Catatan
Selalu kumpulkan kode pos untuk meningkatkan rasio persetujuan kartu dan mengurangi penipuan.
Satu input Card Element mengumpulkan dan mengirimkan kode pos pelanggan secara otomatis ke Stripe. Jika Anda membuat formulir pembayaran dengan Elements (Card Number, Expiry, CVC) terpisah, tambahkan bidang input terpisah untuk kode pos pelanggan.
const stripe = Stripe(
); const elements = stripe.elements(); const cardElement = elements.create('card'); cardElement.mount('#card-element');'pk_test_TYooMQauvdEDq54NiTphI7jx'
Stripe Element berisi iframe yang mengirimkan informasi pembayaran dengan aman ke Stripe melalui koneksi HTTPS. Alamat halaman checkout juga harus dimulai dengan https://
bukan http://
agar integrasi Anda dapat berfungsi.
Anda dapat menguji integrasi Anda tanpa menggunakan HTTPS. Aktifkan saat Anda siap menerima pembayaran langsung.
const cardholderName = document.getElementById('cardholder-name'); const cardButton = document.getElementById('card-button'); const resultContainer = document.getElementById('card-result'); cardButton.addEventListener('click', async (ev) => { const {paymentMethod, error} = await stripe.createPaymentMethod({ type: 'card', card: cardElement, billing_details: { name: cardholderName.value, }, } ); if (error) { // Display error.message in your UI. resultContainer.textContent = error.message; } else { // You have successfully created a new PaymentMethod resultContainer.textContent = "Created payment method: " + paymentMethod.id; } });
Kirim identifikasi PaymentMethod yang dihasilkan ke server Anda.
Siapkan StripeSisi server
Gunakan pustaka resmi kami untuk mendapatkan akses ke API Stripe dari aplikasi Anda:
Simpan kartuSisi server
Simpan kartu dengan melampirkan PaymentMethod pada Pelanggan. Anda dapat menggunakan objek Customer untuk menyimpan informasi lain tentang pelanggan, seperti detail pengiriman dan alamat email.
Jika sudah memiliki Customer yang ada, Anda dapat melampirkan PaymentMethod pada objek itu sebagai gantinya.
Pada saat ini, kaitkan identifikasi Customer dan identifikasi PaymentMethod dengan perwakilan internal Anda sendiri dari pelanggan, jika memilikinya.
Charge kartu yang disimpanSisi server
Bila Anda sudah siap, ambil identifikasi PaymentMethod dan Customer yang akan di-charge. Anda dapat melakukan hal ini dengan menyimpan identifikasi keduanya di database, atau dengan menggunakan identifikasi Customer untuk mencari semua PaymentMethods Customer yang tersedia.
Gunakan identifikasi PaymentMethod dan identifikasi Customer untuk membuat PaymentIntent baru. Atur error_on_requires_action ke true untuk menolak pembayaran yang memerlukan tindakan dari pelanggan Anda, seperti autentikasi dua faktor.
Bila upaya pembayaran gagal, permintaan juga gagal dengan kode status HTTP 402 dan Stripe menampilkan kesalahan. Anda perlu memberi tahu pelanggan untuk kembali ke aplikasi (misalnya dengan mengirimkan email) untuk menyelesaikan pembayaran. Periksa kode Kesalahan yang dimunculkan oleh pustaka Stripe API atau cek last_payment_error.decline_code di PaymentIntent untuk memeriksa mengapa penerbit kartu menolak pembayaran tersebut.
Tangani kesalahan kartu
Beri tahu pelanggan Anda bahwa pembayaran gagal dan arahkan mereka ke formulir pembayaran yang Anda buat di Langkah 1 di mana mereka dapat memasukkan detail kartu baru. Kirimkan identifikasi PaymentMethod ID baru itu ke server Anda untuk melampirkan pada objek Customer dan melakukan pembayaran lagi.
Atau, Anda dapat membuat PaymentIntent dan menyimpan kartu semuanya dalam satu panggilan API jika Anda sudah membuat Customer.
Mengatur setup_future_usage ke on_session
menunjukkan kepada Stripe bahwa Anda ingin menyimpan kartu untuk lain waktu, tanpa memicu autentikasi yang tidak perlu.
Coba integrasi
Stripe menyediakan kartu percobaan yang dapat Anda gunakan dalam mode percobaan untuk menyimulasikan perilaku kartu yang berbeda. Gunakan kartu ini dengan CVC, kode pos, dan tanggal kedaluwarsa di masa mendatang.
Nomor | Keterangan |
---|---|
Berhasil dan segera memproses pembayaran. | |
Selalu gagal dengan kode tolakan insufficient_funds . | |
Perlu autentikasi, yang di integrasi ini akan ditolak dengan kode authentication_required . |
Upgrade integrasi Anda untuk menangani autentikasi kartu
Integrasi ini menolak kartu yang memerlukan autentikasi selama pembayaran. Jika Anda mulai melihat banyak pembayaran di Dashboard yang tercantum sebagai Failed
, maka itu waktunya untuk melakukan upgrade integrasi Anda. Integrasi global Stripe menangani pembayaran ini, bukan menolaknya secara otomatis.