Lewati ke konten
Buat akun
 atau
Masuk
Logo Dokumen Stripe
/
Buat akun
Masuk
Gambaran UmumUpgrade integrasi Anda
Pembayaran online
Gambaran umumTemukan contoh penggunaan AndaManaged Payments
Metode Pembayaran
Antarmuka pembayaran
Skenario pembayaran
Pembayaran di tempat
Di luar pembayaran

Simpan metode pembayaran pelanggan bila mereka menggunakannya untuk pembayaran

Pelajari cara menyimpan metode pembayaran pelanggan saat Anda mengonfirmasi PaymentIntent.

Gunakan Payment Intents API untuk menyimpan detail pembayaran dari pembelian. Ada beberapa contoh penggunaan:

  • Charge pelanggan untuk pesanan e-commerce dan menyimpan detailnya untuk pembelian di masa mendatang.
  • Memulai pembayaran pertama dari serangkaian pembayaran rutin.
  • Charge deposit dan simpan detailnya untuk menagih jumlah penuh nanti.

Transaksi dengan kartu fisik

Transaksi dengan kartu fisik, seperti pembayaran melalui Stripe Terminal, menggunakan proses yang berbeda untuk menyimpan metode pembayaran. Untuk detailnya, lihat dokumentasi Terminal.

Kepatuhan

Anda bertanggung jawab atas kepatuhan Anda terhadap semua hukum, peraturan, dan aturan jaringan yang berlaku saat menyimpan detail pembayaran pelanggan. Persyaratan ini umumnya berlaku jika Anda ingin menyimpan metode pembayaran pelanggan untuk digunakan di masa mendatang, seperti menampilkan metode pembayaran pelanggan dalam alur checkout untuk pembelian di masa mendatang atau men-charge saat mereka tidak aktif menggunakan situs web atau aplikasi Anda. Tambahkan ketentuan di situs web atau aplikasi Anda yang menyatakan rencana Anda menyimpan detail metode pembayaran dan mengizinkan pelanggan untuk ikut serta.

Ketika menyimpan metode pembayaran, Anda hanya dapat menggunakannya untuk penggunaan spesifik yang telah Anda cantumkan dalam ketentuan. Untuk men-charge metode pembayaran saat pelanggan offline dan menyimpannya sebagai opsi untuk pembelian di masa mendatang, pastikan Anda secara eksplisit mendapatkan persetujuan dari pelanggan untuk penggunaan spesifik ini. Misalnya, sertakan kotak centang “Simpan metode pembayaran saya untuk penggunaan di masa mendatang” untuk mendapatkan persetujuan.

Untuk men-charge mereka saat offline, pastikan ketentuan Anda mencakup hal-hal berikut:

  • Persetujuan pelanggan untuk melakukan pembayaran atau serangkaian pembayaran atas nama mereka untuk transaksi tertentu.
  • Waktu dan frekuensi pembayaran yang diantisipasi (misalnya, jika charge untuk angsuran terjadwal, pembayaran langganan, atau penambahan saldo tidak terjadwal).
  • Cara Anda menentukan jumlah pembayaran.
  • Kebijakan pembatalan Anda, jika metode pembayarannya untuk layanan langganan.

Pastikan Anda menyimpan catatan persetujuan tertulis dari pelanggan atas ketentuan ini.

Siapkan Stripe
Sisi server

Pertama, mendaftarlah untuk akun Stripe.

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

Command Line
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# Available as a gem
sudo gem install stripe
Gemfile
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# 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
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
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.

Aktifkan metode pembayaran

Lihat pengaturan metode pembayaran dan aktifkan metode pembayaran yang ingin Anda dukung. Anda membutuhkan setidaknya satu metode pembayaran yang diaktifkan untuk membuat PaymentIntent.

Secara default, Stripe mengaktifkan kartu dan metode pembayaran umum lainnya yang dapat membantu menjangkau lebih banyak pelanggan, tetapi sebaiknya aktifkan metode pembayaran tambahan yang relevan untuk bisnis dan pelanggan Anda. Lihat Dukungan metode pembayaran untuk dukungan produk dan metode pembayaran, dan halaman skema biaya kami untuk mengetahui biayanya.

Buat pembayaran
Sisi server

Catatan

