تشخیص نام بانک از روی شماره کارت کاربر در ری اکت و جاوااسکریپت
حتماً براتون پیش اومده که بخواین از روی شماره کارتِ یه کاربر بفهمین این کارت مال کدوم بانکه 🙂 مثلا توی فرم پرداخت، یا بخش ثبت اطلاعات کاربر، یا حتی فقط برای اینکه کار قشنگ تر و حرفهای تر بشه ..
اینکارو قراره با یه تابع خیلی خیلی ساده و کوچولو انجام بدیم.
این کار هم توی پروژه های React جواب میده، هم Vue، هم هر فریمورک دیگه ای که با جاوااسکریپت کار میکنه.
داستان چیه ؟
ما یه لیست از کدهای شش رقمی داریم که بهشون میگن Bank Identification Number یا همون BIN. هر شماره کارت بانکی تو ایران (و دنیا) با این ۶ رقم شروع میشه و اون ۶ رقم مشخص میکنن این کارت مال کدوم بانکه.
مثلا :
603799 -> بانک ملی
589210 -> بانک ملت
627381 -> بانک انصار
مرحله اول: ساخت دیکشنری بانک ها
باید یه آبجکت تعریف کنیم که کل BINها رو با اسم بانک ها نگه داره:
const banks = {
'603799': 'بانک ملی',
'603770': 'بانک صادرات',
'603769': 'بانک کشاورزی',
'589210': 'بانک سپه',
'610433': 'بانک ملت',
'628023': 'بانک مسکن',
'627648': 'بانک توسعه صادرات',
'627961': 'بانک صنعت و معدن',
'627353': 'بانک تجارت',
'589463': 'بانک رفاه',
'639347': 'بانک پاسارگاد',
'627412': 'بانک اقتصاد نوین',
'627488': 'بانک کارآفرین',
'622106': 'بانک پارسیان',
'621986': 'بانک سامان',
'639346': 'بانک سینا',
'639607': 'بانک سرمایه',
'502806': 'بانک شهر',
'502938': 'بانک دی',
'627381': 'بانک انصار',
'639599': 'بانک قوامین'
};
مرحله دوم: گرفتن شماره کارت و تشخیص بانک
فقط کافیه شش رقم اول شماره کارت رو برداریم و داخل آبجکت بالا چک کنیم:
const input = '6037991234567890'; // شماره کارت کاربر
const bin = input.slice(0, 6); // شش رقم اول
const detectBank = banks[bin] || 'نامشخص'; // پیدا کردن بانک
و تمام
الان متغیر detectBank حاوی اسم بانکه.
نتیجه:
console.log(detectBank); // بانک ملی
نکات تکمیلی برای باحال تر کردنش:
🔹 میتونی وقتی کاربر داره شماره کارت وارد میکنه، اسم بانک رو هم نشون بدی.
🔹 تو فرم ها میتونه یه آیتم UX جذاب باشه که حس حرفه ای بودن بده.
🔹 حتی میتونی لوگوی بانک رو هم براساس detectBank نشون بدی.
استفاده در ری اکت
چیز خاصی لازم نداره. فقط کافیه این تابع رو داخل یک useEffect یا موقع تغییر ورودی صدا بزنی :
const [cardNumber, setCardNumber] = useState('');
const [bankName, setBankName] = useState('');
useEffect(() => {
const bin = cardNumber.slice(0, 6);
setBankName(banks[bin] || 'نامشخص');
}, [cardNumber ]
نتیجهگیری:
با همین چند خط کد ساده، میتونی تجربه کاربری فوق العاده ای بسازی و یه حس جذاب و حرفه ای به فرم هات بدی. اینم یکی از اون ترفند های کوچیکی بود که یه فرانت کار باهوش توی جیبش داره 🙂
دیدگاهتان را بنویسید