- PVSM.RU - https://www.pvsm.ru -
Всем кто верстал, верстает или будет верстать форму для приёма банковских карт дарю плагин CardInfo.js, с помощью которого можно сверстать вот такую форму:
Плагин по номеру карты определяет один из 49 российских банков (потом и прочие страны добавлю), выдаёт вам логотип банка, цвета для фона, ссылку на сайт банка, определяет тип карты, его логотип и прочее. С этими данными делаете что хотите, верстаете любую форму.
Поиграться с формой можно на демо странице. [1] Код плагина и инструкции по установке на гитхабе. [2]
Под катом:
Плагин распространяется через NPM npm install card-info
и через Bower bower install card-info
. Подключается путём вставки JS файла в HTML страницу, или можно подключить его как модуль в стиле CommonJS или ES6. Подключить можно главный файл со всей логикой и всеми данными о банках (69 KB), или отдельно файл с логикой (5 KB) и отдельной базу банков для нужной страны (вообще пока есть только Россия, так что это на будущее), подробнее в документации на гитхабе. [2] Плагин независим, то есть для своей работы не требует никаких дополнительных библиотек. Весь код плагина покрыт тестами. Работает даже в IE6. Можете погонять тесты в браузере. [3]
Создайте экземпляра класса CardInfo, передав в конструктор в качестве аргумента строку введённую пользователем в поле с номером карты var cardInfo = new CardInfo(number)
. Экземпляр будет содержать объект с дополнительной информацией о карте:
Все данные о банке определяются по первым 6 цифрам номера карты, данные о типе определяются по перым 1–2 цифрам номера карты. При вызове можно передать ещё и настройки, но об этом в полной мере написано в документации на гитхабе. [2] и я не буду повторяться здесь.
Сам плагин никак не привязан к вёрстке и внешний вид формы вы можете сделать каким угодно используя данные полученные с помощью CardInfo.
Про каждый банк в базе плагина известны следующие данные:
По BIN (префиксу) и определяется к какому банку принадлежит карта пользователя. Всего в базе 2573 префикса. В среднем на один банк приходится 52 префикса.
На сайте http://www.banki.ru/ [4] есть информация о 560 российских банках, если бы я нашёл префиксы для всех банков, файл с плагином весил бы много мегабайт. Если бы я скачал и обработал 560 логотипов, подобрал 560 раз цвета для формы и цвет текста, я бы скорее умер от тоски, чем выложил этот плагин.
По-этому было решено взять какое-то оптимальное количество банков, пусть будет 50. Я открыл список банков отсортированный по финансовому рейтингу. [5] и взял 50 первых банков, которые занимаются выпуском кредитных или дебетовых карт. В общем, все самые популярные банки в базу попали.
Префиксы же я взял с сайта BIN Codes. [6] Возможно каких-то префиксов будет не хватать, какие-то будут неверно определять банк, но это будет скорее исключением. BIN Codes имеет платное АПИ, а если берут деньги, значит скорее всего делают более менее качественно. Также я сравнивал наличие некоторых префиксов в базах разных сайтах с префиксами и BIN Codes себя здорово проявили. Их АПИ позволяет только определить банк по префиксу, а передо мной стояла обратная задача. Я написал им, что хочу создать CardInfo.js и мне нужны префиксы 50 российских банков, я готов платить, но не понимаю, что мне делать, учитывая, что ваше АПИ мне помочь не может. И они, дай бог им здоровья, сказали что я могу просто воспользоваться разделом на их сайте, который задачу решает, но пока не отражён в их АПИ, в общем префиксы получилось достать бесплатно.
Информация по каждому банку содержится в отдельно JSON файле, в папке «banks». Когда я создавал базу этих файлов, я не переходил к следующему, пока не заполню все поля в одном файле и не скачаю логотип. В какой-то момент файлов стало много и я перестал понимать, сколько банков уже есть в моей базе. Проверял я так, смотрел информацию о папке и видел там количество файлов внутри папке. Когда их стало 50, я остановился. Но оказалось там спрятался файлик «.DS_Store» который сам по себе создаётся почти во всех папках на маках, да ещё почему-то переставший отображаться даже со включенным отображением скрытых файлов. Вот у меня уже всё готово, а я понял что не доделал один банк. Но меня уже воротит от всех этих банков, так что пусть 49 и остаётся :–)
Я старался как можно больше логотипов скачать в формате SVG, чтобы при масштабировании они смотрелись лучше, но некоторые удалось найти только в PNG. Все логотипы в исходном размере и формате лежат в папке «src/banks-logos», в папку «dist/banks-logos» были скопированы все SVG логотипы без изменений, а также все SVG и PNG были преобразованы в PNG и обрезаны до 600×200. В общем в папке «dist/banks-logos» есть логотип для каждого банка в формате PNG, а для некоторых ещё и в SVG. Вы можете сами порезать логотипы вызовом команды npm run build-banks-logos
и передать в неё настройки, подробнее в документации.
Форма получается особенно красивой, если логотип белый, потому что тогда можно форму покрасить в яркие цвета. По-этому, когда это было возможно я редактировал логотип и перекрашивал его в белый цвет. А для Всероссийского Банка Развития Регионов пришлось вообще самому отрисовывать логотип, потому что в интернет я так и не нашёл их логотипа в более или менее потребном виде.
Все логотипы типов есть и в SVG и в PNG. Типы есть следующие: Visa, MasterCard, American Express, Diners Club, Discover, JCB, UnionPay, Maestro или МИР. Для каждого типа есть логотип в трёх стилях: белый, чёрный и цветной. Первые 8 логотипов я позаимствовал у Стюарта Колвиля [7], логотип платёжной системы МИР у Евгения Катышева [8], а к общему стилю этот же логотип привёл самостоятельно.
У CardInfo существует настройка «brandLogoPolicy», которая определяет стиль логотип типа. Два самых крутых значения для неё это «auto» и «mono». Про остальные в документации.
Работает так, что если логотип банка чёрный/белый/цветной, то и логотип типа будет чёрным/белым/цветным. Выглядит эффектно, форма становится живой, и всё на ней сочетается.
Если фон светлый, то логотип типа будет чёрным, если фон тёмный, то логотип будет белым.
С CardInfo можно делать классные формы для приёма банковских карт. Я старался сделать этот плагин гибким, удобным, легковесным, надёжным и полезным, и думаю, что у меня получилось. Надеюсь вы будете использовать это плагин с удовольствием, а конверсии на ваших страницах оплаты вырастут. Если удовольствие от использования плагина начнёт зашкаливать, можете меня поблагодарить на специальной странице для выражения благодарностей Сергею Дмитриеву :–) [9]
Автор: Сергей Дмитриев
Источник [11]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/251923
Ссылки в тексте:
[1] на демо странице.: http://srdm.io/демо/card-info
[2] на гитхабе.: https://github.com/iserdmi/card-info
[3] тесты в браузере.: https://cdn.rawgit.com/iserdmi/card-info/158c9476/test/browser/main.html
[4] http://www.banki.ru/: http://www.banki.ru/
[5] список банков отсортированный по финансовому рейтингу.: http://www.banki.ru/banks/?order=fin_rating
[6] BIN Codes.: https://www.bincodes.com/bin-search/
[7] у Стюарта Колвиля: https://muffinresearch.co.uk/svg-credit-card-icons/
[8] у Евгения Катышева: http://evgenykatyshev.ru/notes/all/mir-logo/
[9] на специальной странице для выражения благодарностей Сергею Дмитриеву :–): http://srdm.io/спасибо
[10] CodeCanyon: https://codecanyon.net/
[11] Источник: https://habrahabr.ru/post/324738/
Нажмите здесь для печати.