CardNumberText

Shows a saved card safely: its brand, last four digits and expiry.

SourcePackage @kerf-js/veneer

Preview

tsx

import { CardNumberText } from '@kerf-js/veneer'export function Basic() {  return (  <CardNumberText    last4="4242"    bin="424242"    expiry={{ month: 9, year: 2028 }}  />  )}

Installation

npm install @kerf-js/veneer

Usage

tsx

import { CardNumberText } from '@kerf-js/veneer'<CardNumberText  last4="4242"  bin="424242"  expiry={{ month: 9, year: 2028 }}/>

Brands

American Express groups its digits its own way. Pass brand if you only have the name.

tsx

import { CardNumberText, Stack } from '@kerf-js/veneer'export function Brands() {  return (  <Stack gap="tight">    <CardNumberText      last4="4242"      bin="424242"    />    <CardNumberText      last4="4444"      bin="555555"    />    <CardNumberText      last4="0005"      bin="378282"    />    <CardNumberText      last4="1117"      brand="Discover"    />  </Stack>  )}

Saved cards

Use last4, bin and expiry to show a saved card without its full number.

tsx

import { state } from '@kerf-js/core'import {  Button,  CardNumberText,  Row,  Stack,  Text} from '@kerf-js/veneer'export function Saved() {  const main = state('4242')  return (    <Stack      gap="related"      divided    >      {CARDS.map((c) => (        <Row          key={c.last4}          justify="between"          gap="group"        >          <Stack gap="hair">            <CardNumberText              last4={c.last4}              bin={c.bin}              expiry={c}            />            <Text              role="caption"              subtle            >              {main.value === c.last4                ? 'Default'                : c.note === 'Default'                  ? 'Saved'                  : c.note}            </Text>          </Stack>          <Button            size="sm"            emphasis="ghost"            tone="neutral"            aria-disabled={              main.value === c.last4 ? 'true' : undefined            }            onClick={() => (main.value = c.last4)}          >            Make default          </Button>        </Row>      ))}    </Stack>  )}const CARDS = [  {    last4: '4242',    bin: '424242',    month: 9,    year: 2028,    note: 'Default',  },  {    last4: '4444',    bin: '555555',    month: 3,    year: 2027,    note: 'Backup',  },  {    last4: '0005',    bin: '378282',    month: 11,    year: 2026,    note: 'Expires soon',  },]

Accessibility

Reads as "Visa ending 4242", not as a row of dots.

API Reference

Prop	Type	Default	Description
`last4`	`string`	—	The last four digits.
`bin`	`string`	—	The first digits, used to work out the brand.
`brand`	`string`	—	The brand's name, when you already know it.
`expiry`	`{ month: number; year: number; }`	—	`{ month, year }`, shown as MM/YY.

Parts

Every element carries a stable name, so you can style it from your own CSS: [data-scope="card-number-text"] [data-part="sr-only"]

sr-only

RelatedPayment card input