Stripe custom checkout - form validation

Question

I am trying to implement a Stripe custom checkout with a variable data amount based on what the user selects in the "isStudent" radio button. The page also includes a form that needs to be validated before it is submitted and I am having trouble with that.

I am using $("#myForm").checkValidity() to check the form. However, then the Stripe Pop-up does not show and the form is submitted. Without the form validity check the Stripe Checkout works.

Any suggestions would be greatly appreciated.

HTML form part:

<form id="myForm" action="assets/php/serverSideCode.php" method="POST">
    <input type="hidden" id="stripeToken" name="stripeToken" />
    <input type="hidden" id="stripeEmail" name="stripeEmail" />
    <input type="hidden" id="amountInCents" name="amountInCents" />

    <input  type="radio" name="isStudent"  value="FullTraining" checked> Full Registration: Symposium and Training ($490)</input> <br>
    <input  type="radio" name="isStudent"  value="Full"> Full Registration: Symposium only ($295) </input><br>  
    <input class="form-control input-lg" type="text" name="fname" id="fname" required />
</form>

JavaScipt part:

//Custom Checkout
var handler = StripeCheckout.configure({
  key: 'pk_test_IVOG4db1mAIbNQlPEJgFyeKp',
  image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
  token: function(token) {
    $("#stripeToken").val(token.id);
    $("#stripeEmail").val(token.email);
    $("#amountInCents").val(Math.floor(parseFloat( $("#priceSpan").text() ) * 100));
    $("#myForm").submit();
  }
});



$('#customButton').on('click', function(e) {   
  // Form is invalid!
  if (! $("#myForm").checkValidity()) {
    // do nothing and prompt the user to fill out the name field
    e.preventDefault();  
  } else {
    // Form is valid, show stripe pop up
  var amountInCents = Math.floor(parseFloat($("#priceSpan").text()) * 100);
  var displayAmount = parseFloat(Math.floor(parseFloat($("#priceSpan").text()) * 100) / 100).toFixed(2);

  // Open Checkout with further options
  handler.open({
    name: 'Some Name',
    description: 'Registration ($' + displayAmount + ')',
    amount: amountInCents,
  });
  e.preventDefault(); 
}
});

// Close Checkout on page navigation
$(window).on('popstate', function() {
  handler.close();
});

Answer 1

So outside of the form validation, you can implement a Checkout w/ multiple configurations like this: http://jsfiddle.net/ns2fezag/

Effectively, for every different variant you have, you'd have your own custom handler.open() call.

$('#buyPants').on('click', function(e) {
  $("#product").val("pants");
  openCheckout("Buy pants for $50", 5000);
  e.preventDefault();
});

I will say though, I would recommend avoiding passing the amount to your back-end. Since the front-end is in Javascript, the amount can easily be changed from a web inspector. So a malicious user could alter the amount (eg. from $100.00 to $0.50) prior to the call being made to your back-end that would allow them to undermine your payment form. Instead, I'd recommend passing back a product name/id instead, that maps to the appropriate amount on your backend.