Pembayaran dengan kartu tanpa autentikasi bank

Membangun integrasi yang lebih sederhana dengan keterbatasan regional.

Integrasi ini hanya mendukung bisnis yang menerima kartu Amerika Serikat dan Kanada. Cara ini lebih sederhana di awal, tetapi tidak dapat ditingkatkan untuk mendukung basis pelanggan global.

Bagaimana cara kerja integrasi ini?

Bank di wilayah, seperti Eropa dan India, sering kali memerlukan autentikasi dua faktor untuk mengonfirmasi pembelian. Jika Anda menjalankan bisnis terutama di AS dan Kanada, pengabaian autentikasi kartu dapat menyederhanakan integrasi Anda, karena bank jarang memintanya di wilayah ini.

Bila bank memerlukan autentikasi, integrasi dasar ini menolak pembayaran (seperti penolakan kartu) dengan segera, alih-alih menangani autentikasi untuk menyelesaikan pembayaran secara asinkron. Manfaatnya adalah pembayaran langsung berhasil atau ditolak dan konfirmasi pembayaran terjadi di server, sehingga Anda dapat menangani tindakan pascapembayaran segera tanpa webhook.

Bagaimana jika dibandingkan dengan integrasi global?

Fitur	Integrasi ini	Integrasi global
Formulir pembayaran custom	✔	✔
Data sensitif tidak pernah berinteraksi dengan server Anda	✔	✔
Berfungsi bagi pelanggan AS dan Kanada Anda	✔	✔
Menolak pembayaran dengan detail kartu yang salah atau tidak ada dana	✔	✔
Menolak pembayaran dengan permintaan autentikasi bank	✔
Berfungsi bagi pelanggan global Anda		✔
Menangani pembayaran kartu secara otomatis yang memerlukan autentikasi bank		✔
Webhook direkomendasikan untuk tugas pascapembayaran		✔
Menskalakan dengan mudah ke metode pembayaran lain (misalnya, debit bank)		✔

Bisnis global atau yang tengah berkembang harus menggunakan integrasi global Stripe untuk mendukung permintaan bank bagi autentikasi dua faktor serta memungkinkan pelanggan membayar dengan metode pembayaran yang beragam.

Buat formulir checkout
Sisi client

Elements, bagian dari Stripe. js, menyediakan komponen UI drop-in untuk mengumpulkan informasi kartu dari pelanggan. Stripe meng-hostingnya dan menempatkannya ke dalam formulir pembayaran Anda sebagai iframe sehingga detail kartu pelanggan tidak pernah mencampuri kode Anda.

Pertama-tama, sertakan skrip Stripe.js di bagian kepala setiap halaman pada situs Anda.

<script src="https://js.stripe.com/basil/stripe.js"></script>

Penyertaan skrip pada setiap halaman situs memungkinkan Anda memanfaatkan fungsionalitas penipuan lanjutan Stripe dan kemampuan untuk mendeteksi perilaku penelusuran yang tidak wajar.

Persyaratan keamanan

Skrip ini harus selalu dimuat secara langsung dari js.stripe.com agar tetap mematuhi PCI. Anda tidak dapat menyertakan skrip tersebut dalam paket atau host salinannya sendiri.

Bila Anda menggunakan Elements, semua informasi pembayaran diserahkan melalui koneksi HTTPS yang aman.

Alamat halaman yang berisi Elements juga harus dimulai dengan https://, bukan http://. Untuk informasi selengkapnya tentang mendapatkan sertifikat SSL dan mengintegrasikannya dengan server Anda guna mengaktifkan koneksi HTTPS yang aman, lihat dokumentasi keamanan.

Tambahkan Elements ke halaman Anda

Selanjutnya, Anda perlu akun Stripe. Daftar sekarang.

Buat elemen DOM kosong (kontainer) dengan identifikasi unik di formulir pembayaran Anda.

payment.html
<form id="payment-form">
  <div id="card-element"><!-- placeholder for Elements --></div>
  <button id="card-button">Submit Payment</button>
  <p id="payment-result"><!-- we'll pass the response from the server here --></p>
</form>

Buat instance objek Stripe, yang menyediakan kunci API yang dapat Anda publikasikan sebagai parameter pertama. Setelah itu, buat instance objek Elements dan gunakan itu untuk memasang elemen Kartu di kontainer elemen DOM yang kosong pada halaman.

client.js
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

const elements = stripe.elements();
const cardElement = elements.create('card');
cardElement.mount('#card-element');

Gunakan stripe.createPaymentMethod pada client Anda untuk mengumpulkan detail kartu dan membuat PaymentMethod bila pelanggan menyerahkan formulir pembayaran. Kirim identifikasi PaymentMethod ke server Anda.

client.js
const form = document.getElementById("payment-form");

var resultContainer = document.getElementById('payment-result');

// cardElement is defined in the previous step
cardElement.on('change', function(event) {
  if (event.error) {
    resultContainer.textContent = event.error.message;
  } else {
    resultContainer.textContent = '';
  }
});

