My Checkout

Stripe.js v3 Checkout Form

HTML

<script src="https://js.stripe.com/v3/"></script>
<body>
  <h1>
    My Checkout
  </h1>
  <form id="checkout">
    <label>
      Card details
      <span id="card-field" class="Field"></span>
    </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 stripe = Stripe('pk_test_xxx');
const elements = stripe.elements();

const card = elements.create('card', {
  iconStyle: 'solid',
  style: {
  	base: {
      iconColor: 'white',
      fontSmoothing: 'antialiased',
    	color: 'white',
      fontSize: '18px',
      lineHeight: '2em',
      ':-webkit-autofill': {
      	color: 'black'
      }
    }
  }
});
card.mount('#card-field');

card.on('submit', function() {
  stripe.createToken(card).then(function(token) {
  	console.log(token);
  });
});

stripe.retrieveSource('dfsdf');