Credit Card

import { CreditCard } from '@hanzo/ui'

Default

A dark plate with a placeholder number, holder name and expiry.

•••• •••• •••• ••••

Card HolderCARD HOLDER

ExpiresMM/YY

export function Default() {
  return <CreditCard />
}

Filled in

Every field set, including the CVV badge in the corner.

CVV: 123

4111 1111 1111 1111

Card HolderADA LOVELACE

Expires09/30

export function FilledIn() {
  return (
    <CreditCard
      number="4111 1111 1111 1111"
      name="ADA LOVELACE"
      expiry="09/30"
      cvv="123"
    />
  )
}

Minimal

A bordered surface instead of the dark plate, for a page that already carries its own color.

5500 0000 0000 0004

Card HolderGRACE HOPPER

Expires12/29

export function Minimal() {
  return (
    <CreditCard
      variant="minimal"
      number="5500 0000 0000 0004"
      name="GRACE HOPPER"
      expiry="12/29"
    />
  )
}

Side by side

Both variants at once, to compare the two treatments.

•••• •••• •••• ••••

Card HolderALAN TURING

Expires06/28

•••• •••• •••• ••••

Card HolderALAN TURING

Expires06/28

export function SideBySide() {
  return (
    <XStack flexWrap="wrap" gap="$4">
      <YStack width={320}>
        <CreditCard name="ALAN TURING" expiry="06/28" />
      </YStack>
      <YStack width={320}>
        <CreditCard variant="minimal" name="ALAN TURING" expiry="06/28" />
      </YStack>
    </XStack>
  )
}

Types

export type CreditCardVariant = 'default' | 'minimal'

export type CreditCardProps = Omit<ComponentProps<typeof Frame>, 'variant' | 'children'> & {
  /** The card number, formatted or masked by the caller. */
  number?: string
  /** The name printed on the card. */
  name?: string
  /** MM/YY expiry, printed as given. */
  expiry?: string
  /** Security code, shown only when set. */
  cvv?: string
  variant?: CreditCardVariant | null
}

Exports

CreditCardtype CreditCardPropstype CreditCardVariant