Красивые формы для приёма банковских карт с CardInfo.js

    Всем кто верстал, верстает или будет верстать форму для приёма банковских карт дарю плагин 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
    • 0
      Мне кажется, или не хватает поля для ввода Имени и Фамилии?
      • 0
        Если подключать оплату через страйп, то не нужно поле с именем и фамилией. Если вам нужно это поле, просто добавьте его. Плагин никак не привязан к вёрстке. Вообще, на демо-странице все поля фиктивные, кроме поля с номером карты.
        • 0
          Stripe работает в очень немногих странах, и РФ не в их списке (
        • 0
          Много раз писал чушь в этом поле и ни разу платеж не был отклонен.
        • 0
          Что будет если кто нить вобьет какой нить банк с процессингом JCB или еще какой либо эксклюзив?

          Чем обусловен выбор только 50 банков?
          • +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 самых крупных банков России. Остальные же увидят обычную форму.
          • –2
            Мне кажется использовать в таком вопросе как платежи банковскими картами любое стороннее ПО не следует. Это явная угроза безопасности и красивый способ автору стороннего ПО собирать данные банковских карт. )

            Да, исходники есть, но трудозатраты на их анализ, сравнимы с поддержкой своего решения.
            • +3
              Плагин получает на входе строку с номером карты (можете передавать только первые 6 символов, если хочется), а выдаёт объект с данными о карте. Никакого взаимодействия с внешними ресурсами, соответственно никак данные не украдут.

              Вот исходник, 280 строк из которы 90 строк описание типов: https://github.com/iserdmi/card-info/blob/master/src/card-info.js Не может быть, чтобы анализ 280 строк хоть как-то сравнился с выкачиванием информации о 50 банках: и логотип скачать, и обработать, и префиксы найти, и цвета подобрать, да ещё и логику написать.
              • –3
                Тут речь не о том, что я передаю скрипту, а о том, что я размещаю у себя на сайте js-скрипт который может быть например кейлогером.

                Придется проводить анализ после каждого коммита. У своего решения собрать базу контента нужно будет только один раз, дальше только логика. Т.ч. усилия сравнимы.
                • +8
                  Если вы и вправду однажды надумаете писать своё решение, CardInfo всё равно будет вам полезен. Просто возьмите все JSON файлы из папки «banks»: https://github.com/iserdmi/card-info/tree/master/banks А логику напишите сами.
                • +5
                  Вы пишите какую-то ахинею, ну честно.
                  Что мешает скопировать себе в репозиторий JS файл, предварительно его проанализировав на предмет отправки данных третьим лицам? Такой анализ займет минут 5 максимум, если досконально все просматривать… И никакие сторонние «кейлогеры» у вас не появятся на сайте
                  • 0
                    Самоуверенность конечно лучший помощник в вопросах безопасности. Допустим сегодня вы себе скопируете этот код. На след.неделе автор добавит еще один банк. Вам нужно будет снова проверить весь код, чтобы добавить это себе. На сколько версий вас хватит? Когда вы решите «бог с ним, и так сойдет» и добавите себе в проект код без проверки? Да, это по 5 минут в неделю, но рутина доставляет, верно?

                    Честно мне наплевать, что кто-то считает мои слова ахинеей. Я свое дело сделал — напомнил о безопасности. А дальше каждый ССЗБ.
                    • –1
                      Ну, во-первых, вы утрируете. Никто вам не будет каждую неделю ничего добавлять. Во-вторых, зачем вы предлагаете мне каждый раз проверять весь файл? Или вы Git'ом никогда не пользовались?

                      А как вы предлагаете тогда следить за проектом, в который регулярно приходят пулл реквесты от нескольких десятков разработчиков, и в котором так или иначе есть N-ое количество зависимостей?
                      Одними тестами сыт не будешь, регулярный code review проводится в любом случае.

                      Короче, либо вы реально не разбираетесь в предмете, либо просто троллите. В любом случае, не вижу смысла дальше объяснять…
                      • +2
                        Я уже сказал, что нет смысла в полемике. Но раз вы отреагировали… Я всего лишь почитал своей задачей предупредить сообщество, а не обидель автор, вас или кого-то еще. Жаль что вы решили, будто это тролинг. Да, вы правы, я скорее менеджер, чем разработчик. Я увидел то, что мне показалось проблемой. Все еще верю, что это не повод для личных нападок…
                        • 0
                          Спасибо за то, что подняли вопрос и качественно аргументировали. Согласен с вами, что поддержка своего решения будет сравнима с использованием сторонней библиотеки с вытекающими оттуда проверками всех коммитов. Идея автора использовать только json как данные понравилась. Мне кажется с точки зрения безопасности должно быть приемлимо.
            • +3
              С логотипами могут быть проблемы. Возможно понадобится разрешение от банка. Особенно если это коммерческий продукт будет.
              • 0

                Не думали сделать многоуровневую проверку по номеру?


                К примеру:


                1. Определяем тип
                2. Группируем BIN по первым 4-м цифрам, загружаем префикс->банк
                3. Загружаем базу префиксов банка

                Думаю так можно бы было уменьшить размер и количество файлов

                • 0
                  Файл грузится только 1, где сразу и вся логика и данные о банке. Ну или 2 файла, один слогикой, другой со всеми банками страны. Файл со 50 банками России и логикой весит 69 КБ. Это довольно маленький объём, можно просто сразу загрузить, не критично.

                  Если хочется подгружать информацию о банках по мере необходимости, можно в серверной части своего сайта подключить CardInfo (если пишем сервер на Node.js), передавать на сервер номер карты, а с сервера уже получать данные о банке. Если пишем не на Node.js то можно написать свою простецкую логику с использованием JSON файлов из базы плагина.
                  • 0

                    Речь идет о подключении всех банков.

                    • 0
                      Обо всех банках можно будет поговорить, когда решится вопрос с монетизацией плагина, если монетизация в итоге будет. Дело в том, что мало один раз выкачать все 560 банков для России, нужно же ещё и поддерживать базу в актуальном состоянии. То у банков логотип поменяется, то цвета фирменные, то сайт на другом домене повесят. На это нужно реально много времени. А если учесть, что будет не только Россия…

                      Если подгружать без серверной обработки, то я бы сделал так: по файлу на каждый префикс, а внутри файла вся информация о банке, и не важно, что будет 400+ файлов с одинаковой информацией о сбербанке. Грузиться то всё равно будет только один файл, соответствующий префиксу карты пользователя. Но мне кажется всё это неактуально, пока у нас меня не все банки, а только 50.

                      Да и вообще, если удастся продавать плагин, то сделаю АПИ, чтобы вообще можно было ничего не грузить на сайт. Просто кидаешь запрос в АПИ с префиксом карты, а он тебе информацию о банке.
                      • 0
                        Монетизацию можете сделать через перепродажу банкам контроля над доменами специального вида.
                        Заводите себе доменное имя, которое по дефолту резолвится в ваш сервак, отдающий json/xml из вашей базы для запросов к любым поддоменам. За денюжку передаёте банку контроль над поддоменом — и уже их сервак отдает json/xml c нужным им контентом для отображения. Вам — денюжку и минус нагрузку на сервак, им — могут хоть под каждый тип карты отдельную svg-шку отдавать и корпоративный PR на куче сайтов започтибесплатно.
                • +1
                  Логотипы MC старые http://www.underconsideration.com/brandnew/archives/new_logo_and_identity_for_mastercard_by_pentagram.php
                  • +1
                    Вот уж действительно «дозор» :–) Я разработчик, и у меня вызывает некоторое затруднение перерисовка логотипов в векторных редакторах, но я думаю я разберусь и сделаю иконки мастеркарда с обновлённым логотипом. Просто их нужно сделать в общем стиле с остальными иконками.
                  • 0
                    С китайцами будут проблемы (CUP — China Union Pay) — у них банк (BIN) не всегда определяется 6 цифрами (иногда 8 или 9), в их БИН-таблице размерность в отдельном поле лежит.
                    Ну и есть карты, которые относятся сразу как в Visa/MC так и к CUP — бин начинается с 4, но в пределах страны (Китая) ходит как CUP, во вне — Visa
                    Ну и пара сотен частных случаев, когда карта сразу и Visa и MC :)
                    • +1
                      Как доберусь до китайской базы банков буду думать. Если с Китаем действительно будут какие-то особые проблемы, можно просто не делать для них плагин :–)
                      • +1
                        я думаю многим было бы интересно увидеть пару примеров особенно:
                        когда карта сразу и Visa и MC
                      • +1
                        Хорошее начинание, позволю себе немного конструктивной критики:
                        1) Длинна PAN, например, для VIsa не соответствует тому что есть в вики (https://en.wikipedia.org/wiki/Payment_card_number)
                        2) Неплохо бы добавить проверку валидности PAN по Луну
                        3) Рисовать пользователям мобильных клавиатуру только с цифрами.

                        Последнее вообще проблема каждой второй, если не первой, формы ввода чисел при платежах, в том числе и достаточно матёрых организаций и банков. В простейшем случае достигается input type=«number» + отключение браузерных стрелок увеличения/уменьшения значения, но поскольку у вас здесь единое поле ввода, с пробелами, тут начнётся самое интересное =)
                        • 0
                          Суть плагина в том, чтобы помочь вам сверстать форму, а по большому дать цвета для фона и логотипы. То что вы видите на демо-странице это лишь один из бесчисленного множества способов сверстать форму используя данные полученные в плагине.

                          Валидацию сюда включать не стал, потому что тогда плагин выйдет за пределы «поможет сврестать красивую форму» и станет менее лаконичным. Нужно будет добавлять настройку с языком, для всех ошибок валидаций писать текст на всех языках. Я думаю если уж нужен плагин для валидации формы приёма карты, то лучше написать отдельный, или просто сделать дополнению к какому-нибудь jQuery.validate
                          • 0
                            Валидацию по луну можно сделать в виде иконок (зеленая галочка и красный крестик), и переводить ничего не надо и картинки можно под стиль формы подобрать. Будет красиво.
                            • 0
                              В общем-то если делать только валидацию по луну, то может и можно… Я обмозгую.

                              Просто если уж делать валидацию, то хочется сразу по всему и по дате истечения, и по длине номера в зависимости от типа карт, и по коду безопасности, а вот тогда точно нужны текста с ошибками.
                      • 0

                        Хочу заметить что код карточек (например, в США) не обязательно может быть на задней стороне справа.

                        • 0
                          +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-значный код на обороте, но он нужен для других целей (мне кажется, у меня его как-то спросили на самом сайте амекса).

                          При такой визуализации, которая есть сейчас, это только собьёт с толку, но с учётом низкой распространённости амексовских карточек в России, думаю, всем будет пофиг :)
                        • +1
                          Отличное решение. Ради интереса проверил на неполных номерах — банк отлично определяется.
                          Уже даже внедрил на проект

                          • 0
                            Как автору, мне очень приятно знать, что плагин уже используется в реальном проекте :–)
                          • 0
                            Плагин распространяется через NPM npm install

                            Возможно, я что-то упустил, но вот так ставить сторонний пакет я бы не стал. Точно так же легко и забыв про это можно сделать npm update, а там кто знает, что прилетит? Вдруг учету авторов взломают и запушат кард логгер?
                            Правильнее копировать 1раз код и забыть

                            • +2
                              достаточно в package.json зафиксировать версию и тогда не будет проблем с npm update
                            • +1
                              Кстати, есть banks-db, в котором много банков (разных стран), их фирменный цвет и ссылка на сайт.
                              • 0
                                Когда только начинал разрабатывать, использовал их базу. Но при более скрупулёзном анализе их базы выяснилось: очень много иранских банков, их наверное большая часть, очень сильно не хватает префиксов для банков, да и логотипов нет, а это чуть ли не главная изюминка CardInfo.
                              • 0

                                Не забывайте, пожалуйста, что размещая форму для ввода реквизитов карты на вашем сайте, вы должны соответствовать стандарту PCI DSS.

                                • 0
                                  да, я вот тоже об этом подумал — помимо самих банков, те шесть сайтов в РФ которые соответствуют PCI DSS и могут принимать карты — уже давно обзавелись своими формами.
                                  • 0
                                    По поводу шести, думаю, цифра сииильно преуменьшена. Плюс, при интеграции с банком, брендированные страницы оплаты всё равно надо верстать самому, банковский оригинал при этом ну очень не идеал.
                                    • 0
                                      Разве на брендированные страницы оплаты можно вставлять скрипты? За всех не скажу, но сбер нам разрешал только css
                                      • 0
                                        У одного из топ-3 можно было, просто все шаблоны и их ресурсы хранятся на стороне банка, анализируясь уже при необходимости. Как показывает практика, вычищать скрипты неблагодарная работа, проще ввести версионность и неотвратимость наказания за встраивание вредоносного кода.
                                    • 0
                                      Не для всех вариантов подключения к процессингу нужен полный PCI DSS.
                                      • 0

                                        Для принятия данных карты напрямую на своём сайте — всегда. У вас есть другая информация?

                                        • 0
                                          Скажем так, есть разные уровни этого самого PCI DSS — в большинстве случаев достаточно оформить опросник и проходить сканирование раз в квартал.

                                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                  Самое читаемое