Stripe Elements
Build beautiful, smart checkout flows
Stripe Elements are rich, pre-built UI components that help you create your own pixel-perfect checkout flows across desktop and mobile.
The best payment experience for your customers
Stripe Elements are built with the collective experience of Stripe’s front-end, design, and analytics teams. By helping your customers input their information quickly and correctly, Elements minimize user error and increase the number of successful payments.
var style = {
base: {
color: '#303238',
fontSize: '16px',
fontFamily: '"Open Sans", sans-serif',
fontSmoothing: 'antialiased',
'::placeholder': {
color: '#CFD7DF',
},
},
invalid: {
color: '#e5424d',
':focus': {
color: '#303238',
},
},
};
Built by us, designed by you
Stripe Elements can be customized to fit perfectly within your checkout page. Elements eliminate the need for hosted payment pages and instead give you the building blocks to create your own checkout form.
Give it a try! Edit the style object in the editor to match your form’s style. You can use most CSS properties.
Securely collect payment details
Stripe Elements make collecting payment details more secure and help prevent malicious actors from stealing any sensitive information. We generate a secure iframe and isolate sensitive information from your site—eliminating entire classes of attacks—while still giving you full visual control.
PCI compliance made simple
Stripe Elements are the easiest way to keep up with current PCI regulations—no sensitive data hits your servers. You qualify for the easiest form of PCI compliance, which shields you from costly and time-sensitive audits. We even auto-generate the Self Assessment Questionnaire (SAQ A) documentation.
Less code. Fewer edge cases.
Stripe Elements come with built-in input validation, formatting, masking, styling and error handling. This means you spend less time maintaining checkout code, and less time solving edge cases, all while building a better payment experience.
// 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)'
}
}
});
Focus on your product and let us handle the rest
Running an online business is a difficult endeavor. Stripe Elements let you take advantage of Stripe’s collective learnings in security and building/optimizing checkout experiences so that you can focus on your product.
-
Browser autofill support
Make your form compatible with payment autofill from all major desktop and mobile browsers.
-
Third party autofill support
Make your form compatible with payment autofill from all major third party autofill software (e.g., 1Password, LastPass).
-
Card brand identification
Validate your customer’s input by signaling an automatic detection of your customer’s card brand, driving things like formatting and input validation (e.g., only accepting a 4-digit CVC for American Express cards).
-
Card-specific CVC hints
Minimize errors by showing your customer the location of their CVC/CVV.
-
Input masking
Minimize errors with built-in input masking.
-
Formatting
Automatically format your customer’s input to match their expectations, as they type.
-
Localized error messages
Speak your customer’s language with error messages provided in 7 different languages.
-
Localized placeholders
Show your customers a localized placeholder (e.g., ZIP in the United States, but Postal Code in the UK).
-
Easy PCI compliance (SAQ A)
Minimize your PCI scope since Elements are eligible for the easiest form of PCI compliance validation—the SAQ A.
-
Web fonts support
Use the web fonts you want.
-
Right-to-left language support
Support right-to-left inputs, so that you can support right-to-left languages.
-
Real-time input validation
Validate input in real-time to minimize errors and reduce drop-off.
-
Payment Request API
Support payment methods through the new W3C Payment Request API with a single Element that automatically detects the best payment option for your customer.
-
Android Pay
Support Android Pay with a single Element.
-
Apple Pay
Support Apple Pay with a single Element.
-
Smart click targets
Use secure input fields that are compatible with the rest of your form since Elements automatically set click targets on labels and padding.
-
Mobile-friendly inputs
Show your customers the right mobile keyboard to make entry easier (e.g., showing them the numeric keyboard when all they need to enter are numbers).
-
Mobile-friendly navigation
Ensure your customers can use native mobile navigation arrows to traverse across input fields.
-
Accessibility (ARIA)
Meet the W3C ARIA standards, improving accessibility to meet the needs of all of your customers.
-
Dynamic postal code collection
Collect postal code only when it matters since Elements dynamically determines whether collecting a postal code will increase the probability of a successful transaction or minimize fraud.
-
Full-width/CJK numeral support
Support CJK numerals, which are commonly used in Chinese, Japanese and Korean software keyboards.
-
Responsive layout
Adapt to your customer’s screen size as Elements automatically adjusts its layout to best fit your customer’s available screen space, making input on small screen sizes easier.
-
React bindings
Integrate Elements with React using react-stripe-elements.
-
Fully customizable styles
Create exactly the form you want with Elements’ modularity and customizable styles.