BinKing — инструмент для создания королевских форм приёма банковских карт. BinKing позволяет по номеру карты получить логотип банка, цвета, номер телефона, логотип бренда и прочее. Также BinKing помогает в валидации таких форм. Используйте BinKing, чтобы создать умную и отзывчивую форму для приёма банковских карт. Увеличьте конверсию, увеличьте лояльность пользователей, снизьте нагрузку отдела поддержки.

Для использования плагина вам понадобится API ключ (пока не работает, но это временно) или данные из архива. Ключ и архив можно получить в личном кабинете на сайте BinKing. Перечень доступных банков и стран смотрите на этой странице.

Демонстрация использования плагина доступна на JSFiddle. Эта демонстрация является частью подробного гайда по созданию платёжной формы. Рассказываем и показываем, как подключить этот плагин, как сделать автоматический перенос курсора в следующее поле, как сделать валидацию формы и много другое. В тексте статьи содержится полный пример кода, который можно просто скопировать к себе и использовать. При желании вы легко сможете его доработать под свои нужды.

В основе продукта лежит API (программа, которую могут использовать другие программы + возможность выкачать базу данных архивом), которое позволяет определить логотип банка, его фирменные цвета, бренд (Visa, MasterCard, и т.д.) и прочее по 6 первым цифрам номера карты. BinKing нужен тем, кто создаёт форму для приёма банковских карт у себя на сайте, чтобы улучшить UX (удобство, впечатления, чувство безопасности) пользователей.

Такие формы сделали все крупные компании. Живой пример можете увидеть при оплате чего угодно через Яндекс.Кассу или практически в любом мобильном приложении банка: когда вы начинаете вводить номер карты, форма перекрашивается в цвета этого банка, а рядом появляется логотип. Каждая из этих крупных компаний реализовала собственное решение для определения логотипа и цветов. Если это решение реализовали все крупные компании, значит в нём есть ценность. Если крупные уже сделали, а мелкие ещё нет, значит это восходящий тренд.

Однако, крупные компании уже давно сделали свои формы такими, а мелкие всё ещё нет. Почему? Создание такого решения для своей формы займёт около 7 дней работы программиста и ещё 7 работы дизайнера (логотипы выкачивать, обрабатывать, перерисовывать) — примерно 200 000 ?. Крупные компании могут себе позволить потратить 200 000 ? на создание такой формы. Мелкие компании считают ценность такой формы не достаточной, чтобы платить за неё 200 000 ?.

BinKing позволит превратить уже существующую форму для приёма банковских карт в такую же, как у Яндекс.Кассы, за пол дня работы программиста. Я предполагаю, что после выхода BinKing определение логотипа банка и цветов банка для платёжных форм станет стандартом. Потому что такие формы лучше. Потому что теперь такие формы смогут позволить себе все.

Нюансы

Для того, чтобы использовать BinKing сейчас необходимо приобрести доступ к архиву с логотипами банков и базой бин-кодов. Архив можно использовать для подключения как самостоятельно, так и с помощью специального плагина.

BinKing всё ещё в разработке. Сейчас API работает, но только в демо.

Пример подключения архива с помощью специального плагина

Имея архив с базой данных, вы можете воспроизвести работу API на своей стороне. Ниже пример кода с использованием Node.js и фреймворка express. Работа показанного в примере API идентична работе того API, которое будем представлять мы.

const express = require('express')
const fs = require('fs')
const path = require('path')

const app = express()
const banks = fs.fileReadSync(path.resolve(__dirname, 'path/to/data/banks-all.json'))
const bins = fs.fileReadSync(path.resolve(__dirname, 'path/to/data/bins-all.json'))

const withLogos = bank => {
  return {
    ...bank,
    bankLogoBigOriginalSvg: bank.bankAlias + '-big-original.svg',
    bankLogoBigInvertedSvg: bank.bankAlias + '-big-inverted.svg',
    bankLogoSmallOriginalSvg: bank.bankAlias + '-small-original.svg',
    bankLogoSmallInvertedSvg: bank.bankAlias + '-small-inverted.svg',
    formBankLogoBigSvg: bank.bankAlias + '-big-' + bank.formLogoScheme + '.svg',
    formBankLogoSmallSvg: bank.bankAlias + '-small-' + bank.formLogoScheme + '.svg',
  }
}

