Submitting a Form on Successful Stripe Checkout
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I have 2 forms that I want to send at the same time. Ideally, the Formspree form would send on the success of Stripe's checkout process (the green checkbox, I suppose) but don't know how to make this happen.

Working from my last post, form 1 populates the data-email attribute in Stripe's form. You'll notice in my code, https://jsfiddle.net/code4ever/2ynq923q/, that the submit button of the first form is disabled. This is because during testing I didn't want to accidentally fire off the form's submission; I don't want it to send until after Stripe's process is complete.

How can I accomplish this? Thanks in advance!

awarded to Titus

Crowdsource coding tasks.

1 Solution

Winning solution
Tipped

Hi, is me again. I've provided a solution to your previous bounty.

I've took a look at Stripe's documentation and they seem to provide a custom implementation for the checkout form.
This custom implementation has a callback that gets called when the checkout process was completed successfully.
I've created a solution that makes use of this callback, the basic idea is to prevent FormSpree form's submission when its submit button is pressed and show the Stripe checkout form, when Stripe callback is called, manually submit the FormSpree form.

Here is a working fiddler:
https://jsfiddle.net/9zfkz885/14/

Hi Titus. Sorry to come in but I was working on similar code then came across yours. I tested the code and only at the first submission I was shown the stripe form - for subsequent clicks, the capcha form of Formspree is preventing the stripe form from being shown. Maybe what I am seeing is not the right behaviour? Thanks
avtaylor 3 months ago
@avtaylor I'm not sure what you mean. There is no interaction with Formspree until the Stripe checkout form is completed successfully so I can't see any way in which Formspree's captcha will prevent the Stripe checkout form.
Titus 3 months ago
@Titus I saved your code on the local host. The first time I clicked the stripe test form appeared, then I was taken to the Formspree message to confirm my email address - which I did. Then the second time I click on the button I can see that Stripe.js is trying to load but then I get a recapcha form from Formspree to check for spam and so Stripe form does not load up.
avtaylor 3 months ago
@avtaylor In my example, the Formspree form's submission is prevented e.preventDefault() which means that there is no interaction with Formspree (no page of this domain are loaded) so there can't be any reason for a captcha check from this domain. My best guess is that an error occurs in your code before the e.preventDefault() statement so the form's submission is not prevented.
Titus 3 months ago
@Titus Yes you are very right!!! Thank you for taking the time to respond. I should have looked in the console and not to trust my code so much :) Thank you for the code :)
avtaylor 3 months ago
@avtaylor Actually, since you've completed the Stripe form successfully once, the checkout may be processed automatically and Stripe's token callback is called directly.
Titus 3 months ago
@Titus, hey again, and thank you for the solution!
sharper 3 months ago
@sharper I'm glad I could help. Good luck.
Titus 3 months ago
Hey again @Titus, I noticed one thing and wondered if you’d be interested in helping me with a follow up for another tip? The form receives data great but for some reason was sending the user to https://formspree.io/[theirenteredemail@mail.com] as if they were setting up their own Formspree form and not to the https://example.com/thankyou.html page. I commented out $("#formSpreeElm").attr("action", "https://formspree.io/" + $('[name="Customer Email"]').val()); which caused it to send them to the correct page + I receive the form data correctly. However, if I add/update the email address and press enter, the Formspree form submits before the Stripe checkout is finished, and sends the user to the example thank you page. How can I disable that first form until Stripe checkout finish--
sharper 3 months ago
-- without sending the users to that setup page? Thank you.
sharper 3 months ago
@sharper This should do it: https://jsfiddle.net/yf7hwcm6/
Titus 3 months ago
Looks great. Thanks!
sharper 3 months ago
@sharper Great. I'm glad I got it right this time.
Titus 3 months ago
Sorry, I don't mean to keep bugging you. This is on me, as I keep finding additions. If you'd like I can ask a new question. With that latest fiddle, it worked in that it didn't send prematurely—that's perfect. I tested the rest of the form later and realized that the Stripe form seemed to complete but would reopen/the page wouldn't submit the forms.
sharper 3 months ago
@sharper Sorry about that, I haven't tested the last version and it seems that since I've changed it to listen for the form submit event, it prevents the form from submitting even when that is done manually. I've fixed that problem in this version https://jsfiddle.net/7680kssx/ Let me know if you notice any other problems.
Titus 3 months ago
Not at all, I should've checked the first time! That looks right. Okay, I will do. Thanks!
sharper 3 months ago