← Frontic UI
payment-card

Payment Card

A card's number, expiry and security code: spaced as typed, brand shown and checked, each joining a Field; or a payment provider's hosted fields framed in the same look.

States: Default

Parts

PartFileDoes
PaymentCardPaymentCard.vueGroups a card's number, expiry and security code so they share the brand the number shows.
PaymentCardBrandsPaymentCardBrands.vueThe card marks at the end of a number field: all it offers until the number shows its brand, then that brand's alone.
PaymentCardCvcPaymentCardCvc.vueTakes a card's security code, as long as the brand the number shows asks for; or frames a payment provider's hosted code field.
PaymentCardExpiryPaymentCardExpiry.vueTakes a card's expiry as MM/YY, adding the slash as it is typed; or frames a payment provider's hosted expiry field.
PaymentCardNumberPaymentCardNumber.vueTakes a card number, spaced as the card prints it, with its brand's logo at the end; or frames a payment provider's hosted number field.

Anatomy

<PaymentCard>
  <PaymentCardNumber>
    <PaymentCardBrands />
  </PaymentCardNumber>
  <PaymentCardExpiry />
  <PaymentCardCvc />
</PaymentCard>

Styling

PartRecipe
PaymentCardBrandspayment-card-brands
PaymentCardBrandspayment-card-brand

Install

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

Installs with it
input-group
npm packages
@lucide/vue
card-validator
credit-card-type
reka-ui

Built from

Input Group

API reference

PaymentCard PaymentCard.vue

Groups a card's number, expiry and security code so they share the brand the number shows.

PropTypeDefault
brandPaymentCardBrand—
EventPayload
update:brandvalue: PaymentCardBrand | undefined

PaymentCardBrands PaymentCardBrands.vue

PaymentCardCvc PaymentCardCvc.vue

PaymentCardExpiry PaymentCardExpiry.vue

PaymentCardNumber PaymentCardNumber.vue

Example