Pricing Sections with a Monthly/Annual Billing Toggle (39)

What it is

A monthly/annual billing toggle is a switch at the top of the pricing section that flips every plan between a monthly price and a yearly one. Monthly suits the buyer who wants a small first commitment. Annual suits the buyer who is ready to commit for a lower price. Because annual billing is usually discounted, the toggle does a second job: it shows the saving while the buyer is looking at the price.

The saving shows up in a few forms, and the strongest sections use more than one:

• A percentage on the toggle. A badge next to the switch, like Octolens's "Save up to 20%", states the discount in one number.
• A struck-through monthly price. The old price crossed out next to the new one, like Lemlist going from $79 to $63.
• The yearly total spelled out. The real annual figure under the price, like Raycast's "$96 billed annually".
• A best-value flag on the annual side. A label that recommends the discounted option, like HubSpot's BEST VALUE or CompanyCam's BEST DEAL arrow.

Why it matters

Buyers arrive with different budgets and different appetites for commitment. A single fixed price leaves one group out: shown only a monthly price, the annual buyer never sees the deal; shown only an annual price, the cautious buyer faces a large upfront bill. A toggle lets each buyer see the plan on their own terms, with the saving right next to the number they are weighing.

How the best pricing sections do it

The best examples below make the saving obvious and honest. Octolens puts a Pay Monthly / Pay Annually switch at the top with a "Save up to 20%" tag beside it, and adds a USD/EUR switch above the plans for buyers outside the US. Raycast pairs its yearly toggle with the annual total under each price, so the discount and the real commitment are both in view. Surfer SEO states the money directly on each card instead of a percentage. HubSpot pairs its Pay Annually option with struck-through old prices and a BEST VALUE mark, so the recommended choice is clear.

The toggle is one lever among several. It works best next to the risk reducers a pricing section uses, such as a free trial or a no-card start, and the per-feature breakdown that explains each tier.

100/100

Common mistakes

The first mistake is offering one billing period only. The example above shows a single monthly price with no annual option, so a buyer who would commit for a year gets no reason to. The second is a toggle that hides the saving: a "Billed yearly" label in small gray type with no number, so the buyer has to do the math. The third is a toggle that never shows the yearly total, so the real commitment is a surprise at checkout. The fourth is a percentage badge that does not match the prices on the cards, which reads as a mistake.