Топ плагинов jQuery. Плагин jQuery для кредитной карты

Топ плагинов jQuery. Плагин jQuery для кредитной карты

От автора: и снова здравствуйте. Позвольте представить вам очередной плагин из разряда must have. Сегодня мы познакомимся с интересным плагином jQuery для кредитной карты. Данный плагин позволяет в симпатичной форме визуализировать процесс ввода данных кредитной карты.

Итак, сегодняшний плагин будет полезен для владельцев интернет-магазинов, в которых реализован механизм оплаты кредитной картой. Данный плагин осуществляет лишь минимальный процесс клиентской валидации принимаемых данных карты, но зато он прекрасно визуализирует этот процесс, добавляя еще одну изюминку для вашего проекта. Благодаря jQuery кредитная карта будет заполнена вводимыми данными – выглядит очень интересно.

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

<input type="text" name="number">
<input type="text" name="name">
<input type="text" name="expiry">
<input type="text" name="cvc">

Плагин работает с именами полей формы, поэтому важно соблюсти указанные значения атрибута name для каждого из полей формы.

Топ плагинов jQuery. Плагин jQuery для кредитной карты

Далее нам нужен пустой контейнер, который будет использоваться плагином jQuery кредитная карта:

<div class="card-wrapper"></div>

Ну и осталось лишь инициализировать плагин, передав ему параметром искомый контейнер.

$(function(){
	$('form').card({
		container: '.card-wrapper'
	});
});

Посмотрим, что у нас получилось в итоге:

Топ плагинов jQuery. Плагин jQuery для кредитной карты

Теперь если начать вводить данные предполагаемой кредитной карты в соответствующие поля формы, мы увидим в режиме онлайн визуальное заполнение соответствующих областей карты.

Топ плагинов jQuery. Плагин jQuery для кредитной карты

При вводе кода CVC (CVV) карта перевернется с красивым анимационным эффектом.

Топ плагинов jQuery. Плагин jQuery для кредитной карты

Смотрится очень эффектно. Думаю, вы будете не против использования данного плагина для работы с кредитной картой, если он вам понадобится. Ну а у меня на этом все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и JavaScript вы можете узнать из наших уроков или курса. Удачи!

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по Gulp. Основы

Прямо сейчас посмотрите курс по Gulp!

Смотреть курс

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree