Credit Card

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

Установка

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

npm install valyro-ui-pro

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

Prop	Type	Default
`number` *	`string`		Card number; spaces are added for display.
`holder`	`string`		Name on the card, printed in capitals.
`expiry`	`string`		Expiry as printed: "06/28".
`issuer`	`ReactNode`		Bank or company in the top corner: text or a logo.
`brand`	`PaymentBrand`		Network mark; detected from the number when omitted.
`logo`	`ReactNode`		Official network artwork instead of the built-in mark.
`masked`	`boolean`	`false`	Shows only the last four digits.
`variant`	`'gradient' \| 'split'`	`'gradient'`	`gradient`: one finish over the whole card; `split`: tinted top, dark band with the details. Default `gradient`.
`tone`	`'violet' \| 'ocean' \| 'midnight' \| 'emerald' \| 'sunset' \| 'silver'`	`'violet'`	Finish of the card. Default `violet`.
`background`	`string`		Any CSS background, instead of a tone (an image, a brand gradient).
`contactless`	`boolean`	`true`	Contactless symbol in the top corner. Default true.
`labels`	`Partial<CreditCardLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

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