stepan10andreev / cloudpayments_with_cryptogram

Кастомная форма оплаты c подключением CloudPayments

Кастомная форма оплаты c подключением CloudPayments

Кастомная форма для ввода карточных данных, интегрированная с CloudPayments

Реализована через cкрипт Checkout c получением криптограммы для оплаты через API CloudPayments

Описание

В корне репозитория 2 папки:

1. javascript_version: написано на чистом JS
2. typescript_version: аналог на TypeScript

Форма реализована с использованием:

• для масок полей ввода использована imaskjs
• валидация полей ввода на чистом JS/TS
• рендеринг формы оплаты(DOM-дерева) происходит через JS/TS
• реализовано распознование типа платежной системы при введении номера карты (VISA, Mastercard, JCB, American Express, МИР, Maestro)

Валидация

• Номер карты: от 15 (для карт AMEX) до 19 цифр.
• Месяц: 2 цифры
  • значение не более 12 и не равно 0
  • при вводе 1 цифры (если это не 0) и потери фокуса с инпута - автоматически значение преобразуется в '0' + 'введенное значение'
  • если значение года равно текущему году, то значение месяца меньше текущего месяца - невалидно
• Год: последние 2 цифры года
  • значение не меньше текущего года
• CVV: 3 цифры
  • можно изменять видимость СVV-кода

При невалидных знаечниях границы инпута окрашиваются красным цветом.

Установка

Перейти в одну из папок в корне репозитория (javascript_version или typescript_version)

Установка зависимостей

Для установки зависимостей, выполните команду:

$ npm i

Запуск Development сервера

Чтобы запустить сервер для разработки, выполните команду:

npm run dev

Создание Production сборки

Чтобы выполнить Production сборку, выполните команду:

npm run build

Использование

Рендеринг DOM-дерева, подключение стилей, а также небходимых скриптов (для работы с CloudPayments) происходит полностью через JS/TS.

При Production сборки появится папка dist, содержащая единый js-bundle, который можно подключить к любой странице и сгенерировать форму оплаты в нужном месте:

• для этого на странице должен быть HTMLElement c id: paymentContainer, куда необходимо встроить форму оплаты.

Как выглядит форма