Содержание
Благодаря таким сервисам, как Stripe, которые обрабатывают онлайн-платежи с кредитных карт, вы сможете легко развивать свой электронный бизнес. Логика бэкэнда, как правило, проще реализовать как интерфейсную часть, поскольку вам нужно будет подумать, как вы будете запрашивать информацию о кредитной карте пользователя. Если вам не хватает современного воображения или вы хотите вдохновения (или чего-то готового для реализации), мы собрали 5 наиболее впечатляющих плагинов JavaScript с открытым исходным кодом для реализации динамической анимированной формы для получения информации о кредитных картах от ваших пользователей.
Большинство из них динамически загружают логотип типа кредитной карты и проверяют, является ли номер действительным или нет. Наслаждайтесь нашим топом!
5. CardInfo.js
С CardInfo вы можете создать красивую форму для приема платежей с карты. По первым шести символам карты будет определен банк (один из 49), форма будет перекрашена в фирменные цвета банка, логотип банка появится в левом верхнем углу. Первые символы карты будут определять тип карты: Visa, MasterCard, American Express, Diners Club, Discover, JCB, UnionPay, Maestro или MIR. Сейчас в базе только российские банки, но в ближайшее время будут добавлены банки США, Канады, Англии, Австралии и Новой Зеландии.
4. Creditly
Кредитно позволяет вам реализовать интуитивно понятную форму кредитной карты, он дает вам все необходимое для создания гладкой, интуитивно понятной формы кредитной карты. Просто скопируйте html, css и javascript, чтобы получить интуитивно понятную форму кредитной карты за считанные секунды. Вы получаете проверку кредитной карты (используя алгоритм Луна) бесплатно!
3. CardJS
CardJS — это очень простая, чистая форма кредитной карты для вашего сайта. Включает в себя форматирование чисел, проверку и автоматическое определение типа карты.
2. Skeuocard
Skeuocard — это плагин JavaScript, который позволяет постепенно улучшать форму кредитной карты, обеспечивая скейоморфный интерфейс. Когда вы начинаете вводить номер своей карты, Skeuocard пытается сопоставить его с принятым типом карты. Как только он сможет это сделать, он изменяет макет карты в соответствии с карточным продуктом (Visa, MasterCard и т. Д.) И вносит любые изменения, специфичные для эмитента, например, специальный макет карты Chase Sapphire.
Когда вы вводите информацию, Skeuocard изменяет базовые значения формы из вашей исходной, не расширенной формы. Он также проверяет каждое поле, чтобы найти простые ошибки пользователя и пропущенные поля. Если продукт карты имеет поля с обеих сторон карты (например, поместив код CVC на оборотной стороне), пользователю будет предложено перевернуть карту, чтобы заполнить оставшиеся поля:
1. Карта
Карта — это лучший способ отобразить форму кредитной карты, используя одну строку кода:
new Card({ form: 'form', container: '.card'})Карта примет любую форму кредитной карты и сделает ее лучшей частью процесса оформления заказа (без каких-либо изменений). Все создано с использованием чистого CSS, HTML и Javascript, поэтому вам не понадобится изображение.
Похвальные грамоты
Форма оплаты кредитной картой
Этот фрагмент представляет собой простое руководство по созданию простой формы оплаты с использованием javascript, которая использует шаблоны регулярных выражений для определения типа кредитной карты, когда пользователь вводит значения и правильно применяет соответствующий интервал, связанный с этим брендом.
Если вам известен еще один замечательный плагин, позволяющий реализовать динамическую анимированную форму кредитной карты, поделитесь ею с сообществом в поле для комментариев.
