Отличная форма ввода номера кредитной карточки скрывает за собой много неочевидных, но важных моментов. Так как подробную статью я про это никогда не напишу, то пусть будет пока список пунктов, чеклист (писал для одного изменения Эквида, но думаю будет полезно и другим).

1. Все поля для ввода данных кредитки должны иметь прописанные autocomplete и name атрибуты, чтобы браузер мог автоматически заполнить все. Автоматически вставлятся должен не только сохраненный номер карты, но еще и штуки типа даты и имени. Должна работать автоматическая вставка всех полей из штук типа 1Password.

2. Поля должны позволять вставлять данные из буфера обмена (Cmd+C, Cmd+V). Если вставка запрещена — это ужасно неудобно.

3. При вставке номера карточки из буфера обмена (Сmd+V), надо автоматически убирать из ввода пробелы перед и после, любые символы “не цифры”. То есть можно вставить и 4111111111111111 и 4111-1111-1111-1111 и 4111 1111 1111 1111 и Карточка: 4111-1111-1111-1111. Вставка таких штук не должна вызывать ошибку.

4. Не надо спрашивать тип (Visa/Mastercard) карты. Его всегда можно определить автоматически из номера.

5. Как правило можно и не спрашивать и имя владельца карточки. Никто его не проверяет, обычно и туда можно передавать любую фигню.

6. Даты окончания действия карточки надо показывать так, как они отображены на самой карточке (например 01/22). Это значит нужен ведущий ноль у месяцев, не нужны полные года (2022 — плохо), не нужно месяц писать текстом (Февраль — плохо). Стоит учесть, что некоторые карточки действуют 10 лет, поэтому год должен позволять ввести такое значение.

7. На мобиле поля должны показывать цифровую клавиатуру.

8. Выбор даты должен и давать ввести все с клавиатуры и быстро выбрать мышкой (дроп-даун). (примечание — это спорный момент и наш дизайнер-продакт Денис со мной тут не согласен про дроп-дауны)

9. При вводе номера карточки не давать вводить что-то кроме цифр. При вводе сразу форматировать автоматически номер карточки для удобства. При этом надо давать возможность поменять что угодно в любой части номера (вдруг опечатка). Нельзя просто весь новый ввод безусловно засовывать в конец номера.

10. После ввода номера карточки ее надо проверить алгоритмом Луна. Это позволяет найти опечатки при вводе.

11. Надо проверять размер ввода номера и не давать вводить больше цифр, чем надо. Но важно учесть, что у разных карточек может быть разное количество цифр в номере.

12. Для US рынка важно называть все это не просто “Credit Card”, а “Credit or Debit Card”. А то некоторые могут не понять, что можно вводить и debit cards.

13. Надо объяснять где найти СVV/CVC. Лучше даже картинкой. Но важно учесть, что у Amex карт СVV/CVC это 4 цифры (а не 3) и находятся они спереди карты, а не сзади. Надо адаптировать подсказку, если ввели Amex.