Форма online-оплаты

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

Функционал:

• Номер карты Поле для ввода номера кредитной карты. При вводе номера карты, автоматически игнорируются любые символы, кроме цифр. Цифры разделяются автоматически по 4 штуки пробелом, для удобства восприятия.
• Дата окончания Поле для ввода даты окончания действия карты в формате "ММ/ГГ". При вводе, данные разделяются символом "/", если в поле введено 2 цифры месяца. Дата окончания должна быть больше текущей даты.
• CVC/CVV Поле для ввода CVC/CVV кода карты. Требуется ввод строго 3 цифр.
• Email Поле для ввода адреса электронной почты.
• Кнопка "Оплатить" Отключена до тех пор, пока пользователь не заполнит корректно все обязательные поля. Кнопка становится активной только после корректного заполнения всех полей.

Валидация: проверка корректности введенных данных происходит при потере фокуса на каждом поле (событие blur). Если данные некорректны, отображается соответствующая ошибка.

Стек технологий:

• Vite - современная система сборки
• Redom - библиотека для создания пользовательских интерфейсов
• Tailwind CSS - CSS-фреймворк для быстрой разработки
• card-validator - библиотека для валидации номеров кредитных карт
• inputmask - библиотека для форматирования ввода данных
• Jest - фреймворк для тестирования JavaScript кода

Инструкции по установке:

• клонируйте репозиторий: git clone https://github.com/MashaMoreva/online-payment-form.git
• перейдите в директорию проекта: cd online-payment-form
• установите зависимости: npm install
• сборка проекта: npm run build
• запустите проект в режиме разработки: npm run start (приложение будет доступно по адресу http://localhost:3000)
• запустите тесты: npm run test

Ссылка на проект

• посмотреть на Netlify