CardInfo.js — отображение банковской карты

sourse

CardInfo.js позволяет по номеру карты получить логотип банка, фирменные цвета и прочие детали. В базе сейчас 49 самых популярных российских банков. Вскоре будут добавлены банки США, Канады, Англии, Австралии и Новой Зеландии.

Быстрый старт

Скачиваем CardInfo.js. Также можно установить через bower bower install card-info или npm npm install card-info.

Подключаем JS файл к странице:

<script src="/bower_components/card-info/dist/card-info.min.js"></script>

Теперь можем задействовать класс CardInfo:

var cardInfo = new CardInfo('4377730000000000');
console.log('Название банка:', cardInfo.bankName);
// > Название банка: Тинькофф Банк
console.log('Логотип банка:', cardInfo.bankLogo);
// > Логотип банка: /bower_components/card-info/dist/banks-logos/ru-tinkoff.svg

Конструктор

new CardInfo(number)
new CardInfo(number, options)
  • number номер карты (число или строка), пробелы допустимы.
  • options объект с настройками.

Экземпляр

Если по первым 6 цифрам номера карты невозможно определить данные о банке, поля bankAlias, bankName, bankNameEn, bankCountry, bankUrl, bankLogoPng, bankLogoSvg, bankLogo, bankLogoStyle, backgroundColor, backgroundColors, backgroundLightness, textColor, backgroundGradient будут выставлены в соответствии с стандартными настройками.

