رفتن به محتوای اصلی
نیکاوب
محصول دانلودی برای توسعه‌دهنده‌ها

ورودی کارت بانکی، شبا و انتخاب بانک برای React و جاوااسکریپت

هر فرم برداشت، تسویه، ثبت کارت یا کیف پول به شماره کارت و شبا می‌رسد. این پکیج سه کامپوننت آماده دارد: ورودی شماره کارت که بانک را از شش رقم اول نشان می‌دهد، ورودی شبا که IR را خودش می‌گذارد، و انتخابگر بانک با جستجو. کاربر با هر کیبوردی بنویسد یا Paste کند، رقم کنترل همان لحظه سنجیده می‌شود و به کد شما یک مقدار یکدست می‌رسد.

  • بدون هیچ وابستگی
  • TypeScript کامل
  • React، Next.js و جاوااسکریپت خالص
  • ۲۹ بانک و مؤسسه فعال
  • هر سه کامپوننت ۱۰ کیلوبایت فشرده
  • ۲۶۱ تست خودکار
۶۰۰٬۰۰۰ تومان
خرید و دانلودامتحانش کنید

پرداخت یک‌باره از درگاه بانکی، دانلود فوری بعد از پرداخت.

onChange → value
''
detail.bank
null
detail.status
خالی empty
چرا

سه جایی که فیلدهای بانکی کاربر را زمین می‌زنند

شماره درست، رد می‌شود

کاربر شماره کارت را از پیامک بانک کپی می‌کند: «۶۰۳۷-۹۹۱۲-…» با ارقام فارسی و خط تیره. فیلدی که فقط [0-9]{16} می‌شناسد آن را رد می‌کند و کاربر نمی‌داند چرا.

شماره غلط، قبول می‌شود

یک رقم اشتباه یا دو رقم جابه‌جا و واریز به حساب اشتباه می‌رود یا برمی‌گردد. شماره کارت و شبا هر دو رقم کنترل دارند؛ اگر فیلد آن را نسنجد، اشتباه تا درگاه یا بانک می‌رود.

انتخاب بانک از فهرست پنجاه‌تایی

کاربر در یک منوی کشویی بلند دنبال «ملت» می‌گردد، در حالی که بانک از شش رقم اول کارت یا سه رقم شبا معلوم است. هر قدم اضافه در فرم تسویه یعنی کاربری که فرم را نیمه‌کاره رها می‌کند.

دمو زنده · شماره کارت

همان کامپوننتی که دانلود می‌کنید

گزینه‌ها را عوض کنید، شماره را هر طور می‌خواهید بنویسید و مقداری را که به کد شما می‌رسد ببینید.

ارقام
جداکننده
بانک ناشناخته
نمایش بانک در فیلد
value
''
detail.valid · detail.error
false · 'empty'
detail.bank
null
<IranianCardInput
  value={card}
  onChange={(value, detail) => setCard(value)}
  onBankChange={(bank) => setBank(bank)}
/>

این‌ها را امتحان کنید

  • با کیبورد فارسی بنویسید؛ ارقام فارسی و انگلیسی هر دو خوانده می‌شوند.
  • شش رقم اول را بنویسید؛ بانک همان لحظه نمایش داده می‌شود.
  • یک رقم از شماره درست را عوض کنید؛ رقم کنترل خطا را همان لحظه نشان می‌دهد.
  • وسط شماره رقم اضافه یا پاک کنید؛ نشانگر کنار همان رقم می‌ماند.
  • یک شبا را با IR یا بدون آن Paste کنید؛ هر دو درست خوانده می‌شوند.
  • در انتخابگر بانک «بانك» را با کاف عربی بنویسید، یا شماره کارت را؛ بانک پیدا می‌شود.
شبا

۲۴ رقم، بدون تایپ IR

بانک از سه رقم بعد از رقم‌های کنترل معلوم می‌شود و رقم‌های کنترل با الگوریتم استاندارد IBAN سنجیده می‌شوند.

value
''
detail.bankCode · detail.bank
''
detail.status · detail.error
خالی empty 'empty'

همان عدد با توابع قالب‌بندی

روی سرور، در ایمیل یا رسید، بدون کامپوننت.

