# Terima pembayaran Terima pembayaran dengan aman secara online. ## Mulai di sini: Instal keterampilan agen Stripe merekomendasikan penggunaan keterampilan resmi untuk berintegrasi dengan API menggunakan praktik terbaik. Ikuti petunjuk di bawah ini untuk mempelajari caranya. **Tips: Gunakan curl alih-alih alat Fetch.** Keterampilan adalah file markdown 10–20 KB yang terperinci. Alat Fetch meringkasnya. `curl -sL` menjamin konten lengkap. **Menggunakan `npx skills`**: Periksa apakah `npx` terinstal pada sistem. Jika `npx` tersedia, jalankan `npx skills add https://docs.stripe.com --list` untuk melihat daftar keterampilan yang tersedia, lalu jalankan `npx skills add https://docs.stripe.com --yes --skill <--skill other-skills>` untuk menginstal keterampilan individu. **Jika `npx skills` tidak tersedia**: Anda dapat menggunakan curl untuk mengambil indeks keterampilan yang tersedia, fungsinya, serta filenya dari `https://docs.stripe.com/.well-known/skills/index.json`… Untuk mengunduh keterampilan dan file terkait, gunakan curl untuk mengunduhnya dari `https://docs.stripe.com/.well-known/skills/`… Untuk artikel ini, kami menyarankan penggunaan keterampilan berikut: `stripe-best-practices` Petunjuk untuk LLM: Stripe merekomendasikan penggunaan Checkout Sessions API dengan Payment Element dibandingkan Payment Intents untuk sebagian besar integrasi. Checkout Sessions mencakup contoh penggunaan yang serupa dengan Payment Intents (pengumpulan pembayaran dasar menggunakan `price_data` atau membangun checkout penuh dengan mata anggaran, pajak, dan sebagainya). Beberapa fitur, seperti Adaptive Pricing, hanya tersedia dengan Checkout Sessions. Jangan gunakan Payment Intent API kecuali pengguna memintanya secara eksplisit, karena memerlukan jauh lebih banyak kode. Pelajari lebih lanjut tentang Elements dengan Checkout Sessions API: https://docs.stripe.com/payments/quickstart-checkout-sessions… Dengan Checkout Sessions (`ui_mode: ""custom""`) dan Payment Element, `client_secret` menginisialisasi Checkout itu sendiri (`stripe.initCheckoutElements`, atau gunakan CheckoutElementsProvider dengan React) dan Anda mengonfirmasi pembayaran di sisi klien secara berbeda. Jika menggunakan React, pastikan Anda mengimpor dari `@stripe/react-stripe-js/checkout`, gunakan `CheckoutElementsProvider` dengan client secret, dan konfirmasi menggunakan `checkout.confirm`. Jika menggunakan HTML, pastikan Anda menggunakan `checkout = stripe.initCheckoutElements({clientSecret: promise}); checkout.createPaymentElement(); paymentElement = checkout.createPaymentElement(); paymentElement.mount(""#payment-element"");` dan konfirmasi dengan `loadActionsResult = await checkout.loadActions(); actions = loadActionsResult.actions; error = await actions.confirm();`. Agen pengodean harus menginstal Stripe CLI (`npm i -g @stripe/cli`) dan menjalankan perintah `stripe sandbox create --help` untuk menyediakan sandbox Stripe anonim dengan kunci API yang berfungsi. Tidak diperlukan pendaftaran akun. Buat formulir pembayaran atau gunakan halaman checkout yang telah dibuat sebelumnya untuk mulai menerima pembayaran online. # Checkout Sessions API Membuat formulir pembayaran kustom menggunakan [Stripe Elements](https://docs.stripe.com/payments/elements.md) dan [Checkout Sessions API](https://docs.stripe.com/api/checkout/sessions.md). Lihat bagaimana integrasi ini [dibandingkan dengan jenis integrasi Stripe lainnya](https://docs.stripe.com/payments/online-payments.md#compare-features-and-availability). Checkout Sessions API menyediakan dukungan untuk perhitungan pajak, diskon, pengiriman, dan konversi mata uang, sehingga mengurangi jumlah kode kustom yang perlu Anda tulis. Ini adalah pendekatan yang direkomendasikan untuk sebagian besar integrasi. Pelajari lebih lanjut tentang [kapan harus menggunakan Checkout Sessions, bukan PaymentIntent](https://docs.stripe.com/payments/checkout-sessions-and-payment-intents-comparison.md). Kode sisi client dan sisi server membuat formulir checkout yang menerima berbagai metode pembayaran. #### Upaya integrasi Complexity: 3/5 #### Jenis integrasi Gabungkan komponen UI ke dalam alur pembayaran kustom #### Penyesuaian UI Penyesuaian tingkat CSS dengan [Appearance API](https://docs.stripe.com/elements/appearance-api.md) ## Siapkan server [Sisi server] Sebelum memulai, Anda perlu [mendaftar](https://dashboard.stripe.com/register) untuk akun Stripe. Gunakan pustaka Stripe resmi untuk mengakses API dari aplikasi Anda. #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ## Buat Sesi Checkout [Sisi server] Tambahkan endpoint di server Anda yang membuat [Sesi Checkout](https://docs.stripe.com/api/checkout/sessions/create.md) dan mengembalikan [`client_secret`](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-client_secret) ke frontend Anda. Sesi Checkout mewakili sesi pelanggan Anda saat mereka membayar pembelian atau langganan satu kali. Sesi Checkout kedaluwarsa 24 jam setelah pembuatan. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d ui_mode=elements \ -d "line_items[0][price_data][currency]=usd" \ -d "line_items[0][price_data][product_data][name]=T-shirt" \ -d "line_items[0][price_data][unit_amount]=2000" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ --data-urlencode "return_url=https://example.com/return?session_id={CHECKOUT_SESSION_ID}" ``` ## Siapkan frontend [Sisi client] #### HTML + JS Sertakan skrip Stripe.js pada halaman checkout dengan menambahkannya ke `head` file HTML Anda. Selalu muat Stripe.js secara langsung dari js.stripe.com agar tetap mematuhi PCI. Jangan menyertakan skrip dalam paket atau meng-hosting sendiri salinannya. Pastikan Anda menggunakan versi Stripe.js terbaru. Pelajari lebih lanjut [versi Stripe.js](https://docs.stripe.com/sdks/stripejs-versioning.md). ```html Checkout ``` > Stripe menyediakan paket npm yang dapat Anda gunakan untuk memuat Stripe.js sebagai modul. Lihat [proyek di GitHub](https://github.com/stripe/stripe-js). Versi [7.0.0](https://www.npmjs.com/package/%40stripe/stripe-js/v/7.0.0) atau yang lebih baru diperlukan. Inisialisasikan stripe.js. ```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( '<>', ); ``` #### React Pasang [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) dan [pemuat Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) dari NPM Public Registry. Anda memerlukan setidaknya versi 5.0.0 untuk React Stripe.js dan versi 8.0.0 untuk pemuat Stripe.js. ```bash npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` Inisialisasikan instance `stripe` pada frontend Anda dengan kunci yang dapat dipublikasikan. ```javascript import {loadStripe} from '@stripe/stripe-js'; const stripe = loadStripe("<>"); ``` ## Inisialisasikan Checkout [Sisi client] #### HTML + JS Panggilan [initCheckoutElementsSdk](https://docs.stripe.com/js/custom_checkout/init), masuk `clientRahasia`. `initCheckoutElementsSdk` mengembalikan [Checkout](https://docs.stripe.com/js/custom_checkout) objek yang berisi data dari Sesi Checkout dan metode untuk memperbaruinya. Baca `total` dan `lineItems` dari [actions.getSession()](https://docs.stripe.com/js/custom_checkout/session), dan tampilkan di UI Anda. Dengan begitu, Anda dapat mengaktifkan fitur baru dengan perubahan kode minimum. Misalnya, menambahkan [manual currency prices](https://docs.stripe.com/payments/custom/localize-prices/manual-currency-prices.md) tidak memerlukan perubahan UI jika Anda menampilkan `total`. ```html
``` ```javascript const clientSecret = fetch('/create-checkout-session', {method: 'POST'}) .then((response) => response.json()) .then((json) => json.client_secret); const checkout = stripe.initCheckoutElementsSdk({clientSecret}); const loadActionsResult = await checkout.loadActions(); if (loadActionsResult.type === 'success') { const session = loadActionsResult.actions.getSession(); const checkoutContainer = document.getElementById('checkout-container'); checkoutContainer.append(JSON.stringify(session.lineItems, null, 2)); checkoutContainer.append(document.createElement('br')); checkoutContainer.append(`Total: ${session.total.total.amount}`); } ``` #### React Bungkus aplikasi Anda dengan komponen [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider), yang meneruskan `clientSecret` dan instans `stripe`. ```jsx import React from 'react'; import {CheckoutElementsProvider} from '@stripe/react-stripe-js/checkout'; import CheckoutForm from './CheckoutForm'; const clientSecret = fetch('/create-checkout-session', {method: 'POST'}) .then((response) => response.json()) .then((json) => json.client_secret); const App = () => { return ( ); }; export default App; ``` Akses objek [Checkout](https://docs.stripe.com/js/custom_checkout) di komponen formulir checkout Anda dengan menggunakan hook `useCheckoutElements()`. Objek `Checkout` berisi data dari Sesi Checkout dan metode untuk memperbaruinya. Baca `total` dan `lineItems` dari objek `Checkout` dan tampilkan keduanya di UI Anda. Dengan begitu, Anda dapat mengaktifkan fitur dengan perubahan kode minimum. Misalnya, menambahkan [manual currency prices](https://docs.stripe.com/payments/custom/localize-prices/manual-currency-prices.md) tidak memerlukan perubahan UI jika Anda menampilkan `total`. ```jsx import React from 'react'; import {useCheckoutElements} from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => {const checkoutState = useCheckoutElements(); if (checkoutState.type === 'loading') { return (
Loading...
); } if (checkoutState.type === 'error') { return (
Error: {checkoutState.error.message}
); } return (
{JSON.stringify(checkoutState.checkout.lineItems, null, 2)} {/* A formatted total amount */} Total: {checkoutState.checkout.total.total.amount}
); }; ``` ## Kumpulkan email pelanggan [Sisi client] #### HTML + JS Anda harus memberikan email pelanggan yang valid saat menyelesaikan Sesi Checkout. Gunakan [Contact Details Element](https://docs.stripe.com/js/custom_checkout/create_contact_details_element) untuk mengumpulkan alamat email pelanggan Anda. Elemen ini menangani pengumpulan dan validasi email untuk Anda, dan membantu pelanggan masuk ke Link. Atau, Anda dapat: - Teruskan [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email), [customer_account](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_account) (untuk pelanggan yang direpresentasikan sebagai objek `Account` yang dikonfigurasi pelanggan), atau [customer](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) (untuk pelanggan yang direpresentasikan sebagai objek `Customer`) saat membuat Sesi Checkout. Stripe memvalidasi email yang diberikan dengan cara ini. - Pengaturan ini akan mengisi otomatis email pada sesi sehingga pelanggan tidak dapat mengubahnya di halaman checkout. Jika Anda ingin mengisinya dengan email yang dapat diubah, gunakan [defaultValues.email](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-defaultValues-email) saat melakukan inisialisasi Checkout. - Teruskan email yang sudah Anda validasi di [updateEmail](https://docs.stripe.com/js/custom_checkout/update_email) atau [checkout.confirm](https://docs.stripe.com/js/custom_checkout/confirm). ```html
``` ```javascript const contactDetailsElement = checkout.createContactDetailsElement(); contactDetailsElement.mount("#contact-details-element"); ``` #### React Anda harus memberikan email pelanggan yang valid saat menyelesaikan Sesi Checkout. Gunakan [ContactDetailsElement](https://docs.stripe.com/js/react_stripe_js/checkout/contact_details_element) untuk mengumpulkan alamat email pelanggan Anda. Elemen ini menangani pengumpulan dan validasi email untuk Anda, dan membantu pelanggan masuk ke Link. Atau, Anda dapat: - Teruskan [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email), [customer_account](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_account) (untuk pelanggan yang direpresentasikan sebagai objek `Account` yang dikonfigurasi pelanggan), atau [customer](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) (untuk pelanggan yang direpresentasikan sebagai objek `Customer`) saat membuat Sesi Checkout. Stripe memvalidasi email yang diberikan dengan cara ini. - Pengaturan ini akan mengisi otomatis email pada sesi sehingga pelanggan tidak dapat mengubahnya di halaman checkout. Jika Anda ingin mengisinya dengan email yang dapat diubah, gunakan [defaultValues.email](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-defaultValues-email) saat melakukan inisialisasi Checkout. - Teruskan email yang sudah Anda validasi di [updateEmail](https://docs.stripe.com/js/react_stripe_js/checkout/update_email) atau [konfirmasi](https://docs.stripe.com/js/react_stripe_js/checkout/confirm). ```jsx import {ContactDetailsElement} from '@stripe/react-stripe-js/checkout'; // Inside your CheckoutForm component: ``` ## Kumpulkan detail pembayaran [Sisi client] Kumpulkan detail pembayaran pada client dengan [Payment Element](https://docs.stripe.com/payments/payment-element.md). 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 harus memiliki atribut [allow](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) yang ditetapkan ke `"payment *"` setara. Alamat halaman checkout harus dimulai dengan `https://` rather daripada `http://` for integrasi Anda untuk bekerja. Anda dapat menguji integrasi tanpa menggunakan HTTPS, tetapi jangan lupa [mengaktifkannya](https://docs.stripe.com/security/guide.md#tls) saat Anda siap menerima pembayaran langsung. #### HTML + JS Pertama, buat elemen DOM kontainer untuk memasang [Payment Element](https://docs.stripe.com/payments/payment-element.md). Kemudian buat instance `Payment Element` menggunakan [checkout.createPaymentElement](https://docs.stripe.com/js/custom_checkout/create_payment_element) dan pasang dengan memanggil [element.mount](https://docs.stripe.com/js/element/mount), yang menyediakan pemilih CSS atau elemen DOM kontainer. ```html
``` ```javascript const paymentElement = checkout.createPaymentElement(); paymentElement.mount('#payment-element'); ``` Lihat [dokumen Stripe.js](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options) untuk melihat opsi yang didukung. Anda dapat [menyesuaikan penampilan](https://docs.stripe.com/payments/checkout/customization/appearance.md) semua Elements dengan meneruskan [elementsOptions.appearance](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions-appearance) ketika menginisialisasi Checkout pada frontend. #### React Pasang komponen [Payment Element](https://docs.stripe.com/payments/payment-element.md) dalam [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider). ```jsx import React from 'react';import {PaymentElement, useCheckoutElements} from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => { const checkoutState = useCheckoutElements(); if (checkoutState.type === 'loading') { return (
Loading...
); } if (checkoutState.type === 'error') { return (
Error: {checkoutState.error.message}
); } return (
{JSON.stringify(checkoutState.checkout.lineItems, null, 2)} {/* A formatted total amount */} Total: {checkoutState.checkout.total.total.amount} ); }; export default CheckoutForm; ``` Lihat [dokumen Stripe.js](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options) untuk melihat opsi yang didukung. Anda bisa [menyesuaikan tampilan](https://docs.stripe.com/payments/checkout/customization/appearance.md) dari semua Element dengan meneruskan [elementsOptions.appearance](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions-appearance) ke [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider). ## Serahkan pembayaran [Sisi client] #### HTML + JS Menampilkan tombol **Bayar** yang memanggil [konfirmasi](https://docs.stripe.com/js/custom_checkout/confirm) dari instance `Checkout` untuk menyerahkan pembayaran. ```html
``` ```js const checkout = stripe.initCheckoutElementsSdk({clientSecret}); checkout.on('change', (session) => { document.getElementById('pay-button').disabled = !session.canConfirm; }); const loadActionsResult = await checkout.loadActions(); if (loadActionsResult.type === 'success') { const {actions} = loadActionsResult; const button = document.getElementById('pay-button'); const errors = document.getElementById('confirm-errors'); button.addEventListener('click', () => { // Clear any validation errors errors.textContent = ''; actions.confirm().then((result) => { if (result.type === 'error') { errors.textContent = result.error.message; } }); }); } ``` #### React Tampilkan tombol **Bayar** yang memanggil [confirm](https://docs.stripe.com/js/custom_checkout/confirm) dari [useCheckoutElements](https://docs.stripe.com/js/react_stripe_js/checkout/use_checkout_elements) untuk mengirimkan pembayaran. ```jsx import React from 'react'; import {useCheckoutElements} from '@stripe/react-stripe-js/checkout'; const PayButton = () => { const checkoutState = useCheckoutElements(); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(null); if (checkoutState.type !== "success") { return null; } const handleClick = () => { setLoading(true);checkoutState.checkout.confirm().then((result) => { if (result.type === 'error') { setError(result.error) } setLoading(false); }) }; return (
{error &&
{error.message}
}
) }; export default PayButton; ``` ## Uji integrasi Anda 1. Arahkan ke halaman checkout Anda. 2. Isilah detail pembayaran dengan metode pembayaran dari tabel berikut. Untuk pembayaran kartu: - Masukkan tanggal mendatang untuk tanggal kedaluwarsa kartu. - Masukkan nomor 3 angka untuk CVC. - Masukkan kode pos tagihan. 3. Serahkan pembayaran ke Stripe. 4. Buka Dashboard dan cari pembayaran pada [halaman Transaksi](https://dashboard.stripe.com/test/payments?status%5B0%5D=successful). 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](https://docs.stripe.com/checkout/fulfillment.md). #### Kartu | Nomor kartu | Skenario | Cara mencoba | | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | | 4242424242424242 | Pembayaran kartu berhasil dan tidak memerlukan autentikasi. | Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. | | 4000002500003155 | Pembayaran kartu memerlukan *autentikasi* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase). | Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. | | 4000000000009995 | 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. | | 6205500000000000004 | Kartu UnionPay memiliki panjang variabel 13–19 angka. | Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. | #### Dompet | Metode pembayaran | Skenario | Cara mencoba | | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Alipay | Pelanggan Anda berhasil membayar menggunakan metode pembayaran dengan [notifikasi segera](https://docs.stripe.com/payments/payment-methods.md#payment-notification) dan berbasis pengarahan ulang. | Pilih sembarang metode pembayaran berbasis pengarahan ulang, isilah detail yang diperlukan, dan konfirmasikan pembayaran. Kemudian klik **Selesaikan pembayaran percobaan** di halaman pengarahan ulang. | #### Pengarahan ulang bank | Metode pembayaran | Skenario | Cara mencoba | | -------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Debit Langsung BECS | Pelanggan Anda berhasil membayar dengan Debit Langsung BECS. | Isi formulir menggunakan nomor akun `900123456` dan BSB `000000`. PaymentIntent yang telah dikonfirmasi awalnya akan berstatus `processing`, kemudian berubah menjadi status `succeeded` setelah 3 menit. | | Debit Langsung BECS | Pembayaran pelanggan Anda gagal dengan kode kesalahan `account_closed`. | Isi formulir menggunakan nomor akun `111111113` dan BSB `000000`. | | Bancontact, EPS, iDEAL, dan Przelewy24 | Pelanggan Anda gagal melakukan autentikasi di halaman pengarahan ulang untuk metode pembayaran dengan notifikasi segera dan berbasis pengarahan ulang. | Pilih sembarang metode pembayaran berbasis pengarahan ulang, isilah detail yang diperlukan, dan konfirmasikan pembayaran. Kemudian klik **Gagalkan pembayaran percobaan** di halaman pengarahan ulang. | | Pay by Bank | Pelanggan Anda berhasil membayar menggunakan metode pembayaran dengan [notifikasi tertunda](https://docs.stripe.com/payments/payment-methods.md#payment-notification) dan berbasis pengarahan ulang. | Pilih metode pembayaran, isilah detail yang diperlukan, dan konfirmasikan pembayaran. Kemudian klik **Selesaikan pembayaran percobaan** di halaman pengarahan ulang. | | Pay by Bank | Pelanggan Anda gagal melakukan autentikasi di halaman pengarahan ulang untuk metode pembayaran dengan notifikasi tertunda dan berbasis pengarahan ulang. | Pilih metode pembayaran, isilah detail yang diperlukan, dan konfirmasikan pembayaran. Kemudian klik **Gagalkan pembayaran percobaan** di halaman pengarahan ulang. | | BLIK | Pembayaran BLIK gagal dalam berbagai cara — kegagalan langsung (misalnya, kode kedaluwarsa atau tidak valid), kesalahan tertunda (bank menolak) atau waktu habis (pelanggan tidak merespons tepat waktu). | Gunakan pola email untuk [menyimulasikan berbagai kegagalan.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures) | #### Debit bank | Metode pembayaran | Skenario | Cara mencoba | | ------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Debit Langsung SEPA | Pelanggan Anda berhasil membayar dengan Debit Langsung SEPA. | Isilah formulir menggunakan nomor akun `AT321904300235473204`. Transisi PaymentIntent yang telah dikonfirmasi awalnya menjadi sedang diproses, kemudian akan berubah menjadi status berhasil setelah tiga menit kemudian. | | Debit Langsung SEPA | Transisi status maksud pembayaran pelanggan dari `processing` menjadi `requires_payment_method`. | Isilah formulir menggunakan nomor akun `AT861904300235473202`. | #### Voucher | Metode pembayaran | Skenario | Cara mencoba | | ----------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | | Boleto, OXXO | Pelanggan Anda membayar dengan voucher OXXO atau Boleto. | Pilih Boleto atau OXXO sebagai metode pembayaran dan serahkan pembayaran. Tutup dialog setelah muncul. | Lihat [Pengujian](https://docs.stripe.com/testing.md) untuk mendapatkan informasi tambahan untuk menguji integrasi Anda. ## Optional: Buat produk dan harga Sebelum membuat Sesi Checkout, Anda dapat membuat *Produk* (Products represent what your business sells—whether that's a good or a service) dan *Harga* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) di muka. Gunakan produk untuk mewakili barang fisik atau tingkat layanan yang berbeda, dan *Harga* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) untuk mewakili harga setiap produk. Kamu bisa [mengatur Sesi Checkout Anda](https://docs.stripe.com/payments/checkout/pay-what-you-want.md) untuk menerima tip dan donasi, atau menjual produk dan layanan dengan sistem bayar sesukanya. Misalnya, Anda dapat membuat kaus pendek sebagai produk dengan harga 20 USD. Hal ini memungkinkan Anda memperbarui dan menambahkan harga tanpa perlu mengubah detail produk pokok. Anda dapat membuat produk dan harga dengan Dashboard Stripe atau API. Pelajari selengkapnya tentang [cara kerja produk dan harga](https://docs.stripe.com/products-prices/how-products-and-prices-work.md). #### API API hanya memerlukan `name` untuk membuat [Produk](https://docs.stripe.com/api/products.md). Checkout menampilkan `name`, `description`, dan `images` produk yang Anda berikan. ```curl curl https://api.stripe.com/v1/products \ -u "<>:" \ -d name=T-shirt ``` Berikutnya, buat [Harga](https://docs.stripe.com/api/prices.md) untuk menentukan jumlah yang akan Anda charge untuk produk Anda. Hal ini termasuk biaya produk dan mata uang yang digunakan. ```curl curl https://api.stripe.com/v1/prices \ -u "<>:" \ -d "product={{PRODUCT_ID}}" \ -d unit_amount=2000 \ -d currency=usd ``` #### Dashboard > Salin produk yang dibuat di sandbox ke mode live sehingga Anda tidak perlu membuatnya kembali. Di tampilan detail Produk di Dashboard, klik **Salin ke mode live** di sudut kanan atas. Anda dapat menyalin produk sandbox yang sama ke mode live lebih dari sekali. Setiap salinan membuat produk live yang terpisah, dan pembaruan berikutnya pada produk sandbox tidak tercermin dalam salinan live yang ada. Pastikan Anda berada di sandbox dengan mengeklik **Sandbox** di dalam pemilih akun Dashboard. Berikutnya, tentukan item yang ingin Anda jual. Untuk membuat produk dan harga baru: - Masuk ke bagian [Produk](https://dashboard.stripe.com/test/products) di Dashboard. - Klik **Tambahkan produk**. - Pilih **Satu kali** saat mengatur harga. Checkout menampilkan nama, deskripsi, dan gambar produk yang Anda berikan. Setiap harga yang dibuat memiliki ID. Saat membuat Sesi Checkout, lihat ID harga dan jumlah. Jika menjual dalam berbagai mata uang, tetapkan Harga multi-currency**. Checkout secara otomatis [menentukan mata uang lokal pelanggan](https://docs.stripe.com/payments/checkout/localize-prices/manual-currency-prices.md) dan menampilkan mata uang tersebut jika Harga mendukungnya. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d ui_mode=elements \ -d mode=payment \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ --data-urlencode "return_url=https://example.com/return?session_id={CHECKOUT_SESSION_ID}" ``` ## Optional: Isi dahulu data pelanggan [Sisi server] Jika Anda sudah mengumpulkan email pelanggan dan ingin otomatis mengisinya di Sesi Checkout untuk mereka, teruskan [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email) ketika membuat Sesi Checkout. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ --data-urlencode "customer_email=customer@example.com" \ -d ui_mode=elements \ -d mode=payment \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ --data-urlencode "return_url=https://example.com/return?session_id={CHECKOUT_SESSION_ID}" ``` ## Optional: Simpan detail metode pembayaran Pelajari cara [menerima pembayaran dan menyimpan detail pembayaran pelanggan Anda](https://docs.stripe.com/payments/save-during-payment.md) untuk pembelian mendatang. ## Optional: Dengarkan perubahan Sesi Checkout ### Dengarkan perubahan Sesi Checkout Anda dapat mendengarkan perubahan pada [Sesi Checkout](https://docs.stripe.com/api/checkout/sessions.md) dengan menambahkan listener kejadian pada kejadian `change` dengan [checkout.on](https://docs.stripe.com/js/custom_checkout/change_event). #### HTML + JS ```javascript checkout = stripe.initCheckoutElementsSdk({ clientSecret: promise, elementsOptions: { appearance }, }); checkout.on('change', (session) => { // Handle changes to the checkout session }); ``` #### React ```jsx import React from 'react'; import { useCheckoutElements } from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => { const checkoutState = useCheckoutElements(); if (checkoutState.type === 'success') { checkoutState.checkout.on('change', (session) => { // Handle changes to the checkout session }); } }; ``` ## Optional: Kumpulkan alamat tagihan dan pengiriman ## Kumpulkan alamat tagihan Secara default, Sesi Checkout mengumpulkan detail tagihan minimal yang diperlukan untuk pembayaran melalui Payment Element. ### Menggunakan Billing Address Element Anda dapat mengumpulkan alamat tagihan lengkap menggunakan Billing Address Element. Pertama, teruskan [billing_address_collection=required](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-billing_address_collection) bila Anda membuat Sesi Checkout. #### HTML + JS Buat elemen DOM kontainer untuk memasang Billing Address Element. Kemudian buat instance Billing Address Element menggunakan [checkout.createBillingAddressElement](https://docs.stripe.com/js/custom_checkout/create_billing_address_element) dan pasang dengan memanggil [element.mount](https://docs.stripe.com/js/element/mount), yang menyediakan pemilih CSS ataupun elemen DOM kontainer. ```html
``` ```javascript const billingAddressElement = checkout.createBillingAddressElement(); billingAddressElement.mount('#billing-address'); ``` Billing Address Element mendukung opsi berikut: - [kontak](https://docs.stripe.com/js/custom_checkout/create_billing_address_element#custom_checkout_create_billing_address_element-options-contacts) - [tampilan](https://docs.stripe.com/js/custom_checkout/create_billing_address_element#custom_checkout_create_billing_address_element-options-display) #### React Pasang komponen `BillingAddressElement` dalam komponen `CheckoutElementsProvider`. ```jsx import React from 'react'; import {BillingAddressElement} from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => { return (
) }; ``` Billing Address Element mendukung properti berikut: - [kontak](https://docs.stripe.com/js/custom_checkout/create_billing_address_element#custom_checkout_create_billing_address_element-options-contacts) - [tampilan](https://docs.stripe.com/js/custom_checkout/create_billing_address_element#custom_checkout_create_billing_address_element-options-display) ### Menggunakan formulir custom Anda dapat membuat formulir sendiri untuk mengumpulkan alamat tagihan. - Jika halaman checkout Anda memiliki langkah khusus untuk pengisian alamat sebelum konfirmasi, panggil [updateBillingAddress](https://docs.stripe.com/js/react_stripe_js/checkout/update_billing_address) saat pelanggan mengirimkan alamatnya. - Jika tidak, Anda dapat menyerahkan alamat bila pelanggan mengeklik tombol “bayar” dengan meneruskan [billingAddress](https://docs.stripe.com/js/custom_checkout/confirm#custom_checkout_session_confirm-options-billingAddress) ke [confirm](https://docs.stripe.com/js/custom_checkout/confirm). ### Kumpulkan alamat tagihan parsial Untuk mengumpulkan alamat tagihan parsial, seperti hanya negara dan kode pos, teruskan [billing_address_collection=auto](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-billing_address_collection). Ketika mengumpulkan alamat tagihan parsial, Anda harus [mengumpulkan alamat secara manual](https://docs.stripe.com/payments/accept-a-payment.md#collect-billing-addresses-manually). Secara default, Payment Element secara otomatis mengumpulkan detail tagihan minimal yang diperlukan untuk pembayaran. Untuk menghindari pengumpulan ganda detail tagihan, teruskan [fields.billingDetails=never](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options-fields-billingDetails) ketika membuat Payment Element. Jika Anda hanya bermaksud mengumpulkan sebagian detail tagihan (seperti nama pelanggan), teruskan `never` hanya untuk bidang yang ingin Anda kumpulkan sendiri. ## Kumpulkan alamat pengiriman Untuk mengumpulkan alamat pengiriman pelanggan, teruskan parameter [shipping_address_collection](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-shipping_address_collection) bila Anda membuat Sesi Checkout. Saat mengumpulkan alamat pengiriman, Anda juga harus menentukan negara tujuan pengiriman yang dibolehkan. Konfigurasikan properti [allowed_countries](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-shipping_address_collection-allowed_countries) dengan larik [kode negara ISO dua huruf](https://www.nationsonline.org/oneworld/country_code_list.htm). ### Cara menggunakan Shipping Address Element Anda dapat mengumpulkan alamat pengiriman lengkap dengan Shipping Address Element. #### HTML + JS Buat elemen DOM kontainer untuk memasang Shipping Address Element. Kemudian buat instance Shipping Address Element menggunakan [checkout.createShippingAddressElement](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element) dan pasang dengan memanggil [element.mount](https://docs.stripe.com/js/element/mount), yang menyediakan pemilih CSS ataupun elemen DOM kontainer. ```html
``` ```javascript const shippingAddressElement = checkout.createShippingAddressElement(); shippingAddressElement.mount('#shipping-address'); ``` Shipping Address Element mendukung opsi berikut: - [kontak](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element#custom_checkout_create_shipping_address_element-options-contacts) - [tampilan](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element#custom_checkout_create_shipping_address_element-options-display) #### React Pasang komponen `ShippingAddressElement` dalam komponen `CheckoutElementsProvider`. ```jsx import React from 'react'; import {ShippingAddressElement} from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => { return (
) }; ``` Shipping Address Element mendukung properti berikut: - [kontak](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element#custom_checkout_create_shipping_address_element-options-contacts) - [tampilan](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element#custom_checkout_create_shipping_address_element-options-display) ### Dengarkan perubahan Sesi Checkout Anda dapat mendengarkan perubahan pada [Sesi Checkout](https://docs.stripe.com/api/checkout/sessions.md) dengan menambahkan listener kejadian untuk menangani perubahan terkait alamat. #### HTML + JS Gunakan [objek Sesi](https://docs.stripe.com/js/custom_checkout/session_object) untuk merender jumlah pengiriman di formulir checkout Anda. ```html

Totals

``` ```javascript const checkout = stripe.initCheckoutElementsSdk({clientSecret}); const subtotal = document.getElementById('subtotal'); const shipping = document.getElementById('shipping'); const total = document.getElementById('total'); checkout.on('change', (session) => { subtotal.textContent = `Subtotal: ${session.total.subtotal.amount}`; shipping.textContent = `Shipping: ${session.total.shippingRate.amount}`; total.textContent = `Total: ${session.total.total.amount}`; }); ``` #### React Gunakan [useCheckoutElements](https://docs.stripe.com/js/react_stripe_js/checkout/use_checkout_elements) untuk menampilkan biaya pengiriman di formulir checkout Anda. ```jsx import React from 'react'; import {useCheckoutElements, ShippingAddressElement} from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => { const checkoutState = useCheckoutElements(); if (checkoutState.type === 'error') { return (
Error: {checkoutState.error.message}
); } return (

Checkout Summary

{checkoutState.type === 'success' && ( <> 
              {JSON.stringify(checkoutState.checkout.lineItems, null, 2)}

Totals

              Subtotal: {checkoutState.checkout.total.subtotal.amount}
              Shipping: {checkoutState.checkout.total.shippingRate.amount}
              Total: {checkoutState.checkout.total.total.amount}
)}
) }; ``` ### Sinkronkan alamat penagihan dan pengiriman Ketika menggunakan Billing Address Element dan Shipping Address Element secara sekaligus, Anda dapat menyertakan kotak centang bagi pelanggan untuk menyinkronkan alamat penagihan dengan alamat pengiriman. #### HTML + JS Teruskan opsi [syncAddressCheckbox](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions-syncAddressCheckbox) di `elementsOptions` saat menginisialisasi Checkout untuk mengonfigurasi Address Element mana yang menampilkan kotak centang. ```javascript const checkout = stripe.initCheckoutElementsSdk({ clientSecret, elementsOptions: { syncAddressCheckbox: 'shipping', }, }); ``` #### React Teruskan opsi [syncAddressCheckbox](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions-syncAddressCheckbox) di `elementsOptions` ke `CheckoutElementsProvider` untuk mengonfigurasi Address Element mana yang menampilkan kotak centang. ```jsx promise, elementsOptions: { syncAddressCheckbox: 'shipping', }, }} > ``` Atur nilainya ke `'penagihan'` atau `'Pengiriman'` untuk memilih Element Alamat mana yang menampilkan kotak centang. Atur ke `'Tidak ada'` untuk menyembunyikan kotak centang, atau membiarkannya kosong untuk menggunakan nilai default (`'penagihan'`). ### Gunakan formulir custom Anda dapat membuat formulir sendiri untuk mengumpulkan alamat pengiriman. - Jika halaman checkout Anda memiliki langkah khusus untuk pengisian alamat sebelum konfirmasi, panggil [updateShippingAddress](https://docs.stripe.com/js/react_stripe_js/checkout/update_shipping_address) saat pelanggan mengirimkan alamatnya. - Jika tidak, Anda dapat menyerahkan alamat bila pelanggan mengeklik tombol “bayar” dengan meneruskan [shippingAddress](https://docs.stripe.com/js/custom_checkout/confirm#custom_checkout_session_confirm-options-shippingAddress) ke [confirm](https://docs.stripe.com/js/custom_checkout/confirm). ## Optional: Pisahkan otorisasi dan penarikan [Sisi server] Stripe mendukung pembayaran kartu dua langkah sehingga Anda dapat terlebih dahulu mengotorisasi kartu, lalu menangkap dana nanti. Saat Stripe mengotorisasi pembayaran, penerbit kartu menjamin dana dan menahan jumlah pembayaran pada kartu pelanggan. Anda kemudian memiliki waktu tertentu untuk menangkap dana, [tergantung pada kartu](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md#auth-capture-limitations)). Jika Anda tidak menangkap pembayaran sebelum otorisasi berakhir, pembayaran dibatalkan dan penerbit melepaskan dana yang ditahan. Memisahkan otorisasi dan penangkapan pembayaran berguna jika Anda perlu melakukan tindakan tambahan antara mengkonfirmasi bahwa pelanggan mampu membayar dan mengumpulkan pembayaran mereka. Misalnya, jika Anda menjual barang dengan stok terbatas, Anda mungkin perlu mengkonfirmasi bahwa barang yang dibeli pelanggan Anda melalui Checkout masih tersedia sebelum menangkap pembayaran mereka dan menyelesaikan pembelian. Capai hal ini menggunakan alur kerja berikut: 1. Konfirmasikan bahwa Stripe mengotorisasi metode pembayaran pelanggan. 2. Periksa sistem manajemen inventaris Anda untuk mengonfirmasikan bahwa item masih tersedia. 3. Perbarui sistem manajemen inventaris Anda untuk menandai bahwa pelanggan telah membeli item. 4. Tarik pembayaran pelanggan. 5. Informasikan pelanggan Anda bila pembelian mereka berhasil di halaman konfirmasi. Untuk menunjukkan bahwa Anda ingin memisahkan otorisasi dan penarikan, Anda harus mengatur nilai [payment_intent_data.capture_method](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-capture_method) ke `manual` ketika membuat Sesi Checkout. Ini menginstruksikan Stripe agar hanya mengotorisasi jumlah pada kartu pelanggan. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ -d "payment_intent_data[capture_method]=manual" \ -d return_url={{RETURN_URL}} \ -d ui_mode=elements ``` Untuk menarik pembayaran yang belum ditarik, Anda dapat menggunakan endpoint [Dashboard](https://dashboard.stripe.com/test/payments?status%5B%5D=uncaptured) atau [penarikan](https://docs.stripe.com/api/payment_intents/capture.md). Menarik pembayaran secara terprogram memerlukan akses ke PaymentIntent yang dibuat selama Sesi Checkout, yang bisa Anda dapatkan dari objek [Session](https://docs.stripe.com/api/payment_intents/capture.md). ## Optional: Manajemen akun pelanggan [Tidak ada kode] Biarkan pelanggan [mengelola](https://docs.stripe.com/customer-management.md) akunnya sendiri dengan membagikan tautan ke *portal pelanggan* (The customer portal is a secure, Stripe-hosted page that lets your customers manage their subscriptions and billing details) Anda. Portal pelanggan memungkinkan pelanggan masuk dengan email mereka untuk mengelola langganan, memperbarui metode pembayaran, dan lain-lain. ## Optional: Pemenuhan pesanan Pelajari cara [mendapatkan notifikasi secara terprogram](https://docs.stripe.com/checkout/fulfillment.md?payment-ui=embedded-components) bila pelanggan membayar. ## See also - [Tambahkan diskon untuk pembayaran satu kali](https://docs.stripe.com/payments/advanced/discounts.md) - [Pungut pajak](https://docs.stripe.com/tax/checkout/elements.md) - [Aktifkan kuantitas mata anggaran yang dapat disesuaikan](https://docs.stripe.com/payments/advanced/adjustable-quantity.md) - [Tambahkan tombol sekali klik](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md?payment-ui=embedded-components) - [Proyek contoh di GitHub](https://github.com/stripe-samples/accept-a-payment/tree/main/elements-with-checkout-sessions)