То же касается и типа карты. Поля brandAlias, brandName, brandLogoPng, brandLogoSvg, brandLogo, codeName, codeLength, numberLengths, numberGaps будут выставлены в соответствии с стандартными настройками.

  • bankAlias
    Короткое название банка на английском, все буквы прописные, без пробелов. По умолчанию null
  • bankName
    Название банка на языке страны где работает банк. По умолчанию null
  • bankNameEn
    Название банка на английском. По умолчанию null
  • bankCountry
    Код страны банка. 'ru' — Россия. По умолчанию null
  • bankUrl
    Ссылка на сайт банка. По умолчанию null
  • bankLogo
    Путь к изображению логотипа. В dist/banks-logos расположены логотипы в формате PNG и SVG. Имя файла определяется свойством экземпляра bankAlias. Путь к файлу определяется свойством настроек banksLogosPath. Расширение логотипа определяется свойством настроек preferredExt. Пример: для банка «Тинькоф» значение будет '/bower_components/card-info/dist/banks-logos/ru-tinkoff.svg'.
  • bankLogoPng
    Путь к логотипу банка в формате PNG. По умолчанию null
  • bankLogoSvg
    Путь к логотипу банка в формате SVG, если он существует. По умолчанию null
  • bankLogoStyle
    Если логотип преимущественно чёрный, то значение будет равно строке "black", если белый, то "white", если цветной, то "colored". По умолчанию null
  • backgroundColor
    Цвет, ассоциирующийся с банком. По умолчанию '#eeeeee'
  • backgroundColors
    Массив цветов ассоциирующихся с банком. По умолчанию ['#eeeeee', '#dddddd']
  • backgroundLightness
    Если цвет фона светлый, то значением будет равно строке 'light', иначе 'dark'. По умолчанию 'light'
  • backgroundGradient
    Градиент из цветов указанных в поле backgroundColors. Угол указывается в свойстве gradientDegrees. По умолчанию linear-gradient(135deg, #eeeeee, #dddddd)
  • textColor
    Цвет текста в соответствии с фоном, указанном в свойстве backgroundColor. По умолчанию '#000'
  • brandAlias
    Короткое название на английском, все буквы прописные, без пробелов. По умолчанию null
  • brandName
    Полное название типа карты. По умолчанию null
  • brandLogo
    Путь к логотипу типа карты. Изображения хранятся в dist/brands-logos. Три стиля: чёрный, белый и цветной. Имя файла определяется в свойстве brandAlias. Путь к файлу определяется свойством настроек brandsLogosPath. Расширение логотипа определяется в свойстве preferredExt. Стиль логотипа в brandLogoPolicy. По умолчанию null. Пример: для типа «Visa» значение будет '/bower_components/card-info/dist/brands-logos/visa-colored.svg'.
  • brandLogoPng
    Путь к логотипу типа карты в формате PNG. По умолчанию null
  • brandLogoSvg
    Путь к логотипу типа карты в формате SVG. По умолчанию null
  • codeName
    Название кода на обратной стороне карты (CVC/CID/CVV/CVN). По умолчанию null
  • codeLength
    Ожидаемая длина кода безопасности. Обычно 3, но для карт American Express 4. По умолчанию null
  • numberMask
    Маска для номера карты данного типа. Обычно маска 0000 0000 0000 0000, но для некоторых типов карт свойственны другие характеристики. Например, для карт American Express маска будет 0000 000000 00000. Символы в маске могут быть преобразованы путем изменения настроек maskDigitSymbol и maskDelimiterSymbol. По умолчанию 0000 0000 0000 0000000
  • numberGaps
    Массив с индексами пробелов для создания маски. По умолчанию [4, 8, 12]
  • numberBlocks
    Количество цифр в каждом блоке маски. Определяется на основании свойства numberGaps и максимального числа в numberLengths. По умолчанию [4, 4, 4, 7]
  • numberLengths
    Допустимые символы в номере карты. По умолчанию [12, 13, 14, 15, 16, 17, 18, 19]
  • numberNice
    Номер карты. Маска определяется свойством numberMask. Пример: 4377730000000000 → 4377 7300 0000 0000, 437773 → 4377 73.
  • number
    Номер карты в виде строки с удалёнными пробелами. Если в переданном номере карты были какие-либо символы, кроме цифр и пробелов, будет пустая строка.
  • numberSource
    Исходный номер карты.
  • options
    Все настройки.

Настройки

Настройки указываются при создании нового экземпляра:

var cardInfo = new CardInfo('4377730000000000', {
  banksLogosPath: '/my/path/to/banks/logos',
  brandsLogosPath: '/my/path/to/brands/logos'
});

Либо задаются настройки по умолчанию:

CardInfo.setDefaultOptions({
  banksLogosPath: '/my/path/to/banks/logos',
  brandsLogosPath: '/my/path/to/brands/logos'
});
  • banksLogosPath
    Путь к файлам с логотипами банков. По умолчанию '/bower_components/card-info/dist/banks-logos/'
  • brandsLogosPath
    Путь к файлам с логотипами типов карт. По умолчанию '/bower_components/card-info/dist/brands-logos/'
  • brandLogoPolicy
    Стиль логотипа типа карты. Доступные значения: 'black', 'white', 'colored', 'auto', 'mono'. По умолчанию 'auto'
    • 'colored'
      Цветной
    • 'black'
      Чёрный
    • 'white'
      Белый
    • 'mono'
      Белым, если фон (backgroundLightness) тёмный ('dark') Чёрный, если фон (backgroundLightness) светлый ('light')
    • 'auto'
      Цветной, если стиль логотипа банка (bankLogoStyle) цветной ('colored'). Белый, если стиль логотипа банка (bankLogoStyle) белый ('white'). Чёрный, если стиль логотипа банка (bankLogoStyle) чёрный ('black'). Цветным, если банк не определён
  • preferredExt
    Предпочтительное расширение для логотипов банков и типов. Значением может быть 'png' или 'svg'. По умолчанию 'svg'
  • maskDigitSymbol
    Символ-цифра в маске номера карты, указанный в свойстве экземпляра numberMask. По умолчанию '0'
  • maskDelimiterSymbol
    Символ-разделитель в маске номера карты, указанный в свойстве экземпляра numberMask. По умолчанию ' '
  • gradientDegrees
    Градус градиента, указанного в свойстве backgroundGradient. По умолчанию 135

Статические методы

  • CardInfo.setDefaultOptions(options)
    Установка настроек по умолчанию.
  • CardInfo.getBrands()
    CardInfo.getBrands(options)
    Массив со всеми типами карт.
  • CardInfo.getBanks()
    CardInfo.getBanks(options)
    Массив со всеми банками.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.ruseller.com
Автор: Станислав Протасевич
Урок создан: 29 Апреля 2017
Просмотров: 2086
Правила перепечатки


5 последних уроков рубрики "jQuery"

^ Наверх ^