Платежные продукты
Платежный виджет
Всплывающая и встраиваемая платежная форма оплаты на сайте без переадресации на платежную форму WATA адаптирована под любые браузеры и мобильные устройства и не уводит клиентов из проекта
Всплывающая платежная форма без редиректа
Преимущества
- Встраивайте в любое место на сайте или вызывайте в модальном окне
- Обеспечивайте возможность принимать оплату на сайте, не уводя покупателя на другие страницы
- Управляйте языковой локализацией и цветовой темой виджета
- Увеличивайте конверсию для покупок в вашем интерфейсе
- Экономьте время на разработке платежной формы
Встроенная платежная форма без редиректа
Параметры виджета
| Параметр | Обязательный | Тип | Комментарий |
|---|---|---|---|
| publicId | Да | UUID | Публичный идентификатор терминала мерчанта. Можно найти в личном кабинете мерчанта в детализации терминала или запросить у личного менеджера |
| amount | Да | Число | Сумма платежа. Всего после точки может быть 2 цифры для копеек или центов. Пример: 1188.00 |
| currency | Да | Строка | Валюта платежа (RUB, EUR, USD) |
| orderId | Нет | Строка | Идентификатор заказа в системе мерчанта |
| description | Нет | Строка | Описание заказа |
| successRedirectUrl | Нет | Строка | Адрес страницы терминала, на которую произойдет редирект плательщика в случае успешной оплаты заказа. Или ‘none’, если нужно предотвратить редирект по адресу, указанному на терминале (по умолчанию) |
| failRedirectUrl | Нет | Строка | Адрес страницы терминала, на которую произойдет редирект плательщика в случае неуспешной оплаты заказа. Или ‘none’, если нужно предотвратить редирект по адресу, указанному на терминале(по умолчанию) |
| theme | Нет | Строка | Тема:'light','dark','auto'(по умолчанию 'auto') |
| locale | Нет | Строка | Локализация:'ru' — русский язык (по умолчанию); 'en' — английский язык |
Установка
Разместите данный скрипт у себя на странице
<script src="https://static.wata.pro/widget.js"></script>
Выполните инициализацию:
const options = {
publicId: '31fdcb7c-49ae-48a0-a01a-432e833089d8',
amount: 123,
currency: 'RUB',
};
const widget = new window.PaymentWidget(options);
Пример вызова встроенного виджета
Встраивается на любой странице вашего проекта
<div id="embedded-widget"></div>
const widget = new window.PaymentWidget(options);
const container = document.getElementById('embedded-widget');
widget.mount(container);
Пример вызова виджета в модальном окне
Вызывается в модальном окне поверх содержимого страницы
<button id="modal-trigger">Перейти к оплате</button>
const widget = new window.PaymentWidget(options);
const modalBtn = document.getElementById('modal-trigger');
modalBtn.onclick = () => widget.open();
Checkout-скрипт
Независимая форма для ввода карточных данных, которая представляется как элемент веб-сайта. Мерчант имеет возможность самостоятельно и независимо от платежной платформы WATA обрабатывать транзакции и контролировать данные карт
Обратитесь к персональному менеджеру, чтобы узнать условия подключения
Преимущества
- Создавайте уникальную платежную форму в вашем дизайне на любом этапе продажи
- Выбирайте дополнительные платежные методы Host-2-host (СБП, ТPay)
- Увеличивайте конверсию для быстрых покупок в вашем интерфейсе без сторонних форм
- Анализируйте данные о платежных операциях клиентов на вашей стороне
- Экономьте время на разработке платежной формы
- Защищайте данные платежных карт ваших клиентов с помощью криптограммы
Криптограмма
Чекаут-скрипт, который прописывается на вашем сайте, проверяет карточные данные и составляет из них криптограмму для оплаты через API WATA. При соблюдении описанных ниже требований карточные данные к вам не попадают, но ваш сервер всё равно влияет на их безопасность
Пример криптограммы
eyJUeXBlIjoiQ2xvdWRDYXJkIiwibWV0YURhdGEiOnsiUGF5bWVudFVybCI6Imh0dHBzOi8vZGV2ZWxvcGVycy5jbG91ZHBheW1lbnRzLnJ1LyIsIlJlZmVycmVyVXJsIjoiaHR0cHM6Ly9kZXZlbG9wZXJzLmNsb3VkcGF5bWVudHMucnUvIn0sIkJyb3dzZXJJbmZvQmFzZTY0IjoiZXlKQlkyTmxjSFJJWldGa1pYSWlPaUlxTHlvaUxDSktZWFpoUlc1aFlteGxaQ0k2Wm1Gc2MyVXNJa3BoZG1GVFkzSnBjSFJGYm1GaWJHVmtJanAwY25WbExDSk1ZVzVuZFdGblpTSTZJbkoxTFZKVklpd2lRMjlzYjNKRVpYQjBhQ0k2SWpNd0lpd2lTR1ZwWjJoMElqb2lNVEExTUNJc0lsZHBaSFJvSWpvaU1UWTRNQ0lzSWxScGJXVmFiMjVsSWpvaUxUUXlNQ0lzSWxWelpYSkJaMlZ1ZENJNklrMXZlbWxzYkdFdk5TNHdJQ2hOWVdOcGJuUnZjMmc3SUVsdWRHVnNJRTFoWXlCUFV5QllJREV3WHpFMVh6Y3BJRUZ3Y0d4bFYyVmlTMmwwTHpVek55NHpOaUFvUzBoVVRVd3NJR3hwYTJVZ1IyVmphMjhwSUVOb2NtOXRaUzh4TXpNdU1DNHdMakFnVTJGbVlYSnBMelV6Tnk0ek5pSjkiLCJGb3JtYXQiOjEsIkNhcmRJbmZvIjp7IkZpcnN0U2l4RGlnaXRzIjoiNDI0MjQyIiwiTGFzdEZvdXJEaWdpdHMiOiI0MjQyIiwiRXhwRGF0ZVllYXIiOiIyNSIsIkV4cERhdGVNb250aCI6IjAxIn0sIktleVZlcnNpb24iOiIxMyIsIlZhbHVlIjoidVZnQlpndDNUZ3FRWkM3aXZaekhiZWIvUWw2RkFpWVlZVHhZakVlbm9UL3VXOUFFRE01cjYycml0RlpzOWx5ZXZPTC81WE90RnFWQ01aTFVjRXVqNDhnclRyUEFXVUg5ekN6SlppejAweEV2MU1lcmNpM3hmR1pSdXNxS2Y2bVdDRzBjUEkxUDZHVzlCNmo3RXkvWXMrNHNiQ1NvSlJIaHVXcTVERTU5Yk1kZHh1eUJqMjluM0NBRWlwQ0I1Ty9QMk1rZmh4MGd4aHZCVjNaNTVGaW15NXZqZlk4ZkZnQW9SdTZUdXIvNk1wUEw3MkhNYVBlR29iUGN0MExvZGorZm5hVVBCcEZ0V3RBVVhMb285NWtYT0hKQmxFbWRzZXA5Mkw5Y3d0QXdwRzF3MlNnbk9LT3R6dHplNFB4NkJIQXZINndKQ1VQZzIrMUpzWjRxMUl5dzhnPT0ifQ==
Требования
- Форма должна работать по HTTPS-соединению с действительным SSL-сертификатом
- На полях не должно быть атрибута «name» — это предотвращает попадание карточных данных на сервер при отправке формы
- Поле для ввода номера карты на форме должно поддерживать ввод до 16 цифр
- Криптограмма должна формироваться только оригинальным скриптом чекаут, загруженным с адресов системы
- Криптограмму нельзя хранить после оплаты и использовать повторно
Установка
Разместите данный скрипт на платежной форме мерчанта и используйте его методы для того, чтобы провалидировать данные карты, сформировать криптограмму с карточными данными и собрать данные об устройстве плательщика
Разместите ссылку на скрипт в конце страницы
<script src="https://static.wata.pro/widget.js"></script>
Инициализация скрипта
const сheckout = window.WataCheckout();
Пример карточных данных для шифрования
const cardData = {
number: "4242424242424242",
expirationMonth: 12,
expirationYear: 28,
cvv: '333',
cardHolderName:'IVAN IVANOV',
};
Валидация карточных данных
const errors = сheckout.validate(cardData);
Объект с ошибками валидации в случае их наличия
type ValidatonErrors = {
data?: string;
number?: string;
expirationMonth?: string;
expirationYear?: string;
cvv?: string;
}
Коды ошибок валидации
| Ошибка | Комментарий |
|---|---|
| CardData_Invalid | В метод validate не передан объект с данными карты |
| CardNumber_Empty | Пустое или нет поля number |
| CardNumber_Invalid | Некорректный номер карты |
| ExpirationMonth_Empty | Пустое или нет поля expirationMonth |
| ExpirationMonth_Invalid | Некорректный номер месяца |
| ExpirationYear_Empty | Пустое или нет поля expirationYear |
| ExpirationYear_Invalid | Некорректный год |
| Cvv_Empty | Пустое или нет поля cvv |
| Cvv_Invalid | Некорректный cvv |
Шифрование карточных данных
const errors = сheckout.validate(cardData);
Получение данных об устройстве плательщика
const deviceData = сheckout.getDeviceData();