Stripe Api

Using stripe api v3 with multiple elements

by cormip

HTML

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

<form id="payment-form">
  <label>
    <div id="card-number" class="field is-empty"></div>
    <span><span>Credit Card Number</span></span>
  </label>
  
  <label>
    <div id="card-exp" class="field is-empty"></div>
    <span><span>Expiration Date (mm / yy)</span></span>
  </label>
  
  <label>
    <div id="card-cvc" class="field is-empty"></div>
    <span><span>CVC</span></span>
  </label>
  
  <label>
    <div id="card-post" class="field is-empty"></div>
    <span><span>Postal Code</span></span>
  </label>
  
  <div id="card-errors" role="alert"></div>
  <button type="submit">Pay $25</button>
</form>

CSS

label {
  height: 35px;
  position: relative;
  color: #8798AB;
  display: block;
  margin-top: 30px;
  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;
}

JavaScript

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

var styles = {
  style: {
    base: {
      lineHeight: '36px',
      fontWeight: 300,
      fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
      fontSize: '19px',

      '::placeholder': {
        color: 'transparent',
      },
    },
    invalid: {
      color: '#e85746',
    }
  },
  classes: {
    focus: 'is-focused',
    empty: 'is-empty',
  },
}

function createElement(stripeElement, id) {
  // Create an instance of the card Element
  var variable = elements.create(stripeElement, styles)

  // Add an instance of the card Element into the page
  variable.mount(id)

  // Handle real-time validation errors from the card Element
  variable.addEventListener('change', function(event) {
    var displayError = document.getElementById('card-errors')
    if (event.error) {
      displayError.textContent = event.error.message
    } else {
      displayError.textContent = ''
    }
  })

  return variable
}

var cardNumber = createElement('cardNumber', '#card-number')
createElement('cardCvc', '#card-cvc')
createElement('cardExpiry', '#card-exp')
createElement('postalCode', '#card-post')

var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
  event.preventDefault();

  stripe.createToken(cardNumber).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
      alert('Your Token: ' + result.token.id)
    }
  });
});