[JavaScript, Дизайн, Дизайн мобильных приложений, Платежные системы, Разработка под e-commerce] BinKing готов
Автор
Сообщение
news_bot ®
Стаж: 6 лет 9 месяцев
Сообщений: 27286
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
===========
Похожие новости:
- [CSS, HTML, JavaScript, Программирование, Разработка веб-сайтов] Как стать Front-End разработчиком
- [Разработка под e-commerce] Как PIM может в 6 раз повысить конверсию интернет-магазина
- [jQuery] Плагин Events для jQuery
- [JavaScript] Внимание, подводный камень
- [Веб-дизайн, Дизайн, Разработка веб-сайтов, Финансы в IT] Как выделиться с помощью сайта? Дизайн с ощущением левитации
- [JavaScript, Node.JS, Разработка веб-сайтов] Выбор зависимостей JavaScript
- [JavaScript, VueJS, Программирование, Расширения для браузеров] Пишем свой плагин для VueJS. Как проект на VueJS трансформировать в расширение для браузера?
- [Аналитика мобильных приложений, Дизайн, Дизайн мобильных приложений, Управление продуктом] Нужны ли дизайнеру метрики?
- [JavaScript, Node.JS] Создание Discord-бота, используя библиотеку discord.js | Часть №2 | Аргументы
- [Дизайн игр, Игры и игровые приставки, Финансы в IT] Особенности разработки игры для браузера
Теги для поиска: #_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
Автор | Сообщение |
---|---|
news_bot ®
Стаж: 6 лет 9 месяцев |
|
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 =========== Похожие новости:
Дизайн ), #_dizajn_mobilnyh_prilozhenij ( Дизайн мобильных приложений ), #_platezhnye_sistemy ( Платежные системы ), #_razrabotka_pod_ecommerce ( Разработка под e-commerce ) |
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 23:40
Часовой пояс: UTC + 5