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

What a monthly/annual billing toggle actually is

A monthly/annual billing toggle is a switch at the top of the pricing section that flips every plan between a monthly rate and a yearly one. The monthly view answers the buyer who wants a small first commitment. The annual view answers the buyer who is ready to save. Because annual billing is almost always cheaper, the toggle does a second job: it carries the discount, and it shows that discount at the moment the buyer is looking at the price.

The pattern takes a few concrete forms, and the strongest sections use more than one at once:

• A percentage saving on the toggle. A badge next to the switch, like Raycast's -29%, PhotoRoom's Save up to 47%, or PandaDoc's Save up to 46%, states the discount in one number.
• A struck-through monthly price. The old rate crossed out next to the new one, like Lemlist moving $79 to $63, so the saving is shown, not asserted.
• The annual total spelled out. The real yearly figure under the price, like Raycast noting billed $96 annually, so the commitment is clear before checkout.
• A best-value flag on the annual side. A label that recommends the discounted option, like HubSpot marking annual as BEST VALUE or CompanyCam pointing a BEST DEAL arrow at it.

Why it works

Buyers do not all arrive with the same budget or the same appetite for commitment. A single fixed price forces one group to feel wrong: shown only a monthly rate, the annual buyer misses the deal they would have taken, and shown only an annual rate, the cautious buyer balks at the upfront ask. A toggle removes the conflict by letting each buyer see the plan on their own terms.

The saving is the other half of the pattern. Placed on the toggle, the discount lands at the exact moment the buyer is weighing the number, so the yearly commitment reads as a deal rather than a bigger bill. A percentage, a struck-through price, or a spelled-out total does the persuading right where the decision is made, which is why the toggle rarely travels without one.

How the best pricing sections do it

Across the scored examples below, the toggle earns its place when it makes the saving obvious and honest. Raycast pairs its -29% yearly toggle with the annual total under each price (billed $96 and $144), so the discount and the real commitment are both in view. Surfer SEO skips the percentage and states the money directly, listing Save $240, $444, and $720 on the three cards, which is harder to wave away than a vague label. PhotoRoom and PandaDoc lead with a large percentage (Save up to 47% and Save up to 46%) because the discount is their strongest argument for the year. Sellsy and Bugherd translate the saving into time, flagging Save 2 months and 12 months free, and HubSpot pairs its Pay Annually toggle with strikethrough was-prices and a BEST VALUE mark so the recommended option is unmistakable. Octolens goes one step further and adds a USD/EUR switch beside the monthly/annual one, removing a second friction for global buyers.

The toggle is one lever among several in a pricing section. 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 justifies each tier, so the buyer picks a rhythm, sees the saving, and understands what the plan actually includes.

100/100

Common mistakes

11/100

The usual failure is a toggle that hides the saving: a Billed yearly label in small gray type with no number attached, so the buyer has to do the arithmetic and the discount does no work. The second is a toggle that flips the price but never shows the annual total, so the yearly commitment becomes a surprise at checkout. The third is inconsistency, where the percentage badge and the actual price do not match, which reads as a mistake and costs trust at the worst possible moment. Show the saving in plain numbers, spell out what a year really costs, and flag the option you want chosen.