JSFiddle - React, Tailwind, and code Playground

by Atty Eleti

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://js.stripe.com/v3/"></script>
<section>
  <h1>Stripe Elements + Bootstrap</h1>
  <p>This is a basic example of using bootstrap with Stripe Elements.</p>
  <form id="form">
    <div class="form-group">
      <label for="email">Email address</label>
      <input type="email" class="form-control" id="email" placeholder="[email protected]">
    </div>
    <div class="form-group">
      <label for="street-address">Street Address</label>
      <input type="text" class="form-control" id="street-address" placeholder="123 Main St">
    </div>
    <div class="form-group">
      <label for="card-element">Credit card or debit card</label>
      <span id="card-element" class="form-control"></span>
    </div>
    <button id="clear-postal" class="btn btn-default">
      Clear Postal Code
    </button>
    <button class="btn btn-primary">Submit</button>
  </form>
</section>
<section>
  <h3>Change events and tokenization result</h3>
  <pre id="result"></pre>
</section>

CSS

body {
  padding: 20px;
}

.StripeElement--focus.StripeElement--invalid {
  box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px inset, rgb(206, 132, 131) 0px 0px 6px;
  border-color: rgb(132, 53, 52);
}
.StripeElement--focus {
  border-color: #66afe9;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}

JavaScript

var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
var elements = stripe.elements();
var container = document.querySelector('#card-element');
var streetAddress = document.querySelector('#street-address');
var card = elements.create('card', {
  style: {
    base: {
      fontSize: '14px',
      lineHeight: '20px',
      color: '#555',
      '::placeholder': {
        color: '#909090',
      }
    },
    invalid: {
      iconColor: 'rgb(132, 53, 52)',
      color: '#555',
    }
  },
});
var out = document.getElementById('result');
card.mount(container);

function handleResult(value) {
  out.textContent = JSON.stringify(value, null, 2);
  if (value.error) {
    container.parentNode.classList.add('has-error');
    out.classList.add('bg-danger');
  } else {
    container.parentNode.classList.remove('has-error');
    out.classList.remove('bg-danger');
  }
}

card.on('change', handleResult);

document.getElementById('form').addEventListener('submit', function(e) {
  e.preventDefault();
  stripe.createToken(card, {
    address_line1: streetAddress.value,
  }).then(handleResult);
});

document.getElementById('clear-postal').addEventListener('click', function(e) {
	e.preventDefault();
  card.update({ value: { postalCode: '' }});
});