Terima pembayaran

Terima pembayaran dengan aman secara online.

Buat formulir pembayaran atau gunakan halaman checkout yang telah dibuat sebelumnya untuk mulai menerima pembayaran online.

Bangun integrasi pembayaran custom dengan menyematkan komponen UI pada situs Anda, menggunakan Stripe Elements. Lihat cara membandingkan integrasi ini dengan tipe integrasi Stripe lainnya.

Kode sisi client dan sisi server membuat formulir checkout yang menerima berbagai metode pembayaran.

Untuk mengetahui cara kerja Link bagi pengguna yang kembali, masukkan email demo@stripe.com. Untuk melihat cara kerja Link selama pendaftaran baru, masukkan email lain dan selesaikan sisa formulir. Demo ini hanya menampilkan Google Pay atau Apple Pay jika Anda memiliki kartu aktif dengan salah satu dompet.

Upaya integrasi

API

Tipe integrasi

Gabungkan komponen UI ke dalam alur pembayaran custom

Penyesuaian UI

Penyesuaian tingkat CSS dengan Appearance API

Tertarik menggunakan Stripe Tax, diskon, pengiriman, atau konversi mata uang?

Stripe memiliki integrasi Payment Element yang mengelola pajak, diskon, pengiriman, dan konversi mata uang untuk Anda. Lihat buat halaman checkout untuk mempelajari selengkapnya.

Set up Stripe
Server-side

Pertama, buat akun Stripe atau masuk.

Use our official libraries to access the Stripe API from your application:

Buat PaymentIntent
Sisi server

Catatan

Jika Anda ingin merender Payment Element tanpa terlebih dahulu membuat PaymentIntent, lihat Kumpulkan detail pembayaran sebelum membuat Intent.

Objek PaymentIntent mewakili maksud Anda menagih pembayaran dari pelanggan dan melacak upaya charge dan perubahan status selama proses pembayaran.

Buat PaymentIntent

Buat PaymentIntent pada server Anda dengan amount dan currency. Di versi terbaru API, menentukan parameter automatic_payment_methods bersifat opsional karena Stripe mengaktifkan fungsionalitasnya secara default. Anda dapat mengelola metode pembayaran dari Dashboard. Stripe menangani pengembalian metode pembayaran yang memenuhi syarat berdasarkan faktor-faktor, seperti jumlah transaksi, mata uang, dan alur pembayaran.

Stripe menggunakan pengaturan metode pembayaran untuk menampilkan metode pembayaran yang telah Anda aktifkan. Untuk melihat cara metode pembayaran Anda ditampilkan kepada pelanggan, masukkan identifikasi transaksi atau tetapkan jumlah pesanan dan mata uang di Dashboard. Untuk mengesampingkan metode pembayaran, cantumkan secara manual hal yang ingin Anda aktifkan menggunakan atribut payment_method_types.

Catatan

Selalu putuskan berapa banyak yang akan di-charge di sisi server, lingkungan tepercaya, bukan di klien. Ini mencegah pelanggan yang berniat jahat untuk dapat memilih harga mereka sendiri.

Ambil client secret

PaymentIntent menyertakan client secret yang digunakan pada sisi client untuk menyelesaian proses pembayaran dengan aman. Anda dapat menggunakan pendekatan berbeda untuk meneruskan client secret ke sisi client.

Ambil client secret dari endpoint pada server Anda, menggunakan fungsi fetch browser. Pendekatan ini paling baik jika sisi client Anda adalah aplikasi satu halaman, terutama yang dibangun dengan kerangka kerja frontend modern seperti React. Buat endpoint server yang melayani client secret:

Kemudian ambil client secret dengan JavaScript pada sisi client:

(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();

Kumpulkan detail pembayaran
Sisi client

Kumpulkan detail pembayaran pada client dengan Payment Element. Payment Element adalah komponen UI siap-rakit yang menyederhanakan pengumpulan detail pembayaran untuk berbagai metode pembayaran.

Payment Element berisi iframe yang mengirimkan informasi pembayaran dengan aman ke Stripe melalui koneksi HTTPS. Hindari penempatan Payment Element dalam iframe lain karena sejumlah metode pembayaran memerlukan pengalihan ke halaman lain untuk konfirmasi pembayaran.

Jika Anda memilih untuk menggunakan iframe dan ingin menerima Apple Pay atau Google Pay, iframe tersebut harus memiliki atribut allow yang diatur sama dengan "payment *".

Alamat halaman checkout harus dimulai dengan https:// bukan http:// agar integrasi Anda berfungsi. Anda dapat mencoba integrasi tanpa menggunakan HTTPS, tapi ingatlah untuk mengaktifkannya bila sudah siap menerima pembayaran live.

Siapkan Stripe.js

Payment Element secara otomatis tersedia sebagai fitur Stripe.js. Sertakan skrip Stripe.js di halaman checkout Anda dengan menambahkannya ke head di file HTML. Selalu muat Stripe.js secara langsung dari js.stripe.com agar tetap mematuhi PCI. Jangan sertakan skrip dalam paket atau meng-host sendiri salinannya.

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/basil/stripe.js"></script>
</head>

Buat instance Stripe dengan JavaScript berikut di halaman checkout Anda:

checkout.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'
);

