Pricing Configurator

Pricing model configuration with tiers and promotions

SaaSProducts

Overview

PricingConfigurator provides a comprehensive pricing management interface supporting multiple models (flat rate, tiered, per-seat, usage-based). It includes geographic pricing overrides, promotional pricing with percentage or fixed discounts, and a live price summary. Models can be selectively disabled and currencies restricted.

Usage

import { PricingConfigurator } from "@leanicon/web-builder-library/saas";

<PricingConfigurator
  price={price}
  onChange={setPrice}
  onSave={(price) => savePricing(price)}
  availableCurrencies={["USD", "EUR", "GBP"]}
  showGeo={true}
  showPromo={true}
/>;

Variants

Loading

Pricing Model

Choose how you want to charge for your product

Base Price

Set your base price and billing frequency

$

Geographic Pricing

Configure different prices for specific regions or markets.

No regional pricing configured. Base price will be used globally.

Promotional Pricing

No promotional pricing configured. Add a promotion to offer discounts.

Price Summary

Pricing ModelFlat
BillingMonthly
Base Price$99.00/mo

With Error

Failed to save pricing configuration. Please try again.

Pricing Model

Choose how you want to charge for your product

Base Price

Set your base price and billing frequency

$

Geographic Pricing

Configure different prices for specific regions or markets.

No regional pricing configured. Base price will be used globally.

Promotional Pricing

No promotional pricing configured. Add a promotion to offer discounts.

Price Summary

Pricing ModelFlat
BillingMonthly
Base Price$99.00/mo

Dark

Pricing Model

Choose how you want to charge for your product

Base Price

Set your base price and billing frequency

$

Geographic Pricing

Configure different prices for specific regions or markets.

No regional pricing configured. Base price will be used globally.

Promotional Pricing

No promotional pricing configured. Add a promotion to offer discounts.

Price Summary

Pricing ModelFlat
BillingMonthly
Base Price$99.00/mo

Default (code only)

<PricingConfigurator
  price={{
    id: "price-1",
    productId: "prod-1",
    currency: "USD",
    amount: 9900,
    model: "flat",
    billingFrequency: "monthly",
  }}
  onChange={setPrice}
  onSave={(p) => savePricing(p)}
/>

Tiered Pricing (code only)

<PricingConfigurator
  price={{
    id: "price-1",
    productId: "prod-1",
    currency: "USD",
    amount: 0,
    model: "tiered",
    billingFrequency: "monthly",
    tiers: [
      { id: "t1", minQuantity: 1, maxQuantity: 10, unitPrice: 1500 },
      { id: "t2", minQuantity: 11, maxQuantity: 50, unitPrice: 1200 },
      { id: "t3", minQuantity: 51, maxQuantity: undefined, unitPrice: 900 },
    ],
  }}
  onChange={setPrice}
  onSave={(p) => savePricing(p)}
/>

With Geographic Pricing (code only)

<PricingConfigurator
  price={{
    id: "price-1",
    productId: "prod-1",
    currency: "USD",
    amount: 9900,
    model: "flat",
    billingFrequency: "monthly",
    geoPrices: [
      { region: "US", currency: "USD", amount: 9900 },
      { region: "EU", currency: "EUR", amount: 8900 },
      { region: "UK", currency: "GBP", amount: 7900 },
    ],
  }}
  onChange={setPrice}
  onSave={(p) => savePricing(p)}
/>

With Promotional Pricing (code only)

<PricingConfigurator
  price={{
    id: "price-1",
    productId: "prod-1",
    currency: "USD",
    amount: 9900,
    model: "flat",
    billingFrequency: "monthly",
    promoDiscountType: "percentage",
    promoDiscountValue: 20,
  }}
  onChange={setPrice}
  onSave={(p) => savePricing(p)}
/>

Minimal Configuration (code only)

<PricingConfigurator
  price={price}
  onChange={setPrice}
  onSave={(p) => savePricing(p)}
  showGeo={false}
  showPromo={false}
  disabledModels={["tiered", "usage", "per_seat"]}
  availableCurrencies={["USD"]}
/>