Получение информации о типе кредитной карты

Работа с банковскими картами в Cleave.js строится вокруг механизма распознавания типа карты по введённым цифрам и событийной модели, позволяющей получать актуальную информацию о BIN-префиксе в процессе ввода. Это используется для автоматического определения платёжной системы (Visa, MasterCard, American Express и других), динамического изменения UI и валидации форм.

Определение типа карты основано на анализе первых цифр номера (BIN/IIN диапазон). Cleave.js использует встроенные регулярные выражения и маски, соответствующие стандартным диапазонам платёжных систем.

При включении режима кредитных карт библиотека:

  • отслеживает вводимые символы;
  • проверяет текущий префикс;
  • сопоставляет его с известными шаблонами;
  • обновляет внутреннее состояние типа карты.

Включение режима creditCard

Для активации логики распознавания типа карты используется параметр конфигурации:

  • creditCard: true

При этом Cleave.js автоматически:

  • форматирует номер карты;
  • вставляет разделители;
  • активирует детектор типа карты.

Пример базовой инициализации:

const cleave = new Cleave('.card-input', {
  creditCard: true
});

В этом режиме библиотека начинает интерпретировать ввод как номер банковской карты, а не произвольную числовую строку.

Получение типа карты через callback

Основной механизм получения информации о типе карты — callback onCreditCardTypeChanged.

Он вызывается каждый раз, когда Cleave.js определяет изменение типа карты на основе введённого префикса.

Сигнатура callback

onCreditCardTypeChanged: function (type) {}

Параметр type содержит строковое значение текущего типа карты.

Пример использования

const cleave = new Cleave('.card-input', {
  creditCard: true,
  onCreditCardTypeChanged: function (type) {
    console.log('Тип карты:', type);
  }
});

Типы, которые могут быть возвращены:

  • visa
  • mastercard
  • amex
  • diners
  • discover
  • jcb
  • unknown

Практическое применение определения типа карты

Информация о типе карты используется для динамического управления интерфейсом.

1. Отображение логотипа платёжной системы

onCreditCardTypeChanged: function (type) {
  const logo = document.querySelector('.card-logo');

  logo.className = 'card-logo';

  if (type !== 'unknown') {
    logo.classList.add(type);
  }
}

CSS-логика может подставлять соответствующие изображения через классы:

.card-logo.visa {
  background-image: url('/img/visa.svg');
}

.card-logo.mastercard {
  background-image: url('/img/mastercard.svg');
}

2. Динамическая валидация длины номера

Разные платёжные системы используют разные длины номеров. Например, American Express — 15 цифр, Visa и MasterCard — 16.

onCreditCardTypeChanged: function (type) {
  const input = document.querySelector('.card-input');

  if (type === 'amex') {
    input.maxLength = 17; // с пробелами
  } else {
    input.maxLength = 19;
  }
}

Внутренняя логика распознавания BIN

Cleave.js использует таблицу префиксов:

  • диапазоны фиксированной длины (например, 4 для Visa — 4)
  • диапазоны с несколькими вариантами (MasterCard: 51–55, 2221–2720)
  • смешанные шаблоны (Discover, JCB и др.)

Алгоритм:

  1. Берётся текущая введённая строка без форматирования.
  2. Сравнивается с известными префиксами.
  3. Если найдено совпадение — тип обновляется.
  4. Если совпадений нет — возвращается unknown.

Использование состояния экземпляра

Хотя Cleave.js не всегда предоставляет прямое публичное поле типа карты, состояние можно косвенно отслеживать через callback и сохранять в внешней переменной:

let currentCardType = 'unknown';

const cleave = new Cleave('.card-input', {
  creditCard: true,
  onCreditCardTypeChanged: function (type) {
    currentCardType = type;
  }
});

Это состояние затем используется в логике формы:

function canSubmit() {
  return currentCardType !== 'unknown';
}

Интеграция с серверной валидацией

Определение типа карты на клиенте не заменяет серверную проверку, но позволяет оптимизировать поток данных:

  • фильтрация неподдерживаемых типов до отправки;
  • предварительная проверка BIN;
  • маршрутизация платежного процессора.

Пример:

onCreditCardTypeChanged: function (type) {
  const allowed = ['visa', 'mastercard'];

  if (!allowed.includes(type)) {
    showError('Карта не поддерживается');
  }
}

Обработка неопределённого типа

Состояние unknown возникает в случаях:

  • недостаточного количества введённых цифр;
  • нестандартного BIN;
  • временного отсутствия совпадения с шаблоном.

Практическая стратегия обработки:

  • не блокировать ввод;
  • не показывать ошибку до достижения минимальной длины;
  • обновлять UI только при уверенном определении типа.

Сочетание с форматированием номера

Распознавание типа карты тесно связано с форматированием:

  • Visa/MasterCard/Discover → группы по 4 цифры;
  • American Express → формат 4-6-5.

Cleave.js автоматически переключает маску:

Visa:        4111 1111 1111 1111
Amex:        3782 822463 10005

Это происходит синхронно с определением типа, без дополнительной настройки.

Расширенные сценарии использования

1. Подсветка поля в зависимости от типа

onCreditCardTypeChanged: function (type) {
  const input = document.querySelector('.card-input');

  input.dataset.type = type;
}

2. Ограничение списка доступных платёжных систем

const allowedTypes = ['visa', 'mastercard'];

onCreditCardTypeChanged: function (type) {
  if (!allowedTypes.includes(type)) {
    disableSubmit();
  } else {
    enableSubmit();
  }
}

3. Логирование BIN для аналитики

onCreditCardTypeChanged: function (type) {
  console.log('Detected card type:', type);
}

Ограничения механизма определения

Следует учитывать особенности:

  • определение основано только на префиксе;
  • возможны коллизии BIN-диапазонов;
  • не гарантируется 100% точность до ввода достаточного количества цифр;
  • не выполняется проверка Luhn в рамках определения типа.

Связь с пользовательским опытом

Механизм определения типа карты используется для:

  • снижения ошибок ввода;
  • ускорения заполнения форм;
  • визуальной обратной связи;
  • повышения доверия к интерфейсу оплаты.

В сочетании с форматированием ввода Cleave.js создаёт поведение, близкое к нативным платёжным формам банковских систем, где тип карты определяется по мере ввода первых цифр и влияет на дальнейшее взаимодействие с полем.

Оглавление