Lewati ke konten
Buat akun atau Masuk
Logo Dokumen Stripe
/
Buat akunMasuk
Gambaran UmumTerima pembayaranUpgrade integrasi Anda
Pembayaran online
Gambaran umumTemukan contoh penggunaan AndaPembayaran rutin
Pembayaran di tempat
Metode Pembayaran
Operasi pembayaran
Saldo dan waktu pelunasanResiPengembalian dana dan pembatalan
Integrasi lanjutan
Di luar pembayaran

Simpan kartu tanpa autentikasi bank

Kumpulkan detail kartu dan charge pelanggan Anda di lain waktu.

Stripe memungkinkan Anda mengumpulkan detail kartu dan men-charge pelanggan Anda di kemudian hari. Di beberapa wilayah, bank mengharuskan formulir autentikasi kedua seperti memasukkan kode yang dikirim ke ponsel. Langkah ekstra menurunkan konversi jika pelanggan Anda tidak secara aktif menggunakan situs web atau aplikasi Anda karena mereka tidak tersedia untuk mengautentikasi pembelian.

​​Jika Anda menjalankan bisnis utamanya di AS dan Kanada, bank tidak mengharuskan autentikasi, jadi Anda dapat mengikuti integrasi yang lebih sederhana ini. Integrasi ini tidak akan mematuhi standar di negara-negara yang memerlukan autentikasi untuk menyimpan kartu (misalnya, India), jadi membangun integrasi ini berarti bahwa perluasan ke negara lain atau penambahan metode pembayaran lain akan memerlukan perubahan yang signifikan. Pelajari cara menyimpan kartu yang memerlukan autentikasi.

Kepatuhan

Anda bertanggung jawab atas kepatuhan Anda terhadap semua hukum, peraturan, dan aturan jaringan yang berlaku saat menyimpan detail pembayaran pelanggan. Misalnya, jika Anda ingin menyimpan metode pembayaran pelanggan untuk digunakan di masa mendatang, seperti men-charge saat mereka tidak aktif menggunakan situs web atau aplikasi Anda. Tambahkan ketentuan di situs web atau aplikasi Anda yang menyatakan rencana Anda menyimpan detail metode pembayaran dan mengizinkan pelanggan untuk ikut serta. Jika Anda ingin men-charge saat mereka offline, pastikan ketentuan Anda mencakup hal-hal berikut ini:

  • Persetujuan pelanggan untuk melakukan pembayaran atau serangkaian pembayaran atas nama mereka untuk transaksi tertentu.
  • Waktu dan frekuensi pembayaran yang diantisipasi (misalnya, jika charge untuk angsuran terjadwal, pembayaran langganan, atau penambahan saldo tidak terjadwal).
  • Cara Anda menentukan jumlah pembayaran.
  • Kebijakan pembatalan Anda, jika metode pembayarannya untuk layanan langganan.

Pastikan Anda menyimpan catatan persetujuan tertulis dari pelanggan atas ketentuan ini.

Kumpulkan detail kartu
Sisi klien

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.

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 memanfaatkan fungsionalitas penipuan tingkat lanjut Stripe secara maksimal, sertakan skrip ini di setiap halaman di situs Anda, bukan hanya halaman checkout. Menyertakan skrip di setiap halaman memungkinkan Stripe mendeteksi perilaku mencurigakan yang mungkin mengindikasikan penipuan saat pengguna menjelajahi 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.

index.html
<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.

Catatan

Selalu kumpulkan kode pos untuk meningkatkan rasio persetujuan kartu dan mengurangi penipuan.

Card Element sebaris mengumpulkan dan mengirimkan kode pos pelanggan secara otomatis kepada Stripe. Jika Anda membuat formulir pembayaran dengan Elements (Card Number, Expiry, CVC) terpisah, tambahkan bidang input terpisah untuk kode pos pelanggan.

client.js
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.

client.js
Lihat sampel lengkap
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.

Siapkan Stripe
Sisi server

Gunakan pustaka resmi kami untuk mendapatkan akses ke API Stripe dari aplikasi Anda:

