Всем кто верстал, верстает или будет верстать форму для приёма банковских карт дарю плагин 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.
Комментарии (48)
dezconnect
06.04.2017 13:07Что будет если кто нить вобьет какой нить банк с процессингом JCB или еще какой либо эксклюзив?
Чем обусловен выбор только 50 банков?
iserdmi
06.04.2017 13:21+3> Что будет если кто нить вобьет какой нить банк с процессингом JCB или еще какой либо эксклюзив?
У плагина есть поддержка следующих типов: Visa, MasterCard, American Express, Diners Club, Discover, JCB, UnionPay, Maestro и МИР. Следовательно, если человек вобьёт номер карты 2131 0000 0000 0000 (начинается также как и некоторые JCB карты), в результирующем объекте будет вся информация о типе JCB, но никакой информации о банке, потому что сейчас в базе нету таких банков, какие выпускали бы карты JCB.
> Чем обусловен выбор только 50 банков?
Из статьи:… На сайте http://www.banki.ru/ есть информация о 560 российских банках, если бы я нашёл префиксы для всех банков, файл с плагином весил бы много мегабайт… Я открыл список банков отсортированный по финансовому рейтингу и взял 50 первых банков, которые занимаются выпуском кредитных или дебетовых карт. В общем, все самые популярные банки в базу попали.
Большая часть ваших пользователей увидит форму красивой, потому что скорее всего они являются клиентами одного из 50 самых крупных банков России. Остальные же увидят обычную форму.
aliencash
06.04.2017 13:14-2Мне кажется использовать в таком вопросе как платежи банковскими картами любое стороннее ПО не следует. Это явная угроза безопасности и красивый способ автору стороннего ПО собирать данные банковских карт. )
Да, исходники есть, но трудозатраты на их анализ, сравнимы с поддержкой своего решения.iserdmi
06.04.2017 13:26+3Плагин получает на входе строку с номером карты (можете передавать только первые 6 символов, если хочется), а выдаёт объект с данными о карте. Никакого взаимодействия с внешними ресурсами, соответственно никак данные не украдут.
Вот исходник, 280 строк из которы 90 строк описание типов: https://github.com/iserdmi/card-info/blob/master/src/card-info.js Не может быть, чтобы анализ 280 строк хоть как-то сравнился с выкачиванием информации о 50 банках: и логотип скачать, и обработать, и префиксы найти, и цвета подобрать, да ещё и логику написать.aliencash
06.04.2017 13:35-3Тут речь не о том, что я передаю скрипту, а о том, что я размещаю у себя на сайте js-скрипт который может быть например кейлогером.
Придется проводить анализ после каждого коммита. У своего решения собрать базу контента нужно будет только один раз, дальше только логика. Т.ч. усилия сравнимы.
berezuev
06.04.2017 16:18+5Вы пишите какую-то ахинею, ну честно.
Что мешает скопировать себе в репозиторий JS файл, предварительно его проанализировав на предмет отправки данных третьим лицам? Такой анализ займет минут 5 максимум, если досконально все просматривать… И никакие сторонние «кейлогеры» у вас не появятся на сайтеaliencash
06.04.2017 23:05Самоуверенность конечно лучший помощник в вопросах безопасности. Допустим сегодня вы себе скопируете этот код. На след.неделе автор добавит еще один банк. Вам нужно будет снова проверить весь код, чтобы добавить это себе. На сколько версий вас хватит? Когда вы решите «бог с ним, и так сойдет» и добавите себе в проект код без проверки? Да, это по 5 минут в неделю, но рутина доставляет, верно?
Честно мне наплевать, что кто-то считает мои слова ахинеей. Я свое дело сделал — напомнил о безопасности. А дальше каждый ССЗБ.berezuev
06.04.2017 23:24-1Ну, во-первых, вы утрируете. Никто вам не будет каждую неделю ничего добавлять. Во-вторых, зачем вы предлагаете мне каждый раз проверять весь файл? Или вы Git'ом никогда не пользовались?
А как вы предлагаете тогда следить за проектом, в который регулярно приходят пулл реквесты от нескольких десятков разработчиков, и в котором так или иначе есть N-ое количество зависимостей?
Одними тестами сыт не будешь, регулярный code review проводится в любом случае.
Короче, либо вы реально не разбираетесь в предмете, либо просто троллите. В любом случае, не вижу смысла дальше объяснять…aliencash
06.04.2017 23:49+2Я уже сказал, что нет смысла в полемике. Но раз вы отреагировали… Я всего лишь почитал своей задачей предупредить сообщество, а не обидель автор, вас или кого-то еще. Жаль что вы решили, будто это тролинг. Да, вы правы, я скорее менеджер, чем разработчик. Я увидел то, что мне показалось проблемой. Все еще верю, что это не повод для личных нападок…
Nikelandjelo
07.04.2017 03:29Спасибо за то, что подняли вопрос и качественно аргументировали. Согласен с вами, что поддержка своего решения будет сравнима с использованием сторонней библиотеки с вытекающими оттуда проверками всех коммитов. Идея автора использовать только json как данные понравилась. Мне кажется с точки зрения безопасности должно быть приемлимо.
pm_wanderer
06.04.2017 13:26+3С логотипами могут быть проблемы. Возможно понадобится разрешение от банка. Особенно если это коммерческий продукт будет.
darken99
06.04.2017 14:08Не думали сделать многоуровневую проверку по номеру?
К примеру:
- Определяем тип
- Группируем BIN по первым 4-м цифрам, загружаем префикс->банк
- Загружаем базу префиксов банка
Думаю так можно бы было уменьшить размер и количество файлов
iserdmi
06.04.2017 14:15Файл грузится только 1, где сразу и вся логика и данные о банке. Ну или 2 файла, один слогикой, другой со всеми банками страны. Файл со 50 банками России и логикой весит 69 КБ. Это довольно маленький объём, можно просто сразу загрузить, не критично.
Если хочется подгружать информацию о банках по мере необходимости, можно в серверной части своего сайта подключить CardInfo (если пишем сервер на Node.js), передавать на сервер номер карты, а с сервера уже получать данные о банке. Если пишем не на Node.js то можно написать свою простецкую логику с использованием JSON файлов из базы плагина.darken99
06.04.2017 14:26Речь идет о подключении всех банков.
iserdmi
06.04.2017 14:40Обо всех банках можно будет поговорить, когда решится вопрос с монетизацией плагина, если монетизация в итоге будет. Дело в том, что мало один раз выкачать все 560 банков для России, нужно же ещё и поддерживать базу в актуальном состоянии. То у банков логотип поменяется, то цвета фирменные, то сайт на другом домене повесят. На это нужно реально много времени. А если учесть, что будет не только Россия…
Если подгружать без серверной обработки, то я бы сделал так: по файлу на каждый префикс, а внутри файла вся информация о банке, и не важно, что будет 400+ файлов с одинаковой информацией о сбербанке. Грузиться то всё равно будет только один файл, соответствующий префиксу карты пользователя. Но мне кажется всё это неактуально, пока у нас меня не все банки, а только 50.
Да и вообще, если удастся продавать плагин, то сделаю АПИ, чтобы вообще можно было ничего не грузить на сайт. Просто кидаешь запрос в АПИ с префиксом карты, а он тебе информацию о банке.
mickvav
06.04.2017 15:30Монетизацию можете сделать через перепродажу банкам контроля над доменами специального вида.
Заводите себе доменное имя, которое по дефолту резолвится в ваш сервак, отдающий json/xml из вашей базы для запросов к любым поддоменам. За денюжку передаёте банку контроль над поддоменом — и уже их сервак отдает json/xml c нужным им контентом для отображения. Вам — денюжку и минус нагрузку на сервак, им — могут хоть под каждый тип карты отдельную svg-шку отдавать и корпоративный PR на куче сайтов започтибесплатно.
dozore
06.04.2017 14:48+1Логотипы MC старые http://www.underconsideration.com/brandnew/archives/new_logo_and_identity_for_mastercard_by_pentagram.php
iserdmi
06.04.2017 14:51+1Вот уж действительно «дозор» :–) Я разработчик, и у меня вызывает некоторое затруднение перерисовка логотипов в векторных редакторах, но я думаю я разберусь и сделаю иконки мастеркарда с обновлённым логотипом. Просто их нужно сделать в общем стиле с остальными иконками.
Dimes
06.04.2017 15:01С китайцами будут проблемы (CUP — China Union Pay) — у них банк (BIN) не всегда определяется 6 цифрами (иногда 8 или 9), в их БИН-таблице размерность в отдельном поле лежит.
Ну и есть карты, которые относятся сразу как в Visa/MC так и к CUP — бин начинается с 4, но в пределах страны (Китая) ходит как CUP, во вне — Visa
Ну и пара сотен частных случаев, когда карта сразу и Visa и MC :)iserdmi
06.04.2017 15:03+1Как доберусь до китайской базы банков буду думать. Если с Китаем действительно будут какие-то особые проблемы, можно просто не делать для них плагин :–)
neolink
07.04.2017 03:10+1я думаю многим было бы интересно увидеть пару примеров особенно:
когда карта сразу и Visa и MC
TachikomaGT
06.04.2017 17:03+1Хорошее начинание, позволю себе немного конструктивной критики:
1) Длинна PAN, например, для VIsa не соответствует тому что есть в вики (https://en.wikipedia.org/wiki/Payment_card_number)
2) Неплохо бы добавить проверку валидности PAN по Луну
3) Рисовать пользователям мобильных клавиатуру только с цифрами.
Последнее вообще проблема каждой второй, если не первой, формы ввода чисел при платежах, в том числе и достаточно матёрых организаций и банков. В простейшем случае достигается input type=«number» + отключение браузерных стрелок увеличения/уменьшения значения, но поскольку у вас здесь единое поле ввода, с пробелами, тут начнётся самое интересное =)iserdmi
06.04.2017 17:26Суть плагина в том, чтобы помочь вам сверстать форму, а по большому дать цвета для фона и логотипы. То что вы видите на демо-странице это лишь один из бесчисленного множества способов сверстать форму используя данные полученные в плагине.
Валидацию сюда включать не стал, потому что тогда плагин выйдет за пределы «поможет сврестать красивую форму» и станет менее лаконичным. Нужно будет добавлять настройку с языком, для всех ошибок валидаций писать текст на всех языках. Я думаю если уж нужен плагин для валидации формы приёма карты, то лучше написать отдельный, или просто сделать дополнению к какому-нибудь jQuery.validate
lomalkin
07.04.2017 06:40Валидацию по луну можно сделать в виде иконок (зеленая галочка и красный крестик), и переводить ничего не надо и картинки можно под стиль формы подобрать. Будет красиво.
iserdmi
07.04.2017 06:48В общем-то если делать только валидацию по луну, то может и можно… Я обмозгую.
Просто если уж делать валидацию, то хочется сразу по всему и по дате истечения, и по длине номера в зависимости от типа карт, и по коду безопасности, а вот тогда точно нужны текста с ошибками.
springimport
06.04.2017 19:22Хочу заметить что код карточек (например, в США) не обязательно может быть на задней стороне справа.
mikka1
07.04.2017 22:27+1, особенно для Амекса
Точнее говоря, с Амексом вообще засада:
American Express usually uses the four-digit code on the front of the card, referred to as the Card Identification Code (CID), but also has a three-digit code on the back of the card, referred to as the Card Security Code (CSC).
Т.е. на стандартной амексовской карточке есть и 4-значный код на морде (и это как раз тот код, который нужен при интернет-покупках), и 3-значный код на обороте, но он нужен для других целей (мне кажется, у меня его как-то спросили на самом сайте амекса).
При такой визуализации, которая есть сейчас, это только собьёт с толку, но с учётом низкой распространённости амексовских карточек в России, думаю, всем будет пофиг :)
Agel_Nash
06.04.2017 23:26+1Отличное решение. Ради интереса проверил на неполных номерах — банк отлично определяется.
Уже даже внедрил на проект
iserdmi
07.04.2017 06:46Как автору, мне очень приятно знать, что плагин уже используется в реальном проекте :–)
TimsTims
07.04.2017 09:41Плагин распространяется через NPM npm install
Возможно, я что-то упустил, но вот так ставить сторонний пакет я бы не стал. Точно так же легко и забыв про это можно сделать npm update, а там кто знает, что прилетит? Вдруг учету авторов взломают и запушат кард логгер?
Правильнее копировать 1раз код и забытьwadev8
07.04.2017 13:53+2достаточно в package.json зафиксировать версию и тогда не будет проблем с npm update
marklangovoi
08.04.2017 05:34+1Кстати, есть banks-db, в котором много банков (разных стран), их фирменный цвет и ссылка на сайт.
iserdmi
08.04.2017 12:24Когда только начинал разрабатывать, использовал их базу. Но при более скрупулёзном анализе их базы выяснилось: очень много иранских банков, их наверное большая часть, очень сильно не хватает префиксов для банков, да и логотипов нет, а это чуть ли не главная изюминка CardInfo.
Raider17
11.04.2017 10:41Не забывайте, пожалуйста, что размещая форму для ввода реквизитов карты на вашем сайте, вы должны соответствовать стандарту PCI DSS.
savarez
11.04.2017 12:01да, я вот тоже об этом подумал — помимо самих банков, те шесть сайтов в РФ которые соответствуют PCI DSS и могут принимать карты — уже давно обзавелись своими формами.
TachikomaGT
12.04.2017 12:03По поводу шести, думаю, цифра сииильно преуменьшена. Плюс, при интеграции с банком, брендированные страницы оплаты всё равно надо верстать самому, банковский оригинал при этом ну очень не идеал.
savarez
12.04.2017 12:16Разве на брендированные страницы оплаты можно вставлять скрипты? За всех не скажу, но сбер нам разрешал только css
TachikomaGT
12.04.2017 13:06У одного из топ-3 можно было, просто все шаблоны и их ресурсы хранятся на стороне банка, анализируясь уже при необходимости. Как показывает практика, вычищать скрипты неблагодарная работа, проще ввести версионность и неотвратимость наказания за встраивание вредоносного кода.
ennui
Мне кажется, или не хватает поля для ввода Имени и Фамилии?
iserdmi
Если подключать оплату через страйп, то не нужно поле с именем и фамилией. Если вам нужно это поле, просто добавьте его. Плагин никак не привязан к вёрстке. Вообще, на демо-странице все поля фиктивные, кроме поля с номером карты.
savarez
Stripe работает в очень немногих странах, и РФ не в их списке (
nmk2002
Много раз писал чушь в этом поле и ни разу платеж не был отклонен.