CreditCard
credit-cardDisplays a formatted or masked card number with detected brand and front or back card faces.
Usage
Basic usage
Just enter the card number, cardholder, and validity period, and the brand will be automatically identified by the card number prefix.
<CreditCard number="4111111111111111" holder="ZHANG SAN" expiry="12/28" />Automatic brand recognition
Different card number prefixes are mapped to different card organization skins (Visa / Mastercard / UnionPay...).
<>
<CreditCard number="4111111111111111" holder="ZHANG SAN" expiry="12/28" />
<CreditCard number="5500005555555559" holder="WANG WU" expiry="06/26" />
<CreditCard number="6212345678901232" holder="Zhao Liu" expiry="11/27" />
</>Show full card number
Display the complete card number when masked={false} (only used in security scenarios).
<CreditCard number="4111111111111111" holder="ZHANG SAN" expiry="12/28" masked={false} />Front and back
flipped Flip to the back to reveal the magnetic strip and CVC.
<>
<CreditCard number="5500005555555559" holder="LI LEI" expiry="08/27" />
<CreditCard number="5500005555555559" holder="LI LEI" expiry="08/27" cvc="321" flipped />
</>Empty card space
Render the placeholder card surface when the card number is empty, which can be used for the initial state of real-time preview of form entry.
<CreditCard number="" />When to use
Use CreditCard in checkout confirmation, wallets, or saved-card management to visualize existing card information. It does not collect payment details; use form controls for card input.
Cardholder labels and the accessible card description follow the nearest ConfigProvider locale (zhCN by default, or enUS).
Import
import { CreditCard, detectBrand, formatCardNumber, maskCardNumber } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| number* | string | — | Card number with optional spaces; an empty string renders a placeholder card. |
| holder | string | — | Cardholder name. |
| expiry | string | — | Expiry in MM/YY form. |
| brand | "visa" | "mastercard" | "amex" | "unionpay" | "discover" | "jcb" | "unknown" | Auto-detected | Explicit brand override. |
| masked | boolean | true | Shows only the last four digits. |
| flipped | boolean | false | Shows the back with magnetic stripe and CVC. |
| cvc | string | — | Back-face CVC. |
| className | string | — | Custom class name. |
Pitfalls
detectBrand, formatCardNumber, and maskCardNumber are exported pure helpers. flipped is controlled, so the caller owns face state. Chinese runtime labels include "\u94f6\u8054" ("UnionPay"), "\u94f6\u884c\u5361" ("Bank card" fallback), "\u5c3e\u53f7" ("ending in"), "\u6301\u5361\u4eba" ("Cardholder"), and "\u6709\u6548\u671f" ("Expiry").
Related
Sparkline · ImageViewer · LiveProductCard · DiffStat · ScoreRing · Badge
Playground
<CreditCard number="4111111111111111" holder="ZHANG SAN" expiry="12/28" />