Поддерживаемые платежные системы

Механизм обработки платёжных карт в Cleave.js основан на детектировании типа карты по BIN/IIN-префиксу и применении соответствующей маски группировки цифр. Внутри библиотеки реализована логика сопоставления введённых символов с известными диапазонами номеров, что позволяет динамически менять формат ввода без ручного переключения конфигурации.

Основная цель этого режима — стандартизировать ввод данных банковских карт и минимизировать ошибки при вводе номера, автоматически подстраивая структуру поля под конкретную платёжную систему.

Типы платёжных систем и их форматирование

Visa и Mastercard

Наиболее распространённые платёжные системы используют классическую 16-значную структуру номера:

  • Visa
  • Mastercard
  • Maestro (в большинстве конфигураций)
  • UnionPay (в ряде диапазонов)

Форматирование в Cleave.js:

  • блоки по 4 цифры: #### #### #### ####
  • визуально равномерное разбиение облегчает чтение и проверку номера

Внутренне библиотека применяет единый шаблон группировки:

  • 4 - 4 - 4 - 4

При этом длина может варьироваться в зависимости от региональных исключений (например, Maestro может иметь 18–19 цифр), и Cleave.js адаптирует разбиение, сохраняя последние группы корректно выровненными.

American Express и альтернативные форматы

American Express

Карты AmEx используют нестандартную структуру:

  • 15 цифр вместо 16
  • специфическая группировка

Формат:

  • 4 - 6 - 5

Пример визуализации:

  • #### ###### #####

В Cleave.js этот формат активируется автоматически при распознавании BIN-диапазонов American Express. При переключении типа карты библиотека перераспределяет уже введённые цифры между блоками без сброса значения.

Diners Club

Некоторые варианты Diners Club используют вариативную длину номера:

  • 14–16 цифр в зависимости от подтипа

Типичный формат:

  • 4 - 6 - 4

или в отдельных диапазонах:

  • 4 - 4 - 4 - 4

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

Поддержка Discover и JCB

Discover

Discover использует 16-значную структуру, аналогичную Visa и Mastercard:

  • формат: 4 - 4 - 4 - 4

Особенность заключается не в группировке, а в диапазоне префиксов, которые распознаются библиотекой как отдельный тип карты.

JCB

JCB также использует 16-значный формат:

  • стандартное разбиение: 4 - 4 - 4 - 4

Cleave.js включает диапазоны BIN, позволяющие корректно идентифицировать карту на ранних этапах ввода, начиная с первых 4–6 символов.

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

Ключевой механизм работы заключается в анализе префикса номера:

  • первые цифры определяют платёжную систему
  • при каждом вводе символа происходит пересчёт типа
  • маска может изменяться «на лету»

Пример поведения:

  1. Пользователь вводит первые цифры 4

    • определяется Visa
    • применяется формат 4-4-4-4

  2. При вводе 34 или 37

    • определяется American Express
    • формат переключается на 4-6-5

  3. При смене типа уже введённые цифры перераспределяются по новым блокам

Это достигается за счёт внутреннего состояния instance Cleave и функции переразметки строки.

Конфигурация поддержки карт

Включение режима работы с платёжными картами осуществляется через параметр:

  • creditCard: true

Базовая инициализация:

  • активация детектора типов карт
  • подключение стандартных BIN-диапазонов
  • включение автоматического форматирования

Дополнительный параметр:

  • onCreditCardTypeChanged

Используется для реакции на смену типа карты. Библиотека передаёт определённый идентификатор, например:

  • visa
  • mastercard
  • amex
  • discover

Это позволяет синхронизировать UI (иконки платёжных систем, подсветку, подсказки).

Поведение при неизвестном типе карты

Если введённый номер не совпадает ни с одним известным диапазоном:

  • применяется дефолтная маска 4-4-4-4
  • тип считается unknown
  • динамическая адаптация блоков отключается до появления совпадения

Это важно для поддержки новых или локальных платёжных систем, которые не включены в стандартный набор Cleave.js.

Расширение набора платёжных систем

Cleave.js допускает модификацию логики определения карты через кастомные настройки:

  • добавление новых BIN-диапазонов
  • переопределение правил детекции
  • замена стандартной логики форматирования

Практически это используется для:

  • локальных банковских систем
  • корпоративных карт
  • закрытых платёжных сетей

Пример расширения логики включает добавление нового префикса и сопоставление его с существующим или новым форматом блока.

Особенности обработки нестандартных номеров

Некоторые платёжные системы не соответствуют классическим схемам:

  • изменяемая длина номера (до 19 цифр)
  • нестандартные блоки группировки
  • региональные вариации одного и того же бренда

Cleave.js обрабатывает такие случаи через:

  • приоритет префикса над длиной
  • адаптивное перераспределение блоков
  • сохранение непрерывности ввода без сброса значения

Взаимодействие с другими форматами ввода

Режим платёжных карт может конфликтовать с другими масками, если они применяются к одному input:

  • числовые маски
  • телефонные форматы
  • произвольные pattern-маски

Приоритет всегда отдаётся creditCard-режиму, если он активирован. Это связано с тем, что детектирование банковской карты требует постоянного пересчёта структуры строки.

Производительность и обновление состояния

Обработка платёжных систем оптимизирована для работы на каждом keystroke:

  • минимальное количество перерасчётов строки
  • кеширование BIN-диапазонов
  • отсутствие полной пересборки DOM-значения

Это позволяет использовать Cleave.js в формах с высокой частотой ввода без заметных задержек даже при переключении типов карт в реальном времени.

Оглавление