От автора: и снова здравствуйте. Позвольте представить вам очередной плагин из разряда must have. Сегодня мы познакомимся с интересным плагином jQuery для кредитной карты. Данный плагин позволяет в симпатичной форме визуализировать процесс ввода данных кредитной карты.
Итак, сегодняшний плагин будет полезен для владельцев интернет-магазинов, в которых реализован механизм оплаты кредитной картой. Данный плагин осуществляет лишь минимальный процесс клиентской валидации принимаемых данных карты, но зато он прекрасно визуализирует этот процесс, добавляя еще одну изюминку для вашего проекта. Благодаря jQuery кредитная карта будет заполнена вводимыми данными – выглядит очень интересно.
Давайте создадим простейшую форму для приема данных платежной карты. Код формы можно взять из исходников, здесь же приведу лишь базовый код всех полей, который требуется для плагина jQuery кредитная карта:
|
1 2 3 4 |
<input type="text" name="number"> <input type="text" name="name"> <input type="text" name="expiry"> <input type="text" name="cvc"> |
Плагин работает с именами полей формы, поэтому важно соблюсти указанные значения атрибута name для каждого из полей формы.
Далее нам нужен пустой контейнер, который будет использоваться плагином jQuery кредитная карта:
|
1 |
<div class="card-wrapper"></div> |
Ну и осталось лишь инициализировать плагин, передав ему параметром искомый контейнер.
|
1 2 3 4 5 |
$(function(){ $('form').card({ container: '.card-wrapper' }); }); |
Посмотрим, что у нас получилось в итоге:
Теперь если начать вводить данные предполагаемой кредитной карты в соответствующие поля формы, мы увидим в режиме онлайн визуальное заполнение соответствующих областей карты.
При вводе кода CVC (CVV) карта перевернется с красивым анимационным эффектом.
Смотрится очень эффектно. Думаю, вы будете не против использования данного плагина для работы с кредитной картой, если он вам понадобится. Ну а у меня на этом все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и JavaScript вы можете узнать из наших уроков или курса. Удачи!
