My Checkout

Stripe.js v3 Checkout Form

HTML

<script src="https://js.stripe.com/v3/stripe-beta-e2b2c18.js"></script>
<body>
  <h1>
    My Checkout
  </h1>
  <form id="checkout">
    <label>
      Your name
      <input class="Field" placeholder="Michelle" />
    </label>
    <label>
      Card details
      <span id="card-field" class="Field"></span>
    </label>
    <label>
      Your favorite color
      <input class="Field" placeholder="Yellow" />
    </label>

  </form>
</body>

CSS

.Field {
  display: block;
  font-size: 30px;
  padding: 30px;
  width: 500px;
  border: 3px solid pink;
  border-radius: 10px;
  color: black;
  font-size: 14px;
}

.Field:focus, .Field.StripeElement--focus {
  outline: 0;
  background-color: white;
}

label {
  display: block;
  font-family: arial;
  margin-bottom: 15px;
}

::placeholder {
  color: #454545;
}
::-webkit-input-placeholder {
  color: #454545;
}
input:focus::placeholder {
  color: #ccc;
}
input:focus::-webkit-input-placeholder {
  color: #ccc;
}

JavaScript

const stripe = Stripe('pk_RXwtgk4Z5VR82S94vtwmam6P8qMXQ');
const elements = stripe.elements();

const card = elements.create('card', {
  iconColor: 'magenta',
  style: {
  	base: {
    	fontFamily: 'monospace',
    	color: 'black',
      placeholderColor: '#454545'
    },
    focus: {
    	placeholderColor: '#ccc'
    }
  }
});
card.mount('#card-field');

document.querySelector('form').addEventListener('submit', function(ev) {
  ev.preventDefault();
  stripe.createToken(card).then(function(result) {
  	console.log(result);
  });
});