Lewati ke konten
Buat akun
atau
Masuk
Logo Dokumen Stripe
/
Tanya AI
Buat akun
Masuk
Mulai
Pembayaran
Otomatisasi keuangan
Platform dan situs belanja online
Manajemen uang
Alat bantu pengembang
Mulai
Pembayaran
Otomatisasi keuangan
Mulai
Pembayaran
Otomatisasi keuangan
Platform dan situs belanja online
Manajemen uang
Gambaran UmumJelajahi semua produk
Mulai membangun
Mulai mengembangkan
Proyek sampel
Tentang API
    Tur API
    Payment Intents API
    Setup Intents API
    Metode Pembayaran
    Produk dan harga
    API lama
      Charge
        Migrasi ke API baru
        Terima pembayaran kartu
        Simpan kartu
        Lakukan penahanan kartu
        Charge dengan Connect
      Sumber
    Fase rilis
Build with LLMs
Gunakan Stripe tanpa kode
Siapkan Stripe
Buat akun
Dashboard Web
Dashboard Seluler
Migrasikan ke Stripe
Kelola risiko penipuan
Pahami penipuan
Perlindungan penipuan Radar
Kelola sengketa
Verifikasikan identitas
BerandaMulaiAbout the APIsOlder APIsCharges

Terima pembayaran menggunakan Stripe Elements dan Charges APICharges API

Terima pembayaran online dari pelanggan AS dan Kanada.

Salin halaman

API terdahulu

The content of this section refers to a Legacy feature. Use the Payment Intents API instead.

Charges API tidak mendukung fitur berikut, banyak di antaranya diperlukan untuk kepatuhan kartu kredit:

  • Merchant di India
  • Bank requests for card authentication
  • Strong Customer Authentication

Gunakan Stripe Elements, komponen UI siap-rakit kami, untuk membuat formulir pembayaran yang memungkinkan Anda mengumpulkan detail kartu pelanggan dengan aman tanpa menangani data sensitif. Detail kartu kemudian dikonversi menjadi Token representatif yang dapat dikirim dengan aman ke server. Server Anda dapat menggunakan token itu untuk membuat charge.

Siapkan Stripe

Pertama, Anda membutuhkan akun Stripe. Daftar sekarang.

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

Command Line
Ruby
# Available as a gem sudo gem install stripe
Gemfile
Ruby
# If you use bundler, you can add this line to your Gemfile gem 'stripe'

Buat formulir pembayaran Anda
Sisi client

Untuk mengumpulkan detail kartu dengan aman dari pelanggan, Stripe Elements membuatkan Anda komponen UI yang di-hosting oleh Stripe. Kemudian dimasukkan ke dalam formulir pembayaran, bukan Anda yang membuatnya secara langsung.

Siapkan Stripe Elements

Agar Elements tersedia di halaman web Anda, tambahkan tag skrip ini di head halaman HTML:

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

Skrip tersebut harus selalu dimuat langsung dari https://js.stripe.com.

Buat instance Elements dengan JavaScript berikut di halaman pembayaran Anda:

client.js
// Set your publishable key: remember to change this to your live publishable key in production // See your keys here: https://dashboard.stripe.com/apikeys const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx'
); const elements = stripe.elements();

Setelah Elements dimuat, Anda dapat membuat kontainer DOM kosong dengan identifikasi unik dalam formulir pembayaran di mana saja Anda ingin Elements menambahkan bidang inputnya. Kami merekomendasikan penempatan kontainer itu dalam <label> atau di sebelah <label> dengan atribut for yang cocok dengan id unik kontainer Element. Dengan demikian, Element secara otomatis mendapatkan fokus saat pelanggan mengeklik label yang bersangkutan.

Misalnya:

payment.html
<form action="/charge" method="post" id="payment-form"> <div class="form-row"> <label for="card-element"> Credit or debit card </label> <div id="card-element"> <!-- A Stripe Element will be inserted here. --> </div> <!-- Used to display Element errors. --> <div id="card-errors" role="alert"></div> </div> <button>Submit Payment</button> </form>

Bila formulir di atas telah dimuat, buat instance Element card dan pasang ke kontainer Elements yang dibuat di atas:

client.js
// Custom styling can be passed to options when creating an Element. const style = { base: { // Add your base input styles here. For example: fontSize: '16px', color: '#32325d', }, }; // Create an instance of the card Element. const card = elements.create('card', {style}); // Add an instance of the card Element into the `card-element` <div>. card.mount('#card-element');

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

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

Catatan

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

The single line Card Element automatically collects and sends the customer’s postal code to Stripe. If you build your payment form with split Elements (Card Number, Expiry, CVC), add a separate input field for the customer’s postal code.

Lihat dokumen referensi Stripe.js kami untuk daftar lengkap tipe Element yang didukung.

Buat token
Sisi client

Tambahkan listener kejadian bila pelanggan Anda menyerahkan informasi kartu dan gunakan stripe.createToken(card) untuk membuat token dari informasi itu:

client.js
// Create a token or display an error when the form is submitted. const form = document.getElementById('payment-form'); form.addEventListener('submit', async (event) => { event.preventDefault(); const {token, error} = await stripe.createToken(card); if (error) { // Inform the customer that there was an error. const errorElement = document.getElementById('card-errors'); errorElement.textContent = error.message; } else { // Send the token to your server. stripeTokenHandler(token); } });

createToken juga menerima parameter opsional kedua yang berisi informasi kartu tambahan yang dikumpulkan dari pelanggan, yang tidak digunakan dalam contoh ini. Fungsi ini akan mengembalikan Promise yang akan menentukan dengan objek result. Objek ini memiliki:

  • result.token: Token berhasil dibuat.
  • result.error: ada kesalahan. Ini menyertakan kesalahan validasi sisi client. Lihat referensi API untuk semua kemungkinan kesalahan.

Jika objek berisi result.token, kirimkan ke server Anda. Jika tidak, tunjukkan kesalahan kepada pelanggan.

Serahkan token ke server Anda
Sisi client

Kirim token ke server Anda bersama informasi tambahan yang telah dikumpulkan:

client.js
const stripeTokenHandler = (token) => { // Insert the token ID into the form so it gets submitted to the server const form = document.getElementById('payment-form'); const hiddenInput = document.createElement('input'); hiddenInput.setAttribute('type', 'hidden'); hiddenInput.setAttribute('name', 'stripeToken'); hiddenInput.setAttribute('value', token.id); form.appendChild(hiddenInput); // Submit the form form.submit(); }

Buat charge dengan token
Sisi server

Setelah klien memposting token ke server, Anda dapat menggunakannya untuk membuat charge. Di server Anda, ambil token Stripe di parameter POST yang diserahkan oleh formulir. Dari sana, hanya ada satu panggilan API untuk men-charge kartu:

Command Line
curl
curl https://api.stripe.com/v1/charges \ -u
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:
\ -d "amount"=999 \ -d "currency"="usd" \ -d "description"="Example charge" \ -d "source"="tok_visa"

Respons pembuatan charge akan berupa charge atau kesalahan bersama kode kesalahan. Jika respons berhasil, penuhi pesanan pelanggan dan perlihatkan halaman berhasil kepada mereka. Jika tidak, perlihatkan halaman kesalahan kepada mereka.


Coba integrasi Anda

Jika Anda dapat memasukkan kartu percobaan dengan cara yang bisa dipercaya dalam formulir HTML, menyerahkannya ke server, dan memastikan server Anda membuat charge, berarti integrasi Anda selesai.

Selamat! Anda telah menyelesaikan integrasi pembayaran dasar dengan Charges API. API ini tidak mendukung penskalaan bisnis atau pelanggan di luar AS dan Kanada. Untuk pembayaran global yang lebih lengkap, pelajari cara menerima pembayaran dengan Payment Intents API.

Lihat juga

Anda dapat mempelajari selengkapnya tentang Elements dan cara menyimpan kartu dengan Charges API.

  • Pelajari tentang Stripe Elements
  • Menyimpan kartu dengan Charges API
Apakah halaman ini membantu?
YaTidak
Butuh bantuan? Hubungi Tim CS.
Bergabunglah dengan program akses awal kami.
Lihat log perubahan kami.
Ada pertanyaan? Hubungi Bagian Penjualan.
LLM? Baca llms.txt.
Dijalankan oleh Markdoc