Billing Plan Card

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

Установка

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.