Stripe Elements

Buat alur checkout yang cantik dan pintar

Stripe Elements adalah komponen UI siap rakit yang komprehensif yang dapat membantu Anda membuat alur checkout sempurna piksel Anda sendiri di desktop dan seluler.

Cobalah Eksplorasi dokumentasi

Donate with
Or pay with card
Address
Name City
Email State
Phone Zip Code
Card Number
Expiration
$1
$5
Jane Doe 185 Berry St Jane Doe $20
janedoe@gmail.com San Francisco janedoe@gmail.com $50
(941) 555-0123 CA (941) 555-0123 $100
4242 5200 8282 8282 8210 6011 0009 9013 9424 98431
MM/YY MM/YY MM/YY MM/YY
CVC CVC CVC CVC
ZIP 94107 ZIP Code ZIP
Pay $25 Pay $25 Pay $25 Donate $5

Pengalaman pembayaran terbaik untuk pelanggan Anda

Stripe Elements dibuat dengan pengalaman kolektif dari tim front-end, desain, dan analitik Stripe. Dengan membantu pelanggan Anda memasukkan informasi mereka dengan cepat dan benar, Elements meminimalkan kesalahan pengguna dan meningkatkan jumlah pembayaran yang berhasil.

  • Validasi waktu-nyata

    Memberikan masukan waktu-nyata secara otomatis ketika pelanggan Anda mengetik untuk memastikan kesalahan ditangkap lebih awal.

  • Pelokalan

    Mendeteksi secara dinamis input yang dibutuhkan didasarkan pada negara kartu Anda, dan melokalkannya dengan tepat.

  • Pemformatan & masking

    Buat input yang lebih mudah dan jelas untuk pengguna Anda, dengan mencocokkan pemformatan yang mereka lihat di kartu mereka.

Nomor kartu
BB / TT
CVC
ZIP
Visa 5556 04 / 21
Amex 98431 07 / 19
Beli dengan
  • Apple Pay & Permintaan Pembayaran

    Integrasikan satu kali untuk mendapatkan Apple Pay dan API Permintaan Pembayaran (termasuk Google Pay).

  • Pengisian ulang otomatis

    Memastikan bahwa pengisian ulang otomatis berfungsi secara konsisten di seluruh platform dan browser, sehingga pelanggan Anda dapat memeriksa lebih cepat.

  • Daya respons

    Menyesuaikan dengan berbagai ukuran layar (dari desktop hingga seluler) dan mengaktifkan keyboard angka jika relevan.

Nomor kartu
BB / TT
CVC
ZIP
Visa 5556 04 / 21
Amex 98431 07 / 19
Beli dengan
var style = {
  base: {
    color: '#303238',
    fontSize: '16px',
    fontFamily: '"Open Sans", sans-serif',
    fontSmoothing: 'antialiased',
    '::placeholder': {
      color: '#CFD7DF',
    },
  },
  invalid: {
    color: '#e5424d',
    ':focus': {
      color: '#303238',
    },
  },
};

Dibuat oleh kami, dirancang oleh Anda

Stripe Elements dapat disesuaikan agar benar-benar sesuai di halaman checkout Anda. Elements menghilangkan kebutuhan untuk halaman pembayaran yang di-hosting dan sebagai gantinya memberikan blok bangunan kepada Anda untuk membuat formulir checkout sendiri.

Cobalah! Edit objek gaya di editor agar cocok dengan gaya formulir Anda. Anda dapat menggunakan sebagian besar properti CSS.

Kumpulkan detail pembayaran dengan aman

Stripe Elements melakukan penagihan detail pembayaran secara lebih aman dan membantu mencegah pelaku jahat mencuri setiap informasi sensitif. Kami menghasilkan iframe yang aman dan memisahkan informasi sensitif dari situs Anda—menghilangkan peluang berbagai jenis serangan—dengan tetap memberikan kendali visual secara penuh kepada Anda.

Kepatuhan PCI disederhanakan

Stripe Elements adalah cara termudah untuk mengikuti regulasi PCI saat ini—tidak ada data sensitif yang sampai di server Anda. Anda memenuhi syarat sebagai bentuk kepatuhan PCI yang termudah, sehingga melindungi Anda dari audit yang mahal dan dengan waktu ketat. Bahkan, kami secara otomatis menghasilkan dokumentasi Kuesioner Evaluasi Diri atau Self Assessment Questionnaire (SAQ A).

