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.

Menyematkan formulir pembayaran siap-rakit pada situs Anda menggunakan Stripe Checkout. Lihat cara membandingkan integrasi ini dengan tipe integrasi Stripe lainnya.

Pratinjau Checkout tersematPratinjau Checkout tersemat
powdur.me

Upaya integrasi

Minim kode program

Tipe integrasi

Sematkan formulir pembayaran siap-rakit di situs Anda

Penyesuaian UI

Penyesuaian terbatas

Gunakan pengaturan branding di Dashboard Stripe untuk mencocokkan Checkout dengan desain situs Anda.

Pertama, mendaftarlah untuk akun Stripe.

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

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

Buat Sesi Checkout
Sisi server

Dari server Anda, buat Sesi Checkout dan atur ui_mode ke embedded. Anda dapat melakukan konfigurasi Sesi Checkout dengan line items untuk disertakan dan opsi seperti currency.

Anda juga dapat membuat Sesi Checkout untuk pelanggan yang ada, sehingga memungkinkan Anda otomatis mengisi bidang Checkout dengan informasi kontak yang diketahui dan menyatukan riwayat pembelian Anda untuk pelanggan tersebut.

Untuk mengembalikan pelanggan ke halaman custom yang Anda hosting pada situs web, tentukan URL halaman tersebut di parameter return_url. Sertakan variabel templat {CHECKOUT_SESSION_ID} di URL untuk mengambil status sesi di halaman pengembalian. Checkout secara otomatis menggantikan variabel dengan identifikasi Sesi Checkout sebelum pengalihan.

Baca selengkapnya tentang konfigurasi halaman pengembalian dan opsi lain untuk menyesuaikan perilaku pengalihan.

Setelah Anda membuat Sesi Checkout, gunakan client_secret yang dikembalikan sebagai respons untuk memasang Checkout.

Ruby
Python
PHP
Java
Node
Go
.NET
No results
# This example sets up an endpoint using the Sinatra framework.
# To learn more about Sinatra, watch this video: https://youtu.be/8aA9Enb8NVc.
require 'json'
require 'sinatra'
require 'stripe'

# 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-checkout-session' do
  session = Stripe::Checkout::Session.create({
    line_items: [{
      price_data: {
        currency: 'usd',
        product_data: {
          name: 'T-shirt',
        },
        unit_amount: 2000,
      },
      quantity: 1,
    }],
    mode: 'payment',
    ui_mode: 'embedded',
    return_url: 'https://example.com/checkout/return?session_id={CHECKOUT_SESSION_ID}'
  })

  {clientSecret: session.client_secret}.to_json
end

Pasang Checkout
Sisi klien

Checkout tersedia sebagai bagian dari Stripe.js. Sertakan skrip Stripe.js di halaman Anda dengan menambahkannya ke head file HTML Anda. Selanjutnya, buat node DOM kosong (kontainer) yang akan digunakan untuk pemasangan.

index.html
<head>
  <script src="https://js.stripe.com/basil/stripe.js"></script>
</head>
<body>
  <div id="checkout">
    <!-- Checkout will insert the payment form here -->
  </div>
</body>

Inisialisasikan Stripe.js dengan kunci API yang dapat diterbitkan.

Buat fungsi fetchClientSecret asinkron yang melakukan permintaan ke server Anda untuk membuat Sesi Checkout dan mengambil client secret. Teruskan fungsi ini ke options saat Anda membuat instance Checkout:

index.js
// Initialize Stripe.js
const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx'
);

initialize();

// Fetch Checkout Session and retrieve the client secret
async function initialize() {
  const fetchClientSecret = async () => {
    const response = await fetch("/create-checkout-session", {
      method: "POST",
    });
    const { clientSecret } = await response.json();
    return clientSecret;
  };

  // Initialize Checkout
  const checkout = await stripe.initEmbeddedCheckout({
    fetchClientSecret,
  });

  // Mount Checkout
  checkout.mount('#checkout');
}

Checkout ditampilkan di iframe yang mengirimkan informasi pembayaran dengan aman ke Stripe melalui koneksi HTTPS.

Kesalahan umum

Hindari penempatan Checkout dalam iframe lain karena sejumlah metode pembayaran memerlukan pengalihan ke halaman lain untuk konfirmasi pembayaran.

Sesuaikan penampilan

Sesuaikan Checkout agar cocok dengan desain situs Anda dengan mengatur warna latar belakang, warna tombol, radius batas, dan font di pengaturan branding akun.

