10 jQuery плагинов форм для ввода данных кредитных карт
Небольшой, но очень важной частью платежных систем являются формы для ввода данных кредитной карты. По большому счету, это как раз та небольшая часть айсберга, которая видна пользователю. И не стоит ее недооценивать — внешний вид и функциональность этой формы во многом формирует доверие пользователя к вашему сайту.
В этом обзоре мы подобрали 10 наилучших, на наш взгляд, jQuery плагинов для ввода карточных данных.
Смотрите также:
jQuery плагины форм для указания времени и даты
10 jQuery плагинов для измерения сложности пароля
30 jQuery плагинов для стилизации элементов форм
Creditly.js
Creditly.js имеет все, что нужно для создания привлекательной и интуитивно понятной формы для ввода данных кредитной карты. Два html файла (соответственно для двух тем — голубой и серой), css и javascript — и форма у вас на сайте! Валидация производится при помощи алгоритма Луна (Luhn algorithm)
Card
Card поддерживает любые типы карт и сопровождает процесс ввода наглядной анимацией. Построен на чистом HTML, CSS и JavaScript и не содержит дополнительных файлов изображений.Вставляется при помощи единственной строчки кода
new Card({ form: 'form', container: '.card'})
jquery.payment
Библиотека для создания форм данных кредитной карты. Поддерживает проверку вводимых символов, разбивку номера карты на группы по 4 цифры, и, при необходимости, автозаполнение с возможностью управлять отдельными полями (например, отключить автозаполнение для поля CVC). Проверка подлинности производится на стороне клиента.
jQuery Credit Card Validator
Query Credit Card Validator поддерживает более 10 типов карт и умеет определять тип карты по ее номеру. Проверка подлинности производится по методу Луна.
jQuery.formance
Библиотека для форматирования и валидации данных кредитных карт, основанная на известной библиотеке jQuery.payment. К сожалению, сам автор прекратил поддержку своего детища, а активных продолжателей его дела, по-видимому, не нашлось.
Skeuocard
Эта форма также способна распознавать тип карты и соответствующим образом изменять свой внешний вид. Если для данного типа карты имеются дополнительные данные на обороте карты (например, CVC код для карты Visa), то появляется соответствующий ярлычок, позволяющий «перевернуть» карту.
Smart Validate
Не совсем понятно, почему автор назвал свой продукт «умным» — ведь даже тип карты приходится указывать вручную. С другой стороны, такая методичность имеет свои плюсы и настраивает пользователя на тщательное выполнение операции, где нет места спешке. Изначально форма поддерживает только пять типов карт, однако при помощи плагинов ее можно настроить и для других.
Single-Field Credit Card Input
Вы не поверите, но, оказывается, для ввода всех данных кредитной карты можно обойтись всего одним полем! В настоящий момент этот продукт представляет собой скорее демонстрационную модель, нежели готовый к употреблению промышленный образец, но в оригинальности идеи автору не откажешь.
jQuery Form Validator
Этот iQury плагин способен проверять всё и вся — от правильности ввода e-mail и даты до названия страны и телефонных номеров. Но мы упомянули его в этом обзоре, потому что среди прочего он может работать и с кредитными картами. Несмотря на свою богатейшую функциональность, плагин генерирует очень маленький трафик, благодаря реализации в виде модулей, которые загружаются только по необходимости.
CardCheck Credit Card Validator and Type Guesser
Единственный в нашем обзоре платный jQuery плагин, так же как и его бесплатные аналоги, способен определять тип карты по ее номеру и отображать соответствующий логотип. А вот что отличает его от собратьев, так это большой арсенал callback-функций, позволяющих легко интегрировать его в существующие системы.Стоимость: $9
