Terima pembayaran

Terima pembayaran dengan aman secara online.

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

Buat halaman checkout pada situs web Anda menggunakan Stripe Elements dan Sesi Checkout, sebuah integrasi yang mengelola pajak, diskon, tarif pengiriman, serta hal lainnya.

Demo ini hanya menampilkan Google Pay atau Apple Pay jika Anda memiliki kartu aktif dengan salah satu dompet.

Siapkan server
Sisi server

Sebelum memulai, Anda perlu mendaftar untuk akun Stripe.

Gunakan pustaka Stripe resmi untuk mengakses API dari aplikasi Anda.

Atur SDK untuk menggunakan minimal versi API2025-03-31.basil.

Buat Sesi Checkout
Sisi server

Tambahkan endpoint pada server yang membuat Sesi Checkout dan mengembalikan client secret ke frontend Anda. Sesi Checkout mewakili sesi pelanggan Anda saat mereka membayar langganan atau pembelian satu kali. Sesi Checkout akan kedaluwarsa dalam waktu 24 jam setelah pembuatan.

Siapkan frontend
Sisi client

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.

Ensure you’re on the latest Stripe.js version by including the following script tag <script src=“https://js.stripe.com/clover/stripe.js”></script>. Learn more about Stripe.js versioning.

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

Catatan

Stripe menyediakan paket npm yang dapat Anda gunakan untuk memuat Stripe.js sebagai modul. Lihat proyek di GitHub. Versi 7.0.0 atau yang lebih baru diperlukan.

Inisialisasikan stripe.js.

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'
,
);

Inisialisasikan Checkout
Sisi client

Buat clientSecret baik sebagai promise yang menghasilkan client secret atau tetapkan langsung sebagai secret. Panggil initCheckout, dengan menyertakan clientSecret. initCheckout akan mengembalikan sebuah promise yang menghasilkan sebuah instance Checkout.

Objek checkout berfungsi sebagai dasar halaman checkout Anda, dan berisi data dari Sesi Checkout dan metode untuk memperbarui Sesi.

Objek yang dikembalikan oleh actions.getSession() berisi informasi harga Anda. Kami menyarankan untuk membaca dan menampilkan total, dan lineItems dari sesi di UI Anda.

Hal ini memungkinkan Anda untuk mengaktifkan fitur-fitur baru dengan perubahan kode yang minimal. Sebagai contoh, menambahkan harga mata uang manual tidak memerlukan perubahan UI jika Anda menampilkan total.

checkout.js
const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
  .then((response) => response.json())
  .then((json) => json.checkoutSessionClientSecret);
