Tombol Permintaan Pembayaran
Peringatan
Payment Request Button Element menampilkan secara dinamis opsi dompet digital selama checkout, yang memberi Anda satu integrasi untuk Apple Pay, Google Pay, dan Link. Atau, Anda dapat menggunakan Express Checkout Element untuk menawarkan beberapa tombol pembayaran sekali klik kepada pelanggan Anda. Bandingkan Express Checkout Element dan Tombol Permintaan Pembayaran.
Pelanggan melihat Apple Pay atau Google Pay jika mengaktifkannya pada perangkat, dan bergantung pada browser yang mereka gunakan. Jika Link muncul, boleh jadi dikarenakan pelanggan:
- Tidak memiliki Apple Pay atau Google Pay yang diaktifkan di perangkat mereka.
- Gunakan Chrome dengan sesi Link aktif yang diautentikasi.
Browser + Dompet Digital | Tombol Pembayaran |
---|---|
Safari + Apple Pay diaktifkan | Apple Pay |
Chrome + Link diautentikasi | Link |
Chrome + Google Pay diaktifkan dan Link tidak diautentikasi | Google Pay |
Chrome di iOS 16 + Apple Pay dan Google Pay diaktifkan | Apple Pay |
Browser apa pun + Tidak ada Apple Pay atau Google Pay yang aktif | Link |
Prasyarat
Sebelum memulai, Anda perlu:
Tinjau persyaratan untuk setiap jenis tombol pembayaran:
- Apple Pay dan Google Pay tidak ditampilkan kepada alamat IP di India, jadi rencanakan percobaan integrasi Anda dengan semestinya.
- Apple Pay memerlukan macOS 10.12.1+ atau iOS 10.1+.
- Perangkat yang kompatibel secara otomatis mendukung Google Pay.
Daftarkan dan verifikasikan domain Anda dalam mode percobaan maupun mode live.
Menambahkan metode pembayaran ke browser Anda. Sebagai contoh, Anda dapat menyimpan kartu di Chrome, menambahkan kartu ke akun Google Pay, atau menambahkan ke Dompet Digital untuk Safari.
Menyajikan aplikasi Anda melalui HTTPS. Ini adalah persyaratan baik dalam pengembangan maupun produksi. Salah satu cara untuk mulai adalah dengan menggunakan layanan seperti ngrok.
Siapkan Stripe ElementsSisi client
Elements tersedia sebagai bagian dari Stripe.js. Sertakan ini di halaman Anda dan buat kontainer yang akan digunakan untuk Element paymentRequestButton
:
<script src="https://js.stripe.com/v3/"></script> <div id="payment-request-button"> <!-- A Stripe Element will be inserted here. --> </div>
Kunci API Stripe yang dapat diterbitkan Anda juga diperlukan karena mengidentifikasi situs web Anda ke Stripe:
const stripe = Stripe(
, { apiVersion: "2024-04-10", });'pk_test_TYooMQauvdEDq54NiTphI7jx'
Buat instance paymentRequestSisi client
Buat instance stripe.paymentRequest
dengan semua opsi yang diperlukan.
const paymentRequest = stripe.paymentRequest({ country: 'US', currency: 'usd', total: { label: 'Demo total', amount: 1099, }, requestPayerName: true, requestPayerEmail: true, });
Catatan
Menggunakan parameter requestPayerName
untuk mengumpulkan alamat penagihan pembayar untuk Apple Pay dan Link. Anda dapat menggunakan alamat penagihan untuk melaksanakan verifikasi alamat dan memblokir pembayaran penipuan. Semua metode pembayaran lain otomatis mengumpulkan alamat penagihan bila hal tersebut tersedia.
Buat dan pasang paymentRequestButtonSisi client
Buat Element paymentRequestButton
serta periksa guna memastikan bahwa pelanggan Anda memiliki metode pembayaran aktif yang menggunakan canMakePayment()
. Jika ya, pasangkan Element ke kontainer untuk menampilkan tombol Permintaan Pembayaran. Jika tidak, Anda tidak dapat memasang Element, dan kami memberi Anda rekomendasi supaya menunjukkan formulir checkout tradisional.
Catatan
Jika Anda menerima Apple Pay dengan Tombol Permintaan Pembayaran, maka Anda harus menawarkan Apple Pay sebagai opsi pembayaran utama pada situs web Anda sesuai panduan Apple.. Secara internal, Tombol Permintaan Pembayaran menggunakan Apple Pay canMakePaymentWithActiveCard
API.
const elements = stripe.elements(); const prButton = elements.create('paymentRequestButton', { paymentRequest, }); (async () => { // Check the availability of the Payment Request API first. const result = await paymentRequest.canMakePayment(); if (result) { prButton.mount('#payment-request-button'); } else { document.getElementById('payment-request-button').style.display = 'none'; } })();
Buat PaymentIntentSisi server
Stripe menggunakan objek PaymentIntent untuk mewakili maksud Anda menagih pembayaran dari pelanggan, yang melacak upaya charge dan perubahan status pembayaran selama proses.
Buat PaymentIntent
di server Anda dengan jumlah dan mata uang. Selalu putuskan berapa banyak yang akan di-charge di sisi server, suatu lingkungan tepercaya, bukan ke client. Hal ini mencegah pelanggan yang berniat jahat memilih harganya sendiri.
Termasuk dalam PaymentIntent yang dikembalikan adalah client secret, yang Anda gunakan untuk menyelesaikan proses pembayaran dengan aman, bukan melewatkan seluruh objek PaymentIntent. Kirimkan client secret kembali ke client untuk digunakan di langkah berikutnya.
Selesaikan pembayaranSisi client
Dengarkan kejadian paymentmethod
untuk menerima objek PaymentMethod. Lewatkan Identifikasi PaymentMethod dan client secret PaymentIntent ke stripe.confirmCardPayment untuk menyelesaikan pembayaran.
paymentRequest.on('paymentmethod', async (ev) => { // Confirm the PaymentIntent without handling potential next actions (yet). const {paymentIntent, error: confirmError} = await stripe.confirmCardPayment( clientSecret, {payment_method: ev.paymentMethod.id}, {handleActions: false} ); if (confirmError) { // Report to the browser that the payment failed, prompting it to // re-show the payment interface, or show an error message and close // the payment interface. ev.complete('fail'); } else { // Report to the browser that the confirmation was successful, prompting // it to close the browser payment method collection interface. ev.complete('success'); // Check if the PaymentIntent requires any actions and, if so, let Stripe.js // handle the flow. If using an API version older than "2019-02-11" // instead check for: `paymentIntent.status === "requires_source_action"`. if (paymentIntent.status === "requires_action") { // Let Stripe.js handle the rest of the payment flow. const {error} = await stripe.confirmCardPayment(clientSecret); if (error) { // The payment failed -- ask your customer for a new payment method. } else { // The payment has succeeded -- show a success message to your customer. } } else { // The payment has succeeded -- show a success message to your customer. } } });
Peringatan
Pelanggan dapat menutup antarmuka pembayaran di sebagian browser bahkan setelah mereka mengotorisasi pembayaran. Hal ini berarti bahwa Anda mungkin menerima kejadian pembatalan pada objek PaymentRequest Anda setelah menerima kejadian paymentmethod
. Jika Anda menggunakan kejadian cancel
sebagai pengait untuk membatalkan pesanan pelanggan, pastikan Anda juga mengembalikan dana pembayaran yang baru saja Anda buat.
Coba integrasi Anda
Untuk mencoba integrasi, Anda harus menggunakan HTTPS dan browser yang didukung. Jika Anda menggunakan Element paymentRequestButton
dalam iframe, iframe tersebut harus memiliki atribut allow yang diatur sama dengan “payment *”.
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.
Selain itu, setiap metode pembayaran dan browser memiliki persyaratan khusus:
Kumpulkan informasi pengiriman
Untuk mengumpulkan informasi pengiriman, mulailah dengan memasukkan requestShipping: true
saat membuat permintaan pembayaran.
Anda juga dapat memberikan larik shippingOptions
saat ini, jika opsi pengiriman Anda tidak bergantung pada alamat pelanggan.
const paymentRequest = stripe.paymentRequest({ country: 'US', currency: 'usd', total: { label: 'Demo total', amount: 1099, }, requestShipping: true, // `shippingOptions` is optional at this point: shippingOptions: [ // The first shipping option in this list appears as the default // option in the browser payment interface. { id: 'free-shipping', label: 'Free shipping', detail: 'Arrives in 5 to 7 days', amount: 0, }, ], });
Selanjutnya, dengarkan kejadian shippingaddresschange
guna mendeteksi saat pelanggan memilih alamat pengiriman. Gunakan alamat untuk mengambil opsi pengiriman yang valid dari server Anda, memperbarui total, atau melakukan logika bisnis lainnya. Anda dapat menganonimkan data alamat pada kejadian shippingaddresschange
di browser supaya tidak mengungkapkan informasi sensitif yang tidak diperlukan bagi penghitungan biaya pengiriman.
Pelanggan harus memberikan shippingOptions
yang valid pada saat ini agar dapat melanjutkan alur.
paymentRequest.on('shippingaddresschange', async (ev) => { if (ev.shippingAddress.country !== 'US') { ev.updateWith({status: 'invalid_shipping_address'}); } else { // Perform server-side request to fetch shipping options const response = await fetch('/calculateShipping', { data: JSON.stringify({ shippingAddress: ev.shippingAddress }) }); const result = await response.json(); ev.updateWith({ status: 'success', shippingOptions: result.supportedShippingOptions, }); } });
Tampilkan mata anggaran
Gunakan displayItems
untuk menampilkan objek PaymentItem
dan perincian harganya di antarmuka pembayaran browser.
const paymentRequest = stripe.paymentRequest({ country: 'US', currency: 'usd', total: { label: 'Demo total', amount: 2000, }, displayItems: [ { label: 'Sample item', amount: 1000, }, { label: 'Shipping cost', amount: 1000, } ], });
Berikan gaya pada tombol
Gunakan parameter berikut untuk menyesuaikan Element:
elements.create('paymentRequestButton', { paymentRequest, style: { paymentRequestButton: { type: 'default', // One of 'default', 'book', 'buy', or 'donate' // Defaults to 'default' theme: 'dark', // One of 'dark', 'light', or 'light-outline' // Defaults to 'dark' height: '64px', // Defaults to '40px'. The width is always '100%'. }, }, });
Gunakan tombol Anda sendiri
Jika Anda ingin mendesain tombol sendiri alih-alih menggunakan Element paymentRequestButton
, Anda dapat menampilkan tombol khusus berdasarkan hasil paymentRequest.canMakePayment(). Kemudian, gunakan paymentRequest.show() untuk menampilkan antarmuka browser saat tombol Anda diklik.
Ketika membuat tombol Anda sendiri, ikuti Human Interface Guidelines dari Apple Pay dan Brand Guidelines dari Google Pay.
Peringatan
Link tidak didukung dalam konfigurasi tombol custom, sehingga tidak akan ditampilkan kepada pelanggan jika Anda memutuskan untuk menggunakannya.
Tambahkan token merchant Apple Pay untuk transaksi yang diprakarsai merchant
Konfigurasikan Tombol Permintaan Pembayaran untuk meminta Apple Pay MPAN memfasilitasi transaksi yang diprakarsai merchant (MIT) bagi pembayaran rutin, muat otomatis, atau yang ditangguhkan.
- Buat instance Permintaan Pembayaran.
- Teruskan objek
applePay
yang relevan dengan contoh penggunaan MPAN Anda (pilih dari menu menurun untuk melihat sampel kode contoh penggunaan). - Sertakan parameter yang relevan untuk contoh penggunaan Anda.
Gunakan Tombol Permintaan Pembayaran dengan Stripe Connect
Platform Connect yang membuat charge langsung atau menambahkan token ke Pelanggan di akun yang terhubung harus melakukan langkah tambahan ketika menggunakan Tombol Permintaan Pembayaran.
- Di frontend Anda, sebelum membuat instance
PaymentRequest
, atur opsistripeAccount
di instance Stripe:
const stripe = Stripe(
, { apiVersion: "2024-04-10", stripeAccount: 'CONNECTED_STRIPE_ACCOUNT_ID', });'pk_test_TYooMQauvdEDq54NiTphI7jx'
- Daftarkan semua domain tempat Anda berencana menampilkan Tombol Permintaan Pembayaran.
Link untuk Tombol Permintaan Pembayaran
Saat pelanggan baru datang ke situs Anda, mereka dapat menggunakan Link di Tombol Permintaan Pembayaran untuk membayar dengan detail pembayaran yang mereka simpan. Dengan Link, mereka tidak perlu memasukkan informasi pembayaran secara manual. Link mengharuskan pendaftaran domain.
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.