Stripe Elements Examples

    To learn more about using Elements, refer to our Elements quickstart and reference documentation. If you need help after reading this, check out our answers to common questions or chat live with other developers in #stripe on freenode.

    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 full 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>
    <body>
      <form>
        <div class="group">
          <label>
            <span>Name</span>
            <input 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"></div>
          <div class="success">
            Success! Your Stripe token is <span class="token"></span>
          </div>
        </div>
      </form>
    </body>
    
    * {
      font-family: "Helvetica Neue", Helvetica;
      font-size: 15px;
      font-variant: normal;
      padding: 0;
      margin: 0;
    }
    
    html {
      height: 100%;
    }
    
    body {
      background: #E6EBF1;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    
    form {
      width: 480px;
      margin: 20px 0;
    }
    
    .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 124 lines margin-bottom: 20px; } label { position: relative; color: #8898AA; font-weight: 300; height: 40px; line-height: 40px; margin-left: 20px; display: flex; flex-direction: row; } .group label:not(:last-child) { border-bottom: 1px solid #F0F5FA; } label > span { width: 80px; text-align: right; margin-right: 30px; } .field { background: transparent; font-weight: 300; border: 0; color: #31325F; outline: none; flex: 1; padding-right: 10px; padding-left: 10px; cursor: text; } .field::-webkit-input-placeholder { color: #CFD7E0; } .field::-moz-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',
          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 46 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(); stripe.createToken(card).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>
    <body>
      <form>
        <label>
          <input 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</span></span>
        </label>
        <label>
          <div id="card-element" class="field is-empty"></div>
          <span><span>Card</span></span>
        </label>
        <button type="submit">Pay $25</button>
        <div class="outcome">
          <div class="error"></div>
          <div class="success">
            Success! Your Stripe token is <span class="token"></span>
          </div>
        </div>
      </form>
    </body>
    
    * {
      font-family: "Helvetica Neue", Helvetica;
      font-size: 19px;
      font-variant: normal;
      padding: 0;
      margin: 0;
    }
    
    html {
      height: 100%;
    }
    
    body {
      background: #424770;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    
    form {
      width: 480px;
      margin: 20px 0;
    }
    
    label {
      position: relative;
      color: #8798AB;
      display: block;
      margin-top: 30px;
    See all 147 lines margin-bottom: 20px; display: flex; flex-direction: column-reverse; } 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; } 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, label .field:not(.is-empty) + span { pointer-events: none; } 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; } .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',
          fontSize: '19px',
    
          '::placeholder': {
            color: '#8898AA',
          },
        },
        invalid: {
          iconColor: '#e85746',
          color: '#e85746',
        }
      },
      classes: {
        focus: 'is-focused',
        empty: 'is-empty',
      },
    });
    card.mount('#card-element');
    
    See all 72 lines var inputs = Array.from(document.querySelectorAll('input.field')); inputs.forEach(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(); stripe.createToken(card).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 uses a custom web font, Open Sans.

    <script src="https://js.stripe.com/v3/"></script>
    <body>
      <form>
        <label>
          <span>Name</span>
          <input class="field" placeholder="Jane Doe" />
        </label>
        <label>
          <span>Phone</span>
          <input class="field" placeholder="(123) 456-7890" type="tel" />
        </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"></div>
          <div class="success">
            Success! Your Stripe token is <span class="token"></span>
          </div>
        </div>
      </form>
    </body>
    
    @font-face {
      font-family: 'Open Sans';
      font-weight: 400;
      src: local("Open Sans"), local("OpenSans"), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format("woff2");
      unicodeRange: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
    }
    
    * {
      font-family: "Open Sans", "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;
      justify-content: center;
      min-height: 100%;
    }
    
    form {
      width: 480px;
      margin: 20px 0;
    See all 124 lines } label { position: relative; color: #6A7C94; font-weight: 400; height: 48px; line-height: 48px; margin-bottom: 10px; display: flex; flex-direction: row; } label > span { width: 115px; } .field { background: white; box-sizing: border-box; font-weight: 400; border: 1px solid #CFD7DF; border-radius: 24px; color: #32315E; outline: none; flex: 1; height: 48px; line-height: 48px; padding: 0 20px; cursor: text; } .field::-webkit-input-placeholder { color: #CFD7DF; } .field::-moz-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({
      fonts: [
        {
          family: 'Open Sans',
          weight: 400,
          src: 'local("Open Sans"), local("OpenSans"), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format("woff2")',
          unicodeRange: 'U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215',
        },
      ]
    });
    
    var card = elements.create('card', {
      style: {
        base: {
          iconColor: '#F99A52',
          color: '#32315E',
          lineHeight: '48px',
          fontWeight: 400,
          fontFamily: '"Open Sans", "Helvetica Neue", "Helvetica", sans-serif',
          fontSize: '15px',
    
          '::placeholder': {
            color: '#CFD7DF',
          }
        },
      }
    });
    card.mount('#card-element');
    
    See all 55 lines 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(); stripe.createToken(card).then(setOutcome); });