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.
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.
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.
// 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);
});
// 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]) }
}
// 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; }
Stripe.card.createToken(payload, (status, res) => {
if (res.error) {
window.scrollTo(0, 0);
$('.ui.form').form('add errors', [res.error.message]);
}
stripeResponseHandler(res);
});
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'] }] };
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.