Terima pembayaran

Terima pembayaran dengan aman secara online.

Buat formulir pembayaran atau gunakan halaman checkout yang telah dibuat sebelumnya untuk mulai menerima pembayaran online.

Integrasi ini mengombinasikan semua langkah yang diperlukan untuk membayar—dengan mengumpulkan detail pembayaran dan mengonfirmasi pembayaran—menjadi satu lembaran yang ditampilkan di bagian atas aplikasi Anda.

Siapkan Stripe
Sisi server
Sisi client

Pertama, Anda membutuhkan akun Stripe. Daftar sekarang.

Sisi server

Integrasi ini memerlukan endpoint di server Anda yang berinteraksi dengan Stripe API. Gunakan pustaka resmi untuk akses ke Stripe API dari server Anda:

Sisi client

React Native SDK adalah sumber terbuka dan didokumentasikan lengkap. Secara internal, SDK iOS asli dan SDK Android digunakan. Untuk menginstal React Native SDK Stripe, jalankan salah satu perintah berikut di direktori proyek (bergantung pada manajer paket yang Anda gunakan):

Selanjutnya, instal beberapa dependensi lain yang diperlukan:

Untuk iOS, buka direktori ios dan jalankan pod install untuk memastikan bahwa Anda juga menginstal dependensi asli yang diperlukan.
Untuk Android, tidak ada lagi ketergantungan yang harus diinstal.

Catatan

Sebaiknya ikuti panduan TypeScript resmi untuk menambahkan dukungan TypeScript.

Inisialisasi Stripe

Untuk menginisialisasi Stripe di aplikasi React Native, bungkus layar pembayaran dengan komponen StripeProvider, atau gunakan metode inisialisasi initStripe. Hanya kunci yang dapat dipublikasikan API di publishableKey yang diperlukan. Contoh berikut menunjukkan cara menginisialisasi Stripe menggunakan komponen StripeProvider.

Catatan

Gunakan kunci percobaan API Anda saat mencoba serta mengembangkan, dan kunci mode live bila Anda memublikasikan aplikasi.

Aktifkan metode pembayaran

Lihat pengaturan metode pembayaran dan aktifkan metode pembayaran yang ingin Anda dukung. Anda membutuhkan setidaknya satu metode pembayaran yang diaktifkan untuk membuat PaymentIntent.

Secara default, Stripe mengaktifkan kartu dan metode pembayaran umum lainnya yang dapat membantu menjangkau lebih banyak pelanggan, tetapi sebaiknya aktifkan metode pembayaran tambahan yang relevan untuk bisnis dan pelanggan Anda. Lihat Dukungan metode pembayaran untuk dukungan produk dan metode pembayaran, dan halaman skema biaya kami untuk mengetahui biayanya.

Tambahkan endpoint
Sisi server

Catatan

Untuk menampilkan PaymentSheet sebelum membuat PaymentIntent, lihat Kumpulkan detail pembayaran sebelum membuat Intent.

Integrasi ini menggunakan tiga objek API Stripe:

PaymentIntent: Stripe menggunakannya untuk mewakili maksud Anda menagih pembayaran dari pelanggan, yang melacak upaya charge dan perubahan status pembayaran selama proses.
(Opsional) Pelanggan: Untuk menyiapkan metode pembayaran bagi pembayaran mendatang, Anda harus melampirkannya ke Pelanggan. Buat objek Pelanggan saat pelanggan membuat akun pada bisnis Anda. Jika pelanggan melakukan pembayaran sebagai tamu, Anda dapat membuat objek Pelanggan sebelum pembayaran dan mengaitkannya dengan representasi internal Anda sendiri dari akun pelanggan nanti.
(Opsional) Kunci Efemeral Pelanggan: Informasi mengenai objek Pelanggan bersifat sensitif, dan tidak dapat diambil langsung dari aplikasi. Kunci Efemeral memberikan akses sementara SDK kepada Pelanggan.

Catatan

Jika belum pernah menyimpan kartu ke Pelanggan dan tidak mengizinkan Pelanggan yang kembali untuk menggunakan kembali kartu yang disimpan, Anda dapat menghilangkan objek Pelanggan dan Kunci Efemeral Pelanggan dari integrasi.