Jika Anda ingin merender Payment Element tanpa terlebih dahulu membuat PaymentIntent, lihat Kumpulkan detail pembayaran sebelum membuat Intent.

Objek PaymentIntent mewakili maksud Anda menagih pembayaran dari pelanggan dan melacak upaya charge dan perubahan status selama proses pembayaran.

Buat PaymentIntent

Buat PaymentIntent di server Anda. Tentukan amount, currency, dan customer. Di versi terbaru API, menentukan parameter automatic_payment_methods bersifat opsional karena Stripe mengaktifkan fungsionalitasnya secara default. Aktifkan setup_future_usage. Metode pembayaran yang Anda konfigurasikan di Dashboard secara otomatis ditambahkan ke Payment Intent.

Jika tidak ingin menggunakan Dashboard atau jika ingin menentukan metode pembayaran secara manual, Anda dapat mencantumkannya menggunakan atribut payment_method_types.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d customer=
{{CUSTOMER_ID}}
 \
  -d amount=1099 \
  -d currency=usd \
  -d setup_future_usage=off_session \
  -d "automatic_payment_methods[enabled]"=true

Catatan

Selalu putuskan berapa banyak yang akan di-charge di sisi server, lingkungan tepercaya, bukan di klien. Ini mencegah pelanggan yang berniat jahat untuk dapat memilih harga mereka sendiri.

Ambil client secret

PaymentIntent menyertakan client secret yang digunakan pada sisi client untuk menyelesaian proses pembayaran dengan aman. Anda dapat menggunakan pendekatan berbeda untuk meneruskan client secret ke sisi client.

Ambil client secret dari endpoint pada server Anda, menggunakan fungsi fetch browser. Pendekatan ini paling baik jika sisi client Anda adalah aplikasi satu halaman, terutama yang dibangun dengan kerangka kerja frontend modern seperti React. Buat endpoint server yang melayani client secret:

main.rb
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
get '/secret' do
  intent = # ... Create or retrieve the PaymentIntent
  {client_secret: intent.client_secret}.to_json
end

Kemudian ambil client secret dengan JavaScript pada sisi client:

