How to listen for checkout form submission?

Design help Ecommerce
1

How can I listen for checkout form submission? I’m trying to use custom code to trigger something based on submit.

Here’s what I’ve learned after a lot of searching:

  • The checkout form is actually a bunch of different form elements – one for customer info, one for payment info, one for shipping, etc.
  • It has no submit button, i.e. an input where type="submit". I’m assuming this is so that the button that looks like a submit button can be used to progammtically trigger submission of all the individual form elements. But the Webflow JS file is so complicated I can’t really know for sure.
  • Listening for a submit event doesn’t work because submit events are only created when the user directly triggers submission, e.g. by clicking a submit button. When forms are submitted programatically, there’s no submit event, and I don’t know of any other event that I could listen for. (I could listen for a button click, but that wouldn’t work when a user clicks the button but the form doesn’t submit because of some error.)

Does anyone know what to do in this case? It was easy in the case of the Add to Cart button, before checkout. In that case, the button is a submit button so it’s easy to listen for when the user submits the form. The same approach isn’t working here.

Thanks!

2 Likes
2

Hello @liam !

I think I have the same need for the checkout form.
I would like to either listen for the input in the checkout form (customers’ infos for example) or split the checkout form between “Customers’ infos” and “payment infos”.

Can somebody help us ?

3

@Arthur_Samo The best I cam up with is:

  • Use custom Javascript that triggers when the confirmation page loads. This implicitly assumes that the customer won’t get to the confirmation page unless they successfully make a payment throught the checkout page (which may or may not be valid based on use case).
  • Use “shipping” to collect customer info that differs from payment info. You can change the titles on the checkout page so that it isn’t called shipping, and you can set the shipping to free so it won’t add charges. This is of course a workaround and not an ideal solution.

Hope that helps!