Subscription Manager

Subscription management: status, features, quotas, billing and cancellation. Pro · Shop and payments › Subscriptions and plans

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add subscription-manager

npm install valyro-ui-pro

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

Prop	Type	Default
`planName` *	`ReactNode`		Plan name under the price: "Pro plan".
`price` *	`number`		Price per interval.
`currency`	`string`	`'USD'`	ISO 4217 code. Default USD.
`status`	`'active' \| 'trialing' \| 'past_due' \| 'canceled'`	`'active'`	State of the subscription, shown as a pill. Default `active`.
`memberSince`	`Date \| string \| number`		Start of the subscription.
`features`	`ReactNode[]`	`[]`	What the plan includes, one short phrase each.
`usage`	`SubscriptionUsage[]`	`[]`	Quotas with their use this period; the bar turns amber at 80% and red when used up, as in UsageQuota.
`billing`	`DescriptionListItem[]`	`[]`	Billing facts: next charge, payment method, cycle.
`actions`	`ReactNode`		Buttons under the billing facts: change plan, update payment.
`onCancel`	`() => void`		Shows the cancel footer; called by its button (confirm before canceling).
`headingLevel`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`2`	Level of the heading (default 2).
`locale`	`string`		BCP 47 locale for money, numbers and dates.
`timeZone`	`string`		IANA time zone of `memberSince` (default: the ThemeProvider's); a date-only string is that day everywhere.
`labels`	`Partial<SubscriptionManagerLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Billing Plan Card — Subscription management
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