Создаём королевскую форму для приёма банковских карт

Создаём королевскую форму для приёма банковских карт

В этой статье я дам рекомендации по созданию платёжных форм, которые будут выгодно отличаться от форм ваших конкурентов. Каждый пункт рекомендаций будет сопровождаться примером кода. Полный пример кода, включающий адаптивную вёрстку, реализацию валидационных тултипов, и прочих мелочей опущенных для краткости в самой статье вы можете посмотреть здесь.

В рамках этой статьи мы не рассматриваем привязку формы к какому-то конкретному мерчант, мы лишь делаем её более отзывчивой.

Для создания формы мы будем использовать следующие инструменты:

  1. Нативный JS
  2. BinKing — вспомогательный сервис для создания платёжных форм: https://github.com/sdandteam/binking
  3. IMask — инструмент для создания масок полей ввода: https://imask.js.org/
  4. Tippy — инструмент для создания тултипов: https://atomiks.github.io/tippyjs/

Читать дальше →