Pricing Card - Flexprice

Use Pricing Card to render a single plan anywhere in your product. Compose multiple cards yourself, or use Pricing Table for a ready-made grid.

Preview
Code

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

What PricingCard supports

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

Where to use PricingCard

Dashboard
Billing page
Subscription selector
Upgrade modal
Checkout

Importing PricingCard

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

Rendering PricingCard

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

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

Mapping API data into PricingCard

import { adaptPlanToCard, filterAndSortPlans } from '@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 Table

Comparison table for multiple plans, features, and entitlements.