Geo-Pricing Card

The Geo Pricing Card is a smart pricing component designed to display region-based pricing dynamically. Instead of showing fixed values, the component detects a user’s location via IP and updates pricing accordingly to match predefined regional values.

Each pricing card can include plan details such as pricing tiers, billing options (monthly or annual), and structured benefits. The component supports flexible customization, allowing you to visually tailor the card using solid colors or gradients, reorder elements, and control layout presentation.

It also includes support for add-ons, enabling you to attach optional extras that can increase the total pricing dynamically. While add-ons are fully functional within their configured region, they may not apply when accessed outside the region they were created for.

Benefits can be enhanced visually using dynamic icons or standard icon sets, helping to improve readability and hierarchy within the pricing structure.

This component is ideal for SaaS platforms, digital services, subscription products, and any system requiring localized pricing and flexible plan configuration.

How It Works

1. Set Regional Pricing

You can define pricing for multiple regions.

• The component detects the user’s location via IP

• Pricing updates automatically based on the matched region

2. Configure Plan Details

Each pricing card can include:

• Plan name

• Price (per region)

• Billing type (monthly / annual)

• List of benefits

3. Add Add-Ons

You can create optional add-ons that:

• Attach to a pricing plan

• Increase the total cost dynamically

• You can set add-ons for each region

4. Customize Appearance

You can fully control the visual design:

• Solid colors or gradient styles

• Layout structure and spacing

• Reordering of elements

• Typography and hierarchy

5. Enhance Benefits Display

Benefits can include:

• Standard icons

• Dynamic/custom icons

• Set current plan

• Customize tags

This improves clarity and visual appeal of plan features.

Use Cases

• SaaS pricing pages

• Subscription-based platforms

• Digital product pricing

• Global service offerings

• Tiered membership plans

VERSION 2

This is the latest version, which now allows you to:

• Add add-ons for each region. You do this by creating the add-ons and then matching the respective price for each region.

• Customize how you want the button to appear: Either Always On or On Hover. This also changes the appearance of the component.

• Auto-attachment of plan, add-ons to the button.