Checkout, Billing and Failed Payment UX
Billing screens touch money, so every unclear moment becomes a support ticket or a lost customer. Failed payments in particular cause churn that has nothing to do with whether customers like the product.
What makes good SaaS billing UX?
Good SaaS billing UX shows the plan, price, taxes and next billing date before charging, uses a short card form that supports autofill, explains plan changes and proration in plain words, keeps invoices easy to find, and treats failed payments as a recovery flow rather than a lockout.
What should the card form look like?
Keep card entry short: one card number field, expiry, security code, name and billing country or postcode where needed. Use autocomplete values such as cc-number and cc-name, accept spaces, and validate as the user types. Google’s guidance advises against splitting the card number into parts, because it breaks autofill and validation (web.dev payment form best practices).
$29 per month, billed monthly. Cancel anytime from Settings.
Team plan, prorated for 18 days: $17.40
Then $29.00 on November 1
Using your payment provider’s hosted or embedded fields keeps card data off your servers. Saying so in plain words, as above, reassures careful buyers.
How should failed payments be handled?
Treat a failed payment as a fixable problem. Retry automatically over several days, email the billing contact with a direct link to update the card, show a banner in the app to admins, and give a grace period before limiting access. Say exactly what will happen and when.
Show the banner only to people who can fix it, usually admins and billing contacts. Telling every user that payment failed embarrasses the customer and fixes nothing.
How should plan changes and invoices work?
For upgrades, downgrades and seat changes, show the price difference, when it applies and any credit before confirming. Keep invoices in one billing page with downloadable PDFs, company details and tax information editable by admins. Being clear about recurring charges is also a legal point in the U.S.: online subscription sellers must disclose material terms, get express informed consent and provide simple ways to stop recurring charges (15 U.S.C. § 8403).
Failed payments are a UX problem.
Customers who want to stay leave because a card expired and nobody told them clearly how to fix it. Design that flow like a feature.
Frequently asked questions
What should a SaaS checkout page show?
The plan, price, taxes, any proration and the next billing date, before charging.
Should the card number be split into fields?
No. One field supports autofill and validation better.
How should SaaS products handle failed payments?
Retry automatically, email the billing contact, show admins a banner, and give a grace period before limiting access.
Who should see failed payment warnings?
Admins and billing contacts, not every user.
How should plan changes be explained?
Show the price difference, when it applies and any credit before confirming.
What does U.S. law require for online subscriptions?
Under 15 U.S.C. § 8403, clear disclosure of material terms, express informed consent and simple ways to stop recurring charges.
Sources & further reading
Standards and platform rules change. These sources let you verify the current requirements directly. All screens shown are mock-ups of fictional products.