By Mehdi HassanThe billing toggle is the smallest component on a pricing page and one of the easiest to get wrong. It decides which number a buyer sees first, how big the discount feels, and whether the first invoice matches what they expected. This guide covers the three decisions that matter: the default state, how to frame the discount, and the copy around the price.
How should a pricing page present monthly and annual billing?
A pricing page should present monthly and annual billing as one clear choice above the plan cards, with a default selected, the saving labelled on the annual option, and the billing frequency written under every price. The buyer should be able to answer 'what will I pay today, and how often?' without opening the FAQ.
The toggle is only one part of the page; our SaaS pricing page guide covers how the cards, table and FAQ work around it. The toggle's job is narrow: let buyers who want to commit see the better deal, without making buyers who want flexibility feel tricked.
Element | What to show | What goes wrong |
|---|---|---|
Toggle labels | 'Monthly' and 'Annual' (or 'Yearly') | Icons or unclear switches with no labels |
Saving label | '2 months free' or 'Save 20%', matching your real discount | A saving that doesn't match the maths |
Price display | Per-month equivalent plus 'billed annually' | Per-month price with no hint of a yearly charge |
Total for annual | '$1,152 billed yearly' under the price | Total hidden until checkout |
Scope | Every price on the page updates | Cards change but the table doesn't |
The figures in that table are copy examples, not recommendations: use your own discount and your own totals.
Should the billing toggle default to annual or monthly?
The billing toggle should default to the option that matches how most of your customers buy. If most customers already choose annual, defaulting to annual shows them the price they'll pay. If most choose monthly, defaulting to annual makes your prices look lower than what most buyers will be charged, and some will feel misled at checkout.
Pros
- Defaulting to annual shows the lowest per-month number first
- It nudges buyers who are on the fence toward a longer commitment
- Annual-first suits products with a long setup or onboarding period
- It matches how procurement teams usually budget
Cons
- Monthly buyers see a price they won't pay unless they switch
- A surprise at checkout erodes trust in the whole page
- Early-stage products often need the low commitment of monthly to get tried at all
- It can hide the real monthly price from buyers comparing alternatives
A useful test: if a buyer leaves the toggle on its default and clicks the recommended plan, does the checkout price match the card? If not, either change the default or make the billing frequency impossible to miss.
How should you frame the annual discount?
Frame the annual discount in the unit your buyers care about, and say it the same way everywhere. 'Two months free', 'Save 20%' and 'Save $240 a year' can describe similar deals, but they land differently.
- Months free is easy to picture and works well for smaller, self-serve plans.
- A percentage is compact and works when the discount is the same across plans.
- A money amount is most concrete, but changes per plan, so show it on each card rather than on the toggle.
- No discount is a valid choice if you don't need annual commitments. Don't add a toggle just because competitors have one.
For example: working out the honest label
For example, suppose a plan costs $120 per month on monthly billing and $1,200 per year on annual billing. Twelve monthly payments would be $1,440, so the annual plan saves $240, which is exactly two months free and about 16.7%. Honest labels are '2 months free', 'Save $240 a year' or 'Save over 16%'. 'Save 20%' would overstate it. The card on annual would read '$100 per month, billed annually ($1,200)'. These numbers are hypothetical.
What copy should sit next to an annual price?
Next to an annual price, write the billing frequency and the total charge. The per-month equivalent is useful for comparison, but on its own it tells the buyer something untrue about when they'll be charged.
Show the per-month equivalent
Large, as the main number, so buyers can compare plans and compare against monthly billing.
Add 'billed annually' directly under it
Same visual line as the price, not in a footnote. This is the line that prevents surprise charges.
State the yearly total
'$1,200 billed yearly' or similar. Some buyers need the total for a budget request.
Mention the monthly alternative
'Or $120 billed monthly' on the card lets buyers see the trade-off without flipping the toggle.
Answer the refund question
One line under the cards or an FAQ entry on what happens if they cancel an annual plan. Our pricing page FAQ has ready answers.
Which billing toggle design mistakes confuse buyers?
The billing toggle design mistakes that confuse buyers most are partial updates, ambiguous switch states and discounts that disappear at checkout. Each one makes the buyer double-check, and a buyer who's double-checking isn't buying.
- The toggle updates the cards but not the comparison table. Tables often have their own price row; wire it to the same state. See pricing comparison tables.
- The switch doesn't show which side is active. A pill with both labels and a clear selected state beats an unlabelled on/off switch.
- The selection resets. If a buyer picks annual and clicks through to checkout, checkout should open on annual.
- Usage or overage prices ignore the toggle. On metered plans, say whether overage is billed monthly regardless. Our guide to usage-based pricing pages covers this case.
- Enterprise cards show a fake annual price. If the top tier is 'Contact sales', leave it unchanged when the toggle flips.
Do you even need a monthly vs annual toggle?
You need a monthly vs annual toggle only if you sell both billing periods and want buyers to choose between them on the page. If almost everyone buys monthly, or your product is sold on annual contracts through sales, a toggle adds a decision without adding value.
Alternatives include showing monthly prices only with an 'annual plans available' line, or showing both prices on each card without a toggle. The second works well when you have only two or three plans. If you're unsure which approach your buyers respond to, the diagnostics in pricing page conversion rate will show where they drop off, and our pricing page examples show how well-known products handle it.