const checkout = stripe.initCheckout({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}`);
}

index.html
<div id="checkout-container"></div>

Kumpulkan email pelanggan
Sisi client

Buat input email untuk mengumpulkan alamat email pelanggan Anda. Panggil updateEmail bila pelanggan Anda menyelesaikan input untuk memvalidasi dan menyimpan alamat email.

Tergantung desain formulir checkout, Anda dapat memanggil updateEmail dengan cara berikut:

Secara langsung sebelum menyerahkan pembayaran. Anda juga dapat memanggil updateEmail untuk memvalidasi lebih awal, seperti pada input yang mengabur.
Sebelum bertransisi ke langkah berikutnya, seperti mengeklik tombol Simpan, jika formulir Anda menyertakan beberapa langkah.

index.html
<input type="text" id="email" />
<div id="email-errors"></div>

checkout.js
const checkout = stripe.initCheckout({clientSecret});
const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  const emailInput = document.getElementById('email');
  const emailErrors = document.getElementById('email-errors');

  emailInput.addEventListener('input', () => {
    // Clear any validation errors
    emailErrors.textContent = '';
  });

  emailInput.addEventListener('blur', () => {
    const newEmail = emailInput.value;
    actions.updateEmail(newEmail).then((result) => {
      if (result.error) {
        emailErrors.textContent = result.error.message;
      }
    });
  });
}

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.

Pertama, buat elemen DOM kontainer untuk memasang Payment Element. Kemudian buat instance Payment Element menggunakan checkout.createPaymentElement dan pasang dengan memanggil element.mount, yang menyediakan pemilih CSS atau elemen DOM kontainer.

index.html
<div id="payment-element"></div>

checkout.js
const paymentElement = checkout.createPaymentElement();
paymentElement.mount('#payment-element');

Lihat dokumen Stripe.js untuk melihat opsi yang didukung.

Anda dapat menyesuaikan penampilan semua Elements dengan meneruskan elementsOptions.appearance ketika menginisialisasi Checkout pada frontend.

Serahkan pembayaran
Sisi client

Tampilkan tombol Bayar yang memanggil confirm dari instance checkout untuk mengirimkan pembayaran.

index.html
<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>

checkout.js
const checkout = stripe.initCheckout({clientSecret});
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;
      }
    });
  });
}

Uji integrasi Anda

Arahkan ke halaman checkout Anda.
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.
Serahkan pembayaran ke Stripe.
Buka Dashboard dan cari pembayaran pada halaman Transaksi. 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.

Nomor kartu	Skenario	Cara 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.

OpsionalBuat produk dan harga

Sebelum membuat Sesi Checkout, Anda dapat membuat Produk dan Harga terlebih dahulu. Gunakan produk untuk mewakili barang fisik atau tingkat layanan yang berbeda, dan Harga untuk mewakili harga setiap produk.

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.

API hanya memerlukan name untuk membuat Produk. Checkout menampilkan name, description, dan images produk yang Anda berikan.

Berikutnya, buat Harga untuk menentukan jumlah yang akan Anda charge untuk produk Anda. Hal ini termasuk biaya produk dan mata uang yang digunakan.

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 dan menampilkan mata uang tersebut jika Harga mendukungnya.

OpsionalIsi dahulu data pelanggan
Sisi server

Jika Anda sudah mengumpulkan email pelanggan dan ingin otomatis mengisinya di Sesi Checkout untuk mereka, teruskan customer_email ketika membuat Sesi Checkout.

OpsionalSimpan detail metode pembayaran

Pelajari cara menerima pembayaran dan menyimpan detail pembayaran pelanggan Anda untuk pembelian mendatang.

OpsionalDengarkan perubahan Sesi Checkout

Dengarkan perubahan Sesi Checkout

Anda dapat mendengarkan perubahan pada Sesi Checkout dengan menambahkan listener kejadian pada kejadian change dengan checkout.on.

checkout.js
checkout = stripe.initCheckout({
  clientSecret: promise,
  elementsOptions: { appearance },
});

checkout.on('change', (session) => {
  // Handle changes to the checkout session
});

OpsionalKumpulkan 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 bila Anda membuat Sesi Checkout.

Buat elemen DOM kontainer untuk memasang Billing Address Element. Kemudian buat instance Billing Address Element menggunakan checkout.createBillingAddressElement dan pasang dengan memanggil element.mount, yang menyediakan pemilih CSS ataupun elemen DOM kontainer.

index.html
<div id="billing-address"></div>

checkout.js
const billingAddressElement = checkout.createBillingAddressElement();
billingAddressElement.mount('#billing-address');

Billing Address Element mendukung opsi berikut:

Menggunakan formulir custom

Anda dapat membuat formulir sendiri untuk mengumpulkan alamat tagihan.

Jika halaman checkout Anda memiliki langkah pengumpulan alamat yang berbeda sebelum konfirmasi, panggil updateBillingAddress bila pelanggan Anda menyerahkan alamat.
Jika tidak, Anda dapat menyerahkan alamat bila pelanggan mengeklik tombol “bayar” dengan meneruskan billingAddress ke confirm.

Kumpulkan alamat tagihan parsial

Untuk mengumpulkan alamat tagihan parsial, seperti hanya negara dan kode pos, teruskan billing_address_collection=auto.

Ketika mengumpulkan alamat tagihan parsial, Anda harus mengumpulkan alamat secara manual. Secara default, Payment Element secara otomatis mengumpulkan detail tagihan minimal yang diperlukan untuk pembayaran. Untuk menghindari pengumpulan ganda detail tagihan, teruskan fields.billingDetails=never 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 bila Anda membuat Sesi Checkout.

Saat mengumpulkan alamat pengiriman, Anda juga harus menentukan negara tujuan pengiriman yang dibolehkan. Konfigurasikan properti allowed_countries dengan larik kode negara ISO dua huruf.

Cara menggunakan Shipping Address Element

Anda dapat mengumpulkan alamat pengiriman lengkap dengan Shipping Address Element.

Buat elemen DOM kontainer untuk memasang Shipping Address Element. Kemudian buat instance Shipping Address Element menggunakan checkout.createShippingAddressElement dan pasang dengan memanggil element.mount, yang menyediakan pemilih CSS ataupun elemen DOM kontainer.

index.html
<div id="shipping-address"></div>

checkout.js
const shippingAddressElement = checkout.createShippingAddressElement();
shippingAddressElement.mount('#shipping-address');

Shipping Address Element mendukung opsi berikut:

Dengarkan perubahan Sesi Checkout

Anda dapat mendengarkan perubahan pada Sesi Checkout dengan menambahkan listener kejadian untuk menangani perubahan terkait alamat.

Gunakan objek Sesi untuk merender jumlah pengiriman di formulir checkout Anda.

index.html
<div>
  <h3> Totals </h3>
  <div id="subtotal" ></div>
  <div id="shipping" ></div>
  <div id="total" ></div>
</div>

checkout.js
const checkout = stripe.initCheckout({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}`;
});