Karena alasan keamanan, aplikasi Anda tidak dapat membuat objek ini. Sebagai gantinya, tambahkan endpoint di server Anda yang:

Mengambil Pelanggan, atau membuat yang baru.
Membuat Kunci Efemeral untuk Pelanggan.
Membuat PaymentIntent dengan amount, currency, dan customer. Secara opsional, Anda juga dapat menyertakan parameter automatic_payment_methods. Stripe mengaktifkan fungsinya secara default di versi terbaru API.
Mengembalikan client secret Payment Intent, secret Kunci Efemeral, id Pelanggan, dan kunci yang dapat dipublikasikan ke aplikasi Anda.

Metode pembayaran yang ditampilkan kepada pelanggan selama proses checkout juga disertakan dalam PaymentIntent. Anda dapat mengizinkan Stripe menarik metode pembayaran dari pengaturan Dashboard atau Anda dapat mencantumkannya secara manual. Terlepas dari opsi yang Anda pilih, ketahui mata uang yang diteruskan di PaymentIntent memfilter metode pembayaran yang ditampilkan kepada pelanggan. Misalnya, jika Anda meneruskan eur pada PaymentIntent dan mengaktifkan OXXO di Dashboard, OXXO tidak akan ditampilkan kepada pelanggan karena OXXO tidak mendukung pembayaran eur.

Kecuali jika integrasi Anda memerlukan opsi berbasis kode untuk menawarkan metode pembayaran, Stripe merekomendasikan opsi otomatis. Hal ini karena Stripe mengevaluasi mata uang, pembatasan metode pembayaran, dan parameter lainnya untuk menentukan daftar metode pembayaran yang didukung. Metode pembayaran yang meningkatkan konversi serta yang paling relevan dengan mata uang dan lokasi pelanggan akan diprioritaskan.

Kumpulkan detail pembayaran
Sisi client

Sebelum menampilkan Payment Element seluler, halaman checkout Anda harus:

Tampilkan produk yang sedang dibeli dan jumlah totalnya
Kumpulkan setiap informasi pengiriman yang diperlukan
Sertakan tombol checkout untuk menyajikan UI Stripe

Dalam checkout aplikasi Anda, buat permintaan jaringan ke endpoint backend yang Anda buat di langkah sebelumnya dan panggil initPaymentSheet dari hook useStripe.

Ketika pelanggan mengetuk tombol Checkout, panggil presentPaymentSheet() untuk membuka lembaran. Setelah pelanggan menyelesaikan pembayaran ini, lembaran akan ditutup dan janji akan diselesaikan dengan StripeError<PaymentSheetError> opsional.

Jika tidak ada kesalahan, informasikan pengguna bahwa mereka selesai (misalnya, dengan menampilkan layar konfirmasi pesanan).

Mengatur allowsDelayedPaymentMethods ke true memungkinkan metode pembayaran pemberitahuan tertunda seperti rekening bank AS. Untuk metode pembayaran ini, status pembayaran finalnya tidak diketahui bila PaymentSheet selesai, dan berhasil atau gagal sebagai gantinya nanti. Jika Anda mendukung jenis pembayaran ini, informasikan kepada pelanggan bahwa pesanannya telah dikonfirmasi dan hanya memenuhi pesanan (misalnya, mengirim produknya) bila pembayaran berhasil.

Siapkan URL kembali Anda (hanya iOS)
Sisi client

Bila pelanggan keluar dari aplikasi Anda (misalnya untuk melakukan autentikasi di Safari atau aplikasi perbankan), sediakan cara agar pelanggan dapat kembali ke aplikasi Anda secara otomatis. Banyak tipe metode pembayaran memerlukan URL kembali. Jika Anda tidak memberikannya, kami tidak dapat menyajikan metode pembayaran yang mengharuskan URL kembali kepada pengguna, sekalipun Anda telah mengaktifkannya.

Untuk memberikan URL kembali:

Daftarkan URL custom. Tautan universal tidak didukung.
Konfigurasikan URL custom Anda.
Siapkan komponen root Anda untuk meneruskan URL ke SDK Stripe seperti yang ditunjukkan di bawah ini.

