Pricing Card

Use Pricing Card to render a single plan anywhere in your product. Compose multiple cards yourself, or use the Pricing Widget / Pricing Table for a full layout.

Supports

Feature list
Custom badges
Billing cadence
Usage pricing
Trial messaging
CTA buttons

Best used for

Dashboard
Billing page
Subscription selector
Upgrade modal
Checkout

Import

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

Usage

<PricingCard {...plan} useModernChrome onSelectPlan={handleSelect} />

Pass a presentational plan from the Flexprice SDK, REST, your backend, or static JSON. See Ways to provide data.

Map Flexprice API data

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

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

Overview

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

Pricing Widget

Full pricing selector with billing toggle, plan grid, and CTAs.

Pricing Table

Comparison table for multiple plans, features, and entitlements.

⌘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

Supports

Best used for

Import

Usage

Map Flexprice API data

See also

Overview

Pricing Widget

Pricing Table

​Supports

​Best used for

​Import

​Usage

​Map Flexprice API data

​See also

Overview

Pricing Widget

Pricing Table

Supports

Best used for

Import

Usage

Map Flexprice API data

See also