My Checkout (RTL)

Stripe.js v3 Checkout Form

HTML

<script src="https://js.stripe.com/v3/"></script>
<body dir="rtl">
  <h1>
    טופס 😎 שלי
  </h1>
  <form id="checkout">
    <label>
      מספר כרטיס
      <span id="card-field" class="Field"></span>
    </label>
    
    <label>
      דוא"ל קבלה
      <input type="email" name="email" placeholder="[email protected]"/>
    </label>
    <button>
      💸
    </button>
  </form>
  <pre dir="ltr" id="result">
  </pre>
</body>

CSS

body, html {
  font-family: 'Helvetica Neue';
}

input, .Field {
  box-sizing: border-box;
  display: block;
  padding: 0 10px;
  background-color: white;
  width: 360px;
  border-radius: 4px;
  margin: 5px 0;
  font-size: 18px;
  line-height: 2em;
  color: black;
  -webkit-font-smoothing: antialiased;
  border: 2px solid #cfd7df;
}

input:focus {
  outline: none;
}


.StripeElement--focus, input:focus {
  border-color: #9cdbff
}

.StripeElement--invalid {
  border-color: #9e2146;
}

button {
  background-color: #3297d3;
  border-radius: 3px;
  border: 0;
  color: white;
  cursor: pointer;
  font-size: 18px;
  padding: 4px 10px;
}
button:hover {
  background-color: #217ab7;
}

JavaScript

const stripe = Stripe('pk_test_BTeJuvjLRFQ6f3eexPvoNwhm');
const elements = stripe.elements({locale: 'he'});

const card = elements.create('card', {
  style: {
  	base: {
      fontSmoothing: 'antialiased',
    	color: 'black',
      fontSize: '18px',
      lineHeight: '2em',
    },
    invalid: {
    	color: '#9e2146',
    }
  }
});
card.mount('#card-field');

document.querySelector('form').addEventListener('submit', (e) => {
	e.preventDefault();
  
  stripe.createToken(card, {name: 'Michelle Bu', email: '[email protected]', address_line1: 'Hello', address_line2: 'World', address_city: 'Oakland', address_state: 'CA', address_country: 'US'}).then(function(token) {
  	document.getElementById('result').innerText = JSON.stringify(token, null, '  ');
  });
})