Lewati ke konten
Buat akun
atau
Masuk
Logo Dokumen Stripe
/
Tanya AI
Buat akun
Masuk
Mulai
Pembayaran
Pendapatan
Platform dan situs belanja online
Manajemen uang
Sumber daya pengembang
Gambaran Umum
Tentang pembayaran Stripe
    Gambaran umum
    Terima pembayaran
    Mata uang
    Penolakan
    Payout
    Pembayaran rutin
    Autentikasi 3D Secure
    Kembalikan dana dan batalkan pembayaran
    Saldo dan waktu pelunasan
    Resi
    Tangani kejadian webhook
    Kesiapan SCA
    API lama
Upgrade integrasi Anda
Analitik pembayaran
Pembayaran online
Gambaran umumTemukan contoh penggunaan AndaGunakan Managed Payments
Gunakan Payment Links
Gunakan halaman checkout bawaan
Buat integrasi kustom dengan Elements
Bangun integrasi dalam aplikasi
Metode Pembayaran
Tambahkan metode pembayaran
Kelola metode pembayaran
Checkout lebih cepat dengan Link
Antarmuka pembayaran
Payment Links
Checkout
Web Elements
Pembayaran dalam aplikasi
Skenario pembayaran
Tangani beberapa mata uang
Alur pembayaran custom
Akuisisi fleksibel
Orkestrasi
Pembayaran di tempat
Terminal
Di luar pembayaran
Dirikan perusahaan Anda
Kripto
Perdagangan agen
Financial Connections
Climate
Pahami penipuan
Perlindungan penipuan Radar
Kelola sengketa
Verifikasikan identitas
BerandaPembayaranAbout Stripe payments

Terima pembayaran

Terima pembayaran dengan aman secara online.

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.

Lokasi pelanggan
Ukuran
Tema
Tata letak
Untuk mengetahui cara kerja Link bagi pengguna yang kembali, masukkan email demo@stripe.com. Untuk melihat cara kerja Link selama pendaftaran baru, masukkan email lain dan selesaikan sisa formulir. Demo ini hanya menampilkan Google Pay atau Apple Pay jika Anda memiliki kartu aktif dengan salah satu dompet.

Upaya integrasi

API

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?

Stripe memiliki integrasi Payment Element yang mengelola pajak, diskon, pengiriman, dan konversi mata uang. Lihat buat halaman checkout untuk mempelajari lebih lanjut.

Siapkan Stripe
Sisi server

Pertama, buat akun Stripe atau masuk.

Gunakan pustaka resmi kami untuk mengakses API Stripe dari aplikasi Anda:

Command Line
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# Available as a gem sudo gem install stripe
Gemfile
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# If you use bundler, you can add this line to your Gemfile gem 'stripe'

Buat PaymentIntent
Sisi 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 amount dan currency. Di 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 hal yang ingin Anda aktifkan menggunakan atribut payment_method_types.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/payment_intents \ -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:"
\ -d amount=1099 \ -d currency=usd \ -d "automatic_payment_methods[enabled]"=true

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.

Ambil client secret dari endpoint pada server Anda, menggunakan fungsi fetch browser. Pendekatan ini paling baik jika sisi client Anda adalah aplikasi satu halaman, terutama yang dibangun dengan kerangka kerja frontend modern seperti React. Buat endpoint server yang melayani client secret:

main.rb
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
get '/secret' do intent = # ... Create or retrieve the PaymentIntent {client_secret: intent.client_secret}.to_json end

Kemudian ambil client secret dengan JavaScript pada sisi client:

