Pembayaran dengan kartu tanpa autentikasi bank

Elements, bagian dari Stripe.js, menyediakan komponen UI drop-in untuk mengumpulkan informasi kartu dari pelanggan. Komponen tersebut di-hosting oleh Stripe dan ditempatkan di formulir pembayaran Anda sebagai iframe sehingga detail kartu pelanggan tidak pernah mencampuri kode Anda.

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

<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>

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

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

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!';
  }
};

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

# Available as a gem
sudo gem install stripe

# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

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:

# Check the status of the PaymentIntent to make sure it succeeded

curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_4eC39HqLyjWDarjtT1zdp7dc: \
  -d amount=1099 \
  -d currency=usd \

# A PaymentIntent can be confirmed some time after creation,
# but here we want to confirm (collect payment) immediately.
  -d confirm=true \
  -d payment_method="{{PAYMENT_METHOD_ID}}" \

# If the payment requires any follow-up actions from the
# customer, like two-factor authentication, Stripe will error
# and you will need to prompt them for a new payment method.
  -d error_on_requires_action=true

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"
  }
}

Ada beberapa kartu percobaan yang dapat Anda gunakan dalam mode percobaan untuk memastikan integrasi ini siap. Gunakan dengan CVC, kode pos, dan tanggal kedaluwarsa di masa mendatang.

Lihat daftar lengkap kartu percobaan.

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.