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

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)
  Массив со всеми банками.