Billing Plan Card

Subscription management. Pro · Shop and payments › Subscriptions and plans

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add billing-plan-card

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { BillingPlanCard } from 'valyro-ui-pro';

Prop	Type	Default
`plan` *	`string`		Plan name shown as the card heading.
`status`	`'active' \| 'trialing' \| 'past_due' \| 'canceled'`	`'active'`	Subscription state: sets the status badge, the date label and a trial or past-due notice.
`price` *	`number`		Amount per `interval` in `currency`; whole amounts are shown without cents.
`currency`	`string`	`'USD'`	ISO 4217 code. Default USD.
`interval`	`'month' \| 'year'`	`'month'`	Billing period, shown after the price.
`renewsAt`	`DateInput`		Next renewal, or the end of access for a canceled plan.
`trialEndsAt`	`DateInput`		End of the trial; shows the days left while `status` is "trialing".
`paymentMethod`	`BillingPaymentMethod`		Card on file, shown masked to its last four digits with the expiry.
`usage`	`BillingUsageItem[]`		Included usage, each shown as a meter.
`onUpgrade`	`() => void`		Adds a primary Upgrade button ("Upgrade now" during a trial).
`onManage`	`() => void`		Adds a secondary Manage button.
`onCancel`	`() => void`		Adds a Cancel plan button, hidden once the plan is canceled.
`locale`	`string`		BCP 47 locale for the price, dates and usage numbers; defaults to the ThemeProvider's.
`labels`	`Partial<BillingPlanCardLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Subscription Manager — Subscription management: status, features, quotas, billing and cancellation
Usage Quota — Usage limits
Subscription Plan Simulator — Pricing calculator: seats, monthly or yearly, VAT and an exact price breakdown
Product Card — Product card
Product Grid — Product catalog
Product Filters — Catalog filters
Product Spotlight — Featured product: tagged photo, price, rating and actions
Reviews Summary — Reviews: average rating, filterable histogram, sorting and helpful votes
Guided Product Finder — Product finder wizard: branching questions and why a product fits
Location Card — Store location: distance, opening hours, pickup options and ordering
Shopping Cart Drawer — Slide-out cart
Checkout Summary — Order summary at checkout