Terima pembayaran
Buat formulir pembayaran atau gunakan halaman checkout yang telah dibuat sebelumnya untuk mulai menerima pembayaran online.
Bangun integrasi pembayaran custom dengan menyematkan komponen UI pada situs Anda, menggunakan Stripe Elements. Lihat cara membandingkan integrasi ini dengan tipe integrasi Stripe lainnya.
Kode sisi client dan sisi server membuat formulir checkout yang menerima berbagai metode pembayaran.
Upaya integrasi
Tipe integrasi
Gabungkan komponen UI ke dalam alur pembayaran custom
Penyesuaian UI
Penyesuaian tingkat CSS dengan Appearance API
Tertarik menggunakan Stripe Tax, diskon, pengiriman, atau konversi mata uang?
Kami sedang mengembangkan integrasi Payment Element yang mengelola pajak, diskon, pengiriman, dan konversi mata uang. Baca panduan Bangun halaman checkout untuk mempelajari selengkapnya.
Siapkan StripeSisi server
Pertama, buat akun Stripe atau masuk.
Gunakan pustaka resmi kami untuk mengakses API Stripe dari aplikasi Anda:
Buat PaymentIntentSisi server
Catatan
Jika Anda ingin merender Payment Element tanpa terlebih dahulu membuat PaymentIntent, lihat Kumpulkan detail pembayaran sebelum membuat Intent.
Objek PaymentIntent mewakili maksud Anda menagih pembayaran dari pelanggan dan melacak upaya charge dan perubahan status selama proses pembayaran.
Buat PaymentIntent
Buat PaymentIntent pada server Anda dengan jumlah dan mata uang. Pada versi terbaru API, menentukan parameter automatic_payment_methods
bersifat opsional karena Stripe mengaktifkan fungsionalitasnya secara default. Anda dapat mengelola metode pembayaran dari Dashboard. Stripe menangani pengembalian metode pembayaran yang memenuhi syarat berdasarkan faktor-faktor seperti jumlah transaksi, mata uang, dan alur pembayaran.
Stripe menggunakan pengaturan metode pembayaran untuk menampilkan metode pembayaran yang telah Anda aktifkan. Untuk melihat cara metode pembayaran Anda ditampilkan kepada pelanggan, masukkan identifikasi transaksi atau tetapkan jumlah pesanan dan mata uang di Dashboard. Untuk mengesampingkan metode pembayaran, cantumkan secara manual mana saja yang ingin Anda aktifkan menggunakan atribut payment_method_types.
Pada versi terbaru API, menentukan parameter automatic_payment_methods
bersifat opsional karena Stripe mengaktifkan fungsionalitasnya secara default.
Catatan
Selalu putuskan berapa banyak yang akan di-charge di sisi server, lingkungan tepercaya, bukan di klien. Ini mencegah pelanggan yang berniat jahat untuk dapat memilih harga mereka sendiri.
Ambil client secret
PaymentIntent 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.
Kumpulkan detail pembayaranSisi client
Kumpulkan 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 mengirimkan informasi pembayaran dengan aman ke Stripe melalui koneksi HTTPS. Hindari penempatan Payment Element dalam iframe lain karena sejumlah metode pembayaran memerlukan pengalihan ke halaman lain untuk konfirmasi pembayaran.
If you do choose to use an iframe and want to accept Apple Pay or Google Pay, the iframe must have the allow attribute set to equal "payment *"
.
Alamat halaman checkout harus dimulai dengan https://
, bukan http://
agar integrasi Anda berfungsi. Anda dapat mencoba integrasi tanpa menggunakan HTTPS, tetapi ingatlah untuk mengaktifkannya 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
.
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.
Minta token merchant Apple Pay
Jika Anda telah mengonfigurasi integrasi ke terima pembayaran Apple Pay, sebaiknya konfigurasikan antarmuka Apple Pay untuk menghasilkan token merchant agar dapat mengaktifkan transaksi yang diprakarsai merchant (MIT). Minta tipe token merchant yang relevan di Payment Element.
Serahkan pembayaran ke StripeSisi client
Gunakan stripe.confirmPayment untuk menyelesaikan pembayaran menggunakan detail dari Payment Element. Berikan return_url ke fungsi ini untuk menunjukkan ke mana Stripe harus mengarahkan ulang pengguna setelah mereka menyelesaikan pembayaran. Pengguna Anda mungkin pertama kali diarahkan ulang ke situs perantara, seperti halaman otorisasi bank, sebelum diarahkan ulang ke return_url
. Pembayaran kartu segera diarahkan ulang ke return_url
bila pembayaran berhasil.
Jika tidak ingin dialihkan untuk pembayaran kartu setelah pembayaran selesai, Anda dapat mengatur pengalihan ke if_required
. Hal ini hanya mengalihkan pelanggan yang memproses pembayaran dengan metode pembayaran berbasis pengalihan.
Pastikan return_url
sesuai dengan halaman pada situs web Anda yang menyediakan status pembayaran. Bila Stripe mengarahkan ulang pelanggan ke return_url
, kami menyediakan parameter query URL berikut ini:
Parameter | Keterangan |
---|---|
payment_intent | Identifier unik untuk PaymentIntent . |
payment_intent_client_secret | client secret dari objek PaymentIntent . |
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.
Gunakan salah satu parameter kueri untuk mengambil PaymentIntent. Periksa status PaymentIntent untuk memutuskan apa yang akan ditampilkan kepada pelanggan Anda. Anda juga dapat menambahkan parameter kueri Anda sendiri saat memberikan return_url
, yang akan tetap ada selama proses pengalihan.
Tangani kejadian pascapembayaranSisi server
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.processing | 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 Anda
Untuk mencoba integrasi pembayaran custom Anda:
- Buat Payment Intent dan ambil client secret.
- Isilah detail pembayaran dengan metode dari tabel berikut.
- Masukkan tanggal mendatang untuk tanggal kedaluwarsa kartu.
- Masukkan nomor 3 angka untuk CVC.
- Masukkan kode pos tagihan.
- Serahkan pembayaran ke Stripe. Anda dialihkan ke
return_url
. - Masuk ke Dashboard dan cari pembayaran di halaman Pembayaran. Jika pembayaran berhasil, Anda akan melihatnya dalam daftar tersebut.
- Klik pembayaran Anda untuk melihat detail selengkapnya, seperti informasi tagihan dan daftar barang yang dibeli. Anda dapat menggunakan informasi ini untuk memenuhi pesanan.
Pelajari selengkapnya tentang mencoba integrasi Anda.
Lihat Pengujian untuk mendapatkan informasi tambahan untuk menguji integrasi Anda.
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.