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.

Try it out Explore the docs

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

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.

  • Real-time validation

    Automatically provide real-time feedback as your customer types to ensure errors are caught early.

  • Localization

    Dynamically detect which inputs are needed based on your card’s country, and localize them appropriately.

  • Formatting & masking

    Make input easier and clearer for your users, by matching the formatting that they see on their card.

Card number
MM / YY
CVC
ZIP
Visa 5556 04 / 21
Amex 98431 07 / 19
Buy with
  • Apple Pay & Payment Request

    Provide a single integration for Apple Pay and the Payment Request API.

  • Autofill

    Ensure that autofill works consistently across platforms and browsers, so that your customers can check out faster.

  • Responsiveness

    Adapt to different screen sizes (from desktop to mobile) and invoke the numeric keyboard where relevant.

Card number
MM / YY
CVC
ZIP
Visa 5556 04 / 21
Amex 98431 07 / 19
Buy with
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.

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

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.