Ran into another interesting issue with a fairly customized WooCommerce checkout process.
Apparently, the official Stripe extension has its own built-in validation or something along these lines. If there are any fields with the class “validate-required” that are empty and you somehow manage to bypass WooCommerce’s own default javascript validator (by hiding those fields, for example), you will still get an error from Stripe extension: “Please make sure your card details have been entered correctly and that your browser supports JavaScript. Developers: Please make sure that you are including jQuery and there are no JavaScript errors on the page.” This is unfortunately not very informative.
In my case, I had some fields that were conditionally shown/hidden depending on the user’s previous choices. On checkout page load, all those fields were marked “required” in my backend using “woocommerce_checkout_fields” filter as usual. On form submit, in the same filter I would set them required or not required based on the user’s choices. This would work fine with WooCommerce, as their JS validator does not validate hidden fields. However, Stripe Checkout seems to validate them.
Based on some limited testing, this is the behavior of the extension:
- Run WooCommerce default javascript validator. If any errors, do not submit the form to WooCommerce.
- Run its own validator to check if any “validate-required” fields are empty. If yes, do not submit the form and show uninformative error message.
- Submit card details to Stripe, if failure then do not submit the form.
- Finally submit form to WooCommerce, display any errors from backend validation.
- Authorize payment (I assume)
Note that backend validation is done only after getting a confirmation from Stripe.
Solution: if you have any conditional fields you would like to mark “required”, just add/remove the “validate-required” class dynamically when you show/hide your conditional fields.
4 Responses to “WooCommerce Stripe gateway, custom checkout with conditional fields and the dreadful “Please make sure your card details…” error message”
Javier
I have same error.
About the solution, where exactly I should apply it?
Indrek Kõnnussaar
Hey Javier,
The idea is that when you hide your conditional fields with javascript, you also remove any ‘validate-required’ classes they have. I’m not sure where exactly you should apply it – that depends on where your conditional field logic is.
Garrett
Indrek,
Thanks a lot for this write-up. I would also like to add that this can happen if a customer doesn’t have JS enabled in their browser. This also allows the class “validate-required” to get bypassed.
Sam
Hi Indrek,
I cam across this issue earlier today. The site had just been updated – WC, WP and plugin all at latest versions as of today. I searched high and low across the internet and everybody is still saying ‘it’s a conflict’ or ‘you’ve got your keys around the wrong way’.
Then I found your post – and it out me on the right lines…
Solution: in our site entering your Region is not required. But if the customer puts nothing in it – boom – they get the above error.
If they select a region – boom! – they can checkout with no errors.
Thanks so much.