Pricing Toggle: a monthly / yearly switch with prices that count

How to use it

1. Add the two files

<link rel="stylesheet" href="pricing.css">
<script src="pricing.js" defer></script>

2. Write the switch and your prices

Put everything inside one element with data-pricing. Each price gets one attribute per period.

<div data-pricing>

  <div data-pricing-toggle>
    <button data-period="monthly">Monthly</button>
    <button data-period="yearly">Yearly <span class="pt-badge">-20%</span></button>
  </div>

  <h3>Pro</h3>
  <span data-price data-monthly="49" data-yearly="39">$49</span>

</div>

That is all. The price is written the way you wrote it: the kit keeps your currency sign, where it stands, and your thousands separator.

Change texts, links and labels too

A switch that only changes the number is half the job. These three attributes do the rest.

<!-- the small line under the price -->
<span data-pricing-text
      data-monthly="per month"
      data-yearly="per month, billed $468 yearly">per month</span>

<!-- a different checkout link per period -->
<a data-pricing-href
   data-monthly="/checkout?plan=pro-monthly"
   data-yearly="/checkout?plan=pro-yearly"
   href="/checkout?plan=pro-monthly">Choose Pro</a>

<!-- only visible while "yearly" is chosen -->
<span data-pricing-show="yearly" hidden>Save $120</span>

Options on the wrapper

More than two periods

The period names are yours. Add a third button and a third attribute.

<div data-pricing-toggle>
  <button data-period="month">Month</button>
  <button data-period="year">Year</button>
  <button data-period="life">Lifetime</button>
</div>

<span data-price data-month="9.99" data-year="99.00" data-life="249.00">9,99 €</span>

How prices are written

• In the attributes write plain numbers with a point: 1250 or 9.99.
• In the visible text write the price the way your visitors read it: $1,250, 9,99 €, 1.250 kr. The kit copies that style for every period.
• A word instead of a number works too: data-yearly="Free" or data-life="On request". Words are swapped without counting.

Colours of the switch

[data-pricing-toggle] {
  --pt-accent: #22d3ee;                    /* the sliding pill */
  --pt-track: rgba(0, 0, 0, .06);          /* the background of the switch */
  --pt-text: #444;                         /* the words */
  --pt-active-text: #fff;                  /* the word on the pill */
}

Use it from JavaScript

var pricing = PricingToggle(document.querySelector('[data-pricing]'));

pricing.select('yearly');      // switch from your own code
pricing.period;                // "monthly" or "yearly"
pricing.refresh();             // call after you add plans

// know when a visitor switches, for example for your statistics
document.addEventListener('pricingchange', function (event) {
  console.log(event.detail.period);
});

What it takes care of

• Keyboard. The switch is a proper radio group. Tab reaches it, the arrow keys change the period.
• Screen readers. They announce the chosen period and that the prices changed.
• No jumping layout. Digits keep the same width while they count, so the cards do not wobble.
• Reduced motion. Visitors who switched off animations get the new prices at once, without counting.
• Without JavaScript the page shows the prices you wrote in the HTML. Write your default period there.

Tips for a pricing table that sells

• Show the yearly price per month. "$39 per month, billed yearly" is easier to compare than "$468".
• Say what the visitor saves. A green "Save $120" next to the price does more than "-20%" on the switch.
• Send the right link. Use data-pricing-href, so the checkout opens with the period the visitor chose.

Common questions

Can I start with yearly chosen?

Yes. Add data-pricing-default="yearly" to the wrapper and write the yearly prices as the visible text.

Does it work with WooCommerce, Shopify or Stripe links?

Yes. The kit only changes numbers, texts and link targets. Put your product or payment links into data-pricing-href.

The pill is in the wrong place after my font loads.

The kit measures again when fonts arrive and when the size changes. If you show the switch inside a hidden tab, call pricing.refresh() when the tab opens.

What is in the download

• pricing.js the script, about 9 KB with comments
• pricing.css the switch and the badge, about 3 KB. Your plan cards keep your own design.
• index.html and demo.css the demo page you see above
• README.txt and LICENSE.txt the short guide and the MIT licence

Licence

MIT licence. Use it in personal and commercial projects, change it as you like. A link back is welcome and not required.