Command Line
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# Available as a gem
sudo gem install stripe
Gemfile
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Simpan kartu
Sisi server

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

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/customers \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d payment_method={{PAYMENT_METHOD_ID}}

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

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/payment_methods/{{PAYMENT_METHOD_ID}}/attach \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d customer=
"{{CUSTOMER_ID}}"

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

Charge kartu yang disimpan
Sisi server

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

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl -G https://api.stripe.com/v1/payment_methods \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d customer=
"{{CUSTOMER_ID}}"
 \
  -d type=card

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

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -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.

Tangani kesalahan kartu

Beri tahu pelanggan Anda bahwa pembayaran gagal dan arahkan mereka ke formulir pembayaran yang Anda buat di langkah 1 di mana mereka dapat memasukkan detail kartu baru. Kirim ID PaymentMethod baru tersebut ke server Anda untuk dilampirkan ke objek Pelanggan dan melakukan pembayaran lagi.

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

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -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

Pengaturan setup_future_usage untuk on_session menunjukkan kepada Stripe bahwa Anda ingin menyimpan kartu untuk nanti, tanpa memicu autentikasi yang tidak perlu.

Coba integrasi

Stripe menyediakan kartu percobaan yang Anda dapat gunakan dalam sandbox untuk menyimulasikan perilaku kartu yang berbeda. Gunakan kartu ini dengan CVC, kode pos, dan tanggal kedaluwarsa di masa mendatang.

NomorKeterangan
Berhasil dan segera memproses pembayaran.
Selalu gagal dengan kode tolakan insufficient_funds.
Memerlukan autentikasi, yang dalam integrasi ini menolak dengan kode authentication_required.

OpsionalKumpulkan kembali CVC

Ketika melakukan pembayaran berikutnya pada kartu tersimpan, Anda mungkin ingin mengumpulkan kembali CVC kartu sebagai langkah tambahan dalam mencegah penipuan untuk memverifikasi pengguna.

Mulailah dengan membuat PaymentIntent dari server Anda dengan jumlah dan mata uang pembayaran, dan atur Pelanggan ke ID pelanggan Anda. Kemudian, cantumkan PaymentMethods yang terkait dengan pelanggan Anda untuk menentukan PaymentMethods mana yang akan ditampilkan kepada pengguna Anda untuk pengumpulan ulang CVC.

Setelah meneruskan client secret PaymentIntent ke browser, Anda siap untuk mengumpulkan kembali informasi CVC dengan Stripe Elements di client. Gunakan Element cardCvc untuk mengumpulkan kembali nilai CVC dari pengguna Anda, kemudian konfirmasikan pembayaran dari client menggunakan stripe.confirmCardPayment. Atur payment_method ke identifikasi PaymentMethod, dan payment_method_options[card][cvc] ke Element cardCvc Anda.

client.js
const result = await stripe.confirmCardPayment(clientSecret, {
  payment_method: '{{PAYMENT_METHOD_ID}}',
  payment_method_options: {
    card: {
      cvc: cardCvcElement
    }
  },
});

if (result.error) {
  // Show error to your customer
  console.log(result.error.message);
} else {
  if (result.paymentIntent.status === 'succeeded') {
    // Show a success message to your customer
    // There's a risk of the customer closing the window before callback
    // execution. Set up a webhook or plugin to listen for the
    // payment_intent.succeeded event that handles any business critical
    // post-payment actions.
  }
}

Pembayaran mungkin berhasil walaupun pemeriksaan CVC gagal. Untuk mencegahnya, lakukan konfigurasi aturan Radar Anda untuk memblokir pembayaran bila verifikasi CVC gagal.

Upgrade integrasi Anda untuk menangani autentikasi kartu

Integrasi ini menolak kartu yang memerlukan autentikasi selama pembayaran. Jika Anda mulai melihat banyak pembayaran di Dashboard yang tercantum sebagai Gagal, berarti sudah saatnya untuk mengupgrade integrasi Anda. Integrasi global Stripe menangani pembayaran ini alih-alih menolak secara otomatis.