A sleek pricing toggle that lets customers switch between billing cycles with animated price transitions. Supports multiple plans with tabbed navigation. Automatically calculates and displays savings percentage. Generates SureCart checkout URLs dynamically. Features dark and light themes with full color customization. Perfect for pricing pages, product cards, and subscription offers.

Yearly

Monthly

$99

per year

Save 17% compared to monthly

Plans

Domain URL

Your SureCart store domain used to generate checkout URLs. Enter without https:// prefix. The component automatically builds the full checkout link with price ID.

Required

Plan Name text

Display name for each plan shown in the tabs. Add multiple plans to create a tabbed pricing selector. Single plans hide the tab navigation.

Example: "Starter", "Pro", "Business"

Option 1 Price number

Price value for the first option (typically yearly). Enter the numeric value only, currency symbol is added automatically based on your settings.

Example: 99

Option 1 Price ID text

SureCart price ID for option 1. Found in your SureCart dashboard under the product's pricing. Used to generate the direct checkout URL.

Example: "price_abc123"

Option 2 Price number

Price value for the second option (typically monthly). Used for savings calculation when compared to the yearly price.

Example: 10

Option 2 Price ID text

SureCart price ID for option 2. Links directly to the monthly checkout when the toggle is switched.

Example: "price_xyz789"

Payment Periods number

Number of billing periods in option 1 cycle. Used to calculate savings (e.g., 12 months). Also replaces {months} placeholder in descriptions.

Default: 12

Labels

Option 1 Label text

Text displayed next to the toggle for the first option. Shown on the left side of the toggle switch. Common choices: "Yearly", "Annual", "Pay once".

Default: "Yearly"

Option 2 Label text

Text displayed for the second option on the right side of the toggle. Common choices: "Monthly", "Pay monthly", "Subscribe".

Default: "Monthly"

Option 1 Description text

Text shown below the price when option 1 is selected. Describes the billing cycle. Example: "per year", "billed annually".

Default: "per year"

Option 2 Description text

Text shown below the price when option 2 is selected. Use {months} placeholder to insert payment periods. Example: "per month for {months} months".

Default: "per month"

Default Option option1 / option2

Which option is selected when the page loads. Set to "option1" to show yearly pricing first (encourages higher value purchases).

Default: option1

Currency

Currency Symbol text

Symbol displayed with the price. Supports any currency symbol including multi-character codes like "EUR" or "USD".

Default: "$"

Currency Position before / after

Where to place the currency symbol relative to the price. Use "before" for $99 format, "after" for 99€ format.

Default: before

Show Tax on/off

Display tax information next to the price. Useful for regions that require tax notices or to clarify pricing.

Default: Off

Tax Text text

Text displayed when Show Tax is enabled. Common options: "+ VAT", "excl. tax", "incl. GST".

Default: "+ VAT"

Colors

Theme dark / light

Base color scheme that adjusts default colors automatically. Dark theme uses light text on dark backgrounds, light theme uses dark text on light backgrounds.

Default: dark

Background Color color picker

Container background color. Supports rgba for transparency. Works with the backdrop blur for a frosted glass effect.

Default: theme-based

Text Color color picker

Primary text color for prices and active labels. Should contrast well with your background color.

Default: #ffffff (dark) / #111827 (light)

Active Color color picker

Color of the toggle switch when in the active position. Use your brand color or a vibrant accent that draws attention.

Default: #8b5cf6 (purple)

Typography

Price Font Size pixels

Size of the main price display. This is the most prominent element. Use large sizes (40-60px) for maximum impact.

Default: 48

Option Font Size pixels

Size of the toggle labels (Yearly/Monthly text). Keep readable but secondary to the price.

Default: 15

Period Font Size pixels

Size of the billing period description below the price. Should be smaller than the price but still readable.

Default: 14

Tax Font Size pixels

Size of the tax notice text. Keep small and subtle so it doesn't distract from the main price.

Default: 12

Savings Font Size pixels

Size of the savings percentage message. Should be noticeable but not overwhelming.

Default: 13

Toggle Gap pixels

Space between the toggle switch and the option labels. Increase for more breathing room.

Default: 16

Behavior

Animate Price on/off

Smoothly animate the price number when switching options. Creates a counting effect that draws attention to the price change.

Default: On

Clickable Labels on/off

Allow clicking on the Yearly/Monthly labels to switch options. Improves usability by providing a larger click target.

Default: On

Show Savings on/off

Display savings percentage when yearly option is selected. Automatically calculates based on monthly vs yearly pricing. Great for encouraging annual commitments.

Default: On

Update Button URL on/off

Automatically update a linked buy button's URL when switching options. Add data-sureswitch-button attribute to your button element.

Default: On

Performance

This element is lightweight and won't slow down your site. Uses CSS transitions for smooth toggle animations and requestAnimationFrame for price counting effects. Automatically generates SureCart checkout URLs with proper encoding. Supports multiple instances on the same page without conflicts.