Subscription Manager

Управление подпиской: статус, возможности, квоты, оплата и отмена. Pro · Магазин и платежи › Подписки и тарифы

Установка

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.