CardNumberText

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

SourcePackage @weft-js/warp

Preview

tsx

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

Installation

npm install @weft-js/warp

Usage

tsx

import { CardNumberText } from '@weft-js/warp'<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 '@weft-js/warp'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 '@weft-js/core'import { Button, CardNumberText, Row, Stack, Text } from '@weft-js/warp'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