Simpan kartu tanpa autentikasi bank

Sebelum memulai panduan ini, Anda membutuhkan akun Stripe. Daftar sekarang.

Bangun halaman checkout untuk mengumpulkan detail kartu pelanggan Anda. Gunakan Stripe Elements, pustaka UI yang membantu Anda membangun formulir pembayaran custom. Untuk memulai dengan Elements, sertakan pustaka Stripe.js dengan skrip berikut pada halaman checkout Anda.

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

Selalu muat Stripe.js secara langsung dari js.stripe.com agar tetap mematuhi PCI. Jangan menyertakan skrip dalam paket atau meng-host sendiri salinannya.

Untuk lebih memanfaatkan fungsionalitas anti-penipuan lanjutan Stripe, sertakan skrip ini pada setiap halaman di situs Anda, tidak hanya halaman checkout. Penyertaan skrip ini pada setiap halaman memungkinkan Stripe mendeteksi perilaku mencurigakan yang mungkin merupakan indikasi penipuan saat pengguna menelusuri situs web Anda.

Tambahkan Elements ke halaman Anda

Untuk mengumpulkan detail kartu dengan aman dari pelanggan, Elements membuatkan Anda komponen UI yang di-hosting oleh Stripe. Kemudian komponen tersebut dimasukkan dalam formulir pembayaran, bukan Anda yang membuatnya secara langsung. Untuk menentukan ke mana memasukkan komponen ini, buat (container) element DOM kosong dengan identifikasi unik dalam formulir pembayaran Anda.

<input id="cardholder-name" type="text">
<!-- placeholder for Elements -->
<div id="card-element"></div>
<div id="card-result"></div>
<button id="card-button">Save Card</button>

Berikutnya, buat instance objek Stripe, yang menyediakan kunci API yang dapat dipublikasikan kepada Anda sebagai parameter pertama. Setelah itu, buat instance objek Elements dan gunakan itu untuk memasang elemen card di DOM.

Element card menyederhanakan formulir dan meminimalkan jumlah bidang yang diperlukan dengan memasukkan satu bidang input fleksibel yang dengan aman mengumpulkan semua detail kartu yang diperlukan.

Jika tidak, gabungkan Elements cardNumber, cardExpiry, dan cardCvc untuk formulir kartu multiinput yang fleksibel.

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

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

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.

const cardholderName = document.getElementById('cardholder-name');
const cardButton = document.getElementById('card-button');
const resultContainer = document.getElementById('card-result');

cardButton.addEventListener('click', async (ev) => {
  const {paymentMethod, error} = await stripe.createPaymentMethod({
      type: 'card',
      card: cardElement,
      billing_details: {
        name: cardholderName.value,
      },
    }
  );

  if (error) {
    // Display error.message in your UI.
    resultContainer.textContent = error.message;
  } else {
    // You have successfully created a new PaymentMethod
    resultContainer.textContent = "Created payment method: " + paymentMethod.id;
  }
});

Kirim identifikasi PaymentMethod yang dihasilkan ke server Anda.

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

Simpan kartu dengan melampirkan PaymentMethod pada Pelanggan. Anda dapat menggunakan objek Customer untuk menyimpan informasi lain tentang pelanggan, seperti detail pengiriman dan alamat email.

curl https://api.stripe.com/v1/customers \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d payment_method={{PAYMENT_METHOD_ID}}

Jika sudah memiliki Customer yang ada, Anda dapat melampirkan PaymentMethod pada objek itu sebagai gantinya.

curl https://api.stripe.com/v1/payment_methods/{{PAYMENT_METHOD_ID}}/attach \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d customer=
{{CUSTOMER_ID}}

Pada saat ini, kaitkan identifikasi Customer dan identifikasi PaymentMethod dengan perwakilan internal Anda sendiri dari pelanggan, jika memilikinya.

Bila Anda sudah siap, ambil identifikasi PaymentMethod dan Customer yang akan di-charge. Anda dapat melakukan hal ini dengan menyimpan identifikasi keduanya di database, atau dengan menggunakan identifikasi Customer untuk mencari semua PaymentMethods Customer yang tersedia.

curl -G https://api.stripe.com/v1/payment_methods \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d customer=
{{CUSTOMER_ID}} \
  -d type=card

Gunakan identifikasi PaymentMethod dan identifikasi Pelanggan untuk membuat PaymentIntent baru. Atur error_on_requires_action ke true untuk menolak pembayaran yang memerlukan tindakan dari pelanggan Anda, seperti autentikasi dua faktor.

curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d amount=1099 \
  -d currency=usd \
  -d "payment_method_types[]"=card \
  -d customer=
{{CUSTOMER_ID}} \
  -d payment_method={{PAYMENT_METHOD_ID}} \
  -d error_on_requires_action=true \
  -d confirm=true

Bila upaya pembayaran gagal, permintaan juga gagal dengan kode status HTTP 402 dan Stripe menampilkan kesalahan. Anda perlu memberi tahu pelanggan untuk kembali ke aplikasi (misalnya, dengan mengirimkan email) guna menyelesaikan pembayaran. Periksa kode Kesalahan yang dimunculkan oleh pustaka Stripe API atau cek last_payment_error.decline_code pada PaymentIntent untuk memeriksa mengapa penerbit kartu menolak pembayaran tersebut.

Notify your customer that the payment failed and direct them to the payment form you made in Step 1 where they can enter new card details. Send that new PaymentMethod ID to your server to attach to the Customer object and make the payment again.

Atau, Anda dapat membuat PaymentIntent dan menyimpan kartu semuanya dalam satu panggilan API jika Anda sudah membuat Customer.

curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d amount=1099 \
  -d currency=usd \
  -d "payment_method_types[]"=card \
  -d customer=
{{CUSTOMER_ID}} \
  -d payment_method={{PAYMENT_METHOD_ID}} \
  -d error_on_requires_action=true \
  -d confirm=true \
  -d setup_future_usage=on_session

Setting setup_future_usage to on_session indicates to Stripe that you wish to save the card for later, without triggering unnecessary authentication.

Stripe provides test cards you can use in test mode to simulate different cards’ behavior. Use these cards with any CVC, postal code, and expiry date in the future.