Money in the Bank

Card Errors with React Stripe Elements

This little piggy wants users to complete their checkout process. Photo by Fabian Blank on Unsplash.

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.

I recently converted one of my vanilla JavaScript apps to a React app. Luckily, Stripe built a nifty React integration with react-stripe-elements. It works pretty great out of the box! The one thing I was missing was showing user errors.

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:

“Oh no, I don’t understand what is wrong! Somebody help!”
“Whew, I just fat-fingered the card number. Now I can fix it.”

Improve your users’ experience by showing helpful, descriptive error messages

The base JavaScript card elements already have error text included — you can checkout a live demo here in the quick start guide. However, react-stripe-elements does not. And so my search began… on Google, StackOverflow, in the readme and Github issues, and so on. Maybe I’m just bad at Googling. After stumbling on a few hints, I worked it out. Now I’m sharing with the world to hopefully make some other poor, frustrated developer’s life easier.

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 event (e):

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 <CardElement />
  • Initialize the <CreditCardInput /> state with an empty errors property
  • Pass the errors to a styled errors<span>
  • Set an onChange handler 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.

Learn more!

Here are some great articles on user experience with forms and validations:

Photo by Sasha Nadelyaeva on Unsplash