[JavaScript, Дизайн, Дизайн мобильных приложений, Платежные системы, Разработка под e-commerce] BinKing готов

Автор Сообщение
news_bot ®

Стаж: 6 лет 9 месяцев
Сообщений: 27286

Создавать темы news_bot ® написал(а)
25-Июл-2020 05:30

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

Для использования плагина вам понадобится API ключ (пока не работает, но это временно) или данные из архива. Ключ и архив можно получить в личном кабинете на сайте BinKing. Перечень доступных банков и стран смотрите на этой странице.
Демонстрация использования плагина доступна на JSFiddle. Эта демонстрация является частью подробного гайда по созданию платёжной формы. Рассказываем и показываем, как подключить этот плагин, как сделать автоматический перенос курсора в следующее поле, как сделать валидацию формы и много другое. В тексте статьи содержится полный пример кода, который можно просто скопировать к себе и использовать. При желании вы легко сможете его доработать под свои нужды.
Нюансы
BinKing всё ещё в разработке. Сейчас API работает но только в демо. Приобрести доступ к API сейчас невозможно. Не пытайтесь использовать API ключ из демо-формы, он нестабилен. Мало того, во избежание бесплатной эксплуатации я буду этот API ключ менять до тех пор, пока не будет завершена разработка проекта.
Для того, чтобы использовать BinKing сейчас необходимо приобрести доступ к архиву с логотипами банков и базой бин-кодов. Архив можно использовать для подключения как самостоятельно, так и с помощью специального плагина
Пример подключения архива с помощью специального плагина
Имея архив с базой данных, вы можете воспроизвести работу 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
===========

Похожие новости: Теги для поиска: #_javascript, #_dizajn (Дизайн), #_dizajn_mobilnyh_prilozhenij (Дизайн мобильных приложений), #_platezhnye_sistemy (Платежные системы), #_razrabotka_pod_ecommerce (Разработка под e-commerce), #_cardinfo, #_platezhnye_sistemy (платёжные системы), #_javascript, #_dizajn_interfejsov (дизайн интерфейсов), #_ecommerce, #_javascript, #_dizajn (
Дизайн
)
, #_dizajn_mobilnyh_prilozhenij (
Дизайн мобильных приложений
)
, #_platezhnye_sistemy (
Платежные системы
)
, #_razrabotka_pod_ecommerce (
Разработка под e-commerce
)
Профиль  ЛС 
Показать сообщения:     

Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы

Текущее время: 22-Ноя 23:40
Часовой пояс: UTC + 5