信用卡輸入卡

上方是一張 3D 擬真信用卡：卡號逐字填入卡面、未填處以點點佔位，依首碼即時判斷品牌（4 開頭顯示 Visa 字標、5 開頭顯示 Mastercard 雙圓）並漸變卡面漸層；有效期限套用 MM/YY 遮罩，聚焦安全碼欄位時整張卡以 rotateY 翻到背面對位 CVC 框。純前端展示、不含表單送出。

載入預覽⋯

安裝

npx shadcn@latest add https://webberui.com/r/credit-card-input.json

或在 components.json 設定 registries 後，改用 @webberui/credit-card-input 安裝。

安裝依賴後，從 registry JSON（/r/credit-card-input.json 的 files[0].content）複製 credit-card-input.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion lucide-react clsx tailwind-merge

使用

import { CreditCardInput } from "@/components/ui/credit-card-input";

<CreditCardInput
  bankName="WEBBER BANK"
  onChange={(value) => {
    // value: `{ number, name, expiry, cvc, brand }`
    console.log(value.brand); // "visa" | "mastercard" | "unknown"
  }}
/>

元件為純展示用途，不包含 form 送出邏輯；onChange 只回傳目前輸入狀態，請勿在示範環境輸入真實卡號。

Props

Prop	型別	預設值	說明
`onChange`	`(value: CreditCardValue) => void`	—	任一欄位變動時回呼，帶出完整卡片資料與品牌判斷結果
`bankName`	`string`	`"WEBBER BANK"`	卡面左上角的發卡行名稱
`className`	`string`	—	透傳到最外層容器，與預設樣式以 `cn()` 合併

CreditCardValue 欄位：

欄位	型別	說明
`number`	`string`	卡號（僅數字，最多 16 碼）
`name`	`string`	持卡人姓名
`expiry`	`string`	有效期限，MM/YY 格式
`cvc`	`string`	安全碼（3 碼）
`brand`	`"visa" \| "mastercard" \| "unknown"`	依卡號首碼判斷出的品牌

可及性

每個輸入框皆有對應的 label，數字欄位使用 inputMode="numeric" 在行動裝置喚起數字鍵盤
使用者系統開啟「減少動態效果」時，翻面與數字進場動畫改為即時切換，不播放彈跳動畫
卡面視覺為裝飾性質（aria-hidden），輔助科技以下方表單欄位為唯一資料來源
所有欄位關閉 autoComplete，避免瀏覽器自動帶入使用者的真實卡片資料
元件不含 form 標籤、不會發出任何網路請求，適合用於純展示或原型情境

信用卡輸入卡

安裝

使用

Props

可及性

On this page