Purchase Card

Product purchase: banner, one-time payment or subscription, card and address. Pro · Shop and payments › Payments and wallet

Installation

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.

Credit Card — Bank card: gradient or two-tone, network detected from the number, contactless
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
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