Stripe Elements Quickstart

    Securely collect sensitive card details using Elements, our pre-built UI components. If you need help after reading this, search our documentation or check out answers to common questions. You can even chat live with other developers in #stripe on freenode.

    Here’s a preview of the custom payment form that you can build using the following guide. Try it out, using the test card number 4242 4242 4242 4242, a random three-digit CVC number, any expiration date in the future, and a random five-digit U.S. ZIP code. Note that ZIP/postal code validation is dependent on your customer’s billing country. Use our international test cards to experiment with other postal code formats.

    You can also dive straight in to the Elements reference or see some further examples of payment forms created with Elements.

    <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"></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;
      padding: 8px 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: '24px',
        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); } }); });

    Processing payments with Stripe has two parts:

    • Securely collecting payment details from your customer
    • Using the collected payment method in a charge request

    You can make use of Stripe Elements, our pre-built UI components, to create a payment form that securely collects your customer’s card information without you needing to handle sensitive card data. The card details are then converted to a representative Token that you can safely send to your servers.

    Creating a custom payment form with Elements requires four steps:

    1. Set up Stripe Elements
    2. Create your payment form
    3. Create a token to securely transmit card information
    4. Submit the token and the rest of your form to your server

    HTTPS requirements

    All submissions of payment info using Elements are made via a secure HTTPS connection. However, in order to protect yourself from certain forms of man-in-the-middle attacks, and to prevent users from seeing Mixed Content warnings in modern browsers, you must serve the page containing the payment form over HTTPS as well.

    In short, the address of the page containing Elements must start with https:// rather than just http://. If you are not familiar with the process of buying SSL certificates and integrating them with your server to enable a secure HTTPS connection, check out our security documentation for more information.

    Step 1: Set up Stripe Elements

    Elements is available as part of Stripe.js. To get started, include this script on your pages—it should always be loaded directly from https://js.stripe.com:

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

    To best leverage Stripe’s advanced fraud functionality, include this script on every page on your site, not just the checkout page.

    Next, create an instance of Elements:

    var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
    var elements = stripe.elements();
    const stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
    const elements = stripe.elements();

    We've placed a random API key in the code. Replace it with your actual publishable API key to test this code through your Stripe account.

    When you’re ready to accept live card payments, replace the test key with your live key for production uses. Learn more about how the keys play into test and live modes.

    Step 2: Create your payment form

    To securely collect card details from your customers, Elements creates UI components for you that are hosted by Stripe. They are then placed into your payment form, rather than you creating them directly.

    To determine where to insert these components, create empty DOM elements (containers) with unique IDs within your payment form. We recommend placing your container within a <label> or next to a <label> with a for attribute that matches the unique id of the Element container. This way, users automatically focus on the Stripe Element when they click on the corresponding <label>

    For example:

    <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 Element errors -->
        <div id="card-errors"></div>
      </div>
    
      <button>Submit Payment</button>
    </form>

    When the form above has loaded, create an instance of an Element and mount it to the Element container we created above:

    // Custom styling can be passed to options when creating an Element.
    var style = {
      base: {
        // Add your base input styles here. For example:
        fontSize: '16px',
        lineHeight: '24px'
      }
    };
    
    // 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');
    // Custom styling can be passed to options when creating an Element.
    const style = {
      base: {
        // Add your base input styles here. For example:
        fontSize: '16px',
        lineHeight: '24px',
      },
    };
    
    // Create an instance of the card Element
    const card = elements.create('card', {style});
    
    // Add an instance of the card Element into the `card-element` <div>
    card.mount('#card-element');

    The card Element simplifies the form and minimizes the number of fields required by inserting a single, flexible input field that securely collects all necessary card details. Refer to our Elements reference documentation for a full list of Element types that are supported.

    Elements validates user input as it is typed. To help your customers catch mistakes, you should listen to change events on the card Element and display any errors:

    card.addEventListener('change', function(event) {
      var displayError = document.getElementById('card-errors');
      if (event.error) {
        displayError.textContent = event.error.message;
      } else {
        displayError.textContent = '';
      }
    });
    
    card.addEventListener('change', ({error}) => {
      const displayError = document.getElementById('card-errors');
      if (error) {
        displayError.textContent = error.message;
      } else {
        displayError.textContent = '';
      }
    });

    Step 3: Create a token to securely transmit card information

    The payment details collected using Elements can then be converted into token. Create an event handler that handles the submit event on the form. The handler sends the fields to Stripe for tokenization and prevents the form’s submission (the form is submitted by JavaScript in the next step).

    // Create a token or display an error when the form is submitted.
    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);
        }
      });
    });
    // Create a token or display an error when the form is submitted.
    const form = document.getElementById('payment-form');
    form.addEventListener('submit', async (event) => {
      event.preventDefault();
    
      const {token, error} = await stripe.createToken(card);
    
      if (error) {
        // Inform the user if there was an error
        const errorElement = document.getElementById('card-errors');
        errorElement.textContent = error.message;
      } else {
        // Send the token to your server
        stripeTokenHandler(token);
      }
    });

    stripe.createToken returns a Promise which resolves with a result object. This object has either:

    • result.token: a Token was created successfully.
    • result.error: there was an error. This includes client-side validation errors. Refer to the API reference for all possible errors.

    Step 4: Submit the token and the rest of your form to your server

    The last step is to submit the token, along with any additional information that has been collected, to your server.

    function stripeTokenHandler(token) {
      // Insert the token ID into the form so it gets submitted to the server
      var form = document.getElementById('payment-form');
      var hiddenInput = document.createElement('input');
      hiddenInput.setAttribute('type', 'hidden');
      hiddenInput.setAttribute('name', 'stripeToken');
      hiddenInput.setAttribute('value', token.id);
      form.appendChild(hiddenInput);
    
      // Submit the form
      form.submit();
    }
    const stripeTokenHandler = (token) => {
      // Insert the token ID into the form so it gets submitted to the server
      const form = document.getElementById('payment-form');
      const hiddenInput = document.createElement('input');
      hiddenInput.setAttribute('type', 'hidden');
      hiddenInput.setAttribute('name', 'stripeToken');
      hiddenInput.setAttribute('value', token.id);
      form.appendChild(hiddenInput);
    
      // Submit the form
      form.submit();
    }

    Next steps

    Congrats! You now have a custom payment form to accept card payments with Stripe. Once you’ve sent your form to your server, you’ll be able to to use the token to perform a charge or to save to a customer. Learn more about how to create charges or make use of subscriptions.