Gunakan formulir custom

Anda dapat membuat formulir sendiri untuk mengumpulkan alamat pengiriman.

Jika halaman checkout Anda memiliki langkah pengumpulan alamat yang berbeda sebelum konfirmasi, panggil updateShippingAddress bila pelanggan Anda menyerahkan alamat.
Jika tidak, Anda dapat menyerahkan alamat bila pelanggan mengeklik tombol “bayar” dengan meneruskan shippingAddress ke confirm.

OpsionalPisahkan otorisasi dan penarikan
Sisi server

Stripe mendukung pembayaran kartu dua langkah sehingga Anda bisa mengotorisasi kartu terlebih dahulu, lalu mengambil dana di kemudian hari. Ketika Stripe mengotorisasi pembayaran, penerbit kartu menjamin dana dan menahan jumlah pembayaran di kartu pelanggan. Anda kemudian memiliki waktu tertentu untuk menangkap dana, tergantung pada kartunya). Jika Anda tidak menangkap pembayaran sebelum otorisasi berakhir, pembayaran akan dibatalkan dan penerbit akan melepaskan dana yang ditahan.

Memisahkan otorisasi dan penarikan berguna jika Anda perlu mengambil tindakan tambahan antara mengonfirmasi bahwa pelanggan dapat membayar dan menagih pembayaran mereka. Misalnya, jika menjual item dengan stok terbatas, Anda mungkin perlu mengonfirmasi bahwa item yang dibeli oleh pelanggan menggunakan Checkout masih tersedia sebelum menarik pembayaran mereka dan memenuhi pembelian. Lakukan hal ini menggunakan alur kerja berikut:

Konfirmasikan bahwa Stripe mengotorisasi metode pembayaran pelanggan.
Periksa sistem manajemen inventaris Anda untuk mengonfirmasikan bahwa item masih tersedia.
Perbarui sistem manajemen inventaris Anda untuk menandai bahwa pelanggan telah membeli item.
Tarik pembayaran pelanggan.
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 ke manual ketika membuat Sesi Checkout. Ini menginstruksikan Stripe agar hanya mengotorisasi jumlah pada kartu pelanggan.

Untuk menarik pembayaran yang belum ditarik, Anda dapat menggunakan endpoint Dashboard atau penarikan. Menarik pembayaran secara terprogram memerlukan akses ke PaymentIntent yang dibuat selama Sesi Checkout, yang bisa Anda dapatkan dari objek Session.

OpsionalManajemen akun pelanggan
Tidak ada kode

Biarkan pelanggan mengelola akunnya sendiri dengan membagikan tautan ke portal pelanggan Anda. Portal pelanggan memungkinkan pelanggan masuk dengan email mereka untuk mengelola langganan, memperbarui metode pembayaran, dan lain-lain.

OpsionalPemenuhan pesanan

Pelajari cara mendapatkan notifikasi secara terprogram bila pelanggan membayar.

Terima pembayaran