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.

Alihkan ke halaman pembayaran yang di-hosting Stripe menggunakan Stripe Checkout. Lihat cara membandingkan integrasi ini dengan tipe integrasi Stripe lainnya.

Pratinjau Checkout

Upaya integrasi

Minim kode program

Tipe integrasi

Alihkan ke halaman pembayaran yang di-hosting Stripe

Penyesuaian UI

Penyesuaian terbatas

Cobalah

Pertama, mendaftarlah untuk akun Stripe.

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

Command Line
# Available as a gem
sudo gem install stripe
Gemfile
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Alihkan pelanggan Anda ke Stripe Checkout
Sisi client
Sisi server

Tambahkan tombol checkout ke situs web Anda yang memanggil endpoint sisi server untuk membuat Sesi Checkout.

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.

checkout.html
<html>
  <head>
    <title>Buy cool new product</title>
  </head>
  <body>
    <!-- Use action="/create-checkout-session.php" if your server is PHP based. -->
    <form action="/create-checkout-session" method="POST">
      <button type="submit">Checkout</button>
    </form>
  </body>
</html>

Sesi Checkout adalah representasi terprogram dari apa yang dilihat pelanggan Anda saat mereka dialihkan ke formulir pembayaran. Anda dapat mengonfigurasinya dengan opsi seperti:

Anda harus mengisi success_url dengan nilai URL halaman di situs web Anda yang akan dikembalikan oleh Checkout setelah pelanggan menyelesaikan pembayaran. Anda juga dapat memberikan nilai cancel_url di halaman situs web Anda yang akan dikembalikan oleh Checkout jika pelanggan menghentikan proses pembayaran sebelum selesai.

Catatan

Sesi Checkout akan kedaluwarsa dalam waktu 24 jam setelah pembuatan secara default.

Setelah membuat Sesi Checkout, alihkan pelanggan Anda ke URL yang dikembalikan di respons.

# This example sets up an endpoint using the Sinatra framework.


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',
    # These placeholder URLs will be replaced in a following step.
    success_url: 'https://example.com/success',
    cancel_url: 'https://example.com/cancel',
  })

  redirect session.url, 303
end

Metode pembayaran

Secara default, Stripe mengaktifkan kartu dan metode pembayaran umum lainnya. Anda dapat mengaktifkan atau menonaktifkan metode pembayaran individual di Dashboard Stripe. Di Checkout, Stripe mengevaluasi mata uang dan batasan, lalu menyajikan metode pembayaran yang didukung secara dinamis kepada pelanggan.

Untuk melihat cara metode pembayaran Anda ditampilkan kepada pelanggan, masukkan identifikasi transaksi atau tetapkan jumlah pesanan dan mata uang di Dashboard.

Anda dapat mengaktifkan Apple Pay dan Google Pay di pengaturan metode pembayaran. Secara default, Apple Pay diaktifkan dan Google Pay dinonaktifkan. Namun, dalam beberapa kasus Stripe memfilternya bahkan saat diaktifkan. Kami memfilter Google Pay jika Anda mengaktifkan pajak otomatis tanpa mengumpulkan alamat pengiriman.

Halaman Checkout yang di-hosting Stripe tidak perlu perubahan integrasi untuk mengaktifkan Apple Pay atau Google Pay. Stripe menangani pembayaran ini dengan cara yang sama seperti pembayaran kartu lainnya.

Konfirmasikan endpoint Anda

Konfirmasi endpoint Anda dapat diakses dengan memulai server web (misalnya, localhost:4242) dan menjalankan perintah berikut:

Command Line
curl -X POST -is "http://localhost:4242/create-checkout-session" -d ""

Anda akan melihat respons di terminal seperti ini:

Command Line
HTTP/1.1 303 See Other
Location: https://checkout.stripe.com/c/pay/cs_test_...
...

Mencoba

Anda sekarang telah memiliki tombol checkout yang mengalihkan pelanggan ke Stripe Checkout.

  1. Klik tombol checkout.
  2. Anda akan dialihkan ke formulir pembayaran Stripe Checkout.

Jika integrasi Anda tidak berhasil:

  1. Buka tab Network di alat pengembang browser Anda.
  2. Klik tombol checkout dan konfirmasikan dengan mengirim permintaan XHR ke endpoint sisi server Anda (POST /create-checkout-session).
  3. Verifikasi bahwa permintaan mengembalikan status 200.
  4. Gunakan console.log(session) di dalam listener klik tombol Anda untuk mengonfirmasi bahwa data yang benar dikembalikan.

Tampilkan halaman berhasil
Sisi client
Sisi server

Pelanggan Anda perlu melihat halaman berhasil setelah mereka berhasil menyerahkan formulir pembayaran. Hosting halaman berhasil ini di situs Anda.

Buat halaman berhasil minimal:

success.html
<html>
  <head><title>Thanks for your order!</title></head>
  <body>
    <h1>Thanks for your order!</h1>
    <p>
      We appreciate your business!
      If you have any questions, please email
      <a href="mailto:orders@example.com">orders@example.com</a>.
    </p>
  </body>
</html>

Berikutnya, perbarui endpoint pembuatan Sesi Checkout untuk menggunakan halaman baru ini:

Command Line
curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -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 success_url="http://localhost:4242/success.html" \
  --data-urlencode cancel_url="http://localhost:4242/cancel.html"

Catatan

Jika Anda ingin menyesuaikan halaman berhasil, baca panduan halaman berhasil custom.

Mencoba

  1. Klik tombol checkout Anda.
  2. Isikan detail pembayaran dengan informasi kartu percobaan:
    • Masukkan 4242 4242 4242 4242 sebagai nomor kartu.
    • Masukkan tanggal mendatang untuk tanggal kedaluwarsa kartu.
    • Masukkan nomor 3 angka untuk CVC.
    • Masukkan kode pos tagihan.
  3. Klik Bayar.
  4. Anda akan dialihkan ke halaman berhasil yang baru.

Berikutnya, temukan pembayaran baru di Dashboard Stripe. Pembayaran yang berhasil akan muncul dalam daftar pembayaran Dashboard. Saat mengeklik pembayaran, Anda akan dibawa ke halaman detail pembayaran. Bagian Ringkasan checkout berisi informasi penagihan dan daftar item yang dibeli, yang dapat Anda gunakan untuk memenuhi pesanan secara manual.

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 yang di-hosting Stripe Anda:

  1. Buat Sesi Checkout.
  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. Klik Bayar. Anda akan dialihkan ke success_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 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.

Kartu percobaan

NomorKeterangan
Berhasil dan segera memproses pembayaran.
Memerlukan autentikasi 3D Secure 2 agar pembayaran berhasil.
Selalu gagal dengan kode tolakan insufficient_funds.

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