Page not redirecting to stripe checkout after it passed form validation

Question

I am using HTML 5 required attribute for form validation. Now what I want is that if the form has passed the HTML 5 validation, it should take the user to the stripe checkout (I deliberately xxx out info in the code below for SO question).

Now if the form has not passed validation, the submit doesn't process, which is good. But after I complete the form and submit the form, it does not take me to the stripe checkout page, it just refreshes the page. What am I doing wrong?

<form id="tcform">

<p><b>Quantity:</b> 1</p>
<b class="price">Price:</b> <s>£xx</s> <span style="color: red;">£xx</span>
<button class="btn btn-default buynow" id="checkout-button-sku_xxx" role="link">
     Buy Now
    </button>
    <p>
    <i style="font-size:small">Limited time offer</i>
    </p>

  <p class="tcparagraph">
  <input id="field_terms" type="checkbox" required name="terms"> I accept the <u><a href="Terms" id="tclink">Terms and Conditions</a></u></p>

  <div id="error-message"></div>
  </form>

<script>
    (function() {

        var stripe = Stripe('pk_test_xxx');

        var checkoutButton = document.getElementById('checkout-button-sku_xxx');

        checkoutButton.addEventListener('click', function() {
            // When the customer clicks on the button, redirect
            // them to Checkout.

            const isFormValid = checkoutButton.form.checkValidity();

            if(isFormValid==true) {

            stripe.redirectToCheckout({
                    items: [{
                        sku: 'sku_xxx',
                        quantity: 1
                    }],

                    // Do not rely on the redirect to the successUrl for fulfilling
                    // purchases, customers may not always reach the success_url after
                    // a successful payment.
                    // Instead use one of the strategies described in
                    // https://stripe.com/docs/payments/checkout/fulfillment
                    successUrl: window.location.protocol + '//metis-online.com/courses/course-BRFAITC009-order-confirmation',
                    cancelUrl: window.location.protocol + '//metis-online.com/order-cancelled',
                })
                .then(function(result) {
                    if (result.error) {
                        // If `redirectToCheckout` fails due to a browser or network
                        // error, display the localized error message to your customer.
                        var displayError = document.getElementById('error-message');
                        displayError.textContent = result.error.message;
                    }
                });
            }

        });
    })();
</script>

Answer 1

You want to prevent the default behaviour of submiting the form. So do:

checkoutButton.addEventListener('click', function(event) {

...

if(isFormValid==true) {
    event.preventDefault();

References

• Prevent Default on Form Submit
• Event.preventDefault()