Від автора: і знову здрастуйте. Дозвольте представити вам черговий плагін з розряду must have. Сьогодні ми познайомимося з цікавим плагіном jQuery для кредитної картки. Даний плагін дозволяє в привабливій формі візуалізувати процес введення даних кредитної картки.
Отже, сьогоднішній плагін буде корисна для власників інтернет-магазинів, в яких реалізовано механізм оплати кредитною карткою. Даний плагін здійснює лише мінімальне процес клієнтської валідації даних, які приймаються карти, але зате він прекрасно візуалізує цей процес, додаючи ще одну родзинку для вашого проекту. Завдяки jQuery кредитна карта буде заповнена введеними даними – виглядає дуже цікаво.
Давайте створимо найпростішу форму для прийому даних платіжної картки. Код форми можна взяти з исходников, тут же наведу лише базовий код всіх полів, який потрібно для плагін jQuery кредитна карта:
Плагін працює з іменами полів форми, тому важливо дотримати вказані значення атрибута name для кожного з полів форми.
Далі нам потрібен порожній контейнер, який буде використовуватися плагіном jQuery кредитна карта:
Ну і залишилося лише ініціалізувати плагін, передавши йому параметром шуканий контейнер.
$(function(){
$(‘form’).card({
container: ‘.card-wrapper’
});
});
Подивимося, що у нас вийшло в результаті:
Тепер якщо почати вводити дані передбачуваної кредитної картки у відповідні поля форми, ми побачимо в режимі онлайн візуальне заповнення відповідних областей карти.
При введенні коду CVC (CVV) карта перевернеться з красивим анімаційним ефектом.
Виглядає дуже ефектно. Думаю, ви не будете проти використання даного плагіна для роботи з кредитною карткою, якщо він вам знадобиться. Ну а у мене на цьому все. Вихідні коди до статті ви можете завантажити за посиланням. Більше про jQuery і JavaScript ви можете дізнатися з наших уроків або курсу. Удачі!
