Checkout & payments
A price without context is just a number — show the savings to make it a deal
A bare price with no context gives users nothing to compare. Show savings badges, crossed-out prices, and annual totals so the value is obvious at a glance.
When a pricing card shows a bare number — “$23/month” with an annual toggle — users have no immediate sense of what they’re saving by choosing the longer commitment. The discount exists, but the value isn’t visible. Users who have to calculate the savings themselves rarely do — they either pick the monthly plan or leave the page undecided.
A stronger approach is to show the savings directly in the pricing UI. Display the original price with a strikethrough next to the discounted price, add a savings badge (“Save 20% · $72/year”), and include the billing frequency (“per month, billed annually”) so users understand exactly what they’re paying and what they’re getting. Every element should be visible at a glance, not hidden behind a toggle.
Place the savings badge near the price so it’s seen in the same visual scan. Show the crossed-out original price next to the new one to anchor the comparison. State the billing terms clearly — “per month, billed annually” is more transparent than just “$23/month” with a toggled annual switch. Use color or weight on the savings badge to draw attention without overwhelming the card.
Making plan savings visible can shift the user’s framing from “how much does this cost?” to “how much am I saving?” That reframe often increases the rate at which users choose annual plans, because the value is obvious rather than hidden.
Show the savings badge only on the annual option — that's where the discount applies. The monthly price serves as the baseline reference. Showing savings on both would be confusing and undermine the comparison.
Show savings on every tier when the annual toggle is active. Users comparing plans should see the discount on whichever plan they're evaluating, not just the recommended one.
Even a small discount is worth showing if it's real. 'Save 10%' is still a concrete benefit. If the discount is negligible (under 5%), consider whether offering a larger discount would be more effective than showing a token one.
Show the monthly equivalent as the primary price ('$23/month') with 'billed annually' as the qualifier. Most users compare prices on a monthly basis. Show the total annual cost in the savings badge or billing details for full transparency.
