Ran into another interesting issue with a fairly customized WooCommerce checkout process.
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 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”
I have same error.
About the solution, where exactly I should apply it?
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.
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.