(async () => { const response = await fetch('/secret'); const {client_secret: clientSecret} = await response.json(); // Render the form using the clientSecret })();

Kumpulkan detail pembayaran
Sisi client

Kumpulkan detail pembayaran pada client dengan Payment Element. Payment Element adalah komponen UI siap-rakit yang menyederhanakan pengumpulan detail 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.

Jika Anda memilih untuk menggunakan iframe dan ingin menerima Apple Pay atau Google Pay, iframe tersebut harus memiliki atribut allow yang diatur sama dengan "payment *".

Alamat halaman checkout harus dimulai dengan https:// bukan http:// agar integrasi Anda berfungsi. Anda dapat mencoba integrasi tanpa menggunakan HTTPS, tapi ingatlah untuk mengaktifkannya bila sudah siap menerima pembayaran live.

Siapkan Stripe.js

Payment Element secara otomatis tersedia sebagai fitur Stripe.js. Sertakan skrip Stripe.js di halaman checkout Anda dengan menambahkannya ke head di file HTML. Selalu muat Stripe.js secara langsung dari js.stripe.com agar tetap mematuhi PCI. Jangan sertakan skrip dalam paket atau meng-host sendiri salinannya.

checkout.html
<head> <title>Checkout</title> <script src="https://js.stripe.com/basil/stripe.js"></script> </head>

Buat instance Stripe dengan JavaScript berikut di halaman checkout Anda:

checkout.js
// Set your publishable key: remember to change this to your live publishable key in production // See your keys here: https://dashboard.stripe.com/apikeys const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx'
);

Tambahkan Payment Element ke halaman pembayaran Anda

Payment Element membutuhkan tempat tinggal di halaman pembayaran Anda. Buat simpul DOM kosong (wadah) dengan ID unik di formulir pembayaran Anda:

checkout.html
<form id="payment-form"> <div id="payment-element"> <!-- Elements will create form elements here --> </div> <button id="submit">Submit</button> <div id="error-message"> <!-- Display error message to your customers here --> </div> </form>

Saat formulir sebelumnya dimuat, buat instance Payment Element dan pasang ke simpul DOM penampung. Teruskan client secret dari langkah sebelumnya ke options saat Anda membuat instance Elements:

Tangani client secret dengan hati-hati karena dapat menyelesaikan charge. Jangan mencatatnya, menyematkannya di URL, atau memaparkannya kepada siapa pun kecuali pelanggan.

checkout.js
const options = { clientSecret: '{{CLIENT_SECRET}}', // Fully customizable with appearance API. appearance: {/*...*/}, }; // Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in a previous step const elements = stripe.elements(options); // Create and mount the Payment Element const paymentElementOptions = { layout: 'accordion'}; const paymentElement = elements.create('payment', paymentElementOptions); paymentElement.mount('#payment-element');

Jelajahi Stripe Elements

Stripe Elements adalah kumpulan komponen UI drop-in. Untuk menyesuaikan formulir Anda lebih lanjut atau mengumpulkan informasi pelanggan yang berbeda, telusuri dokumen Elements.

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 sejalan 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 melakukan konfigurasi integrasi untuk menerima pembayaran Apple Pay, sebaiknya konfigurasikan antarmuka Apple Pay untuk menghasilkan token merchant agar dapat mengaktifkan transaksi yang diprakarsai merchant (MIT). Minta jenis token merchant yang relevan di Payment Element.

OpsionalSimpan dan ambil metode pembayaran pelanggan

Anda dapat mengonfigurasi Payment Element untuk menyimpan metode pembayaran pelanggan untuk digunakan di masa mendatang. Bagian ini menunjukkan cara mengintegrasikan fitur metode pembayaran tersimpan, yang memungkinkan Payment Element untuk:

  • Meminta persetujuan pembeli untuk menyimpan metode pembayaran
  • Menyimpan metode pembayaran saat pembeli memberikan persetujuan
  • Menampilkan metode pembayaran yang tersimpan kepada pembeli untuk pembelian di masa mendatang
  • Secara otomatis memperbarui kartu yang hilang atau kedaluwarsa saat pembeli menggantinya
Kotak centang Payment Element dan metode pembayaran tersimpan

Simpan metode pembayaran.

Payment Element dengan Metode pembayaran tersimpan dipilih

Gunakan kembali metode pembayaran yang disimpan sebelumnya.

Mengaktifkan penyimpanan metode pembayaran di Payment Element

Ketika membuat PaymentIntent pada server Anda, buat juga CustomerSession yang memberikan Identifikasi Pelanggan dan mengaktifkan komponen payment_element untuk sesi Anda. Konfigurasikan fitur metode pembayaran tersimpan yang ingin Anda aktifkan. Misalnya, mengaktifkan payment_method_save menampilkan kotak centang yang menawarkan pelanggan untuk menyimpan detail pembayarannya untuk digunakan di masa mendatang.

Anda dapat menentukan setup_future_usage pada PaymentIntent atau Sesi Checkout untuk mengesampingkan perilaku default penyimpanan metode pembayaran. Hal ini memastikan bahwa Anda secara otomatis menyimpan metode pembayaran untuk digunakan di masa mendatang, sekalipun pelanggan tidak secara eksplisit memilih untuk menyimpannya.

Peringatan

Mengizinkan pembeli menghapus metode pembayaran yang tersimpan dengan mengaktifkan payment_method_remove berdampak pada langganan yang tergantung pada metode pembayaran tersebut. Menghapus metode pembayaran akan melepaskan PaymentMethod dari Pelanggan tersebut.

server.rb
Ruby
Python
PHP
Node.js
Java
Go
.NET
No results
# Set your secret key. Remember to switch to your live secret key in production. # See your keys here: https://dashboard.stripe.com/apikeys Stripe.api_key =
'sk_test_BQokikJOvBiI2HlWgH4olfQ2'
post '/create-intent-and-customer-session' do intent = Stripe::PaymentIntent.create({ amount: 1099, currency: 'usd', # In the latest version of the API, specifying the `automatic_payment_methods` parameter # is optional because Stripe enables its functionality by default. automatic_payment_methods: {enabled: true}, customer:
{{CUSTOMER_ID}}
, }) customer_session = Stripe::CustomerSession.create({ customer:
{{CUSTOMER_ID}}
, components: { payment_element: { enabled: true, features: { payment_method_redisplay: 'enabled', payment_method_save: 'enabled', payment_method_save_usage: 'off_session', payment_method_remove: 'enabled', }, }, }, }) { client_secret: intent.client_secret, customer_session_client_secret: customer_session.client_secret }.to_json end

Instance Elements Anda menggunakan client secret untuk mengakses metode pembayaran yang disimpan pelanggan tersebut. Tangani kesalahan dengan benar saat Anda membuat CustomerSession. Jika terjadi kesalahan, Anda tidak perlu memberikan client secret CustomerSession ke instance Elements, karena bersifat opsional.

Buat instance Elements menggunakan client secrets untuk PaymentIntent dan CustomerSession. Kemudian, gunakan instance Elements ini untuk membuat Payment Element.

checkout.js
// Create the CustomerSession and obtain its clientSecret const res = await fetch("/create-intent-and-customer-session", { method: "POST" }); const { customer_session_client_secret: customerSessionClientSecret } = await res.json(); const elementsOptions = { clientSecret: '{{CLIENT_SECRET}}', customerSessionClientSecret, // Fully customizable with appearance API. appearance: {/*...*/}, }; // Set up Stripe.js and Elements to use in checkout form, passing the client secret // and CustomerSession's client secret obtained in a previous step const elements = stripe.elements(elementsOptions); // Create and mount the Payment Element const paymentElementOptions = { layout: 'accordion'}; const paymentElement = elements.create('payment', paymentElementOptions); paymentElement.mount('#payment-element');

Saat mengonfirmasi PaymentIntent, Stripe.js secara otomatis mengontrol pengaturan setup_future_usage pada PaymentIntent dan allow_redisplay pada PaymentMethod, tergantung pada jika pelanggan mencentang kotak untuk menyimpan detail pembayaran.

Terapkan pengumpulan kembali CVC

Secara opsional, tentukan require_cvc_recollection ketika membuat PaymentIntent untuk memberlakukan pengumpulan kembali CVC saat pelanggan membayar dengan kartu.

Mendeteksi pemilihan metode pembayaran yang disimpan

Untuk mengontrol konten dinamis saat metode pembayaran tersimpan dipilih, dengarkan peristiwa change elemen pembayaran, yang diisi dengan metode pembayaran yang dipilih.

checkout.js
paymentElement.on('change', function(event) { if (event.value.payment_method) { // Control dynamic content if a saved payment method is selected } })

OpsionalLink di halaman checkout Anda
Sisi client

Biarkan pelanggan Anda memproses pembayaran lebih cepat dengan menggunakan Link di Payment Element. Anda dapat mengisi ulang otomatis informasi untuk setiap pelanggan yang sudah masuk dan menggunakan Link, terlepas dari jika pelanggan menyimpan informasi di Link dengan bisnis lain atau tidak. Integrasi Payment Element default menyertakan perintah Link dalam formulir kartu. Untuk mengelola Link di Payment Element, buka pengaturan metode pembayaran.

Autentikasi atau daftarkan dengan Link langsung di Payment Element saat checkout

Kumpulkan alamat email pelanggan untuk autentikasi atau pendaftaran Link

Opsi integrasi

Ada dua cara untuk mengintegrasikan Link dengan Payment Element. Dari kedua cara tersebut, Stripe merekomendasikan untuk meneruskan alamat email pelanggan ke Payment Element jika tersedia. Ingatlah untuk mempertimbangkan cara kerja alur checkout Anda saat memutuskan di antara opsi-opsi ini:

Opsi integrasiAlur checkoutDeskripsi
Teruskan alamat email pelanggan ke Payment Element Direkomendasikan
  • Pelanggan Anda memasukkan alamat email mereka sebelum masuk ke halaman checkout (dalam langkah pembuatan akun sebelumnya, misalnya).
  • Anda lebih suka menggunakan bidang input email Anda sendiri.
Lewatkan secara terprogram alamat email pelanggan ke Payment Element. Dalam skenario ini, pelanggan mengautentikasi Link secara langsung di formulir pembayaran, bukan komponen UI yang terpisah.
Kumpulkan alamat email pelanggan di Payment ElementPelanggan Anda memasukkan email dan mengautentikasi atau mendaftarkan dengan Link langsung di Payment Element saat checkout.Jika pelanggan belum mendaftar dengan Link dan mereka memilih metode pembayaran yang didukung di Payment Element, mereka akan diminta untuk menyimpan detail menggunakan Link. Bagi mereka yang telah mendaftar, Link akan secara otomatis mengisi informasi pembayaran mereka.

OpsionalAmbil pembaruan dari server
Sisi client

Anda sebaiknya memperbarui atribut pada PaymentIntent setelah menampilkan Payment Element, seperti amount (misalnya, kode diskon atau biaya pengiriman). Anda dapat memperbarui PaymentIntent di server, kemudian panggil elements.fetchUpdates untuk melihat jumlah baru yang tercermin di Payment Element. Contoh ini menunjukkan kepada Anda cara membuat endpoint server yang memperbarui jumlah pada PaymentIntent:

main.rb
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
get '/update' do intent = Stripe::PaymentIntent.update( '{{PAYMENT_INTENT_ID}}', {amount: 1499}, ) {status: intent.status}.to_json end

Contoh ini memperagakan cara memperbarui UI untuk mencerminkan perubahan ini pada sisi client:

(async () => { const response = await fetch('/update'); if (response.status === 'requires_payment_method') { const {error} = await elements.fetchUpdates(); } })();

Serahkan pembayaran ke Stripe
Sisi client

Gunakan stripe.confirmPayment untuk menyelesaikan pembayaran menggunakan detail dari Payment Element. Berikan return_url ke fungsi ini untuk menunjukkan ke mana Stripe harus mengalihkan pengguna setelah 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 dialihkan ke return_url bila pembayaran berhasil.

Jika tidak ingin dialihkan untuk pembayaran kartu setelah pembayaran selesai, Anda dapat mengatur pengalihan ke if_required. Ini hanya mengalihkan pelanggan yang memproses pembayaran dengan metode pembayaran berbasis pengalihan.

checkout.js
const form = document.getElementById('payment-form'); form.addEventListener('submit', async (event) => { event.preventDefault(); const {error} = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: 'https://example.com/order/123/complete', }, }); if (error) { // This point will only be reached if there is an immediate error when // confirming the payment. Show error to your customer (for example, payment // details incomplete) const messageContainer = document.querySelector('#error-message'); messageContainer.textContent = error.message; } else { // Your customer will be redirected to your `return_url`. For some payment // methods like iDEAL, your customer will be redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } });

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:

ParameterKeterangan
payment_intentIdentifier unik untuk PaymentIntent.
payment_intent_client_secretclient 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 query untuk mengambil PaymentIntent. Periksa status PaymentIntent untuk memutuskan apa yang akan ditampilkan kepada pelanggan Anda. Anda juga dapat menambahkan parameter query Anda sendiri saat memberikan return_url, yang akan tetap ada selama proses pengalihan.

status.js
// Initialize Stripe.js using your publishable key const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx'
); // Retrieve the "payment_intent_client_secret" query parameter appended to // your return_url by Stripe.js const clientSecret = new URLSearchParams(window.location.search).get( 'payment_intent_client_secret' ); // Retrieve the PaymentIntent stripe.retrievePaymentIntent(clientSecret).then(({paymentIntent}) => { const message = document.querySelector('#message') // Inspect the PaymentIntent `status` to indicate the status of the payment // to your customer. // // Some payment methods will [immediately succeed or fail][0] upon // confirmation, while others will first enter a `processing` state. // // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification switch (paymentIntent.status) { case 'succeeded': message.innerText = 'Success! Payment received.'; break; case 'processing': message.innerText = "Payment processing. We'll update you when payment is received."; break; case 'requires_payment_method': message.innerText = 'Payment failed. Please try another payment method.'; // Redirect your user back to your payment page to attempt collecting // payment again break; default: message.innerText = 'Something went wrong.'; break; } });

Tangani kejadian pascapembayaran
Sisi 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:

KejadianKeteranganTindakan
payment_intent.succeededDikirim bila pelanggan berhasil menyelesaikan pembayaran.Kirimi pelanggan konfirmasi pesanan dan penuhi pesanan mereka.
payment_intent. pemrosesanDikirim 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_failedDikirim 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:

  1. Buat Payment Intent dan ambil client secret.
  2. 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.
  3. Serahkan pembayaran ke Stripe. Anda dialihkan ke return_url.
  4. Masuk ke Dashboard dan cari pembayaran pada halaman Transaksi. Jika pembayaran berhasil, Anda akan melihatnya dalam daftar tersebut.
  5. 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 percobaan integrasi Anda.

Nomor kartuSkenarioCara mencoba
Pembayaran kartu berhasil dan tidak memerlukan autentikasi.Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos.
Pembayaran kartu memerlukan autentikasi.Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos.
Kartu ini ditolak dengan kode penolakan seperti insufficient_funds.Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos.
Kartu UnionPay memiliki panjang variabel 13–19 angka.Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos.

Lihat Pengujian untuk mendapatkan informasi tambahan untuk menguji integrasi Anda.

OpsionalTambahkan metode pembayaran lainnya

Payment Element mendukung banyak metode pembayaran secara default. Anda harus mengambil langkah tambahan untuk mengaktifkan dan menampilkan sebagian metode pembayaran.

Affirm

Untuk mulai menggunakan Affirm, Anda harus mengaktifkannya di Dashboard. Saat membuat PaymentIntent dengan metode pembayaran Affirm, Anda perlu menyertakan alamat pengiriman. Contoh ini menyarankan penerusan informasi pengiriman pada client setelah pelanggan memilih metode pembayaran mereka. Pelajari selengkapnya tentang penggunaan Affirm dengan Stripe.

checkout.js
const form = document.getElementById('payment-form'); form.addEventListener('submit', async (event) => { event.preventDefault(); const {error} = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: 'https://my-site.com/order/123/complete', shipping: { name: 'Jenny Rosen', address: { line1: '1 Street', city: 'Seattle', state: 'WA', postal_code: '95123', country: 'US', }, }, }, }); if (error) { // This point is reached if there's an immediate error when // confirming the payment. Show error to your customer (e.g., payment // details incomplete) const messageContainer = document.querySelector('#error-message'); messageContainer.textContent = error.message; } else { // Your customer is redirected to your `return_url`. For some payment // methods like iDEAL, your customer is redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } });

Coba Affirm

Pelajari cara menguji berbagai skenario menggunakan tabel berikut:

SkenarioCara mencoba
Pelanggan Anda berhasil membayar dengan Affirm.Isi formulir (pastikan untuk menyertakan alamat pengiriman) dan autentikasikan pembayaran.
Pelanggan Anda gagal mengautentikasi di halaman pengarahan ulang Affirm.Isi formulir dan klik Percobaan pembayaran gagal pada halaman pengarahan ulang.

Afterpay (Clearpay)

Saat membuat PaymentIntent dengan metode pembayaran Afterpay, Anda perlu menyertakan alamat pengiriman. Pelajari selengkapnya tentang penggunaan Afterpay dengan Stripe.

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. Contoh di bawah menggunakan atribut automatic_payment_methods tetapi Anda dapat mencantumkan afterpay_clearpay dengan tipe metode pembayaran. Di versi terbaru API, menentukan parameter automatic_payment_methods bersifat opsional karena Stripe mengaktifkan fungsionalitasnya secara default. Terlepas dari opsi yang Anda pilih, pastikan Anda mengaktifkan Afterpay Clearpay di Dashboard.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/payment_intents \ -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:"
\ -d amount=1099 \ -d currency=usd \ -d "automatic_payment_methods[enabled]"=true \ -d "shipping[name]"="Jenny Rosen" \ -d "shipping[address][line1]"="1234 Main Street" \ -d "shipping[address][city]"="San Francisco" \ -d "shipping[address][state]"=CA \ -d "shipping[address][country]"=US \ -d "shipping[address][postal_code]"=94111

Coba Afterpay (Clearpay)

Pelajari cara menguji berbagai skenario menggunakan tabel berikut:

SkenarioCara mencoba
Pelanggan Anda berhasil membayar dengan Afterpay.Isi formulir (pastikan untuk menyertakan alamat pengiriman) dan autentikasikan pembayaran.
Pelanggan Anda gagal mengautentikasi di halaman pengarahan ulang Afterpay.Isi formulir dan klik Percobaan pembayaran gagal pada halaman pengarahan ulang.

Apple Pay dan Google Pay

Bila Anda mengaktifkan pembayaran kartu, kami menampilkan Apple Pay dan Google Pay untuk pelanggan yang lingkungannya memenuhi syarat tampilan dompet digital. Untuk menerima pembayaran dari dompet digital ini, Anda juga harus:

  • Aktifkan di pengaturan metode pembayaran. Apple Pay diaktifkan secara default.
  • Sajikan aplikasi Anda melalui HTTPS dalam pengembangan dan produksi.
  • Daftarkan domain Anda.
  • Ambil pembaruan dari server jika Anda memperbarui jumlah PaymentIntent untuk menjaga agar modal pembayaran dompet digital tetap sinkron.

Percobaan Regional
India

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.

Pelajari selengkapnya tentang penggunaan Apple Pay dan Google Pay dengan Stripe.

ACH Direct Debit

Saat menggunakan Payment Element dengan metode pembayaran ACH Direct Debit, ikuti langkah-langkah ini:

  1. Buat objek Pelanggan.

    Command Line
    cURL
    Stripe CLI
    Ruby
    Python
    PHP
    Java
    Node.js
    Go
    .NET
    No results
    curl -X POST https://api.stripe.com/v1/customers \ -u "
    sk_test_BQokikJOvBiI2HlWgH4olfQ2
    :"
  2. Tentukan identifikasi pelanggan saat membuat PaymentIntent.

    Command Line
    cURL
    Stripe CLI
    Ruby
    Python
    PHP
    Java
    Node.js
    Go
    .NET
    No results
    curl https://api.stripe.com/v1/payment_intents \ -u "
    sk_test_BQokikJOvBiI2HlWgH4olfQ2
    :"
    \ -d amount=1099 \ -d currency=usd \ -d setup_future_usage=off_session \ -d customer={{CUSTOMER_ID}} \ -d "payment_method_types[]"=us_bank_account
  3. Pilih metode verifikasi.

Saat menggunakan metode pembayaran ACH Direct Debit dengan Payment Element, Anda hanya dapat memilih automatic atau instant.

Pelajari selengkapnya tentang penggunaan ACH Direct Debit dengan Stripe.

Coba ACH Direct Debit

SkenarioCara mencoba
Pelanggan Anda berhasil membayar dengan rekening bank AS menggunakan verifikasi instan.Pilih Rekening bank AS dan isi formulir. Klik lembaga percobaan. Ikuti instruksi pada jendela untuk menautkan rekening bank Anda. Klik tombol pembayaran Anda.
Pelanggan Anda berhasil membayar dengan rekening bank AS menggunakan mikrodeposit.Pilih Rekening bank AS dan isilah formulir. Klik Masukkan detail bank secara manual saja. Ikuti instruksi pada jendela untuk menautkan rekening bank. Anda dapat menggunakan nomor rekening percobaan ini. Klik tombol pembayaran Anda.
Pelanggan Anda gagal menyelesaikan proses penautan rekening bank.Pilih rekening bank AS dan klik lembaga percobaan atau Masukkan detail bank secara manual. Tutup jendela tanpa menyelesaikannya.

BLIK

Ketika menggunakan Payment Element dengan BLIK, pengguna dapat menutup modal yang memintanya untuk mengotorisasi pembayaran di aplikasi perbankan mereka. Hal ini memicu pengalihan ke return_url Anda dan tidak mengembalikan pengguna ke halaman checkout. Pelajari selengkapnya tentang penggunaan BLIK dengan Stripe.

Untuk menangani pengguna yang menutup modal, di pengendali sisi server untuk return_url, periksa status Payment Intent untuk melihat apakah succeeded atau masih requires_action (artinya pengguna telah menutup modal tanpa memberi otorisasi), menangani setiap kasus sesuai kebutuhan.

Metode pembayaran kode QR

Ketika menggunakan Payment Element dengan metode pembayaran berbasis kode QR (WeChat Pay, PayNow, Pix, PromptPay, Cash App Pay), pengguna dapat menutup modal kode QR. Hal ini memicu pengalihan ke return_url Anda dan tidak mengembalikan pengguna ke halaman checkout.

Untuk menangani pengguna yang menutup modal kode QR, di penangan sisi server untuk return_url Anda, periksa status Payment Intent untuk melihat apakah succeeded atau masih requires_action (berarti pengguna telah menutup modal tanpa membayar), menangani setiap kasus sesuai kebutuhan.

Atau, cegah pengalihan otomatis ke return_url Anda dengan meneruskan parameter opsional lanjutan redirect=if_required, yang mencegah pengalihan ketika menutup kode QR modal.

Cash App Pay

Payment Element menampilkan formulir dinamis secara berbeda di web desktop atau web seluler karena menggunakan metode autentikasi pelanggan yang berbeda. Pelajari selengkapnya tentang penggunaan Cash App Pay dengan Stripe.

Cash App Pay adalah metode pembayaran berbasis pengalihan di web seluler. Aplikasi ini mengalihkan pelanggan ke Cash App dalam mode live atau halaman pembayaran percobaan di lingkungan percobaan. Setelah pembayaran selesai, mereka dialihkan ke return_url, terlepas dari apakah Anda mengatur redirect=if_required atau tidak.

PayPal

Untuk menggunakan PayPal, pastikan Anda menggunakan domain terdaftar.

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.

Lihat juga

  • Stripe Elements
  • Siapkan pembayaran mendatang
  • Simpan detail pembayaran selama pembayaran
  • Hitung pajak penjualan, GST, dan PPN di alur pembayaran Anda
Apakah halaman ini membantu?
YaTidak
  • Butuh bantuan? Hubungi Tim CS.
  • Bergabunglah dengan program akses awal kami.
  • Lihat log perubahan kami.
  • Ada pertanyaan? Hubungi Bagian Penjualan.
  • LLM? Baca llms.txt.
  • Dijalankan oleh Markdoc
Code quickstart
Panduan Terkait
Elements Appearance API
Skenario pembayaran lainnya
Cara kerja kartu