Lewati ke konten
Buat akun
 atau
Masuk
Logo Dokumen Stripe
/
Buat akun
Masuk

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.

Lokasi pelanggan
Ukuran
Tema
Tata letak
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.

Command Line
npm install stripe@18.0.0 --save

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

// Set your secret key. Remember to switch to your live secret key in production.
// See your keys here: https://dashboard.stripe.com/apikeys
import Stripe from 'stripe';
const stripe = new Stripe(
'sk_test_BQokikJOvBiI2HlWgH4olfQ2'
, {
  apiVersion: '2025-03-31.basil' as any,
});

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.

server.ts
import express, {Express} from 'express';

const app: Express = express();

app.post('/create-checkout-session', async (req: Express.Request, res: Express.Response) => {
  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        price_data: {
          currency: 'usd',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: 2000,
        },
        quantity: 1,
      },
    ],
    mode: 'payment',
    ui_mode: 'custom',
    // The URL of your payment completion page
    return_url: 'https://example.com/return?session_id={CHECKOUT_SESSION_ID}'
  });

  res.json({checkoutSessionClientSecret: session.client_secret});
});

app.listen(3000, () => {
  console.log('Running on port 3000');
});

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.

Anda perlu memperbarui Stripe.js menjadi basil dari v3 dengan menyertakan tag skrip berikut <script src="https://js.stripe.com/basil/stripe.js"></script>. Pelajari selengkapnya tentang pembuatan versi Stripe.js.

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/basil/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 fungsi fetchClientSecret. Fungsi ini mengambil client secret dari server Anda dan mengembalikan janji yang diselesaikan dengan client secret. Panggil initCheckout, yang meneruskan fetchClientSecret. initCheckout mengembalikan penyelesaian janji ke instance checkout.

Objek checkout bertindak sebagai fondasi halaman checkout Anda, yang berisi data dari Sesi Checkout dan metode untuk memperbarui Sesi.

Objek yang dikembalikan oleh checkout.session() berisi informasi skema biaya Anda. Kami merekomendasikan Anda membaca dan menampilkan total dan lineItems dari sesi di UI.

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

checkout.js
const fetchClientSecret = () => {
  return fetch('/create-checkout-session', {method: 'POST'})
    .then((response) => response.json())
    .then((json) => json.checkoutSessionClientSecret);
};
stripe.initCheckout({fetchClientSecret})
  .then((checkout) => {
    const checkoutContainer = document.getElementById('checkout-container');
    checkoutContainer.append(JSON.stringify(checkout.lineItems, null, 2));
    checkoutContainer.append(document.createElement('br'));
    checkoutContainer.append(`Total: ${checkout.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
stripe.initCheckout({fetchClientSecret}).then((checkout) => {
  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;
    checkout.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 menyerahkan pembayaran.

index.html
<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>
checkout.js
stripe.initCheckout({fetchClientSecret}).then((checkout) => {
  const button = document.getElementById('pay-button');
  const errors = document.getElementById('confirm-errors');
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';

    checkout.confirm().then((result) => {
      if (result.type === 'error') {
        errors.textContent = result.error.message;
      }
    });
  });
});

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. 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.
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.

Lihat juga

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
Produk yang Digunakan
Payments
Elements
Checkout