10 jQuery плагинов форм для ввода данных кредитных карт

jQuery плагины и JavaScript решения: 10 jQuery плагинов форм для ввода данных кредитных карт

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

Смотрите также:
jQuery плагины форм для указания времени и даты
10 jQuery плагинов для измерения сложности пароля
30 jQuery плагинов для стилизации элементов форм

Creditly.js

Creditly.js имеет все, что нужно для создания привлекательной и интуитивно понятной формы для ввода данных кредитной карты. Два файла (соответственно для двух тем — голубой и серой), и — и форма у вас на сайте! Валидация производится при помощи алгоритма Луна (Luhn algorithm)

jQuery плагины и JavaScript решения: 10 jQuery плагинов дляввода данных кредитных карт


Card

Card поддерживает любые типы карт и сопровождает процесс ввода наглядной анимацией. Построен на чистом HTML, CSS и JavaScript и не содержит дополнительных файлов изображений.

Вставляется при помощи единственной строчки кода

new Card({ form: 'form', container: '.card'})


jQuery плагины и JavaScript решения: 10 jQuery плагинов дляввода данных кредитных карт


jquery.payment

Библиотека для создания форм данных кредитной карты. Поддерживает проверку вводимых символов, разбивку номера карты на группы по 4 цифры, и, при необходимости, автозаполнение с возможностью управлять отдельными полями (например, отключить автозаполнение для поля CVC). Проверка подлинности производится на стороне клиента.

jQuery плагины и JavaScript решения: 10 jQuery плагинов дляввода данных кредитных карт


jQuery Credit Card Validator

Query Credit Card Validator поддерживает более 10 типов карт и умеет определять тип карты по ее номеру. Проверка подлинности производится по методу Луна.

jQuery плагины и JavaScript решения: 10 jQuery плагинов дляввода данных кредитных карт


jQuery.formance

Библиотека для форматирования и валидации данных кредитных карт, основанная на известной библиотеке jQuery.payment. К сожалению, сам автор прекратил поддержку своего детища, а активных продолжателей его дела, по-видимому, не нашлось.

jQuery плагины и JavaScript решения: 10 jQuery плагинов дляввода данных кредитных карт


Skeuocard

Эта форма также способна распознавать тип карты и соответствующим образом изменять свой внешний вид. Если для данного типа карты имеются дополнительные данные на обороте карты (например, CVC код для карты Visa), то появляется соответствующий ярлычок, позволяющий «перевернуть» карту.

jQuery плагины и JavaScript решения: 10 jQuery плагинов дляввода данных кредитных карт


Smart Validate

Не совсем понятно, почему автор назвал свой продукт «умным» — ведь даже тип карты приходится указывать вручную. С другой стороны, такая методичность имеет свои плюсы и настраивает пользователя на тщательное выполнение операции, где нет места спешке. Изначально форма поддерживает только пять типов карт, однако при помощи плагинов ее можно настроить и для других.

jQuery плагины и JavaScript решения: 10 jQuery плагинов дляввода данных кредитных карт


Single-Field Credit Card Input

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

jQuery плагины и JavaScript решения: 10 jQuery плагинов дляввода данных кредитных карт


jQuery Form Validator

Этот iQury плагин способен проверять всё и вся — от правильности ввода e-mail и даты до названия страны и телефонных номеров. Но мы упомянули его в этом обзоре, потому что среди прочего он может работать и с кредитными картами. Несмотря на свою богатейшую функциональность, плагин генерирует очень маленький трафик, благодаря реализации в виде модулей, которые загружаются только по необходимости.

jQuery плагины и JavaScript решения: 10 jQuery плагинов дляввода данных кредитных карт


CardCheck Credit Card Validator and Type Guesser

Единственный в нашем обзоре платный jQuery плагин, так же как и его бесплатные аналоги, способен определять тип карты по ее номеру и отображать соответствующий логотип. А вот что отличает его от собратьев, так это большой арсенал callback-функций, позволяющих легко интегрировать его в существующие системы.

Стоимость: $9

jQuery плагины и JavaScript решения: 10 jQuery плагинов дляввода данных кредитных карт
Напишите свой комментарий
comments powered by HyperComments