formatSheba(value)
—
formatSheba(value, { digits: 'en' })
—
validateSheba(value).valid
false
انتخاب بانک

جستجو با هر کیبوردی، انتخاب با کیبورد یا لمس

نام فارسی یا انگلیسی، با «بانک» یا بدون آن، با ی و ک عربی یا فارسی، یا حتی شماره کارت. با کلیدهای جهت حرکت کنید و با Enter انتخاب کنید.

بانک‌های ادغام‌شده

چیزی که به کد شما می‌رسد

شناسه ثابت بانک برای ذخیره، و همه اطلاعات آن.

onChange → id
null
bank
null
وضعیت‌ها

خطا وقتی که لازم است، نه وسط تایپ

هر وضعیت روی کامپوننت با data-status مشخص است و صفحه‌خوان‌ها خطا و نام بانک را همان لحظه می‌خوانند.

خالی

هنوز چیزی ننوشته.

درست، با بانک

۱۶ رقم با رقم کنترل درست؛ بانک از شش رقم اول.

بانک ملی ایران

ناقص، بعد از خروج از فیلد

وسط تایپ خطا نشان داده نمی‌شود؛ فقط وقتی کاربر فیلد را نیمه‌کاره رها کند.

بانک ملی ایرانشماره کارت کامل نیست؛ ۱۶ رقم دارد.

رقم کنترل اشتباه

یک رقم اشتباه یا دو رقم جابه‌جا؛ همان لحظه که شماره کامل شود.

بانک ملی ایراناین شماره کارت درست نیست؛ رقم‌ها را دوباره بررسی کنید.

خطا از سرور

با ویژگی error، مثلاً کارتی که درگاه رد کرده.

بانک ملی ایراناین کارت برای برداشت مجاز نیست.

فقط‌خواندنی و غیرفعال

فیلد فقط‌خواندنی هنوز قابل انتخاب و کپی است.

بانک ملی ایران
بانک ملی ایران
در فرم واقعی

فرمی که با شماره اشتباه ارسال نمی‌شود

مرورگر جلوی ارسال را می‌گیرد و پیام فارسی را نشان می‌دهد. چیزی که به سرور می‌رسد همیشه یک شکل دارد.

فرم تسویه‌حساب

بانک از روی شبا انتخاب می‌شود؛ کاربر فقط اگر لازم باشد عوضش می‌کند.

دکمه تا وقتی شبا کامل و درست نباشد غیرفعال است.

افزودن کارت

بدون هیچ کد اعتبارسنجی: مرورگر با شماره ناقص یا اشتباه فرم را نمی‌فرستد و پیام فارسی را نشان می‌دهد.

دکمه را با فیلد خالی یا نیمه‌کاره بزنید.

مرجع تعاملی

همه توابع، روی سرور هم

تابعی را انتخاب کنید، ورودی را عوض کنید و خروجی واقعی را ببینید. همین توابع در Server Action، API و اسکریپت ورود داده اجرا می‌شوند.

validateCardNumber('۶۰۳۷-۹۹۱۲-۳۴۵۶-۷۸۹۳')
{
  valid: true,
  error: null,
  value: "6037991234567893",
  bank: { id: 'melli', persianName: 'بانک ملی ایران', … }
}
استفاده

نصب و چند خط کد

نصب
# the .tgz from the download, copied into your project
npm install ./vendor/nikaweb-iranian-bank-input-1.0.0.tgz
React
'use client'
import { useState } from 'react'
import {
  IranianBankSelect,
  IranianCardInput,
  IranianShebaInput,
} from '@nikaweb/iranian-bank-input/react'
import '@nikaweb/iranian-bank-input/styles.css'

export function PayoutFields() {
  const [bank, setBank] = useState<string | null>(null)
  return (
    <>
      <label htmlFor="card">شماره کارت</label>
      <IranianCardInput id="card" name="card" required />

      <label htmlFor="sheba">شماره شبا</label>
      <IranianShebaInput
        id="sheba"
        name="sheba"
        required
        onBankChange={(detected) => detected && setBank(detected.id)}
      />

      <label htmlFor="bank">بانک</label>
      <IranianBankSelect id="bank" name="bank" value={bank} onChange={setBank} />
    </>
  )
}
Next.js با Server Action
// app/payout/actions.ts
'use server'
import { normalizeSheba, validateCardNumber } from '@nikaweb/iranian-bank-input'

