payment-method

Payment Method

Payment card with a radio stack of methods; card number, expiry, security code and 3-D Secure code fields that open for card payment; and a pay button showing the total.

States: Default

Parts

Part	File	Does
PaymentMethod	PaymentMethod.vue	Lets the shopper choose a payment method, enter card details and pay.

Styling

Part	Recipe
PaymentMethod	meta

Install

Writes 3 files into components/sections/payment-method/. For agents, npx @frontic/ui docs payment-method prints this reference as markdown; the MCP server serves the same.

Installs with it: button; card; field; input-otp; payment-card; price; radio-accordion
npm packages: @lucide/vue

Built from

Button Card Field Input OTP Payment Card Price Radio Accordion

API reference

PaymentMethod PaymentMethod.vue

Lets the shopper choose a payment method, enter card details and pay.

Prop	Type	Default
options*	PaymentOption[]	—

total*	PriceType	—

title	string	'Payment'

description	string	—

cardValue	string	'card'

cardBrands	PaymentCardBrand[]	—

cardNumberLabel	string	'Card number'

expiryLabel	string	'Expiry'

cvcLabel	string	'Security code'

codeLabel	string	'3-D Secure code'

codeHint	string	—

codeLength	number	6

payLabel	string	'Pay'

locale	string	—

surface	'raised' \| 'bare'	'raised'

class	ClassValue	—

method	string	''

cardNumber	string	''

expiry	string	''

cvc	string	''

code	string	''

Event	Payload
update:method	value: string

update:cardNumber	value: string

update:expiry	value: string

update:cvc	value: string

update:code	value: string

pay	method: string

Data attribute	Values
data-surface	'raised' \| 'bare'

Recipe meta	Sets
base: meta	3 properties

Example