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

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

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

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

4. Tippy — инструмент для создания тултипов: https://atomiks.github.io/tippyjs/

UPD. CardInfo больше не работает. Используйте BinKing.

Гайд по использованию: habr.com/ru/post/527796
Сайт сервиса: binkng.io

Тут и демо, и документация: cardinfo.online — это API. Вы ему 6 первых цифр банковской карты, оно вам ссылку на логотип банка, его фирменные цвета, бренд (Visa, MasterCard, и т.д.) и прочее в формате JSON. CardInfo нужен тем, кто создаёт форму для приёма банковских карт у себя на сайте, чтобы улучшить UX (удобство, впечатления, чувство безопасности) пользователей. Принимать платежи прямо у себя на сайте позволяет cloudpayments.ru в России и странах СНГ, и stripe.com во всём остально мире.

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

Однако, крупные компании уже давно сделали свои формы такими, а мелкие всё ещё нет. Почему? Создание такого решения для своей формы займёт около 7 дней работы программиста и ещё 7 работы дизайнера (логотипы выкачивать, обрабатывать, перерисовывать). Крупные компании могут себе позволить потратиться на создание такой формы. Мелкие компании считают ценность такой формы не достаточной, чтобы платить за неё столько.

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

UPD. CardInfo больше не работает. Используйте BinKing.

Гайд по использованию: https://habr.com/ru/post/527796/
Сайт сервиса: https://binkng.io

Всем кто верстал, верстает или будет верстать форму для приёма банковских карт дарю плагин CardInfo.js, с помощью которого можно сверстать вот такую форму:

Плагин по номеру карты определяет один из 49 российских банков (потом и прочие страны добавлю), выдаёт вам логотип банка, цвета для фона, ссылку на сайт банка, определяет тип карты, его логотип и прочее. С этими данными делаете что хотите, верстаете любую форму.

Поиграться с формой можно на демо странице. Код плагина и инструкции по установке на гитхабе.

Под катом:

• Пара слов о плагине;
• Про базу банков, и почему их 49, а не 50;
• Про логотипы банков;
• Про логотипы типов;
• Несколько моих вопросов к читателям;

Анимация скролла к месту страницы с момента изобретения почти не подвергалась никаким модификациям, никак не украшалась. Да никому и не надо вроде, и так все работает. Говоришь куда скроллить и за сколько нужно добраться. Всё.

Я решил на анимацию скролла посмотреть под другим углом. Не потому что сейчас с ним что-то не так, а потому что можно и поинтереснее. В результате некоторых наблюдений и всплесков фантазии удалось придумать 3 способа для более интересной анимации. В итоге завернул все в плагин «Scrollport.js» с 3 новыми и 1 классическим режимом. Смотрите демо и проходите под кат.

Замечали, когда только открываете веб-сайт, первые секунды всё тормозит? Скрол как-то не ровно работает, параллаксы скачут, а из анимации словно вырезали львиную долю кадров. Но очень скоро всё нормализуется. Не замечали такого? Взгляните на демо-страницу плагина, и сразу поймёте, о чем я.

Проблема в том, что динамика не может нормально работать, пока страница лагает. В качестве решения предлагаю плагин «Afterlag.js». Плагин позволяет отслеживать событие окончания лагов. Лаги прошли, включайте анимацию, тормозить не будет. А пока страница лагает, нечего и динамику запускать, только вид портить.