BinKing готов

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

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

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

Нюансы

Для того, чтобы использовать 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) })

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

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