Kode lebih sedikit. Kasus unik lebih sedikit.

Stripe Elements dilengkapi dengan validasi, pemformatan, masking, penataan, dan penanganan kesalahan input bawaan. Ini berarti Anda mengeluarkan lebih sedikit waktu memelihara kode checkout, dan lebih sedikit waktu menyelesaikan kasus-kasus unik, semuanya saat membangun pengalaman pembayaran yang lebih baik.

Pemformatan
// Stripe.js v2 formatting helpers
$('input[name="card"]').on('input', () => {
  let brand = Payment.fns.cardType($('input[name="card"]').val());

  $('.credit-card-img').css('opacity', 0.4);
  $(`#${brand}`).css('opacity', 1);
});
Validasi
// We only need to manually validate and format for Stripe.js v2.
$.fn.form.settings.rules.customBillingZip = (value) => {
  if (!$("[name='billingZipSame']").is(':checked') && value === '') {
    return false;
  }
  return true;
}

$.fn.form.settings.rules.customCVV = (value) => {
  return window.Stripe.validateCVC(value);
}

$.fn.form.settings.rules.customExp = (value) => {
  if (value.split('/').length === 1) {
    let sliceIndex = value.length % 2 ? 1 : 2;
    let value = `${value.slice(0, sliceIndex)}/${value.slice(sliceIndex, value.length)}`;
  }
  return window.Stripe.validateExpiry(value);
}

$.fn.form.settings.rules.customCardNumber = (value) => {
  return Payment.fns.validateCardNumber($('input[name="card"]').val());
}
return (formData, stripeResponseHandler) => {
  // Set up Stripe payload
  if (formData.exp.split('/').length > 1) {
    let exp = formData.exp.split('/');
  } else {
    let sliceIndex = formData.exp.length % 2 ? 1 : 2;
    let exp = [formData.exp.slice(0, sliceIndex), formData.exp.slice(sliceIndex, formData.exp.length)];
  }
  let payload = {
    number: formData.card,
    cvc: formData.cvv,
    exp_month: parseInt(exp[0]),
    exp_year: parseInt(exp[1])
  }
}
Payload
// Send address if given.
if ($("name='billingZipSame']").is(':checked')) {
  payload.name = formData.name;
  payload.address_line1 = formData.address1;
  if (formData.address2) {
    payload.address_line2 = formData.address2;
  }
  payload.address_city = formData.city;
  payload.address_state = formData.state;
  payload.address_zip = formData.zip;
} else {
  payload.address_zip = formData.billingZip;
}
Penanganan Kesalahan
Stripe.card.createToken(payload, (status, res) => {
  if (res.error) {
    window.scrollTo(0, 0);
    $('.ui.form').form('add errors', [res.error.message]);
  }
  stripeResponseHandler(res);
});
Pelokalan
base.card = {
  rules: [{
    type: 'customCardNumber',
    prompt: translations['Enter a valid credit card number']
  }]
};

base.cvc = {
  rules: [{
    type: 'empty',
    prompt: translations['Enter a valid CVV code']
  }]
};

base.exp = {
  rules: [{
    type: 'customExp',
    prompt: translations['Enter a valid expiation date (MM/YYYY)']
  }]
};

base.billingZip = {
  rules: [{
    type: 'customBillingZip',
    prompt: translations['Must enter a billing zip']
  }]
};
Elements
let Stripe = () => {}
let stripeClient = Stripe(key);
let stripeElements = stripeClient.elements()

let stripeCardElement = stripeElements.create('card', {
  style: {
    base: {
      fontSize: '16px',
      fontFamily: 'Lato, "Helvetica Neue", Arial, Helvetica, sans-serif',
      color: 'rgba(0,0,0,.87)'
    },
    invalid: {
      color: '#9F3A38',
      iconColor: '#9F3A38'
    },
    focus: {
      color: 'rgba(0,0,0,.95)'
    }
  }
});

Fokus pada produk Anda dan biarkan kami yang menangani sisanya