Catatan

Jika Anda menggunakan Expo, atur skema di file app.json.

Selain itu, atur returnURL bila Anda memanggil metode initPaymentSheet:

Untuk informasi selengkapnya tentang skema URL asli, baca dokumen Android dan iOS.

Tangani kejadian pascapembayaran

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_intent.succeeded, 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_intent.succeeded` atau `payment_intent.payment_failed` 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_failed`, tawarkan upaya lain untuk membayar kepada pelanggan.

Coba integrasi

Lihat Pengujian untuk mendapatkan informasi tambahan untuk menguji integrasi Anda.

OpsionalAktifkan Link

Aktifkan Link di pengaturan Metode Pembayaran untuk memungkinkan pelanggan Anda menyimpan dan menggunakan kembali informasi pembayaran mereka dengan aman menggunakan tombol checkout ekspres sekali klik dari Link.

Teruskan email pelanggan Anda ke Mobile Payment Element

Link melakukan autentikasi pelanggan menggunakan alamat emailnya. Stripe merekomendasikan pengisian informasi otomatis sebanyak mungkin untuk mengefisienkan proses checkout.

Untuk mengisikan otomatis nama pelanggan, alamat email, dan nomor telepon, berikan defaultBillingDetails dengan informasi pelanggan Anda ke initPaymentSheet.

OpsionalAktifkan Apple Pay

Mendaftar Apple Merchant ID

Dapatkan Apple Merchant ID dengan mendaftar identifier baru di situs web Apple Developer.

Isi formulir dengan keterangan dan identifier. Keterangan adalah untuk catatan Anda sendiri dan nanti dapat diubah. Stripe merekomendasikan penggunaan nama aplikasi Anda sebagai identifier (misalnya, merchant.com.{{YOUR_APP_NAME}}).

Buat sertifikat Apple Pay yang baru

Buat sertifikat untuk aplikasi Anda guna mengenkripsi data pembayaran.

Buka Pengaturan Sertifikat iOS di Dashboard, klik Tambahkan aplikasi baru, dan ikuti panduannya.

Unduh file Permintaan Penandatanganan Sertifikat (CSR) untuk mendapatkan sertifikat aman dari Apple yang memungkinkan Anda menggunakan Apple Pay.

Satu file CSR harus digunakan untuk menerbitkan tepat satu sertifikat. Jika Anda mengganti Apple Merchant ID, Anda harus membuka Pengaturan Sertifikat iOS di Dashboard untuk mendapatkan CSR dan sertifikat baru.

Integrasikan dengan Xcode

Tambahkan kemampuan Apple Pay ke aplikasi Anda. Di Xcode, buka pengaturan proyek, klik tab Signing & Capabilities, dan tambahkan kemampuan Apple Pay. Pada saat ini Anda mungkin diminta untuk masuk ke akun pengembang. Pilih identifikasi merchant yang Anda buat sebelumnya, dan aplikasi Anda siap menyetujui Apple Pay.

Aktifkan kemampuan Apple Pay di Xcode

Tambahkan Apple Pay

Pelacakan pesanan

Untuk menambah informasi pelacakan pesanan di iOS 16 atau lebih baru, konfigurasikan fungsi callback setOrderTracking. Stripe memanggil implementasi Anda setelah pembayaran selesai, tetapi sebelum iOS menutup lembar Apple Pay.

Dalam implementasi fungsi callback setOrderTracking, ambil detail pesanan dari server Anda untuk pesanan yang sudah selesai, dan lewatkan detail ke fungsi completion yang disediakan.

Untuk mempelajari pelacakan pesanan selengkapnya, lihat dokumentasi Apple’s Wallet Orders.

OpsionalAktifkan Google Pay

Siapkan integrasi Anda

Untuk menggunakan Google Pay, pertama aktifkan Google Pay API dengan menambahkan yang berikut ini ke tag <application> AndroidManifest.xml Anda:

Untuk detail selengkapnya, lihat Siapkan Google Pay API untuk Android dari Google Pay.

Tambahkan Google Pay

