Terima pembayaran kartu tanpa webhook

Pertama, Anda membutuhkan akun Stripe. Daftar sekarang.

Gunakan pustaka resmi kami untuk mendapatkan akses ke Stripe API 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'

Kumpulkan informasi kartu pada client dengan Stripe.js dan Stripe Elements. Elements adalah serangkaian komponen UI siap-rakit untuk mengumpulkan dan memvalidasi nomor kartu, kode pos, dan tanggal kedaluwarsa.

Stripe Element berisi iframe yang mengirimkan informasi pembayaran dengan aman ke Stripe melalui koneksi HTTPS. Alamat halaman checkout juga harus dimulai dengan https:// bukan http:// agar integrasi Anda dapat berfungsi.

Anda dapat mencoba integrasi tanpa menggunakan HTTPS. Aktifkan bila Anda siap menerima pembayaran live.

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

<form id='payment-form'>
  <label>
    Card details
    <!-- placeholder for Elements -->
    <div id="card-element"></div>
  </label>
  <button type="submit">Submit Payment</button>
</form>

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');
const elements = stripe.elements();
// Set up Stripe.js and Elements to use in checkout form
const style = {
  base: {
    color: "#32325d",
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSmoothing: "antialiased",
    fontSize: "16px",
    "::placeholder": {
      color: "#aab7c4"
    }
  },
  invalid: {
    color: "#fa755a",
    iconColor: "#fa755a"
  },
};
const cardElement = elements.create('card', {style});
cardElement.mount('#card-element');

const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
  // We don't want to let default form submission happen here,
  // which would refresh the page.
  event.preventDefault();
  const result = await stripe.createPaymentMethod({
    type: 'card',
    card: cardElement,
    billing_details: {
      // Include any additional collected billing details.
      name: 'Jenny Rosen',
    },
  })
  stripePaymentMethodHandler(result);
});

Jika PaymentMethod berhasil dibuat, kirim identifikasinya ke server Anda.

const stripePaymentMethodHandler = async (result) => {
  if (result.error) {
    // Show error in payment form
  } else {
    // Otherwise send paymentMethod.id to your server (see Step 4)
    const res = await fetch('/pay', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        payment_method_id: result.paymentMethod.id,
      }),
    })
    const paymentResponse = await res.json();
    // Handle server response (see Step 4)
    handleServerResponse(paymentResponse);
  }
}

Siapkan endpoint di server Anda untuk menerima permintaan. Endpoint ini juga akan digunakan kemudian untuk menangani kartu yang membutuhkan langkah autentikasi tambahan.

Buat PaymentIntent baru dengan identifikasi PaymentMethod yang dibuat pada client Anda. Anda dapat mengonfirmasi PaymentIntent dengan mengatur properti confirm ke true bila PaymentIntent dibuat atau dengan memanggil confirm setelah pembuatan. Pisahkan otorisasi dan penarikan juga didukung untuk pembayaran kartu.

Jika pembayaran memerlukan tindakan tambahan, seperti autentikasi 3D Secure, status PaymentIntent akan diatur ke requires_action. Jika pembayaran gagal, status diatur kembali ke requires_payment_method dan Anda harus menampilkan kesalahan kepada pengguna. Jika pembayaran tidak memerlukan autentikasi tambahan maka charge akan dibuat dan status PaymentIntent diatur ke succeeded.

curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "payment_method"="{{PAYMENT_METHOD_ID}}" \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "confirmation_method"="manual" \
  -d "confirm"="true"

Jika Anda ingin menyimpan kartu untuk digunakan kembali nanti, buat Customer untuk menyimpan PaymentMethod dan teruskan parameter tambahan berikut saat membuat PaymentIntent:

• customer. Diatur ke identifikasi Pelanggan.
• setup_future_usage. Atur ke off_session untuk memberi tahu Stripe bahwa Anda berencana untuk menggunakan kembali PaymentMethod ini untuk pembayaran di luar sesi saat pelanggan Anda tidak ada. Mengatur properti ini akan menyimpan PaymentMethod ke Pelanggan setelah PaymentIntent dikonfirmasi dan setiap tindakan yang dibutuhkan dari pengguna telah selesai. Lihat sampel kode tentang menyimpan kartu setelah pembayaran untuk detail selengkapnya.

Tulis kode untuk menangani situasi yang mengharuskan intervensi pelanggan Anda. Pembayaran biasanya berhasil setelah Anda mengonfirmasikannya pada server di langkah 4. Namun, bila PaymentIntent memerlukan tindakan tambahan dari pelanggan, seperti melakukan autentikasi dengan 3D Secure, kode ini ikut berperan.

Gunakan stripe.handleCardAction untuk memicu UI agar menangani tindakan pelanggan. Jika autentikasi berhasil, status PaymentIntent requires_confirmation. Konfirmasikan kembali PaymentIntent di server Anda untuk menyelesaikan pembayaran.

Saat mencoba, gunakan nomor kartu percobaan yang memerlukan autentikasi (misalnya, 4000002760003184

) untuk memaksa alur ini. Menggunakan kartu yang tidak memerlukan autentikasi (misalnya, 4242424242424242

) akan melompati bagian alur ini dan diselesaikan di langkah 4.

const handleServerResponse = async (response) => {
  if (response.error) {
    // Show error from server on payment form
  } else if (response.requires_action) {
    // Use Stripe.js to handle the required card action
    const { error: errorAction, paymentIntent } =
      await stripe.handleCardAction(response.payment_intent_client_secret);
    if (errorAction) {
      // Show error from Stripe.js in payment form
    } else {
      // The card action has been handled
      // The PaymentIntent can be confirmed again on the server
      const serverResponse = await fetch('/pay', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ payment_intent_id: paymentIntent.id })
      });
      handleServerResponse(await serverResponse.json());
    }
  } else {
    // Show success message
  }
}

Kode ini hanya dieksekusi bila pembayaran memerlukan autentikasi tambahan—sama seperti penanganan di langkah sebelumnya. Kode ini sendiri tidak bersifat opsional karena pembayaran dapat memerlukan langkah ekstra ini.

Dengan menggunakan endpoint yang sama dengan yang Anda siapkan di di atas, konfirmasikan lagi PaymentIntent untuk memfinalisasi pembayaran dan penuhi pesanan. Pastikan konfirmasi ini terjadi dalam waktu satu jam sejak upaya pembayaran. Jika tidak, pembayaran akan gagal dan bertransisi kembali ke requires_payment_method.

curl https://api.stripe.com/v1/payment_intents/{{PAYMENT_INTENT_ID}}/confirm \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST"

​​Beberapa kartu percobaan tersedia untuk Anda gunakan di sandbox guna memastikan integrasi ini siap. Gunakan bersama CVC dan tanggal kedaluwarsa di masa mendatang.

Untuk daftar lengkap kartu percobaan, lihat panduan kami mengenai percobaan.