app.get('/form', (req, res) => {
  const { cardNumber } = req.query
  const cardNumberCuted = cardNumber.replace(/D/g, '').substr(0, 6)
  const bankAlias = bins[cardNumberCuted]
  const bank = banks[bankAlias]
  if (!bank) return res.send('null')
  res.send(withLogos(bank))
})

app.get('/bank', (req, res) => {
  const { bankAlias } = req.query
  const bank = banks[bankAlias]
  if (!bank) return res.send('null')
  res.send(withLogos(bank))
})

app.get('/banks', (req, res) => {
  const { banksAliases } = req.query
  const result = banksAliases.split(',').map(bankAlias => {
    const bank = banks[bankAlias]
    return bank ? withLogos(bank) : null
  })
  res.send(result)
})

Предыстория

Полтора года назад я был романтически настроенным разработчиком-мечтателем. Я создавал опенсорс проекты за респект и уважуху и анонсировал их на хабре habr.com/users/iserdmi/posts. Мои проекты нравились аудитории. Мне было приятно приносить пользу и получать обратную связь от пользователей крупнейшего IT-сообщества, и мне было этого достаточно. Тогда я думал, что просто пишу полезный код и дарю его другим, а на самом деле я делал продукты, но не понимал этого.

Я тогда создавал форму приёма банковских карт на сайте заказчика. Позже заказчик попросил сделать так, чтобы форма работала также как форма в Яндекс.Кассе: пользователь начинает вводить номер карты, сама форма перекрашивается в фирменные цвета банка, а в углу появляется его логотип. Я был уверен, что сейчас найду нужный плагин (чужой код, который делает то, что тебе нужно, и ты можешь использовать его в своей программе), который принимает на входе номер карты, а на выходе отдаёт нужные мне данные: цвета и логотип, и вставлю их в форму. В итоге оказалось, что такого плагина нет. И тут либо 2 недели выкачивать логотипы, подбирать цвета и соотносить названия банков с начальными цифрами номеров карт, либо забить. В общем, вот она боль: то что я думал сделать за 1 час, оказалось гораздо более ресурсозатратной задачей. Ещё можно было спарсить все нужны данные из самой Яндекс.Кассы, но это другая история.

Я решил создать очередной опенсорс проект. Как раз тот самый плагин, который я искал и не нашёл. Создание продукта начинается не с кода, не с дизайна, не с логотипа и даже не с названия. Создание продукта начинается с боли Я её обнаружил и испытал. Это был правильный шаг с точки зрения создания продукта, в отличие от всех последующих совершённых мной шагов.

Я просто почему-то решил, что этот плагин всем будет нужен, написал код плагина github.com/iserdmi/card-info/blob/master/README.ru.md, написал документацию, создал демо страницу, подготовил статью на хабр habr.com/post/324738 и в свой блог, и выложил всё единовременно.

Что я сделал неправильно с точки зрения продуктологии? В общем-то всё. Я не проверил гипотезу, я не делал прототипа, я не проводил исследований, я не выставлял KPI, я не определил целевую аудиторию, я сделал функционал избыточным, я не выпускал продукт до того момента, пока мне не показалось, что он достиг идеальной формы. Я был ужасным продуктологом.

Но я был везучим продуктологом. Пользователи хабра встретили статью положительно, кучу лайков в карму наставили. Плагин попал в тренды гитхаба. Я получил обратную связь, что если бы продукт был реализован в качестве API, а не плагина, то его разработчики использовали бы его более охотно. Я зарёкся, что добавлю банки других стран, расширю функциональность и превращу плагин в платное API. Короче, я получил подтверждение того, что продукт пользователям интересен, и понимание, что конкретно нужно делать дальше.

Почему после этого я полтора года ничего не делал? Не знаю. Был летящим программистом, что сказать. Но теперь я летящий предприниматель с бэкграундом менеджера продукта, и у меня есть команда, с которой мы вместе доведём этот продукт до ума.

Что с CardInfo?

CardInfo — всё. Вывожу из эксплуатации. Пожалуйста, приготовьтесь.

Где взять архив?

У меня. Сейчас отдам дёшево, как доделаю будет дороже.