Payment Methods

Saved cards and wallets as selectable cards. Pro · Shop and payments › Payments and wallet

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add payment-methods

npm install valyro-ui-pro

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

Prop	Type	Default
`methods` *	`PaymentMethod[]`		Saved cards, wallets and other ways to pay.
`value`	`string`		Id of the chosen method (controlled).
`defaultValue`	`string`		Initial `value` when uncontrolled.
`onValueChange`	`(value: string) => void`		Called with the new `value` when it changes.
`name`	`string`		Name of the native radios, so the choice submits with a form.
`columns`	`number`	`3`	Columns of the grid; they wrap to fewer on narrow containers. Default 3.
`disabled`	`boolean`	`false`	Disables every method.

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
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