Translate: Payment view

Language selection view

by Eugene Trounev

HTML

<link rel="stylesheet" href="https://appcdn2.docsie.io/js/onboarding/current/css/main.css">
<script src="https://js.stripe.com/v3/"></script>
<div class="container">
  <div class="my-5 mb-4 text-left">
    <h2>
      Translate {book title}
    </h2>
  </div>
  <div class="row">
    <div class="col-md-6 order-md-1">
      <h4 class="mb-3">
        <span class="text-muted">Billing information</span>
      </h4>
      <div class="form-group mb-2">
        <label class="control-label">Ordering organization</label>
        <input class="form-control" value="Big Organization" disabled>
      </div>
      <div class="form-group mb-3">
        <label class="control-label">Order placed by</label>
        <input class="form-control" value="Jane Doe" disabled>
      </div>
      <div class="form-group mb-2">
        <label for="cc-name">Name on card</label>
        <input type="text" class="form-control" id="cc-name" name="cc-name" placeholder="Jane Doe" required>
        <small class="text-muted">Full name as displayed on card</small>
        <div class="invalid-feedback">
          Name on card is required
        </div>
      </div>
      <div class="form-group mb-2">
        <label for="cc-number">Credit card number</label>
        <div id="cc-number" class="form-control">
          <!-- Stripe Card Element -->
        </div>
        <div class="invalid-feedback" id="card-number-errors" role="alert">
        </div>
      </div>
      <div class="form-group mb-3">
        <div class="row">
          <div class="col-6 mb-2 pr-1">
            <label for="cc-expiration">Expiration</label>
            <div id="cc-expiration" class="form-control">
              <!-- Stripe Card Element -->
            </div>
            <div class="invalid-feedback" id="cc-expiration-errors" role="alert">
            </div>
          </div>
          <div class="col-6 mb-2">
            <label for="cc-cvv">CVV</label>
            <div id="cc-cvv" class="form-control">
              <!--...

JavaScript

var stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx');
var elements = stripe.elements();
// Try to match bootstrap 4 styling
var style = {
  base: {
    'lineHeight': '1.6',
    'fontSize': '1.1rem',
    'color': '#64748c',
    'fontFamily': 'Open Sans,Arimo,Droid Sans,Helvetica,Arial,sans-serif'
  }
};

// Card number
var card = elements.create('cardNumber', {
  'placeholder': '1234 5678 9876 5463',
  'style': style
});
card.mount('#cc-number');
card.on('change', ({
  error
}) => {
	const input = document.getElementById('cc-number');
  const displayError = document.getElementById('card-number-errors');
  if (error) {
		input.classList.add("is-invalid");
    displayError.textContent = error.message;
  } else {
    displayError.textContent = '';
		input.classList.remove("is-invalid");
  }
});

// CVC
var cvc = elements.create('cardCvc', {
  'placeholder': '1234',
  'style': style
});
cvc.mount('#cc-cvv');
cvc.on('change', ({
  error
}) => {
	const input = document.getElementById('cc-cvv');
  const displayError = document.getElementById('cc-cvv-errors');
  if (error) {
		input.classList.add("is-invalid");
    displayError.textContent = error.message;
  } else {
    displayError.textContent = '';
		input.classList.remove("is-invalid");
  }
});

// Card expiry
var exp = elements.create('cardExpiry', {
  'placeholder': '01 / 01',
  'style': style
});
exp.mount('#cc-expiration');
exp.on('change', ({
  error
}) => {
	const input = document.getElementById('cc-expiration');
  const displayError = document.getElementById('cc-expiration-errors');
  if (error) {
		input.classList.add("is-invalid");
    displayError.textContent = error.message;
  } else {
    displayError.textContent = '';
		input.classList.remove("is-invalid");
  }
});