Pricing Widget

The Pricing Widget is the full pricing selector experience. Use it when you want a ready-made pricing page rather than composing table and cards yourself. It composes header, billing period toggle, a grid of Pricing Cards, feature comparison, and footer actions.

Pricing Widget with plans loaded via REST

Features

Monthly / yearly (or custom) billing toggle
Multiple plans
Usage-based, hybrid, and enterprise plans
CTA buttons
Feature comparison
Highlight recommended plans
Custom branding via theme / CSS variables

Best used for

Marketing websites and landing pages
Customer portal
Product onboarding

Import

import '@flexprice/flexprice-ui/style.css';
import { PricingWidget } from '@flexprice/flexprice-ui';

Usage

<PricingWidget
  plans={plans}
  onPlanSelect={handlePlanSelect}
  onCheckout={handleCheckout}
  onContactSales={handleContactSales}
/>

Pass presentational Plan data from the Flexprice SDK, REST, your backend, or static JSON. See Ways to provide data. Wire callbacks into Checkout or your own payment flow.

Map Flexprice API data

import { adaptPlanToCard, filterAndSortPlans } from '@flexprice/flexprice-ui';

const plans = filterAndSortPlans(plansWithData, 'USD', 'MONTHLY').map((p) =>
  adaptPlanToCard(p, grants)
);

Overview

Install Flexprice UI, choose a data source, theme, and integrate components.

Pricing Table

Comparison table for multiple plans, features, and entitlements.

Pricing Card

Single plan card for dashboards, modals, and custom layouts.

⌘I

Introduction

Getting Started

Connect

Event Ingestion

Product Catalogue

Scenarios

Customers

Checkout

Subscriptions

Wallet

Invoices

Webhooks

Settings

Collectors

Data Exports

RBAC

Cookbooks

AI Cost Tracking

Contributing Guide

Exportable UI

Features

Best used for

Import

Usage

Map Flexprice API data

See also

Overview

Pricing Table

Pricing Card

​Features

​Best used for

​Import

​Usage

​Map Flexprice API data

​See also

Overview

Pricing Table

Pricing Card

Features

Best used for

Import

Usage

Map Flexprice API data

See also