export async function savePayout(formData: FormData) {
  const sheba = normalizeSheba(formData.get('sheba'))
  if (!sheba) return { error: 'invalid sheba' }
  // 'IR820540102680020817909002', however it was typed

  const card = validateCardNumber(formData.get('card'))
  if (!card.valid) return { error: card.error }
  // card.value: '6037991234567893', card.bank?.id: 'melli'
}
جاوااسکریپت خالص، بدون ابزار ساخت
<input id="card" required>
<span id="card-bank"></span>
<p id="card-error"></p>

<script src="/js/iranian-bank-input.global.js"></script>
<script>
  IranianBank.bindCardInput(document.getElementById('card'), {
    bankLabel: document.getElementById('card-bank'),
    message: document.getElementById('card-error'),
  })
</script>
داده بانک‌ها

هر بانکی که پکیج می‌شناسد

همین جدول از داده خود پکیج ساخته می‌شود؛ تاریخ داده ۱ مهر ۱۴۰۵. بانک‌های ادغام‌شده هنوز شناخته می‌شوند، چون کارت و شبای قدیمی‌شان در داده مشتری‌ها هست.

بانک‌ها و موسسه‌های اعتباری در داده پکیج
بانککد شباپیشوند کارتوضعیت
بانک آینده
ayandeh
062636214ادغام در ملی (۱۴۰۴)
بانک اقتصاد نوین
eghtesad-novin
055627412فعال
بانک انصار
ansar
063627381ادغام در سپه (۱۳۹۹)
بانک ایران زمین
iran-zamin
069505785فعال
بانک مشترک ایران و ونزوئلا
iran-venezuela
095581874فعال
بانک پارسیان
parsian
054622106 · 627884 · 639194فعال
بانک پاسارگاد
pasargad
057502229 · 639347فعال
پست بانک ایران
post-bank
021627760فعال
بانک تجارت
tejarat
018627353 · 585983فعال
مؤسسه اعتباری توسعه
tosee
051628157منحل‌شده (۱۴۰۰)
بانک توسعه تعاون
tosee-taavon
022502908فعال
بانک توسعه صادرات ایران
tosee-saderat
020627648 · 207177فعال
بانک حکمت ایرانیان
hekmat-iranian
065636949ادغام در سپه (۱۳۹۹)
بانک خاورمیانه
khavarmianeh
078505809 · 585947فعال
بانک دی
dey
066502938فعال
بانک قرض‌الحسنه رسالت
resalat
070504172فعال
بانک رفاه کارگران
refah
013589463فعال
بانک سامان
saman
056621986فعال
بانک سپه
sepah
015589210فعال
بانک سرمایه
sarmayeh
058639607فعال
بانک سینا
sina
059639346فعال
بانک شهر
shahr
061502806 · 504706فعال
بانک صادرات ایران
saderat
019603769فعال
بانک صنعت و معدن
sanat-madan
011627961فعال
بانک قوامین
ghavamin
—639599ادغام در سپه (۱۳۹۹)
بانک کارآفرین
karafarin
053627488 · 502910فعال
بانک کشاورزی
keshavarzi
016603770 · 639217فعال
مؤسسه اعتباری کوثر
kosar
—505801ادغام در سپه (۱۳۹۹)
بانک گردشگری
gardeshgari
064505416فعال
بانک مرکزی جمهوری اسلامی ایران
central-bank
010636795فعال
بانک مسکن
maskan
014628023فعال
بانک ملت
mellat
012610433 · 991975فعال
مؤسسه اعتباری ملل
melal
075606256فعال
بانک ملی ایران
melli
017603799فعال
بانک مهر اقتصاد
mehr-eghtesad
—639370 · 606737ادغام در سپه (۱۳۹۹)
بانک قرض‌الحسنه مهر ایران
mehr-iran
060606373فعال
مؤسسه اعتباری نور
noor
080507677ادغام در ملی (۱۴۰۲)
داخل فایل

چه چیزی دانلود می‌کنید