Secara default, Checkout ditampilkan tanpa padding atau margin eksternal. Kami merekomendasikan penggunaan elemen kontainer seperti div untuk menerapkan margin yang Anda inginkan (misalnya, 16 piksel pada semua sisi).

Tampilkan halaman pengembalian

Setelah pelanggan Anda mencoba melakukan pembayaran, Stripe mengalihkannya ke halaman pengembalian yang Anda hosting pada situs. Saat membuat Sesi Checkout, Anda menentukan URL halaman pengembalian di parameter return_url. Baca selengkapnya tentang opsi lain untuk menyesuaikan perilaku pengalihan.

Ketika menampilkan halaman pengembalian Anda, ambil status Sesi Checkout menggunakan identifikasi Sesi Checkout di URL. Tangani hasilnya sesuai dengan status sesi sebagai berikut:

  • complete: Pembayaran berhasil. Gunakan informasi dari Sesi Checkout untuk menampilkan halaman berhasil.
  • open: Pembayaran gagal atau dibatalkan. Pasang ulang Checkout agar pelanggan Anda dapat mencoba lagi.
Ruby
Python
PHP
Java
Node
Go
.NET
No results
get '/session-status' do
  session = Stripe::Checkout::Session.retrieve(params[:session_id])

  {status: session.status, customer_email:  session.customer_details.email}.to_json
end
client.js
const session = await fetch(`/session_status?session_id=${session_id}`)
if (session.status == 'open') {
  // Remount embedded Checkout
} else if (session.status == 'complete') {
  // Show success page
  // Optionally use session.payment_status or session.customer_email
  // to customize the success page
}

Metode pembayaran berbasis pengalihan

Selama pembayaran, sejumlah metode pembayaran mengalihkan pelanggan ke halaman perantara, seperti halaman otorisasi bank. Saat mereka menyelesaikan halaman tersebut, Stripe mengalihkan mereka ke halaman pengembalian.

Pelajari selengkapnya tentang metode pembayaran berbasis pengalihan dan perilaku pengalihan.

Tangani kejadian pascapembayaran

Stripe mengirim kejadian checkout.session.completed bila pelanggan menyelesaikan pembayaran Sesi Checkout. Gunakan alat webhook Dashboard atau ikuti panduan webhook untuk menerima dan menangani kejadian ini, yang mungkin memicu Anda untuk:

  • Kirim email konfirmasi pesanan ke pelanggan Anda.
  • Catat penjualan di database.
  • Mulai alur kerja pengiriman.

Dengarkan kejadian ini daripada menunggu pelanggan dialihkan kembali ke situs web Anda. Memicu pemenuhan hanya dari halaman penyambut Checkout Anda tidak dapat diandalkan. Penyiapan integrasi untuk mendengarkan kejadian asinkron memungkinkan Anda menyetujui berbagai tipe metode pembayaran dengan satu integrasi tunggal.

Pelajari selengkapnya di panduan pemenuhan untuk Checkout kami.

Tangani kejadian berikut ketika menagih pembayaran dengan Checkout:

KejadianKeteranganTindakan
checkout.session.completedDikirim bila pelanggan berhasil menyelesaikan Sesi Checkout.Kirimi pelanggan konfirmasi pesanan dan penuhi pesanan mereka.
checkout.session.async_payment_succeededDikirim bila pembayaran yang dilakukan dengan metode pembayaran tertunda, seperti utang ACH langsung, berhasil.Kirimi pelanggan konfirmasi pesanan dan penuhi pesanan mereka.
checkout.session.async_payment_failedDikirim bila pembayaran yang dilakukan dengan metode pembayaran tertunda, seperti utang langsung ACH, gagal.Beri tahu pelanggan tentang kegagalan tersebut dan bawa mereka kembali ke sesi untuk mencoba pembayaran lagi.

Coba integrasi Anda

Untuk mencoba integrasi formulir pembayaran tersemat Anda:

  1. Buat Sesi Checkout tersemat dan pasang Checkout pada halaman Anda.
  2. Isilah detail pembayaran dengan metode dari tabel di bawah ini.
    • Masukkan tanggal mendatang untuk tanggal kedaluwarsa kartu.
    • Masukkan nomor 3 angka untuk CVC.
    • Masukkan kode pos tagihan.
  3. Klik Bayar. Anda akan dialihkan ke return_url.
  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 ringkasan Checkout dengan 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.

Lihat juga

Apakah halaman ini membantu?
YaTidak
Code quickstart
Panduan Terkait
Elements Appearance API
Skenario pembayaran lainnya
Cara kerja kartu
Produk yang Digunakan
Payments
Elements
Checkout