Mengeksekusi bisnis online adalah usaha yang sulit. Stripe Elements memungkinkan Anda memanfaatkan pembelajaran kolektif Stripe di bidang keamanan dan membangun/mengoptimalkan pengalaman checkout sehingga Anda dapat fokus pada produk Anda.

  • Dukungan pengisian ulang otomatis browser
    Jadikan formulir Anda kompatibel dengan pengisian ulang otomatis pembayaran dari semua browser desktop dan seluler utama.
  • Dukungan pengisian ulang otomatis pihak ketiga
    Jadikan formulir Anda kompatibel dengan pengisian ulang otomatis pembayaran dari semua perangkat lunak pengisian ulang otomatis pihak ketiga utama (misalnya, 1Password, LastPass).
  • Identifikasi merek kartu
    Validasikan input pelanggan Anda dengan menandai deteksi otomatis merek kartu pelanggan Anda, mendorong hal-hal seperti pemformatan dan validasi input (misalnya, hanya menerima CVC 4 angka untuk kartu American Express).
  • Petunjuk CVC kartu tertentu
    Minimalkan kesalahan dengan menunjukkan lokasi CVC/CVV kepada pelanggan Anda.
  • Masking input
    Minimalkan kesalahan dengan masking input bawaan.
  • Pemformatan
    Secara otomatis memformat input pelanggan Anda agar cocok dengan harapan mereka, saat mereka mengetik.
  • Pesan kesalahan yang dilokalkan
    Berbicara dalam bahasa pelanggan Anda dengan pesan kesalahan yang disediakan dalam 15 bahasa yang berbeda.
  • Placeholder yang dilokalkan
    Tunjukkan placeholder yang dilokalkan kepada pelanggan Anda (misalnya, ZIP di Amerika Serikat, tetapi Kode Pos di Kerajaan Inggris).
  • Kepatuhan PCI (SAQ A) yang mudah
    Minimalkan ruang lingkup PCI Anda karena Elements memenuhi syarat sebagai bentuk termudah dari validasi kepatuhan PCI—SAQ A.
  • Dukungan font web
    Gunakan font web yang Anda inginkan.
  • Dukungan bahasa kanan ke kiri
    Mendukung input kanan ke kiri, sehingga Anda dapat mendukung bahasa kanan ke kiri.
  • Validasi input waktu-nyata
    Validasi input waktu-nyata untuk meminimalkan kesalahan dan mengurangi kegagalan.
  • API Permintaan Pembayaran
    Mendukung metode pembayaran melalui API Permintaan Pembayaran W3C yang baru dengan satu Element yang secara otomatis mendeteksi opsi pembayaran terbaik untuk pelanggan Anda.
  • Google Pay
    Dukung Google Pay dengan satu Element.
  • Microsoft Pay
    Dukung Microsoft Pay dengan satu Element.
  • Apple Pay
    Mendukung Apple Pay dengan satu Element.
  • Target klik pintar
    Gunakan bidang input aman yang kompatibel dengan bagian lain formulir Anda karena Elements secara otomatis menetapkan target klik pada label dan lapisan.
  • Input ramah-seluler
    Tunjukkan keyboard seluler yang tepat kepada pelanggan Anda untuk mempermudah dalam memasukkan (misalnya, menunjukkan keyboard angka kepada mereka ketika semua yang mereka perlu masukkan hanyalah angka).
  • Navigasi ramah-seluler
    Pastikan pelanggan Anda dapat menggunakan panah navigasi seluler asli untuk melintasi bidang input.
  • Aksesibilitas (ARIA)
    Memenuhi standar ARIA W3C, meningkatkan aksesibilitas untuk memenuhi kebutuhan semua pelanggan Anda.
  • Pengumpulan kode pos dinamis
    Mengumpulkan kode pos hanya ketika diperlukan karena Elements secara dinamis menentukan apakah mengumpulkan kode pos dapat meningkatkan kemungkinan transaksi yang berhasil atau meminimalkan penipuan.
  • Dukungan angka lebar-penuh/CJK
    Mendukung angka CJK, yang biasanya digunakan dalam keyboard perangkat lunak Tiongkok, Jepang, dan Korea.
  • Tata letak yang responsif
    Beradaptasi dengan ukuran layar pelanggan Anda karena Elements secara otomatis menyesuaikan tata letaknya agar paling sesuai dengan ruang layar yang tersedia bagi pelanggan Anda, mempermudah input pada ukuran layar kecil.
  • Ikatan React
    Integrasikan Elements dengan React menggunakan React Stripe.js.
  • Gaya yang sepenuhnya dapat disesuaikan
    Buat secara tepat formulir yang Anda inginkan dengan modularitas Elements dan gaya yang dapat disesuaikan.
You’re viewing our website for Australia, but it looks like you’re in the United States.