شمارهی کارت
card-number-inputکامپوننتشمارهی کارت در چهار گروه چهارتایی، با تشخیص بانک از شش رقم اول و اعتبارسنجی Luhn بعد از رقم شانزدهم.
۱۶ رقم روی کارت
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add card-number-inputنصب دستی
محتوای تب «کد» را در
components/ui/card-number-input.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { CardNumberInput } from "@/components/ui/card-number-input"23<CardNumberInput onChange={(digits, valid, bank) => valid && setCard({ digits, bank })} />پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| onChange | (digits, valid, bank) => void | - | شانزده رقم لاتین، نتیجهی Luhn و نام بانک (یا null). |
نکتههای راستچین
- جدول پیششمارهها در lib/persian.ts هست و بانکهای ادغامشده (انصار، قوامین، حکمت، مهر اقتصاد، کوثر) زیر نام سپه میآن.
- autoComplete="cc-number" را نگه دارید تا مرورگر کارت ذخیرهشده را پیشنهاد کند.