Credit Card

Bank card: gradient or two-tone, network detected from the number, contactless. Pro · Shop and payments › Payments and wallet

Installation

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 — Number, expiry and CVC in one field: masks, Luhn check, auto-advance
Payment Methods — Saved cards and wallets as selectable cards
Transaction List — Transactions: charges, top-ups, refunds and balance
Wallet Balance — Wallet balance: hide amount, actions, card for top-ups
Purchase Card — Product purchase: banner, one-time payment or subscription, card and address
Loyalty Rewards — Loyalty program: points, tier, progress and a rewards catalog
Product Card — Product card
Product Grid — Product catalog
Product Filters — Catalog filters
Product Spotlight — Featured product: tagged photo, price, rating and actions
Reviews Summary — Reviews: average rating, filterable histogram, sorting and helpful votes
Guided Product Finder — Product finder wizard: branching questions and why a product fits