(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();

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.

Payment Element berisi iframe yang mengirimkan informasi pembayaran dengan aman ke Stripe melalui koneksi HTTPS. Hindari penempatan Payment Element dalam iframe lain karena sejumlah metode pembayaran memerlukan pengalihan ke halaman lain untuk konfirmasi pembayaran.

Jika Anda memilih untuk menggunakan iframe dan ingin menerima Apple Pay atau Google Pay, iframe tersebut harus memiliki atribut allow yang diatur sama dengan "payment *".

Alamat halaman checkout harus dimulai dengan https:// bukan http:// agar integrasi Anda berfungsi. Anda dapat mencoba integrasi tanpa menggunakan HTTPS, tapi ingatlah untuk mengaktifkannya bila sudah siap menerima pembayaran live.

Siapkan Stripe.js

Payment Element secara otomatis tersedia sebagai fitur Stripe.js. Sertakan skrip Stripe.js di halaman checkout Anda dengan menambahkannya ke head di file HTML. Selalu muat Stripe.js secara langsung dari js.stripe.com agar tetap mematuhi PCI. Jangan sertakan skrip dalam paket atau meng-host sendiri salinannya.

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

Buat instance Stripe dengan JavaScript berikut di halaman checkout Anda:

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

Tambahkan Payment Element ke halaman pembayaran Anda

Payment Element membutuhkan tempat tinggal di halaman pembayaran Anda. Buat simpul DOM kosong (wadah) dengan ID unik di formulir pembayaran Anda:

checkout.html
<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Submit</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>

Saat formulir sebelumnya dimuat, buat instance Payment Element dan pasang ke simpul DOM penampung. Teruskan client secret dari langkah sebelumnya ke options saat Anda membuat instance Elements:

Tangani client secret dengan hati-hati karena dapat menyelesaikan charge. Jangan mencatatnya, menyematkannya di URL, atau memaparkannya kepada siapa pun kecuali pelanggan.

checkout.js
const options = {
  clientSecret: '{{CLIENT_SECRET}}',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in a previous step
const elements = stripe.elements(options);

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');

Payment Element menampilkan formulir dinamis yang memungkinkan pelanggan memilih metode pembayaran. Bagi masing-masing metode pembayaran, formulir akan secara otomatis meminta pelanggan untuk mengisi seluruh detail pembayaran yang diperlukan.

Sesuaikan penampilan

Sesuaikan Payment Element agar sejalan dengan desain situs Anda dengan meneruskan objek penampilan ke dalam options ketika membuat penyedia Elements.

Kumpulkan alamat

Secara default, Payment Element hanya mengumpulkan detail alamat tagihan yang diperlukan. Untuk mengumpulkan alamat tagihan lengkap pelanggan (misalnya, untuk menghitung pajak barang dan layanan digital) atau alamat pengiriman, gunakan Address Element.

Minta token merchant Apple Pay

Jika Anda telah melakukan konfigurasi integrasi untuk menerima pembayaran Apple Pay, sebaiknya konfigurasikan antarmuka Apple Pay untuk menghasilkan token merchant agar dapat mengaktifkan transaksi yang diprakarsai merchant (MIT). Minta jenis token merchant yang relevan di Payment Element.

OpsionalLink di halaman checkout Anda
Sisi client

Biarkan pelanggan Anda memproses pembayaran lebih cepat dengan menggunakan Link di Payment Element. Anda dapat mengisi ulang otomatis informasi untuk setiap pelanggan yang sudah masuk dan menggunakan Link, terlepas dari jika pelanggan menyimpan informasi di Link dengan bisnis lain atau tidak. Integrasi Payment Element default menyertakan perintah Link dalam formulir kartu. Untuk mengelola Link di Payment Element, buka pengaturan metode pembayaran.

Autentikasi atau daftarkan dengan Link langsung di Payment Element saat checkout

Kumpulkan alamat email pelanggan untuk autentikasi atau pendaftaran Link

Opsi integrasi

Ada dua cara untuk mengintegrasikan Link dengan Payment Element. Dari kedua cara tersebut, Stripe merekomendasikan untuk meneruskan alamat email pelanggan ke Payment Element jika tersedia. Ingatlah untuk mempertimbangkan cara kerja alur checkout Anda saat memutuskan di antara opsi-opsi ini:

Opsi integrasiAlur checkoutDeskripsi
Teruskan alamat email pelanggan ke Payment Element Direkomendasikan
  • Pelanggan Anda memasukkan alamat email mereka sebelum masuk ke halaman checkout (dalam langkah pembuatan akun sebelumnya, misalnya).
  • Anda lebih suka menggunakan bidang input email Anda sendiri.
Lewatkan secara terprogram alamat email pelanggan ke Payment Element. Dalam skenario ini, pelanggan mengautentikasi Link secara langsung di formulir pembayaran, bukan komponen UI yang terpisah.
Kumpulkan alamat email pelanggan di Payment ElementPelanggan Anda memasukkan email dan mengautentikasi atau mendaftarkan dengan Link langsung di Payment Element saat checkout.Jika pelanggan belum mendaftar dengan Link dan mereka memilih metode pembayaran yang didukung di Payment Element, mereka akan diminta untuk menyimpan detail menggunakan Link. Bagi mereka yang telah mendaftar, Link akan secara otomatis mengisi informasi pembayaran mereka.

OpsionalSimpan dan ambil metode pembayaran pelanggan

Anda dapat mengonfigurasi Payment Element untuk menyimpan metode pembayaran pelanggan untuk digunakan di masa mendatang. Bagian ini menunjukkan cara mengintegrasikan fitur metode pembayaran tersimpan, yang memungkinkan Payment Element untuk:

Kotak centang Payment Element dan metode pembayaran tersimpan

Simpan metode pembayaran.

Payment Element dengan Metode pembayaran tersimpan dipilih

Gunakan kembali metode pembayaran yang disimpan sebelumnya.

Mengaktifkan penyimpanan metode pembayaran di Payment Element

Ketika membuat PaymentIntent pada server Anda, buat juga CustomerSession yang memberikan Identifikasi Pelanggan dan mengaktifkan komponen payment_element untuk sesi Anda. Konfigurasikan fitur metode pembayaran tersimpan yang ingin Anda aktifkan. Misalnya, mengaktifkan payment_method_save menampilkan kotak centang yang menawarkan pelanggan untuk menyimpan detail pembayarannya untuk digunakan di masa mendatang.

Anda dapat menentukan setup_future_usage pada PaymentIntent atau Sesi Checkout untuk mengesampingkan perilaku default penyimpanan metode pembayaran. Hal ini memastikan bahwa Anda secara otomatis menyimpan metode pembayaran untuk digunakan di masa mendatang, sekalipun pelanggan tidak secara eksplisit memilih untuk menyimpannya.

Peringatan

Mengizinkan pembeli menghapus metode pembayaran yang tersimpan dengan mengaktifkan payment_method_remove berdampak pada langganan yang tergantung pada metode pembayaran tersebut. Menghapus metode pembayaran akan melepaskan PaymentMethod dari Pelanggan tersebut.

server.rb
Ruby
Python
PHP
Node.js
Java
Go
.NET
No results
# 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-intent-and-customer-session' do
  intent = Stripe::PaymentIntent.create({
    amount: 1099,
    currency: 'usd',
    # In the latest version of the API, specifying the `automatic_payment_methods` parameter
    # is optional because Stripe enables its functionality by default.
    automatic_payment_methods: {enabled: true},
    customer: 
{{CUSTOMER_ID}}
,
  })
  customer_session = Stripe::CustomerSession.create({
    customer: 
{{CUSTOMER_ID}}
,
    components: {
      payment_element: {
          enabled: true,
          features: {
            payment_method_redisplay: 'enabled',
            payment_method_save: 'enabled',
            payment_method_save_usage: 'off_session',
            payment_method_remove: 'enabled',
          },
        },
    },
  })
  {
    client_secret: intent.client_secret,
    customer_session_client_secret: customer_session.client_secret
  }.to_json
end

Instance Elements Anda menggunakan client secret untuk mengakses metode pembayaran yang disimpan pelanggan tersebut. Tangani kesalahan dengan benar saat Anda membuat CustomerSession. Jika terjadi kesalahan, Anda tidak perlu memberikan client secret CustomerSession ke instance Elements, karena bersifat opsional.

Buat instance Elements menggunakan client secrets untuk PaymentIntent dan CustomerSession. Kemudian, gunakan instance Elements ini untuk membuat Payment Element.

checkout.js
// Create the CustomerSession and obtain its clientSecret
const res = await fetch("/create-intent-and-customer-session", {
  method: "POST"
});

const {
  customer_session_client_secret: customerSessionClientSecret
} = await res.json();

const elementsOptions = {
  clientSecret: '{{CLIENT_SECRET}}',
  customerSessionClientSecret,
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form, passing the client secret
// and CustomerSession's client secret obtained in a previous step
const elements = stripe.elements(elementsOptions);

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');

Saat mengonfirmasi PaymentIntent, Stripe.js secara otomatis mengontrol pengaturan setup_future_usage pada PaymentIntent dan allow_redisplay pada PaymentMethod, tergantung pada jika pelanggan mencentang kotak untuk menyimpan detail pembayaran.

Terapkan pengumpulan kembali CVC

Secara opsional, tentukan require_cvc_recollection ketika membuat PaymentIntent untuk memberlakukan pengumpulan kembali CVC saat pelanggan membayar dengan kartu.

Mendeteksi pemilihan metode pembayaran yang disimpan

Untuk mengontrol konten dinamis saat metode pembayaran tersimpan dipilih, dengarkan peristiwa change elemen pembayaran, yang diisi dengan metode pembayaran yang dipilih.

checkout.js
paymentElement.on('change', function(event) {
  if (event.value.payment_method) {
    // Control dynamic content if a saved payment method is selected
  }
})

OpsionalKumpulkan detail alamat
Sisi client

Address Element memungkinkan Anda mengumpulkan alamat pengiriman atau tagihan. Buat node DOM kosong untuk Address Element. Tampilkan sesudah Link Authentication Element:

checkout.html
<form id="payment-form">
  <h3>Contact info</h3>
  <div id="link-authentication-element"></div>

  <h3>Shipping</h3>
  <div id="address-element"></div>

  <h3>Payment</h3>
  <div id="payment-element"></div>

  <button type="submit">Submit</button>
</form>

Kemudian, buat instance Address Element, dan pasang ke node DOM.

checkout.js
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };

// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx'
);

// Create an elements group from the Stripe instance passing in the clientSecret and, optionally, appearance.
const elements = stripe.elements({clientSecret, appearance, loader});

// Create Element instances
const linkAuthenticationElement = elements.create("linkAuthentication");
const addressElement = elements.create("address", {
  mode: 'shipping',
  allowedCountries: ['US']
});
const paymentElement = elements.create("payment");

// Mount the Elements to their corresponding DOM node
linkAuthenticationElement.mount("#link-authentication-element");
addressElement.mount("#address-element");
paymentElement.mount("#payment-element");

Tampilkan Address Element sebelum Payment Element. Payment Element secara dinamis mendeteksi data alamat yang dikumpulkan oleh Address Element, menyembunyikan bidang yang tidak diperlukan, dan mengumpulkan detail alamat tagihan tambahan seperlunya.

Ambil informasi alamat

Address Element secara otomatis meneruskan alamat pengiriman saat pelanggan mengirimkan pembayaran, tetapi Anda juga dapat mengambil detail alamat di frontend menggunakan kejadian change. Penangan kejadian change mengirim setiap kali pengguna memperbarui bidang apa pun di Address Element, atau setelah memilih alamat yang disimpan:

addressElement.on('change', (event: AddressChangeEvent) => {
  const address = event.value;
})

Isi otomatis alamat pengiriman

Gunakan defaultValues untuk mengisi informasi alamat secara otomatis, sehingga mempercepat proses pembayaran bagi pelanggan Anda.

// Create addressElement with the defaultValues option
const addressElement = elements.create("address", {
  mode: 'shipping',
  defaultValues: {
    name: 'Jane Doe',
    address: {
      line1: '354 Oyster Point Blvd',
      line2: '',
      city: 'South San Francisco',
      state: 'CA',
      postal_code: '94080',
      country: 'US',
    }
  }
});

// Mount the Element to its corresponding DOM node
addressElement.mount("#address-element");

OpsionalSesuaikan tata letak
Sisi client

Anda dapat menyesuaikan tata letak Payment Element (akordeon atau tab) agar sesuai dengan antarmuka checkout Anda. Untuk informasi selengkapnya tentang setiap properti, lihat elements.create.

Anda dapat mulai menggunakan fitur tata letak dengan meneruskan type tata letak dan properti opsional lainnya saat membuat Payment Element:

const paymentElement = elements.create('payment', {
  layout: {
    type: 'accordion',
    defaultCollapsed: false,
    radios: true,
    spacedAccordionItems: false
  }
});

Gambar berikut adalah Payment Element yang sama yang ditampilkan menggunakan konfigurasi tata letak yang berbeda:

Tiga pengalaman formulir checkout

Tata letak Payment Element

OpsionalSesuaikan tampilan
Sisi client

Setelah menambahkan Payment Element ke halaman, Anda dapat menyesuaikan tampilannya agar sesuai dengan desain. Untuk mempelajari selengkapnya cara menyesuaikan Payment Element, lihat Elements Appearance API.

Sesuaikan Payment Element

Sesuaikan Payment Element

OpsionalAmbil pembaruan dari server
Sisi client

Anda sebaiknya memperbarui atribut pada PaymentIntent setelah menampilkan Payment Element, seperti amount (misalnya, kode diskon atau biaya pengiriman). Anda dapat memperbarui PaymentIntent di server, kemudian panggil elements.fetchUpdates untuk melihat jumlah baru yang tercermin di Payment Element. Contoh ini menunjukkan kepada Anda cara membuat endpoint server yang memperbarui jumlah pada PaymentIntent:

main.rb
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
get '/update' do
  intent = Stripe::PaymentIntent.update(
    '{{PAYMENT_INTENT_ID}}',
    {amount: 1499},
  )
  {status: intent.status}.to_json
end

Contoh ini memperagakan cara memperbarui UI untuk mencerminkan perubahan ini pada sisi client:

(async () => {
  const response = await fetch('/update');
  if (response.status === 'requires_payment_method') {
    const {error} = await elements.fetchUpdates();
  }
})();

Serahkan pembayaran ke Stripe
Sisi client

Gunakan stripe.confirmPayment untuk menyelesaikan pembayaran menggunakan detail dari Payment Element. Berikan return_url ke fungsi ini untuk menunjukkan ke mana Stripe harus mengalihkan pengguna setelah menyelesaikan pembayaran. Pengguna Anda mungkin pertama kali diarahkan ulang ke situs perantara, seperti halaman otorisasi bank, sebelum diarahkan ulang ke return_url. Pembayaran kartu segera dialihkan ke return_url bila pembayaran berhasil.

Jika tidak ingin dialihkan untuk pembayaran kartu setelah pembayaran selesai, Anda dapat mengatur pengalihan ke if_required. Ini hanya mengalihkan pelanggan yang memproses pembayaran dengan metode pembayaran berbasis pengalihan.

checkout.js
const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {error} = await stripe.confirmPayment({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the payment. Show error to your customer (for example, payment
    // details incomplete)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  } else {
    // Your customer will be redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer will be redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});

Catatan

stripe.confirmPayment mungkin perlu waktu beberapa detik untuk menyelesaikan. Sambil menunggu, nonaktifkan formulir Anda agar tidak diserahkan kembali dan tampilkan indikator menunggu seperti spinner. Jika Anda menerima kesalahan, tampilkan kepada pelanggan, aktifkan kembali formulir, dan sembunyikan indikator menunggu. Jika pelanggan harus melakukan langkah tambahan untuk menyelesaikan pembayaran, seperti autentikasi, Stripe.js akan memandu mereka menjalani proses itu.

Jika pembayaran berhasil, kartu akan disimpan ke objek Pelanggan. Hal ini tercermin dalam bidang customer PaymentMethod. Pada tahap ini, kaitkan identifikasi objek Pelanggan dengan representasi internal Anda sendiri tentang pelanggan, jika memilikinya. Sekarang Anda dapat menggunakan objek PaymentMethod tersimpan untuk menagih pembayaran dari pelanggan di masa mendatang tanpa memintanya memberikan detail pembayaran lagi.

Pastikan return_url sesuai dengan halaman pada situs web Anda yang menyediakan status pembayaran. Bila Stripe mengarahkan ulang pelanggan ke return_url, kami menyediakan parameter query URL berikut ini:

ParameterKeterangan
payment_intentIdentifier unik untuk PaymentIntent.
payment_intent_client_secretclient secret dari objek PaymentIntent.

Peringatan

Jika memiliki alat yang melacak sesi browser pelanggan, Anda mungkin perlu menambah domain stripe.com ke daftar pengecualian perujuk. Pengarahan ulang menyebabkan sejumlah alat membuat sesi baru, yang mencegah Anda melacak sesi yang telah selesai.

Gunakan salah satu parameter query untuk mengambil PaymentIntent. Periksa status PaymentIntent untuk memutuskan apa yang akan ditampilkan kepada pelanggan Anda. Anda juga dapat menambahkan parameter query Anda sendiri saat memberikan return_url, yang akan tetap ada selama proses pengalihan.

status.js
// Initialize Stripe.js using your publishable key
const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx'
);

// Retrieve the "payment_intent_client_secret" query parameter appended to
// your return_url by Stripe.js
const clientSecret = new URLSearchParams(window.location.search).get(
  'payment_intent_client_secret'
);

// Retrieve the PaymentIntent
stripe.retrievePaymentIntent(clientSecret).then(({paymentIntent}) => {
  const message = document.querySelector('#message')

  // Inspect the PaymentIntent `status` to indicate the status of the payment
  // to your customer.
  //
  // Some payment methods will [immediately succeed or fail][0] upon
  // confirmation, while others will first enter a `processing` state.
  //
  // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
  switch (paymentIntent.status) {
    case 'succeeded':
      message.innerText = 'Success! Payment received.';
      break;

    case 'processing':
      message.innerText = "Payment processing. We'll update you when payment is received.";
      break;

    case 'requires_payment_method':
      message.innerText = 'Payment failed. Please try another payment method.';
      // Redirect your user back to your payment page to attempt collecting
      // payment again
      break;

    default:
      message.innerText = 'Something went wrong.';
      break;
  }
});

Charge metode pembayaran yang disimpan nanti
Sisi server

Peringatan

bancontact, ideal, dan sofort adalah metode pembayaran satu kali secara default. Ketika diatur untuk penggunaan di masa mendatang, metode pembayaran tersebut menghasilkan tipe metode pembayaran sepa_debit yang dapat digunakan kembali, sehingga Anda harus menggunakan sepa_debit untuk meminta metode pembayaran yang telah disimpan.

Kepatuhan

Anda bertanggung jawab atas kepatuhan terhadap semua hukum, peraturan, dan aturan jaringan yang berlaku saat menyimpan detail pembayaran pelanggan. Saat menampilkan metode pembayaran sebelumnya kepada pelanggan akhir untuk pembelian di masa mendatang, pastikan Anda mencantumkan metode pembayaran yang telah mendapatkan persetujuan dari pelanggan untuk menyimpan detail metode pembayaran untuk penggunaan khusus di masa mendatang. Untuk membedakan antara metode pembayaran yang dilampirkan pada pelanggan yang dapat dan tidak dapat ditampilkan kepada pelanggan akhir Anda sebagai metode pembayaran tersimpan untuk pembelian di masa mendatang, gunakan parameter allow_redisplay.

Saat Anda siap untuk men-charge pelanggan Anda di luar sesi, gunakan identifikasi Pelanggan dan PaymentMethod untuk membuat PaymentIntent. Untuk menemukan metode pembayaran yang akan di-charge, cantumkan metode pembayaran yang dikaitkan dengan pelanggan Anda. Contoh ini mencantumkan kartu tetapi Anda dapat mencantumkan tipe yang didukung.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl -G https://api.stripe.com/v1/payment_methods \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d customer=
{{CUSTOMER_ID}}
 \
  -d type=card

Bila Anda memiliki identifikasi PaymentMethod dan Pelanggan, buat PaymentIntent dengan jumlah dan mata uang pembayaran. Atur beberapa parameter lain untuk melakukan pembayaran di-luar sesi:

  • Atur off_session ke true untuk mengindikasikan bahwa pelanggan tidak berada dalam alur checkout Anda selama upaya pembayaran dan tidak dapat memenuhi permintaan autentikasi yang dibuat oleh mitra, seperti penerbit kartu, bank, atau lembaga pembayaran lainnya. Jika, selama alur checkout Anda, mitra meminta autentikasi, Stripe meminta pengecualian menggunakan informasi pelanggan dari transaksi di dalam sesi sebelumnya. Jika syarat pengecualian tidak terpenuhi, PaymentIntent mungkin akan memunculkan kesalahan.
  • Atur nilai properti confirm PaymentIntent ke true, yang akan menyebabkan konfirmasi segera terjadi saat PaymentIntent dibuat.
  • Atur payment_method ke identifikasi PaymentMethod dan pelanggan ke identifikasi Pelanggan.
Command Line
curl
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d amount=1099 \
  -d currency=usd \
  # In the latest version of the API, specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default.
  -d "automatic_payment_methods[enabled]"=true \
  -d customer="{{CUSTOMER_ID}}" \
  -d payment_method="{{PAYMENT_METHOD_ID}}" \
  -d return_url="https://example.com/order/123/complete" \
  -d off_session=true \
  -d confirm=true

OpsionalSimpan detail pembayaran untuk penggunaan mendatang
Sisi server

Sebagaimana dijelaskan di langkah Buat PaymentIntent, Anda dapat menyimpan detail pembayaran kepada pelanggan dengan meneruskan argumen setup_future_usage. Walaupun Anda dapat menjadikan subset metode pembayaran dapat digunakan ulang dengan cara ini, Anda tidak dapat menjadikan semua metode pembayaran dapat digunakan ulang. Satu maksud pembayaran dapat menangani metode pembayaran yang dapat digunakan ulang maupun tidak dapat digunakan ulang. Lihat halaman Dukungan metode pembayaran untuk mempelajari selengkapnya tentang metode pembayaran mana saja yang kompatibel dengan setup_future_usage.

Misalnya, Anda dapat menerima pembayaran kartu dan Giropay (yang tidak dapat Anda gunakan ulang). Bila pelanggan memilih metode pembayaran kartu, Anda dapat menyimpan metode pembayaran kepada pelanggan untuk penggunaan mendatang dengan melakukan konfigurasi setup_future_usage=off_session pada objek payment_method_options[card].

Jika pelanggan menolak menyimpan detail pembayarannya, nonaktifkan setup_future_usage di PaymentIntent di sisi server. Kami tidak mendukung penyesuaian ini di sisi client.

Anda dapat mengelola metode pembayaran dari Dashboard. Stripe menangani pengembalian metode pembayaran yang memenuhi syarat berdasarkan faktor-faktor seperti jumlah transaksi, mata uang, dan alur pembayaran.

Command Line
curl
Ruby
Python
PHP
Node.js
Stripe CLI
No results
curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "automatic_payment_methods[enabled]"="true" \
  -d "payment_method_options[card][setup_future_usage]"="off_session"

Coba integrasi

Gunakan detail pembayaran percobaan dan halaman pengarahan ulang percobaan untuk memverifikasi integrasi Anda. Klik tab di bawah guna melihat detail untuk setiap metode pembayaran.

Metode pembayaranSkenarioCara mencoba
Kartu kreditPenyiapan kartu berhasil dan tidak memerlukan autentikasi.Isilah formulir kartu kredit menggunakan nomor kartu kredit 4242 4242 4242 4242 dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos.
Kartu kreditKartu ini memerlukan autentikasi untuk penyiapan awal, kemudian berhasil untuk pembelian berikutnya.Isilah formulir kartu kredit kami menggunakan nomor kartu kredit 4000 0025 0000 3155 dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos.
Kartu kreditKartu ini memerlukan autentikasi untuk penyiapan awal dan juga memerlukan autentikasi untuk pembelian berikutnya.Isilah formulir kartu kredit kami menggunakan nomor kartu kredit 4000 0027 6000 3184 dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos.
Kartu kreditKartu ini ditolak selama penyiapan.Isilah formulir kartu kredit menggunakan nomor kartu kredit 4000 0000 0000 9995 dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos.

Coba men-charge PaymentMethod Debit SEPA yang disimpan

Mengonfirmasi PaymentIntent menggunakan iDEAL, Bancontact, atau Sofort, menghasilkan PaymentMethod Debit Langsung SEPA. Debit Langsung SEPA adalah metode pembayaran dengan notifikasi tertunda yang berubah menjadi status processing penengah sebelum nanti transisi beberapa hari menjadi status succeeded atau requires_payment_method.

Atur payment_method.billing_details.email ke salah satu nilai berikut untuk mencoba transisi status PaymentIntent. Anda dapat menyertakan teks custom sendiri di awal alamat email yang diikuti dengan garis bawah. Misalnya, test_1_generatedSepaDebitIntentsFail@example.com mengakibatkan selalu gagalnya PaymentMethod Debit Langsung SEPA bila digunakan dengan PaymentIntent.

Alamat EmailKeterangan
generatedSepaDebitIntentsSucceed@example.comTransisi status PaymentIntent dari processing menjadi succeeded.
generatedSepaDebitIntentsSucceedDelayed@example.comTransisi status PaymentIntent dari processing menjadi succeeded setelah minimal tiga menit.
generatedSepaDebitIntentsFail@example.comTransisi status PaymentIntent dari processing menjadi requires_payment_method.
generatedSepaDebitIntentsFailDelayed@example.comStatus PaymentIntent beralih dari processing menjadi requires_payment_method setelah minimal tiga menit.
generatedSepaDebitIntentsSucceedDisputed@example.comTransisi status PaymentIntent dari processing menjadi succeeded, tetapi suatu sengketa segera dibuat.

OpsionalApple Pay dan Google Pay
Sisi client

Bila Anda mengaktifkan pembayaran kartu, kami menampilkan Apple Pay dan Google Pay untuk pelanggan yang lingkungannya memenuhi syarat tampilan dompet digital. Untuk menerima pembayaran dari dompet digital ini, Anda juga harus:

Percobaan Regional
India

Stripe Elements tidak mendukung Google Pay atau Apple Pay untuk akun dan pelanggan Stripe di India. Oleh karena itu, Anda tidak dapat mencoba integrasi Google Pay atau Apple Pay jika alamat IP pencoba berada di India, sekalipun akun Stripe berlokasi di luar India.

Lihat juga

Apakah halaman ini membantu?
YaTidak