Simpan detail pembayaran saat pembayaran

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

Catatan

Dukungan untuk metode pembayaran yang disimpan menggunakan Elements dan Checkout Sessions API hanya mencakup kartu. Itu tidak mendukung metode pembayaran tersimpan lainnya, seperti rekening bank.

Aktifkan metode pembayaran tersimpan

Guna mengizinkan pelanggan menyimpan metode pembayaran mereka untuk penggunaan mendatang, tentukan parameter saved_payment_method_options.payment_method_save ketika membuat Sesi Checkout.

Penyimpanan metode pembayaran memerlukan Pelanggan. Teruskan pelanggan yang sudah ada, atau, untuk membuat pelanggan baru, atur customer_creation Sesi Checkout ke always.

Setelah membuat Sesi Checkout, gunakan client secret yang dikembalikan dalam respons untuk membangun halaman checkout Anda.

Peringatan

Hukum privasi global itu rumit dan bervariasi. Sebelum mengimplementasikan kemampuan untuk menyimpan detail metode pembayaran pelanggan, bekerjalah dengan tim legal Anda untuk memastikan bahwa metode tersebut mematuhi kerangka kerja privasi dan kepatuhan Anda.

Dalam kebanyakan kasus, Anda harus mengumpulkan persetujuan pelanggan sebelum menyimpan metode pembayaran mereka. Contoh berikut menunjukkan cara memperoleh persetujuan menggunakan kotak centang.

index.html
<label>
  <input type="checkbox" id="save-payment-method-checkbox" />
  Save my payment information for future purchases
</label>
<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>

Tunjukkan ke Stripe apakah pelanggan telah memberikan persetujuan saat Anda memanggil confirm dengan meneruskan parameter savePaymentMethod. Bila menyimpan detail pembayaran pelanggan, Anda bertanggung jawab untuk mematuhi semua hukum, regulasi, dan aturan jaringan yang berlaku.

checkout.js
stripe.initCheckout({fetchClientSecret}).then((checkout) => {
  const button = document.getElementById('pay-button');
  const errors = document.getElementById('confirm-errors');
  const checkbox = document.getElementById('save-payment-method-checkbox');
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';

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

Gunakan kembali metode pembayaran yang disimpan sebelumnya

Anda dapat menampilkan kembali metode pembayaran yang disimpan sebelumnya untuk digunakan pelanggan Anda selama checkout.

Identifikasikan pelanggan Anda

Setiap metode pembayaran tersimpan ditautkan ke objek Pelanggan. Sebelum membuat Sesi Checkout, lakukan autentikasi pelanggan Anda, dan teruskan identifikasi Pelanggan yang sesuai ke Sesi Checkout.

Render metode pembayaran tersimpan

Gunakan larik savedPaymentMethods pada frontend untuk menyajikan metode pembayaran pelanggan yang tersedia.

Catatan

Larik savedPaymentMethods hanya mencakup metode pembayaran dengan allow_redisplay yang diatur ke always. Ikuti langkah-langkah untuk mengumpulkan persetujuan dari pelanggan Anda, yang memastikan bahwa allow_redisplay diatur dengan benar.

index.html
<div id="saved-payment-methods"></div>

checkout.js
stripe.initCheckout({fetchClientSecret}).then((checkout) => {
  const container = document.getElementById('saved-payment-methods');
  checkout.session().savedPaymentMethods.forEach((pm) => {
    const label = document.createElement('label');
    const radio = document.createElement('input');

    radio.type = 'radio';
    radio.value = pm.id;

    label.appendChild(radio);
    label.appendChild(document.createTextNode(`Card ending in ${pm.card.last4}`));
    container.appendChild(label);
  });
});

Konfirmasikan dengan metode pembayaran tersimpan

Bila pelanggan Anda telah memilih metode pembayaran tersimpan dan siap untuk menyelesaikan checkout, panggil confirm, sehingga meneruskan identifikasi paymentMethod.

index.html
<button id="pay-button">Pay</button>

checkout.js
stripe.initCheckout({fetchClientSecret}).then((checkout) => {
  const button = document.getElementById('pay-button');
  button.addEventListener('click', () => {
    checkout.confirm({paymentMethod: selectedPaymentMethod}).then((result) => {
      if (result.error) {
        // Confirmation failed. Display the error message.
      }
    });
  });
});

Simpan detail pembayaran saat pembayaran

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

Catatan

Aktifkan metode pembayaran tersimpan

Kumpulkan persetujuan

Peringatan

Gunakan kembali metode pembayaran yang disimpan sebelumnya

Identifikasikan pelanggan Anda

Render metode pembayaran tersimpan

Catatan

Konfirmasikan dengan metode pembayaran tersimpan