Stripe Elements Examples

    To learn more about using Elements, refer to our Elements quickstart and Stripe.js reference documentation.

    Stripe Elements can be customized to fit your payment forms. Check out each of the following examples, complete with HTML, CSS, and JavaScript source code, to learn more about the flexibility of Elements. See the Stripe.js reference for all style and customization options.

    Example 1: Input groups on light background

    This example shows how to create groups of input fields and perfectly adapt the look-and-feel of a Stripe Element with the rest of the form, including fonts and shadows.

    <script src="https://js.stripe.com/v3/"></script>
    <form>
      <div class="group">
        <label>
          <span>Name</span>
          <input name="cardholder-name" class="field" placeholder="Jane Doe" />
        </label>
        <label>
          <span>Phone</span>
          <input class="field" placeholder="(123) 456-7890" type="tel" />
        </label>
      </div>
      <div class="group">
        <label>
          <span>Card</span>
          <div id="card-element" class="field"></div>
        </label>
      </div>
      <button type="submit">Pay $25</button>
      <div class="outcome">
        <div class="error" role="alert"></div>
        <div class="success">
          Success! Your Stripe token is <span class="token"></span>
        </div>
      </div>
    </form>
    * {
      font-family: "Helvetica Neue", Helvetica;
      font-size: 15px;
      font-variant: normal;
      padding: 0;
      margin: 0;
    }
    
    html {
      height: 100%;
    }
    
    body {
      background: #E6EBF1;
      align-items: center;
      min-height: 100%;
      display: flex;
      width: 100%;
    }
    
    form {
      width: 480px;
      margin: 20px auto;
    }
    
    .group {
      background: white;
      box-shadow: 0 7px 14px 0 rgba(49,49,93,0.10),
                  0 3px 6px 0 rgba(0,0,0,0.08);
      border-radius: 4px;
    See all 126 lines margin-bottom: 20px; } label { position: relative; color: #8898AA; font-weight: 300; height: 40px; line-height: 40px; margin-left: 20px; display: block; } .group label:not(:last-child) { border-bottom: 1px solid #F0F5FA; } label > span { width: 20%; text-align: right; float: left; } .field { background: transparent; font-weight: 300; border: 0; color: #31325F; outline: none; padding-right: 10px; padding-left: 10px; cursor: text; width: 70%; height: 40px; float: right; } .field::-webkit-input-placeholder { color: #CFD7E0; } .field::-moz-placeholder { color: #CFD7E0; } .field:-ms-input-placeholder { color: #CFD7E0; } button { float: left; display: block; background: #666EE8; color: white; box-shadow: 0 7px 14px 0 rgba(49,49,93,0.10), 0 3px 6px 0 rgba(0,0,0,0.08); border-radius: 4px; border: 0; margin-top: 20px; font-size: 15px; font-weight: 400; width: 100%; height: 40px; line-height: 38px; outline: none; } button:focus { background: #555ABF; } button:active { background: #43458B; } .outcome { float: left; width: 100%; padding-top: 8px; min-height: 24px; text-align: center; } .success, .error { display: none; font-size: 13px; } .success.visible, .error.visible { display: inline; } .error { color: #E4584C; } .success { color: #666EE8; } .success .token { font-weight: 500; font-size: 13px; }
    var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
    var elements = stripe.elements();
    
    var card = elements.create('card', {
      style: {
        base: {
          iconColor: '#666EE8',
          color: '#31325F',
          lineHeight: '40px',
          fontWeight: 300,
          fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
          fontSize: '15px',
    
          '::placeholder': {
            color: '#CFD7E0',
          },
        },
      }
    });
    card.mount('#card-element');
    
    function setOutcome(result) {
      var successElement = document.querySelector('.success');
      var errorElement = document.querySelector('.error');
      successElement.classList.remove('visible');
      errorElement.classList.remove('visible');
    
      if (result.token) {
        // Use the token to create a charge or a customer
        // https://stripe.com/docs/charges
    See all 50 lines successElement.querySelector('.token').textContent = result.token.id; successElement.classList.add('visible'); } else if (result.error) { errorElement.textContent = result.error.message; errorElement.classList.add('visible'); } } card.on('change', function(event) { setOutcome(event); }); document.querySelector('form').addEventListener('submit', function(e) { e.preventDefault(); var form = document.querySelector('form'); var extraDetails = { name: form.querySelector('input[name=cardholder-name]').value, }; stripe.createToken(card, extraDetails).then(setOutcome); });

    Example 2: Animated placeholders on dark background

    This illustrates how to animate placeholders when focusing on each input field. The JavaScript code specifies which CSS classes to automatically apply to Stripe Elements on focus and empty states. These classes perform a transform accordingly. By listening to both focus and blur events on the other DOM <input>s and checking their values, you can make sure all fields offer exactly the same behavior.

    <script src="https://js.stripe.com/v3/"></script>
    <form>
      <label>
        <input name="cardholder-name" class="field is-empty" placeholder="Jane Doe" />
        <span><span>Name</span></span>
      </label>
      <label>
        <input class="field is-empty" type="tel" placeholder="(123) 456-7890" />
        <span><span>Phone number</span></span>
      </label>
      <label>
        <div id="card-element" class="field is-empty"></div>
        <span><span>Credit or debit card</span></span>
      </label>
      <button type="submit">Pay $25</button>
      <div class="outcome">
        <div class="error" role="alert"></div>
        <div class="success">
          Success! Your Stripe token is <span class="token"></span>
        </div>
      </div>
    </form>
    * {
      font-family: 'Helvetica Neue', Helvetica, sans-serif;
      font-size: 19px;
      font-variant: normal;
      padding: 0;
      margin: 0;
    }
    
    html {
      height: 100%;
    }
    
    body {
      background: #424770;
      display: flex;
      align-items: center;
      min-height: 100%;
    }
    
    form {
      width: 480px;
      margin: 20px auto;
    }
    
    label {
      height: 35px;
      position: relative;
      color: #8798AB;
      display: block;
      margin-top: 30px;
    See all 144 lines margin-bottom: 20px; } label > span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-weight: 300; line-height: 32px; color: #8798AB; border-bottom: 1px solid #586A82; transition: border-bottom-color 200ms ease-in-out; cursor: text; pointer-events: none; } label > span span { position: absolute; top: 0; left: 0; transform-origin: 0% 50%; transition: transform 200ms ease-in-out; cursor: text; } label .field.is-focused + span span, label .field:not(.is-empty) + span span { transform: scale(0.68) translateY(-36px); cursor: default; } label .field.is-focused + span { border-bottom-color: #34D08C; } .field { background: transparent; font-weight: 300; border: 0; color: white; outline: none; cursor: text; display: block; width: 100%; line-height: 32px; padding-bottom: 3px; transition: opacity 200ms ease-in-out; } .field::-webkit-input-placeholder { color: #8898AA; } .field::-moz-placeholder { color: #8898AA; } /* IE doesn't show placeholders when empty+focused */ .field:-ms-input-placeholder { color: #424770; } .field.is-empty:not(.is-focused) { opacity: 0; } button { float: left; display: block; background: #34D08C; color: white; border-radius: 2px; border: 0; margin-top: 20px; font-size: 19px; font-weight: 400; width: 100%; height: 47px; line-height: 45px; outline: none; } button:focus { background: #24B47E; } button:active { background: #159570; } .outcome { float: left; width: 100%; padding-top: 8px; min-height: 20px; text-align: center; } .success, .error { display: none; font-size: 15px; } .success.visible, .error.visible { display: inline; } .error { color: #E4584C; } .success { color: #34D08C; } .success .token { font-weight: 500; font-size: 15px; }
    var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
    var elements = stripe.elements();
    
    var card = elements.create('card', {
      iconStyle: 'solid',
      style: {
        base: {
          iconColor: '#8898AA',
          color: 'white',
          lineHeight: '36px',
          fontWeight: 300,
          fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
          fontSize: '19px',
    
          '::placeholder': {
            color: '#8898AA',
          },
        },
        invalid: {
          iconColor: '#e85746',
          color: '#e85746',
        }
      },
      classes: {
        focus: 'is-focused',
        empty: 'is-empty',
      },
    });
    card.mount('#card-element');
    
    See all 76 lines var inputs = document.querySelectorAll('input.field'); Array.prototype.forEach.call(inputs, function(input) { input.addEventListener('focus', function() { input.classList.add('is-focused'); }); input.addEventListener('blur', function() { input.classList.remove('is-focused'); }); input.addEventListener('keyup', function() { if (input.value.length === 0) { input.classList.add('is-empty'); } else { input.classList.remove('is-empty'); } }); }); function setOutcome(result) { var successElement = document.querySelector('.success'); var errorElement = document.querySelector('.error'); successElement.classList.remove('visible'); errorElement.classList.remove('visible'); if (result.token) { // Use the token to create a charge or a customer // https://stripe.com/docs/charges successElement.querySelector('.token').textContent = result.token.id; successElement.classList.add('visible'); } else if (result.error) { errorElement.textContent = result.error.message; errorElement.classList.add('visible'); } } card.on('change', function(event) { setOutcome(event); }); document.querySelector('form').addEventListener('submit', function(e) { e.preventDefault(); var form = document.querySelector('form'); var extraDetails = { name: form.querySelector('input[name=cardholder-name]').value, }; stripe.createToken(card, extraDetails).then(setOutcome); });

    Example 3: Rounded input fields with custom web font

    This features another example of layout with individual inputs on a light background. The CSS produces rounded input fields with fully matching styles, and a different way to align labels on the left.

    This example also collects the cardholder's billing address ZIP code outside of Elements and passes it through to the token creation. You can use it as a reference on how to pass billing address information to Elements if you collect it in your form.

    <script src="https://js.stripe.com/v3/"></script>
    <form>
      <label>
        <span>Name</span>
        <input name="cardholder-name" class="field" placeholder="Jane Doe" />
      </label>
      <label>
        <span>Phone</span>
        <input class="field" placeholder="(123) 456-7890" type="tel" />
      </label>
      <label>
        <span>ZIP code</span>
        <input name="address-zip" class="field" placeholder="94110" />
      </label>
      <label>
        <span>Card</span>
        <div id="card-element" class="field"></div>
      </label>
      <button type="submit">Pay $25</button>
      <div class="outcome">
        <div class="error" role="alert"></div>
        <div class="success">
          Success! Your Stripe token is <span class="token"></span>
        </div>
      </div>
    </form>
    * {
      font-family: "Helvetica Neue", Helvetica, sans-serif;
      font-size: 15px;
      font-variant: normal;
      padding: 0;
      margin: 0;
    }
    
    html {
      height: 100%;
    }
    
    body {
      background: #F6F9FC;
      display: flex;
      align-items: center;
      min-height: 100%;
    }
    
    form {
      width: 480px;
      margin: 20px auto;
    }
    
    label {
      position: relative;
      color: #6A7C94;
      font-weight: 400;
      height: 48px;
      line-height: 48px;
    See all 117 lines margin-bottom: 10px; display: block; } label > span { float: left; } .field { background: white; box-sizing: border-box; font-weight: 400; border: 1px solid #CFD7DF; border-radius: 24px; color: #32315E; outline: none; height: 48px; line-height: 48px; padding: 0 20px; cursor: text; width: 76%; float: right; } .field::-webkit-input-placeholder { color: #CFD7DF; } .field::-moz-placeholder { color: #CFD7DF; } .field:-ms-input-placeholder { color: #CFD7DF; } .field:focus, .field.StripeElement--focus { border-color: #F99A52; } button { float: left; display: block; background-image: linear-gradient(-180deg, #F8B563 0%, #F99A52 100%); box-shadow: 0 1px 2px 0 rgba(0,0,0,0.10), inset 0 -1px 0 0 #E57C45; color: white; border-radius: 24px; border: 0; margin-top: 20px; font-size: 17px; font-weight: 500; width: 100%; height: 48px; line-height: 48px; outline: none; } button:focus { background: #EF8C41; } button:active { background: #E17422; } .outcome { float: left; width: 100%; padding-top: 8px; min-height: 20px; text-align: center; } .success, .error { display: none; font-size: 13px; } .success.visible, .error.visible { display: inline; } .error { color: #E4584C; } .success { color: #F8B563; } .success .token { font-weight: 500; font-size: 13px; }
    var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
     var elements = stripe.elements();
    
    var card = elements.create('card', {
      hidePostalCode: true,
      style: {
        base: {
          iconColor: '#F99A52',
          color: '#32315E',
          lineHeight: '48px',
          fontWeight: 400,
          fontFamily: '"Helvetica Neue", "Helvetica", sans-serif',
          fontSize: '15px',
    
          '::placeholder': {
            color: '#CFD7DF',
          }
        },
      }
    });
    card.mount('#card-element');
    
    function setOutcome(result) {
      var successElement = document.querySelector('.success');
      var errorElement = document.querySelector('.error');
      successElement.classList.remove('visible');
      errorElement.classList.remove('visible');
    
      if (result.token) {
        // Use the token to create a charge or a customer
    See all 52 lines // https://stripe.com/docs/charges successElement.querySelector('.token').textContent = result.token.id; successElement.classList.add('visible'); } else if (result.error) { errorElement.textContent = result.error.message; errorElement.classList.add('visible'); } } card.on('change', function(event) { setOutcome(event); }); document.querySelector('form').addEventListener('submit', function(e) { e.preventDefault(); var form = document.querySelector('form'); var extraDetails = { name: form.querySelector('input[name=cardholder-name]').value, address_zip: form.querySelector('input[name=address-zip]').value }; stripe.createToken(card, extraDetails).then(setOutcome); });