• Разработка под e-commerce
• Разработка веб-сайтов
• Платежные системы
• JavaScript

Всем кто верстал, верстает или будет верстать форму для приёма банковских карт дарю плагин CardInfo.js, с помощью которого можно сверстать вот такую форму:

Плагин по номеру карты определяет один из 49 российских банков (потом и прочие страны добавлю), выдаёт вам логотип банка, цвета для фона, ссылку на сайт банка, определяет тип карты, его логотип и прочее. С этими данными делаете что хотите, верстаете любую форму.

Поиграться с формой можно на демо странице. Код плагина и инструкции по установке на гитхабе.

Под катом:

• Пара слов о плагине;
• Про базу банков, и почему их 49, а не 50;
• Про логотипы банков;
• Про логотипы типов;
• Несколько моих вопросов к читателям;
  

CardInfo.js

Плагин распространяется через NPM npm install card-info и через Bower bower install card-info. Подключается путём вставки JS файла в HTML страницу, или можно подключить его как модуль в стиле CommonJS или ES6. Подключить можно главный файл со всей логикой и всеми данными о банках (69 KB), или отдельно файл с логикой (5 KB) и отдельной базу банков для нужной страны (вообще пока есть только Россия, так что это на будущее), подробнее в документации на гитхабе. Плагин независим, то есть для своей работы не требует никаких дополнительных библиотек. Весь код плагина покрыт тестами. Работает даже в IE6. Можете погонять тесты в браузере.

Создайте экземпляра класса CardInfo, передав в конструктор в качестве аргумента строку введённую пользователем в поле с номером карты var cardInfo = new CardInfo(number). Экземпляр будет содержать объект с дополнительной информацией о карте:

• Тип карты (Master Card, Visa, и т.д.);
• Путь к логотипу типа (логотипы для каждого типа вместе с плагином, в белом, чёрном и цветном исполнении);
• Название банка на английском и локальном языке банка;
• Путь к логотипу банка (логотипы для каждого банка из базы распространяются вместе с плагином);
• Цвета в которые нужно окрасить форму;
• Цвет текста, который будет хорошо виден на предложенном фоне и будет сочетаться с логотипом;
• Ссылка на сайт банка;
• Название кода безопасности (CVC, CVV, CID или CVN) для данного типа карт;
• Длина кода безопасности для данного типа карты (Обычно 3, но для американ экспресс 4);
• Маска номера карты (Не всегда 0000 0000 0000 0000);

Все данные о банке определяются по первым 6 цифрам номера карты, данные о типе определяются по перым 1–2 цифрам номера карты. При вызове можно передать ещё и настройки, но об этом в полной мере написано в документации на гитхабе. и я не буду повторяться здесь.

Сам плагин никак не привязан к вёрстке и внешний вид формы вы можете сделать каким угодно используя данные полученные с помощью CardInfo.

База банков

Про каждый банк в базе плагина известны следующие данные:

• Путь к логотипу банка;
• Название банка на английском;
• Название банка на языке той страны, в которой работает этот банк;
• Ссылки на сайт банка;
• Цвета, в которые стоит окрасить форму для этого банка;
• Цвет текста, который будет хорошо смотреться на форме и сочетаться с логотипом;
• Стиль логотипа: белый, чёрный или цветной (нужно для выбора подходящего логотипа типа, об этом в следующем разделе);
• Перечень шестизначных префиксов карт «BIN» соответствующих этому банку;

По BIN (префиксу) и определяется к какому банку принадлежит карта пользователя. Всего в базе 2573 префикса. В среднем на один банк приходится 52 префикса.

На сайте http://www.banki.ru/ есть информация о 560 российских банках, если бы я нашёл префиксы для всех банков, файл с плагином весил бы много мегабайт. Если бы я скачал и обработал 560 логотипов, подобрал 560 раз цвета для формы и цвет текста, я бы скорее умер от тоски, чем выложил этот плагин.

По-этому было решено взять какое-то оптимальное количество банков, пусть будет 50. Я открыл список банков отсортированный по финансовому рейтингу. и взял 50 первых банков, которые занимаются выпуском кредитных или дебетовых карт. В общем, все самые популярные банки в базу попали.

Префиксы же я взял с сайта BIN Codes. Возможно каких-то префиксов будет не хватать, какие-то будут неверно определять банк, но это будет скорее исключением. 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 логотипов я позаимствовал у Стюарта Колвиля, логотип платёжной системы МИР у Евгения Катышева, а к общему стилю этот же логотип привёл самостоятельно.

У CardInfo существует настройка «brandLogoPolicy», которая определяет стиль логотип типа. Два самых крутых значения для неё это «auto» и «mono». Про остальные в документации.

auto

Работает так, что если логотип банка чёрный/белый/цветной, то и логотип типа будет чёрным/белым/цветным. Выглядит эффектно, форма становится живой, и всё на ней сочетается.

mono

Если фон светлый, то логотип типа будет чёрным, если фон тёмный, то логотип будет белым.

Заключение

С CardInfo можно делать классные формы для приёма банковских карт. Я старался сделать этот плагин гибким, удобным, легковесным, надёжным и полезным, и думаю, что у меня получилось. Надеюсь вы будете использовать это плагин с удовольствием, а конверсии на ваших страницах оплаты вырастут. Если удовольствие от использования плагина начнёт зашкаливать, можете меня поблагодарить на специальной странице для выражения благодарностей Сергею Дмитриеву :–)

Обратная связь

• Интересно услышать ваше мнение о плагине и пожелания к дальнейшему развитию
• Если кто-то станет смотреть код, и захочет как-то прокомментировать, буду рад услышать критику
• Я впервые писал тесты, и тут особенно было бы интересно получить обратную связь
• Я собираюсь добавить банки других стран и начать продавать плагин через CodeCanyon или что-то подобное. Вот только я совсем не могу понять, могу ли я вообще продавать его? Меня смущает то, что в плагине используются логотипы банков, которые мне не принадлежат, и логотипы типов, которые преимущественно нарисовал Стюарт и распространяет под лицензией MPL 2.0.