My Checkout (SPLIT)

Stripe.js v3 Checkout Form

HTML

<script src="https://edge-js.stripe.com/v3/"></script>
<body>
  <h1>
    My Checkout
  </h1>
  <form id="checkout">
    <label>
      Card details
      <div id="card-number-field" class="Field"></div>
      <div id="card-exp-field" class="Field"></div>
      <div id="card-cvc-field" class="Field"></div>
      <div id="card-zip-field" class="Field"></div>
    </label>
    <label>
      Your email (for receipt)
      <input type="email" class="Field" placeholder="[email protected]" />
    </label>
    <button type="submit">Submit</button>
  </form>
</body>

CSS

.Field {
  display: block;
  padding: 0 10px;
  background-color: black;
  width: 360px;
  border-radius: 4px;
  margin: 5px;
  font-size: 18px;
  line-height: 2em;
  color: white;
  -webkit-font-smoothing: antialiased;
  border: 0;
}

input:focus {
  outline: none;
}

.StripeElement--webkit-autofill {
  background-color: pink !important;
}

JavaScript

const stripe = Stripe('pk_test_xxx');
const elements = stripe.elements({locale: 'auto'});

const options = {
  iconStyle: 'solid',
  style: {
  	base: {
      iconColor: 'white',
      fontSmoothing: 'antialiased',
    	color: 'white',
      fontSize: '18px',
      lineHeight: '2em',
      ':-webkit-autofill': {
      	color: 'yellow'
      }
    }
  }
}

const cardNumber = elements.create('cardNumber', options);
const cardExpiry = elements.create('cardExpiry', options);
const cardCvc = elements.create('cardCvc', options);
const postalCode = elements.create('postalCode', options);

cardNumber.mount('#card-number-field');
cardExpiry.mount('#card-exp-field');
cardCvc.mount('#card-cvc-field');

window.setTimeout(() => {
	postalCode.mount('#card-zip-field');
}, 200);

document.querySelector('#checkout').addEventListener('submit', function(ev) {
  ev.preventDefault();
  stripe.createToken(cardNumber).then(function(payload) {
  	console.log(payload);
    document.querySelector('form').innerText = JSON.stringify(payload);
  });
});