Stripe - Error States
We analyzed 8 examples of how Stripe handles error states across their product, spanning 3 different approaches: inline validation, in-context error, banner notification.
Inline Validation
Stripe — Stripe Checkout / payment form
Stripe Checkout page for a subscription to Case Study Club at US$12.00/month. A card decline error is shown below the card number field after submitting a test card number.
Stripe — Stripe Checkout / payment form
Stripe Checkout page for a subscription to 'myproduct' at US$15.00/month in test mode. A card decline error for insufficient funds is shown below the card number field.
Stripe — Dashboard / Product catalogue / Add a product modal
Stripe Dashboard 'Add a product' modal in sandbox mode showing a required field validation error on the Name field when attempting to add a product without a name.
In-Context Errors
Stripe — Dashboard / Product catalogue / product detail
Stripe Dashboard Product catalogue page showing a not-found error when attempting to view a product with an invalid ID (prod_TcvVpIIW2dy7Qm).
Stripe — Dashboard / Product catalogue / Features tab
Stripe Dashboard Product catalogue Features tab showing a content load failure with a warning icon and error message in the main content area.
Stripe — Dashboard / Product catalogue / All products tab
Stripe Dashboard Product catalogue All products tab showing a data load failure in the product list area with a warning icon, error message, and a Retry button.
Stripe — Dashboard / Product catalogue / Coupons tab
Stripe Dashboard Product catalogue Coupons tab showing a content load failure with a warning icon, error message, and a Retry link in the main content area.
Banner Notifications
Stripe — Dashboard / Product catalogue / Add a product modal
Stripe Dashboard 'Add a product' modal in sandbox mode showing a network fetch error at the top of the form. The form itself is still visible and partially filled in.