Card Input

Номер, срок и CVC в одном поле: маски, Луна, автопереход. Pro · Магазин и платежи › Оплата и кошелёк

Установка

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

npm install valyro-ui-pro

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

Prop	Type	Default
`value`	`CardInputValue`		The three parts as raw digits (controlled).
`defaultValue`	`CardInputValue`		Initial `value` when uncontrolled.
`onValueChange`	`(value: CardInputValue, details: CardInputDetails) => void`		Called with the new `value` when it changes.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Field height. Default `md`.
`invalid`	`boolean`	`false`	Marks the whole field invalid (e.g. a declined card); finished parts that fail their check are marked on their own.
`disabled`	`boolean`	`false`	Disables all three parts.
`name`	`string`		Prefix of the inputs' `name`s: `<name>-number`, `<name>-expiry`, `<name>-cvc`.
`labels`	`Partial<CardInputLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Credit Card — Банковская карта: градиент или две тональности, сеть по номеру, бесконтактная оплата
Payment Methods — Сохранённые карты и кошельки карточками-переключателями
Transaction List — Список операций: списания, пополнения, возвраты и остаток
Wallet Balance — Баланс кошелька: скрытие суммы, действия, карта для пополнения
Purchase Card — Покупка продукта: баннер, разовая оплата или подписка, карта и адрес
Loyalty Rewards — Программа лояльности: баллы, уровень, прогресс и каталог наград
Product Card — Карточка товара
Product Grid — Каталог товаров
Product Filters — Фильтры каталога
Product Spotlight — Рекомендованный товар: фото с пометкой, цена, рейтинг и действия
Reviews Summary — Отзывы: средняя оценка, гистограмма-фильтр, сортировка и полезность
Guided Product Finder — Мастер подбора товара: вопросы с ветвлением и объяснение, почему подошло