Purchase Card

Покупка продукта: баннер, разовая оплата или подписка, карта и адрес. Pro · Магазин и платежи › Оплата и кошелёк

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add purchase-card

npm install valyro-ui-pro

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

Prop	Type	Default
`title` *	`ReactNode`		Product name.
`description`	`ReactNode`		One or two lines about what is bought.
`imageSrc`	`string`		Round picture over the banner: the author, the product icon.
`imageName`	`string`		Name for the picture's initials fallback.
`banner`	`string`		Any CSS background for the banner. Default: a pink-to-blue gradient.
`modes`	`PurchaseMode[]`	`[]`	Payment options (one-time, subscription); the switcher shows with two or more.
`mode`	`string`		Chosen option (controlled).
`defaultMode`	`string`		Initial `mode` when uncontrolled.
`onModeChange`	`(mode: string) => void`		Called with the new `mode` when it changes.
`price`	`number`	`0`	Price when there are no modes.
`currency`	`string`	`'USD'`	ISO 4217 code. Default USD.
`countries` *	`SelectItem[]`		Countries for the billing address.
`value`	`PurchaseFields`		The typed fields (controlled), e.g. to prefill the email or keep them across steps.
`defaultValue`	`PurchaseFields`		Initial `value` when uncontrolled.
`onValueChange`	`(value: PurchaseFields) => void`		Called with the new `value` when it changes.
`onSubmit`	`(value: PurchaseValue) => void`		Called once every field passes validation.
`submitting`	`boolean`	`false`	Shows the pay button as busy.
`headingLevel`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`2`	Level of the product name (default 2).
`locale`	`string`		BCP 47 locale for the price.
`labels`	`Partial<PurchaseCardLabels>`		Overrides for the built-in English text; keys left out keep their defaults.
`cardLabels`	`Partial<CardInputLabels>`		Strings of the card field.