Tambahkan Payment Element ke halaman pembayaran Anda

Payment Element membutuhkan tempat tinggal di halaman pembayaran Anda. Buat simpul DOM kosong (wadah) dengan ID unik di formulir pembayaran Anda:

checkout.html
<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Submit</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>

Saat formulir sebelumnya dimuat, buat instance Payment Element dan pasang ke simpul DOM penampung. Teruskan client secret dari langkah sebelumnya ke options saat Anda membuat instance Elements:

Tangani client secret dengan hati-hati karena dapat menyelesaikan charge. Jangan mencatatnya, menyematkannya di URL, atau memaparkannya kepada siapa pun kecuali pelanggan.

checkout.js
const options = {
  clientSecret: '{{CLIENT_SECRET}}',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in a previous step
const elements = stripe.elements(options);

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');

Payment Element menampilkan formulir dinamis yang memungkinkan pelanggan memilih metode pembayaran. Bagi masing-masing metode pembayaran, formulir akan secara otomatis meminta pelanggan untuk mengisi seluruh detail pembayaran yang diperlukan.

Sesuaikan penampilan

Sesuaikan Payment Element agar sejalan dengan desain situs Anda dengan meneruskan objek penampilan ke dalam options ketika membuat penyedia Elements.

Kumpulkan alamat

Secara default, Payment Element hanya mengumpulkan detail alamat tagihan yang diperlukan. Untuk mengumpulkan alamat tagihan lengkap pelanggan (misalnya, untuk menghitung pajak barang dan layanan digital) atau alamat pengiriman, gunakan Address Element.

Minta token merchant Apple Pay

Jika Anda telah melakukan konfigurasi integrasi untuk menerima pembayaran Apple Pay, sebaiknya konfigurasikan antarmuka Apple Pay untuk menghasilkan token merchant agar dapat mengaktifkan transaksi yang diprakarsai merchant (MIT). Minta jenis token merchant yang relevan di Payment Element.

OpsionalSimpan dan ambil metode pembayaran pelanggan

OpsionalLink di halaman checkout Anda
Sisi client

OpsionalAmbil pembaruan dari server
Sisi client

Serahkan pembayaran ke Stripe
Sisi client

Gunakan stripe.confirmPayment untuk menyelesaikan pembayaran menggunakan detail dari Payment Element. Berikan return_url ke fungsi ini untuk menunjukkan ke mana Stripe harus mengalihkan pengguna setelah menyelesaikan pembayaran. Pengguna Anda mungkin pertama kali diarahkan ulang ke situs perantara, seperti halaman otorisasi bank, sebelum diarahkan ulang ke return_url. Pembayaran kartu segera dialihkan ke return_url bila pembayaran berhasil.

Jika tidak ingin dialihkan untuk pembayaran kartu setelah pembayaran selesai, Anda dapat mengatur pengalihan ke if_required. Ini hanya mengalihkan pelanggan yang memproses pembayaran dengan metode pembayaran berbasis pengalihan.

checkout.js
const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {error} = await stripe.confirmPayment({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the payment. Show error to your customer (for example, payment
    // details incomplete)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  } else {
    // Your customer will be redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer will be redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});

Pastikan return_url sesuai dengan halaman pada situs web Anda yang menyediakan status pembayaran. Bila Stripe mengarahkan ulang pelanggan ke return_url, kami menyediakan parameter query URL berikut ini:

Parameter	Keterangan
`payment_intent`	Identifier unik untuk `PaymentIntent`.
`payment_intent_client_secret`	client secret dari objek `PaymentIntent`.

Peringatan

Jika memiliki alat yang melacak sesi browser pelanggan, Anda mungkin perlu menambah domain stripe.com ke daftar pengecualian perujuk. Pengarahan ulang menyebabkan sejumlah alat membuat sesi baru, yang mencegah Anda melacak sesi yang telah selesai.

Gunakan salah satu parameter query untuk mengambil PaymentIntent. Periksa status PaymentIntent untuk memutuskan apa yang akan ditampilkan kepada pelanggan Anda. Anda juga dapat menambahkan parameter query Anda sendiri saat memberikan return_url, yang akan tetap ada selama proses pengalihan.

status.js
// Initialize Stripe.js using your publishable key
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

// Retrieve the "payment_intent_client_secret" query parameter appended to
// your return_url by Stripe.js
const clientSecret = new URLSearchParams(window.location.search).get(
  'payment_intent_client_secret'
);

// Retrieve the PaymentIntent
stripe.retrievePaymentIntent(clientSecret).then(({paymentIntent}) => {
  const message = document.querySelector('#message')

  // Inspect the PaymentIntent `status` to indicate the status of the payment
  // to your customer.
  //
  // Some payment methods will [immediately succeed or fail][0] upon
  // confirmation, while others will first enter a `processing` state.
  //
  // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
  switch (paymentIntent.status) {
    case 'succeeded':
      message.innerText = 'Success! Payment received.';
      break;

    case 'processing':
      message.innerText = "Payment processing. We'll update you when payment is received.";
      break;

    case 'requires_payment_method':
      message.innerText = 'Payment failed. Please try another payment method.';
      // Redirect your user back to your payment page to attempt collecting
      // payment again
      break;

    default:
      message.innerText = 'Something went wrong.';
      break;
  }
});

Tangani kejadian pascapembayaran
Sisi server

Stripe mengirim kejadian payment_intent.succeeded ketika selesai pembayaran. Gunakan alat webhook Dashboard atau ikuti panduan webhook untuk menerima kejadian ini dan menjalankan tindakan, seperti mengirim email konfirmasi pesanan kepada pelanggan Anda, mencatat penjualan di database, atau memulai alur kerja pengiriman.

Dengarkan kejadian ini daripada menunggu callback dari client. Di client, pelanggan dapat menutup jendela browser atau keluar dari aplikasi sebelum callback mengeksekusi, dan klien jahat dapat memanipulasi respons. Penyiapan integrasi untuk mendengarkan kejadian asinkron memungkinkan Anda menyetujui berbagai tipe metode pembayaran dengan satu integrasi tunggal.

Selain menangani kejadian payment_intent.succeeded, kami merekomendasikan penanganan kejadian ini yang lain ketika menagih pembayaran dengan Payment Element:

Kejadian	Keterangan	Tindakan
payment_intent.succeeded	Dikirim bila pelanggan berhasil menyelesaikan pembayaran.	Kirimi pelanggan konfirmasi pesanan dan penuhi pesanan mereka.
payment_intent. pemrosesan	Dikirim bila pelanggan berhasil memprakarsai pembayaran, tetapi pembayaran itu belum selesai. Kejadian ini paling umum dikirim saat pelanggan memprakarsai debit bank. Kejadian diikuti dengan kejadian `payment_intent.succeeded` atau `payment_intent.payment_failed` di masa mendatang.	Kirimi pelanggan konfirmasi pesanan yang menunjukkan bahwa pembayaran mereka menunggu penyelesaian. Untuk barang digital, Anda mungkin ingin memenuhi pesanan sebelum menunggu pembayaran selesai.
payment_intent.payment_failed	Dikirim bila pelanggan mencoba melakukan pembayaran, tetapi pembayaran itu gagal.	Jika transisi pembayaran dilakukan dari `processing` menjadi `payment_failed`, tawarkan upaya lain untuk membayar kepada pelanggan.

Coba integrasi Anda

Untuk mencoba integrasi pembayaran custom Anda:

Buat Payment Intent dan ambil client secret.
Isilah detail pembayaran dengan metode dari tabel berikut.
- Masukkan tanggal mendatang untuk tanggal kedaluwarsa kartu.
- Masukkan nomor 3 angka untuk CVC.
- Masukkan kode pos tagihan.
Serahkan pembayaran ke Stripe. Anda dialihkan ke return_url.
Masuk ke Dashboard dan cari pembayaran pada halaman Transaksi. Jika pembayaran berhasil, Anda akan melihatnya dalam daftar tersebut.
Klik pembayaran Anda untuk melihat detail selengkapnya, seperti informasi tagihan dan daftar barang yang dibeli. Anda dapat menggunakan informasi ini untuk memenuhi pesanan.

Pelajari selengkapnya tentang percobaan integrasi Anda.

Nomor kartu	Skenario	Cara mencoba
	Pembayaran kartu berhasil dan tidak memerlukan autentikasi.	Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos.
	Pembayaran kartu memerlukan autentikasi.	Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos.
	Kartu ini ditolak dengan kode penolakan seperti `insufficient_funds`.	Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos.
	Kartu UnionPay memiliki panjang variabel 13–19 angka.	Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos.

Lihat Pengujian untuk mendapatkan informasi tambahan untuk menguji integrasi Anda.

OpsionalTambahkan metode pembayaran lainnya

Ungkapkan Stripe kepada pelanggan Anda

Stripe mengumpulkan informasi tentang interaksi pelanggan dengan Elements untuk memberikan layanan kepada Anda, mencegah penipuan, serta meningkatkan layanannya. Ini termasuk penggunaan cookie dan alamat IP guna mengidentifikasi Elements mana yang dilihat pelanggan selama satu sesi checkout. Anda bertanggung jawab untuk mengungkapkan serta memperoleh semua hak dan persetujuan yang diperlukan agar Stripe dapat menggunakan data dengan cara ini. Untuk informasi selengkapnya, kunjungi pusat privasi kami.

Terima pembayaran