Payment Processing - animate button/page

Advanced Development
1

I have a Payment Processing Form to subscribe to Secure Zone. Upon review, I definitely need to animate the Payment Form on Submit (animate the page or button) to let the site visitor know the payment is processing. On submit takes quite a while for the Stripe payment to process, and there’s no indication that anything is happening. This site is for stroke survivors/caregivers, I need it to be as user-friendly as possible.

I’m fairly close (I think). I’m trying to animate the Submit button with “Payment Processing” with a loading icon. I almost have it working on a test page - See test page with 1 field (below)

BUT… if you click Submit Now before you fill in all the fields, it will change the button to the Loading icon with “Payment Processing” AND jump you to the incomplete required fields on form validation. Unfortunately I need it to validate all fields first, then if all are good, trigger the animated button. I sort of understand javascript. I’m trying to use MDB spinner + javascript, but I have no idea how to initiate it AFTER the form has validated. Is this even possible? Looking for a quick solution, as the form is live.

TEST FORM: https://unitedstrokealliance.org/_test5
ACTUAL FORM: https://unitedstrokealliance.org/subscribe-now-what-videos

my script :

$(’#btn-one’).click(function() {
$(’#btn-one’).html(‘Payment Processing…’).addClass(‘disabled’);
});

2

Hi @craigwhitlock. You’d want to tap into the form validation and run your code only if valid.
Not sure if you can do that with the default HTML5 validation, but since you’re running on Bootstrap you could utilise the Bootstrap validation methods.
Here’s an example from the Bootstrap docs that adds classes for styling based on validation condition, so you might be able to add your code in to this:
https://getbootstrap.com/docs/4.5/components/forms/?#custom-styles

3

Thank you @Adam.Wilson, appreciate the help and direction, always! I got it working, for the most part.

With your direction + a little stackoverflow research, I changed script to “hook to the submit event of the form instead of the click of the button.” The form only submits if fields are valid.

Almost everything gets validated prior to Submit (unfortunately the Stripe Payment fields don’t). But at least it validates all other input fields. I had to remove the ‘disabled’ part to prevent the button from disabling, which still allows user to enter CC payment fields after the fact, if missed Stripe fields.

StackOverflow reference

Final Form

Final button:
<button type="submit" value="Submit" id="btn-one" class="btn btn-primary">Submit Payment</button>

Final script:
$(“form”).submit(function() {
$(’#btn-one’).html(‘Payment Processing…’);
});

2 Likes