Money in the Bank
Card Errors with React Stripe Elements
Do you React? Do you Stripe? Do you just use the sample code in react-stripe-elements without adding visible errors for your users? I’ll show you how to stop punishing your users and increase your form conversions.
One of the most important, and often unloved parts of form design, is error handling. It’s human nature to make mistakes though, and your form probably isn’t exempt to human error.
— Nick Babich, Editor-in-chief of UX Planet
Not giving feedback is a surefire way to lose customers in your checkout flow:
Improve your users’ experience by showing helpful, descriptive error messages
At a high level, we need to add an
onChange function to our
<CardElement/>, in order to hook into the core
element.on(event, handler) behavior (element.on documentation). The change
event itself will contain an
error object that you can then read and process into user feedback. Here is the output of a sample
Now that we understand that structure, it’s straightforward to drop in the error message as an
span with error styling. I have a fully working code sample below (minus styling). To summarize the process:
- Create a
<CreditCardInput />wrapper for the react-stripe-elements
- Initialize the
<CreditCardInput />state with an empty errors property
- Pass the errors to a styled errors
- Set an
onChangehandler on the
<CardElement />that updates the error in state
Voilà! Visible, instructive feedback to our users when things go wrong. Don’t leave them stuck in the checkout cart!
Do you have another solution that works? Please share in the comments! Also, check out some resources below to learn more about user experience with forms and validations.
Here are some great articles on user experience with forms and validations:
- Designing More Efficient Forms: Assistance and Validation by Nick Babich
- Forms Need Validation by Andrew Coyle
- 10 Best Practices for Designing User-Friendly Forms by Eleonora Ibragimova
- Form validation best practices by Andrew Burton