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.
Prasyarat
Sebelum memulai, Anda perlu:
- Tinjau persyaratan untuk setiap jenis tombol pembayaran:
- 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 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 Elements
Catatan
Demo di CodeSandbox memungkinkan Anda mencoba React Stripe.js tanpa perlu membuat proyek baru.
Tambahkan Stripe.js dan Elements ke halaman Anda
Untuk menggunakan komponen Element, bungkus komponen halaman checkout Anda dalam penyedia Elements. Panggil loadStripe
dengan kunci yang dapat diterbitkan dan teruskan Promise
yang dikembalikan ke penyedia Elements
.
import React from 'react'; import ReactDOM from 'react-dom'; import {Elements} from '@stripe/react-stripe-js'; import {loadStripe} from '@stripe/stripe-js'; import CheckoutForm from './CheckoutForm'; // Make sure to call `loadStripe` outside of a component's render to avoid // recreating the `Stripe` object on every render. const stripePromise = loadStripe(
); function App() { return ( <Elements stripe={stripePromise}> <CheckoutForm /> </Elements> ); }; ReactDOM.render(<App />, document.getElementById('root'));'pk_test_TYooMQauvdEDq54NiTphI7jx'
Buat instance paymentRequestSisi klien
Di komponen formulir checkout Anda, buat instance stripe.paymentRequest dengan semua opsi yang diperlukan.
import React, {useState, useEffect} from 'react'; import {PaymentRequestButtonElement, useStripe} from '@stripe/react-stripe-js'; const CheckoutForm = () => { const stripe = useStripe(); const [paymentRequest, setPaymentRequest] = useState(null); useEffect(() => { if (stripe) { const pr = stripe.paymentRequest({ country: 'US', currency: 'usd', total: { label: 'Demo total', amount: 1099, }, requestPayerName: true, requestPayerEmail: true, }); } }, [stripe]); // Use a traditional checkout form. return 'Insert your form or button component here.'; }
Catatan
Menggunakan parameter requestPayerName
untuk mengumpulkan alamat penagihan pembayar untuk Apple Pay. 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.
Tampilkan Payment Request Button ElementSisi klien
Periksa guna memastikan bahwa pelanggan Anda memiliki metode pembayaran aktif yang menggunakan canMakePayment. Jika ya, tampilkan <PaymentRequestButtonElement>
. Jika tidak, Anda tidak dapat menampilkan Element, dan kami mendorong Anda untuk menampilkan formulir pembayaran tradisional sebagai gantinya.
import React, {useState, useEffect} from 'react'; import {PaymentRequestButtonElement, useStripe} from '@stripe/react-stripe-js'; const CheckoutForm = () => { const stripe = useStripe(); const [paymentRequest, setPaymentRequest] = useState(null); useEffect(() => { if (stripe) { const pr = stripe.paymentRequest({ country: 'US', currency: 'usd', total: { label: 'Demo total', amount: 1099, }, requestPayerName: true, requestPayerEmail: true, }); // Check the availability of the Payment Request API. pr.canMakePayment().then(result => { if (result) { setPaymentRequest(pr); } }); } }, [stripe]); if (paymentRequest) { return <PaymentRequestButtonElement options={{paymentRequest}} /> } // Use a traditional checkout form. return 'Insert your form or button component here.'; }
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 klien
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 setelah menerima kejadian token
atau paymentmethod
. Jika Anda menggunakan kejadian cancel
sebagai hook untuk membatalkan pesanan pelanggan, pastikan Anda juga mengembalikan dana pembayaran yang baru saja dibuat.
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 *”.
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 event shippingaddresschange
untuk mendeteksi saat pelanggan memilih alamat pengiriman. Gunakan alamat untuk mengambil opsi pengiriman yang valid dari server Anda, memperbarui total, atau melakukan logika bisnis lainnya. Data alamat pada peristiwa shippingaddresschange
dapat dianonimkan oleh browser untuk tidak mengungkapkan informasi sensitif yang tidak diperlukan untuk 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 pr = 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:
const options = { 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%'. }, } } <PaymentRequestButtonElement options={options} />
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.
Gunakan Tombol Permintaan Pembayaran dengan Stripe Connect
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.