Elements + `required` inputs

by Atty Eleti

HTML

<html>
  <head>
    <title>Test</title>
    <script src="https://atty.ngrok.io/fingerprinted/js/stripe.bundle.js"></script>
  </head>

  <body>
    <form id="form1">
      <div class="form-field">
        <input type="text" placeholder="Card number" />
      </div>
      <div class="form-field">
        <input type="checkbox" required> I agree to terms and conditions.
      </div>
      <button type="submit">
        Submit
      </button>
    </form>
    
    <hr/>

    <form id="form2">
      <div id="card-element"></div>
      <div class="form-field">
        <input type="checkbox" required> I agree to terms and conditions.
      </div>
      <button type="submit">
        Submit
      </button>
    </form>
  </body>

</html>

CSS

.form-field,
button {
  display: block;
}

JavaScript

const stripe = Stripe("pk_test");
const elements = stripe.elements();
const card = elements.create('card');
card.mount('#card-element');

const form1 = document.getElementById('form1');
const form2 = document.getElementById('form2');

form1.addEventListener('submit', (e) => {
	e.preventDefault();
	alert('form1 submit');
});
form2.addEventListener('submit', (e) => {
	e.preventDefault();
	alert('form2 submit');
});