کد منبع کامل TypeScript
همه ماژول‌ها، قابل تغییر، با توضیح کنار کد. قواعد ویرایش فیلد در یک فایل و به شکل تابع خالص.
پایگاه داده بانک‌ها
یک فایل جدا، بدون هیچ کد: نام فارسی و انگلیسی، کد شبا، پیشوندهای کارت و وضعیت ادغام هر بانک. با منبع هر پیشوند در مستندات.
۲۶۱ تست
هر پیشوند و کد شبا، الگوریتم لان و MOD 97، تایپ و حذف وسط شماره، جای نشانگر، Paste و Copy، کیبورد، React و رندر سمت سرور.
نسخه آماده نصب
فایل tgz برای npm، pnpm و yarn، به‌علاوه ESM، CommonJS، تایپ‌ها و نسخه تگ script.
مستندات
README، مرجع کامل API، قواعد اعتبارسنجی و راهنمای به‌روزرسانی داده بانک‌ها، به انگلیسی.
مثال‌ها و صفحه دمو
React، Next.js با Server Action، HTML خالص و Node، و یک صفحه دمو فارسی که بدون سرور باز می‌شود.
پرسش‌ها

قبل از خرید

بلافاصله بعد از تأیید پرداخت، در همان صفحه دکمه دانلود نمایش داده می‌شود. لینک تا ۷ روز کار می‌کند؛ فایل را همان موقع دانلود کنید و نگه دارید.

در هر تعداد پروژه برای خودتان یا مشتری‌هایتان، تجاری یا غیرتجاری. فروش دوباره پکیج یا انتشار عمومی کد منبعش، مثلاً در npm یا یک مخزن عمومی، مجاز نیست. متن کامل مجوز داخل فایل است.

نه. شکل شماره و رقم کنترل آن را بررسی می‌کند و بانک را از پیشوند تشخیص می‌دهد. اینکه کارت فعال است و مال همین کاربر است را فقط سرویس استعلام بانک یا درگاه پرداخت می‌تواند بگوید. این پکیج جلوی اشتباه تایپی را پیش از آن استعلام می‌گیرد.

هیچ فهرست رسمی عمومی از پیشوند کارت‌ها منتشر نشده است. هر پیشوند با دست‌کم دو منبع مستقل تطبیق داده شده و پیشوندهایی که فقط یک منبع داشتند کنار گذاشته شده‌اند. تاریخ داده ۱ مهر ۱۴۰۵ است و ادغام‌ها، از جمله ادغام بانک آینده در بانک ملی، در آن آمده است. داده در یک فایل جداست و بدون تغییر کد به‌روز می‌شود.

به‌طور پیش‌فرض شماره‌ای که رقم کنترلش درست است پذیرفته می‌شود و فقط نام بانک خالی می‌ماند، تا مشتری واقعی به خاطر داده قدیمی رد نشود. اگر بخواهید فقط بانک‌های شناخته‌شده پذیرفته شوند، گزینه requireKnownBank را روشن کنید.

نه. لوگوها علامت تجاری بانک‌ها هستند و بدون مجوز نمی‌شود آن‌ها را در یک محصول فروشی گذاشت. به جایش یک نشان ساده با حرف اول نام بانک نمایش داده می‌شود، و با renderBank و renderIcon لوگوهایی را که خودتان اجازه استفاده‌اش را دارید جایگزین می‌کنید.

بله. کامپوننت‌ها از قبل «use client» دارند و در Server Component استفاده می‌شوند. با ویژگی name، مقدار یکدست مستقیم به Server Action می‌رسد و توابع اعتبارسنجی روی سرور هم اجرا می‌شوند. برای react-hook-form نمونه Controller در README هست.

README و مرجع API به انگلیسی نوشته شده‌اند، مثل بیشتر پکیج‌های npm. پیام‌های خطا، مثال‌ها و صفحه دمو فارسی‌اند و همین صفحه هم همه قابلیت‌ها را به فارسی نشان می‌دهد.

یک بار بخرید، در همه فرم‌های پرداخت استفاده کنید

۶۰۰٬۰۰۰ تومان، پرداخت یک‌باره، دانلود فوری · نسخه ۱.۰.۰

خرید و دانلود