form.addEventListener('submit', async event => {
  event.preventDefault();
  resultContainer.textContent = '';
  const result = await stripe.createPaymentMethod({
    type: 'card',
    card: cardElement,
  });
  handlePaymentMethodResult(result);
});

const handlePaymentMethodResult = async ({ paymentMethod, error }) => {
  if (error) {
    // An error happened when collecting card details, show error in payment form
    resultContainer.textContent = result.error.message;
  } else {
    // Send paymentMethod.id to your server (see Step 3)
    const response = await fetch("/pay", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ payment_method_id: paymentMethod.id })
    });

    const responseJson = await response.json();

    handleServerResponse(responseJson);
  }
};

const handleServerResponse = async responseJson => {
  if (responseJson.error) {
    // An error happened when charging the card, show it in the payment form
    resultContainer.textContent = responseJson.error;
  } else {
    // Show a success message
    resultContainer.textContent = 'Success!';
  }
};

Siapkan Stripe
Sisi server

Gunakan pustaka resmi untuk membuat permintaan ke API Stripe dari aplikasi Anda:

Lakukan pembayaran
Sisi server

Siapkan endpoint di server Anda untuk menerima permintaan dari klien.

Stripe menggunakan objek PaymentIntent untuk mewakili maksud Anda menagih pembayaran dari pelanggan, melacak upaya charge, dan perubahan status pembayaran di seluruh proses.

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

Buat endpoint HTTP untuk menanggapi permintaan AJAX dari langkah 1. Di endpoint itu, Anda harus memutuskan berapa banyak yang akan di-charge ke pelanggan. Untuk melakukan pembayaran, buat PaymentIntent menggunakan identifikasi PaymentMethod dari langkah 1 dengan kode berikut:

Peringatan

Jika Anda mengatur error_on_requires_action ke true ketika mengonfirmasi pembayaran, Stripe pembayaran gagal secara otomatis jika memerlukan autentikasi dua faktor dari pengguna.

Respons Payment Intents API

Bila Anda melakukan pembayaran dengan API, responsnya menyertakan status PaymentIntent. Jika berhasil, pembayaran akan berstatus succeeded.

{
  "id": "pi_0FdpcX589O8KAxCGR6tGNyWj",
  "object": "payment_intent",
  "amount": 1099,
  "charges": {
    "object": "list",
    "data": [
      {
        "id": "ch_GA9w4aF29fYajT",
        "object": "charge",
        "amount": 1099,
        "refunded": false,
        "status": "succeeded",
      }
    ]
  },
  "client_secret": "pi_0FdpcX589O8KAxCGR6tGNyWj_secret_e00tjcVrSv2tjjufYqPNZBKZc",
  "currency": "usd",
  "last_payment_error": null,
  "status": "succeeded",
}

Jika pembayaran ditolak, responsnya menyertakan kode kesalahan dan pesan kesalahan. Berikut merupakan contoh pembayaran yang gagal karena autentikasi dua faktor diperlukan untuk kartu.

{
  "error": {
    "code": "authentication_required",
    "decline_code": "authentication_not_handled",
    "doc_url": "https://docs.stripe.com/error-codes#authentication-required",
    "message": "This payment required an authentication action to complete, but `error_on_requires_action` was set. When you're ready, you can upgrade your integration to handle actions at https://stripe.com/docs/payments/payment-intents/upgrade-to-handle-actions.",
    "payment_intent": {
      "id": "pi_1G8JtxDpqHItWkFAnB32FhtI",
      "object": "payment_intent",
      "amount": 1099,
      "status": "requires_payment_method",
      "last_payment_error": {
        "code": "authentication_required",
        "decline_code": "authentication_not_handled",
        "doc_url": "https://docs.stripe.com/error-codes#authentication-required",
        "message": "This payment required an authentication action to complete, but `error_on_requires_action` was set. When you're ready, you can upgrade your integration to handle actions at https://stripe.com/docs/payments/payment-intents/upgrade-to-handle-actions.",
        "type": "card_error"
      },
    },
    "type": "card_error"
  }
}

Tes integrasi

Stripe menyediakan beberapa kartu percobaan yang dapat Anda gunakan di sandbox untuk memastikan integrasi ini siap. Gunakan bersama CVC, kode pos, dan tanggal kedaluwarsa mendatang.

Nomor	Keterangan
	Berhasil dan segera memproses pembayaran.
	Selalu gagalkan dengan kode penolakan `insufficient_funds`.
	Perlu autentikasi, yang di integrasi ini akan digagalkan dengan kode penolakan `authentication_not_handled`.

Lihat daftar lengkap kartu percobaan.

Upgrade integrasi Anda untuk menangani autentikasi kartu

Selamat! Anda telah menyelesaikan integrasi pembayaran untuk pembayaran dasar dengan kartu. Perhatikan bahwa integrasi ini menolak kartu yang memerlukan autentikasi selama pembayaran.

Jika Anda mulai melihat pembayaran di Dashboard yang tercantum sebagai Failed, maka itu waktunya untuk melakukan upgrade integrasi Anda. Integrasi global Stripe menangani pembayaran ini, bukan menolaknya secara otomatis.