Bila Anda memprakarsai PaymentSheet, atur merchantCountryCode ke kode negara bisnis Anda dan atur googlePay ke true.

Anda juga dapat menggunakan lingkungan percobaan dengan meneruskan parameter testEnv. Anda hanya dapat mencoba Google Pay pada perangkat fisik Android. Ikuti dokumen React Native untuk mencoba aplikasi Anda pada perangkat fisik.

OpsionalAktifkan pemindaian kartu (iOS saja)
Sisi client

Untuk mengaktifkan dukungan pemindaian kartu, atur NSCameraUsageDescription (Privasi - Keterangan Penggunaan Kamera) di Info.plist aplikasi Anda, dan berikan alasan untuk mengakses kamera (misalnya, “Untuk memindai kartu”). Perangkat dengan iOS 13 atau yang lebih tinggi mendukung pemindaian kartu.

OpsionalSesuaikan lembaran
Sisi client

Semua penyesuaian dikonfigurasi menggunakan initPaymentSheet.

Penampilan

Sesuaikan warna, font, dan lainnya agar sesuai dengan tampilan dan nuansa aplikasi Anda dengan menggunakan appearance API.

Nama tampilan merchant

Tentukan nama bisnis yang dilihat pelanggan dengan mengatur merchantDisplayName. Secara default, ini adalah nama aplikasi Anda.

Mode gelap

Secara default PaymentSheet akan beradaptasi otomatis dengan pengaturan penampilan skala-sistem pengguna (mode terang dan gelap). Anda dapat mengubahnya dengan mengatur properti style ke mode alwaysLight atau alwaysDark di iOS.

Di Android, atur mode terang atau gelap pada aplikasi Anda:

Detail tagihan default

Untuk mengatur nilai default bagi detail tagihan yang dikumpulkan di PaymentSheet, konfigurasikan properti defaultBillingDetails. PaymentSheet akan melengkapi bidang-bidangnya dengan nilai yang Anda berikan.

Kumpulkan detail tagihan

Gunakan billingDetailsCollectionConfiguration untuk menentukan cara Anda ingin mengumpulkan detail tagihan di PaymentSheet.

Anda dapat mengumpulkan nama, email, nomor telepon, dan alamat pelanggan.

Jika tidak bermaksud untuk mengumpulkan nilai yang diperlukan oleh metode pembayaran, Anda harus melakukan hal berikut:

Lampirkan nilai yang tidak dikumpulkan oleh PaymentSheet ke properti defaultBillingDetails.
Atur billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod ke true.

Catatan

Konsultasikan dengan penasihat hukum mengenai undang-undang yang berlaku untuk mengumpulkan informasi. Hanya kumpulkan nomor telepon jika Anda memerlukannya untuk transaksi.

OpsionalTangani keluar pengguna

PaymentSheet menyimpan sejumlah informasi secara lokal guna mengingat apakah pengguna telah menggunakan Link dalam aplikasi. Untuk mengosongkan status internal PaymentSheet, panggil metode resetPaymentSheetCustomer() bila pengguna Anda keluar.

OpsionalSelesaikan pembayaran di UI Anda

Anda dapat menyajikan Lembar Pembayaran untuk hanya mengumpulkan detail metode pembayaran, kemudian memanggil metode confirm untuk menyelesaikan pembayaran di UI aplikasi Anda. Hal ini akan berguna jika Anda memiliki tombol beli custom atau memerlukan langkah tambahan setelah detail pembayaran dikumpulkan.

Catatan

Sampel integrasi tersedia di GitHub kami.

Pertama, panggil initPaymentSheet dan teruskan customFlow: true. initPaymentSheet diselesaikan dengan opsi pembayaran awal yang berisi gambar dan label yang mewakili metode pembayaran pelanggan. Perbarui UI Anda dengan detail ini.

Gunakan presentPaymentSheet untuk mengumpulkan detail pembayaran. Saat pelanggan selesai, lembaran akan menutup sendiri dan menyelesaikan janjinya. Perbarui UI Anda dengan detail metode pembayaran yang dipilih.

Gunakan confirmPaymentSheetPayment untuk mengonfirmasi pembayaran. Ini diselesaikan dengan hasil pembayaran.