Lewati ke konten
Buat akun
 atau
Masuk
Logo Dokumen Stripe
/
Buat akun
Masuk
Gambaran UmumUpgrade integrasi Anda
Pembayaran online
Gambaran umumTemukan contoh penggunaan AndaPembayaran Terkelola
Metode Pembayaran
Antarmuka pembayaran
Skenario pembayaran
Pembayaran di tempat
Produk Stripe lainnya

Simpan detail pembayaran saat pembayaran

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

Salin halaman

Gunakan Stripe Checkout untuk menyematkan formulir pembayaran siap-rakit pada situs web Anda yang memungkinkan pelanggan menyimpan detail pembayaran untuk pembelian mendatang.

Siapkan Stripe
Sisi server

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'

Buat pelanggan
Sisi server

Untuk menyiapkan kartu bagi pembayaran mendatang, Anda harus melampirkannya ke Pelanggan. Buat objek Customer bila pelanggan membuat akun pada bisnis Anda. Objek Customer memungkinkan penggunaan kembali metode pembayaran dan pelacakan ke beberapa pembayaran sekaligus.

Command Line
curl https://api.stripe.com/v1/customers \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d name="Jenny Rosen" \
  --data-urlencode email="jennyrosen@example.com"

Pembuatan yang berhasil mengembalikan objek Customer. Anda dapat memeriksa objek untuk id pelanggan dan menyimpan nilai dalam database Anda untuk pengambilan nanti.

Anda dapat menemukan pelanggan ini di halaman Pelanggan di Dashboard.

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.

# 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 client
Sisi server

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/v3/"></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.

Simpan metode pembayaran
Sisi server

Setelah menyiapkan integrasi Checkout tersemat, pilih konfigurasi untuk integrasi Anda guna menyimpan metode pembayaran yang digunakan oleh pelanggan.

Secara default, metode pembayaran yang digunakan untuk melakukan pembayaran satu kali dengan Checkout tidak tersedia untuk digunakan di masa mendatang.

Simpan metode pembayaran untuk men-charge di luar sesi

Anda dapat mengatur Checkout untuk menyimpan metode pembayaran yang digunakan untuk melakukan pembayaran satu kali dengan meneruskan argumen payment_intent_data.setup_future_usage. Ini berguna jika Anda perlu mencatat metode pembayaran secara on-file untuk digunakan sebagai biaya di masa mendatang, seperti biaya pembatalan atau biaya ketidakhadiran.

Command Line
curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d customer_creation=always \
  -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 \
  -d ui_mode=embedded \
  --data-urlencode return_url="https://example.com/return" \
  -d "payment_intent_data[setup_future_usage]"=off_session

Jika Anda menggunakan Checkout dalam mode subscription, Stripe akan secara otomatis menyimpan metode pembayaran untuk di-charge di pembayaran berikutnya. Metode pembayaran kartu yang disimpan untuk pelanggan yang menggunakan mode setup_future_usage atau subscription tidak akan muncul untuk pembelian kembali di Checkout (selengkapnya di bawah). Kami menyarankan untuk menggunakan teks custom untuk menautkan ke ketentuan yang relevan terkait penggunaan informasi pembayaran yang disimpan.

Peringatan

Hukum privasi global sangat rumit dan bervariasi. Kami merekomendasikan Anda untuk menghubungi tim hukum dan privasi sebelum mengimplementasikan setup_future_usage karena hal ini dapat berimplikasi pada kerangka kerja kepatuhan privasi yang sudah ada. Lihat panduan yang dikeluarkan oleh European Protection Board untuk mempelajari selengkapnya tentang menyimpan detail pembayaran.

Simpan metode pembayaran untuk mengisinya terlebih dahulu di Checkout

Secara default, Checkout menggunakan Link untuk memberikan pilihan kepada pelanggan Anda untuk menyimpan dan menggunakan kembali informasi pembayaran dengan aman. Jika Anda lebih suka mengelola metode pembayaran sendiri, gunakan saved_payment_method_options.payment_method_save ketika membuat Sesi Checkout agar pelanggan dapat menyimpan metode pembayarannya untuk pembelian di masa mendatang di Checkout.

Command Line
curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d customer_creation=always \
  -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 \
  -d ui_mode=embedded \
  --data-urlencode return_url="https://example.com/return" \
  -d "saved_payment_method_options[payment_method_save]"=enabled

Meneruskan parameter ini dalam mode pembayaran atau langganan menampilkan kotak centang opsional agar pelanggan dapat secara eksplisit menyimpan metode pembayarannya untuk pembelian mendatang. Bila pelanggan mencentang kotak ini, Checkout akan menyimpan metode pembayaran dengan allow_redisplay: always. Checkout menggunakan parameter ini untuk menentukan jika metode pembayaran dapat diisikan terlebih dahulu pada pembelian mendatang. Ketika menggunakan saved_payment_method_options.payment_method_save, Anda tidak perlu meneruskan setup_future_usage untuk menyimpan metode pembayaran.

Penggunaan saved_payment_method_options.payment_method_save memerlukan Customer. Untuk menyimpan pelanggan baru, atur customer_creation Sesi Checkout ke always. Jika tidak, sesi tidak akan menyimpan pelanggan atau metode pembayaran.

Jika payment_method_save tidak diteruskan atau jika pelanggan tidak setuju untuk menyimpan metode pembayaran, Checkout masih menyimpan metode pembayaran yang dibuat dalam mode subscription atau menggunakan setup_future_usage. Metode pembayaran ini memiliki nilai allow_redisplay limited, yang mencegahnya diisi terlebih dahulu untuk pembelian kembali serta memungkinkan Anda mematuhi peraturan jaringan kartu dan peraturan proteksi data. Pelajari cara mengubah perilaku default yang diaktifkan oleh mode ini dan cara mengubah atau mengesampingkan perilaku allow_redisplay.

Catatan

Anda dapat menggunakan Checkout untuk menyimpan kartu dan metode pembayaran lain untuk men-charge di luar sesi, tetapi Checkout hanya mengisikan kartu tersimpan secara otomatis. Pelajari cara mengisikan otomatis kartu tersimpan. Untuk menyimpan metode pembayaran tanpa pembayaran awal, gunakan Checkout dalam mode penyiapan.

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