CreditCard
credit-card银行卡展示 · 卡号前缀识别品牌(visa/mastercard/amex/银联/jcb/discover) + 分组格式化/打码(纯函数可测) + token 渐变卡面 + 芯片/品牌字标 + 正反面(磁条/CVC) · 结算确认/钱包(纯展示·RSC)
用法
基础用法
传入卡号、持卡人、有效期即可，品牌由卡号前缀自动识别。
VISA
•••• •••• •••• 1111
持卡人
ZHANG SAN
有效期
12/28
tsx
<CreditCard number="4111111111111111" holder="ZHANG SAN" expiry="12/28" />品牌自动识别
不同卡号前缀映射到不同卡组织皮肤（Visa / Mastercard / 银联 …）。
VISA
•••• •••• •••• 1111
持卡人
ZHANG SAN
有效期
12/28
•••• •••• •••• 5559
持卡人
WANG WU
有效期
06/26
银联
•••• •••• •••• 1232
持卡人
赵六
有效期
11/27
tsx
<>
<CreditCard number="4111111111111111" holder="ZHANG SAN" expiry="12/28" />
<CreditCard number="5500005555555559" holder="WANG WU" expiry="06/26" />
<CreditCard number="6212345678901232" holder="赵六" expiry="11/27" />
</>显示完整卡号
masked={false} 时展示完整卡号（仅在安全场景使用）。
VISA
4111 1111 1111 1111
持卡人
ZHANG SAN
有效期
12/28
tsx
<CreditCard number="4111111111111111" holder="ZHANG SAN" expiry="12/28" masked={false} />正反面
flipped 翻到背面展示磁条与 CVC。
•••• •••• •••• 5559
持卡人
LI LEI
有效期
08/27
321
CVC
tsx
<>
<CreditCard number="5500005555555559" holder="LI LEI" expiry="08/27" />
<CreditCard number="5500005555555559" holder="LI LEI" expiry="08/27" cvc="321" flipped />
</>空卡占位
卡号为空时渲染占位卡面，可用于表单录入实时预览的初始态。
•••• •••• •••• ••••
持卡人
YOUR NAME
有效期
MM/YY
tsx
<CreditCard number="" />何时用
在结算确认、钱包、绑卡管理处展示一张银行卡卡面（品牌识别 + 卡号打码 + 正反面）。纯展示组件，不做表单录入；要采集卡号请用表单输入控件，本组件只负责把已有卡信息可视化成一张卡。
导入
ts
import { CreditCard, detectBrand, formatCardNumber, maskCardNumber } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| number* | string | — | 卡号，可含空格，内部归一；空串渲染占位卡 |
| holder | string | — | 持卡人姓名 |
| expiry | string | — | 有效期 MM/YY |
| brand | "visa" | "mastercard" | "amex" | "unionpay" | "discover" | "jcb" | "unknown" | 自动识别 | 强制品牌；省略则由卡号前缀自动识别 |
| masked | boolean | true | 仅显示后 4 位，其余打码 |
| flipped | boolean | false | 翻到背面（磁条 + CVC） |
| cvc | string | — | 背面 CVC |
| className | string | — | 透传类名 |
禁忌 / 坑
暂无已知坑。detectBrand / formatCardNumber / maskCardNumber 是导出的纯函数，可在卡面外独立复用与单测。flipped 是受控 prop，需自行管理翻面状态。
相关
Sparkline · ImageViewer · LiveProductCard · DiffStat · ScoreRing · Badge
Playground
VISA
•••• •••• •••• 1111
持卡人
ZHANG SAN
有效期
12/28
<CreditCard number="4111111111111111" holder="ZHANG SAN" expiry="12/28" />