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_TYooMQauvdEDq54NiTphI7jx');
    
    // 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, Chrome saved cards, and Microsoft Pay. 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

    The IBAN Element lets you collect your customers’ bank account details. It validates IBAN formats in all SEPA countries, emits the bank’s name, and includes a dynamically updating bank logo icon for many popular banks. Refer to the IBAN 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 inline">
        <div class="col">
          <label for="name">
            Name
          </label>
          <input id="name" name="name" placeholder="Jenny Rosen" required>
        </div>
        <div class="col">
          <label for="email">
            Email Address
          </label>
          <input id="email" name="email" type="email" placeholder="jenny.rosen@example.com" required>
        </div>
      </div>
    
      <div class="form-row">
        <label for="iban-element">
          IBAN
        </label>
        <div id="iban-element">
          <!-- A Stripe Element will be inserted here. -->
        </div>
      </div>
      <div id="bank-name"></div>
    
      <button>Submit Payment</button>
    
    See all 44 lines <!-- Used to display form errors. --> <div id="error-message" role="alert"></div> <!-- Display mandate acceptance text. --> <div id="mandate-acceptance"> By providing your IBAN and confirming this payment, you are authorizing Rocketship Inc. and Stripe, our payment service provider, to send instructions to your bank to debit your account and your bank to debit your account in accordance with those instructions. You are entitled to a refund from your bank under the terms and conditions of your agreement with your bank. A refund must be claimed within 8 weeks starting from the date on which your account was debited. </div> </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.
    */
    input,
    .StripeElement {
      height: 40px;
      padding: 10px 12px;
    
      color: #32325d;
      background-color: white;
      border: 1px solid transparent;
      border-radius: 4px;
    
      box-shadow: 0 1px 3px 0 #e6ebf1;
      -webkit-transition: box-shadow 150ms ease;
      transition: box-shadow 150ms ease;
    }
    
    input:focus,
    .StripeElement--focus {
      box-shadow: 0 1px 3px 0 #cfd7df;
    }
    
    .StripeElement--invalid {
      border-color: #fa755a;
    }
    
    .StripeElement--webkit-autofill {
      background-color: #fefde5 !important;
    See all 31 lines }
    // Create a Stripe client.
    // Note: this merchant has been set up for demo purposes.
    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',
        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
        fontSmoothing: 'antialiased',
        fontSize: '16px',
        '::placeholder': {
          color: '#aab7c4'
        },
        ':-webkit-autofill': {
          color: '#32325d',
        },
      },
      invalid: {
        color: '#fa755a',
        iconColor: '#fa755a',
        ':-webkit-autofill': {
          color: '#fa755a',
        },
      }
    };
    See all 95 lines // Create an instance of the iban Element. var iban = elements.create('iban', { style: style, supportedCountries: ['SEPA'], }); // Add an instance of the iban Element into the `iban-element` <div>. iban.mount('#iban-element'); var errorMessage = document.getElementById('error-message'); var bankName = document.getElementById('bank-name'); iban.on('change', function(event) { // Handle real-time validation errors from the iban Element. if (event.error) { errorMessage.textContent = event.error.message; errorMessage.classList.add('visible'); } else { errorMessage.classList.remove('visible'); } // Display bank name corresponding to IBAN, if available. if (event.bankName) { bankName.textContent = event.bankName; bankName.classList.add('visible'); } else { bankName.classList.remove('visible'); } }); // Handle form submission. var form = document.getElementById('payment-form'); form.addEventListener('submit', function(event) { event.preventDefault(); showLoading(); var sourceData = { type: 'sepa_debit', currency: 'eur', owner: { name: document.querySelector('input[name="name"]').value, email: document.querySelector('input[name="email"]').value, }, mandate: { // Automatically send a mandate notification email to your customer // once the source is charged. notification_method: 'email', } }; // Call `stripe.createSource` with the iban Element and additional options. stripe.createSource(iban, sourceData).then(function(result) { if (result.error) { // Inform the customer that there was an error. errorMessage.textContent = result.error.message; errorMessage.classList.add('visible'); stopLoading(); } else { // Send the Source to your server to create a charge. errorMessage.classList.remove('visible'); stripeSourceHandler(result.source); } }); });

    The iDEAL Bank Element lets you collect your customers’ bank for use with iDEAL payments. It displays a list of iDEAL-member banks and their logos, allowing customers to select their bank inline (rather than in an interstitial bank selection page) and check out faster. Refer to the iDEAL Bank Element Quickstart to get started.

    <script src="https://js.stripe.com/v3/"></script>
    
    <form id="payment-form">
      <div class="form-row">
        <label for="name">
          Name
        </label>
        <input id="name" name="name" placeholder="Jenny Rosen" required>
      </div>
    
      <div class="form-row">
        <label for="ideal-bank-element">
          iDEAL Bank
        </label>
        <div id="ideal-bank-element">
          <!-- A Stripe Element will be inserted here. -->
        </div>
      </div>
    
      <button>Submit Payment</button>
    
      <!-- Used to display form errors. -->
        <div id="error-message" role="alert"></div>
    </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.
    */
    input,
    .StripeElement {
      height: 40px;
    
      color: #32325d;
      background-color: white;
      border: 1px solid transparent;
      border-radius: 4px;
    
      box-shadow: 0 1px 3px 0 #e6ebf1;
      -webkit-transition: box-shadow 150ms ease;
      transition: box-shadow 150ms ease;
    }
    
    input {
      padding: 10px 12px;
    }
    
    input:focus,
    .StripeElement--focus {
      box-shadow: 0 1px 3px 0 #cfd7df;
    }
    
    .StripeElement--invalid {
      border-color: #fa755a;
    }
    See all 34 lines .StripeElement--webkit-autofill { background-color: #fefde5 !important; }
    // Create a Stripe client.
    // Note: this merchant has been set up for demo purposes.
    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: {
        padding: '10px 12px',
        color: '#32325d',
        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
        fontSmoothing: 'antialiased',
        fontSize: '16px',
        '::placeholder': {
          color: '#aab7c4'
        },
      },
      invalid: {
        color: '#fa755a',
      }
    };
    
    // Create an instance of the idealBank Element.
    var idealBank = elements.create('idealBank', {style: style});
    
    // Add an instance of the idealBank Element into the `ideal-bank-element` <div>.
    idealBank.mount('#ideal-bank-element');
    See all 67 lines var errorMessage = document.getElementById('error-message'); // Handle form submission. var form = document.getElementById('payment-form'); form.addEventListener('submit', function(event) { event.preventDefault(); showLoading(); var sourceData = { type: 'ideal', amount: 1099, currency: 'eur', owner: { name: document.querySelector('input[name="name"]').value, }, // Specify the URL to which the customer should be redirected // after paying. redirect: { return_url: 'https://shop.example.com/crtA6B28E1', }, }; // Call `stripe.createSource` with the idealBank Element and additional options. stripe.createSource(idealBank, sourceData).then(function(result) { if (result.error) { // Inform the customer that there was an error. errorMessage.textContent = result.error.message; errorMessage.classList.add('visible'); stopLoading(); } else { // Redirect the customer to the authorization URL. errorMessage.classList.remove('visible'); stripeSourceHandler(result.source); } }); });

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

    Questions?

    We're always happy to help with code or other questions you might have! Search our documentation, contact support, or connect with our sales team. You can also chat live with other developers in #stripe on freenode.

    Was this page helpful? Yes No

    Send

    Thank you for helping improve Stripe's documentation. If you need help or have any questions, please consider contacting support.