saas-billing-ui-patterns

name	saas-billing-ui-patterns
description	Use when designing the in-product billing UI: current plan, payment method, invoices, upgrade flow. Covers transparency, the cancel flow, dunning, and the trust-building patterns.

Saas Billing Ui Patterns

In-product billing UI is where customers come when they want to leave. Make it transparent and frictionless — even when cancelling.

Current plan display

Show: tier name, monthly cost, next bill date, what's included, usage vs limits. Big and clear, not hidden.

Payment method

Show last 4 digits + brand. Easy 'Update card' button. Stripe Customer Portal handles this well.

Invoice history

Table of past invoices, downloadable PDFs, paid/unpaid status. Reachable in 2 clicks max.

Cancel flow

Self-serve cancel button. NO retention dark patterns ('Are you sure?' loops, downgrade-instead pressure). Acknowledge feedback briefly, confirm cancel, send confirmation email.

Dunning (failed payments)

Email + in-app banner. Don't disable access on first failure. Grace period 3-7 days. Make it easy to fix.

Common mistakes

Hiding cancel behind support email. Mandatory retention call. Multiple 'are you sure?' prompts. Downgrade pre-selected for the user. No invoice download.

Where this fits in X3 Compass

Applied in the X3 Compass build via the relevant pages and components.