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, Pay with Google, 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, Pay with Google, 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.

    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.