My Checkout (SPLIT)

Stripe.js v3 Checkout Form

by Michelle Bu

HTML

<script src="https://edge-js.stripe.com/v3/"></script>
<script>
	window.stripe = Stripe('pk_test_XakUmadAhww1gsag7dfdmnD9');
</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-zip-field" class="Field"></div>
    </label>

  </form>
</body>

CSS

.Field {
  display: block;
  padding: 0 10px;
  background-color: black;
  width: 360px;
  border-radius: 4px
}

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

JavaScript

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');

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

document.querySelector('#checkout').addEventListener('submit', function() {
  stripe.createToken(cardNumber).then(function(token) {
  	console.log(token);
  });
});