Stripe.js and Elements

Build modern, secure payment flows for the web.

Stripe.js is our foundational JavaScript library for building payment flows. With it you can collect sensitive information from the user and create representative Tokens for safely sending that data to your servers. Stripe.js makes working with many forms of sensitive information simpler, including:

Card information
Bank account details
Personally identifiable information (PII)
A wide variety of payment methods via Sources

Because all sensitive information is handled by Stripe.js, it features simple PCI compliance with SAQ A reporting. Stripe.js also provides a single interface for Apple Pay, Google Pay, and the Payment Request API; integrating once against Stripe.js is the same as integrating against each individually.

Stripe Elements

Stripe Elements is a set of pre-built UI components for building your checkout flow and is available as a feature of Stripe.js. Elements provides ready-made UI components like inputs and buttons for collecting information from the user. Stripe.js then tokenizes the sensitive information within an element without ever having it touch your server. Elements includes features like:

Automatically format card information as it’s entered
Translate placeholders into your customer’s preferred language
Responsive design to fit the width of your customer’s screen or mobile device
Customizable styling to match the look and feel of your checkout flow

The Card Element lets you collect card information all within one element. It includes a dynamically-updating card brand icon as well as inputs for number, expiry, CVC, and postal code. Refer to the Card Element Quickstart to get started.

<script src="https://js.stripe.com/v3/"></script>

<form action="/charge" method="post" id="payment-form">
  <div class="form-row">
    <label for="card-element">
      Credit or debit card
    </label>
    <div id="card-element">
      <!-- A Stripe Element will be inserted here. -->
    </div>

    <!-- Used to display form errors. -->
    <div id="card-errors" role="alert"></div>
  </div>

  <button>Submit Payment</button>
</form>

/**
 * The CSS shown here will not be introduced in the Quickstart guide, but shows
 * how you can use CSS to style your Element's container.
 */
.StripeElement {
  background-color: white;
  height: 40px;
  padding: 10px 12px;
  border-radius: 4px;
  border: 1px solid transparent;
  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
}

.StripeElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
  border-color: #fa755a;
}

.StripeElement--webkit-autofill {
  background-color: #fefde5 !important;
}

// Create a Stripe client.
var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');

// Create an instance of Elements.
var elements = stripe.elements();

// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
  base: {
    color: '#32325d',
    lineHeight: '18px',
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSmoothing: 'antialiased',
    fontSize: '16px',
    '::placeholder': {
      color: '#aab7c4'
    }
  },
  invalid: {
    color: '#fa755a',
    iconColor: '#fa755a'
  }
};

// Create an instance of the card Element.
var card = elements.create('card', {style: style});

// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');

See all 57 lines // Handle real-time validation errors from the card Element. card.addEventListener('change', function(event) { var displayError = document.getElementById('card-errors'); if (event.error) { displayError.textContent = event.error.message; } else { displayError.textContent = ''; } }); // Handle form submission. var form = document.getElementById('payment-form'); form.addEventListener('submit', function(event) { event.preventDefault(); stripe.createToken(card).then(function(result) { if (result.error) { // Inform the user if there was an error. var errorElement = document.getElementById('card-errors'); errorElement.textContent = result.error.message; } else { // Send the token to your server. stripeTokenHandler(result.token); } }); });

The Payment Request Button lets your customers check out with Apple Pay, Google Pay, and Chrome saved cards. When using an Apple Pay-enabled browser, your customer will see the button on the left below. When using a browser that supports the Payment Request API, they’ll see the button on the right below. Note that for demonstration purposes, these are just images, not live demos. You can read more about browser support in the Payment Request Button Quickstart.

Apple Pay Button and Payment Request Button Element

Elements examples

Elements are completely customizable. You can style Elements to match the look and feel of your site, providing a seamless checkout experience for your customers. It’s also possible to style various input states, for example when the Element has focus.

To see some examples of how you can use Elements, check out our open source examples on GitHub, along with the accompanying source code.

For an end-to-end example illustrating how to integrate Elements with a backend to process payments, check out this demo application and browse its source code on GitHub. This sample store accepts card payments with support for Payment Request, Apple Pay, and Pay with Google, and other payment methods.

Demo application on Chrome with the Payment Request Button

Demo application on iPhone X with Apple Pay on Safari

Sample e-commerce store implementing both the Card Element and the Payment Request Button.

Using Stripe.js and Elements with React

If you’re looking to use Stripe.js and Elements alongside React, use our open source react-stripe-elements project, available on GitHub. This project is a thin wrapper around Stripe.js and Elements that manages internal state and component lifecycles for you.

Next steps

Learn more about how to use the various features of Stripe.js with these resources.