Результаты поиска

Ничего не найдено

Оглавление

Кастомизация платёжной формы

Кастомизация платёжной формы

Платежная форма

Настройка стилей

Расширенная настройка интерфейса

Результаты поиска

Ничего не найдено

Оглавление

Настройка стилей

Настройка стилей

Платежная форма

1. Общая информация

Для платёжной формы доступна персонализация стилей, позволяющая адаптировать внешний вид. Вы можете изменить цветовую схему, шрифты, отступы и другие визуальные элементы без изменения функциональности и структуры.

Ознакомиться с платёжной формой можно в разделе “Платёжная форма и виджет” — «Новая платёжная форма».

Все загружаемые стили проходят автоматическую проверку на соответствие требованиям безопасности. Некоторые CSS-свойства будут удалены системой для защиты пользовательских данных и поддержания функциональности платёжной формы.

2. Основные элементы формы для кастомизации

Хедер формы:
- payment-header__info — контейнер заголовка платёжной формы
- merchant — блок данных магазина
- merchant-name — название магазина
- amount — блок с суммой платежа
- amount__total-wrapper — обёртка для суммы и деталей
- amount__total — сумма платежа
- arrow-bottom — стрелка для раскрытия деталей
- amount__details — детали платежа
- amount__details-item — элементы деталей платежа (получатель, номер заказа, описание)
- payment-form__mnt-logo — логотип магазина
Кнопки:
- button-primary — основная кнопка оплаты
- button-secondary — второстепенные кнопки
- payment-form__navigation — навигация по форме
Поля ввода:
- input — базовые поля ввода
- input-wrapper — обёртка для полей ввода
- select — выпадающие списки
- select-wrapper — обёртка для выпадающих списков
- select-arrow — стрелка выпадающего списка
- option — стили для опций в выпадающем списке
Основной контент:
- payment-form__content — основной контейнер контента формы
- payment-form__title — заголовок блока оплаты
- payment-form__comment — дополнительная информация блока оплаты
- payment-form__error — блок ошибок (красный)
- payment-form__alert — блок предупреждений (оранжевый)
- payment-form__notice — уведомление о согласии с договором
- payment-form__message — сообщение о результате операции
- payment-form__description — описание
Форма оплаты по карте:
- card — контейнер полей ввода карты
- logo-cardType — логотип платёжной системы введённой карты
- payment-form__input card-num — поле номера карты
- payment-form__input card-exp — поле срока действия карты
- payment-form__input card-cvv — поле CVV кода
- payment-form__input card-holder — поле имени держателя карты
Футер формы оплаты по карте:
- card__footer — нижний блок карточной формы
- card__footer-security — блок информации о безопасности
- card__footer-security-logo — логотип безопасности
- card__footer-security-text — текст о безопасности
- card__footer-cardsystems-logo — логотипы списка платёжных систем
Дополнительные элементы формы оплаты по карте:
- remove-card — контейнер кнопки удаления сохранённой карты
- remove-card__button — кнопка удаления карты
Чекбоксы:
- checkbox-wrapper — контейнер чекбокса
- remember-card — контейнер чекбокса «Запомнить карту»
- remember-card__checkbox — чекбокс «Запомнить карту»
- remember-card__label — текстовая метка чекбокса
Всплывающие подсказки:
- hint-wrapper — контейнер подсказки
- hint-icon — иконка подсказки
- hint-text — текст всплывающей подсказки
Модальные тултипы:
- tooltip-info — информационный тултип в модальном окне
- tooltip-info-header — заголовок подсказки
- tooltip-info-text — текст подсказки
- tooltip-close — кнопка закрытия тултипа
Дополнительные методы оплаты:
- payment-methods — методы оплаты
- payment-methods__main-list — список методов оплаты
- button payment-method__item — кнопка выбора метода оплаты
Футер:
- footer — нижний блок формы
- footer__main — меню нижнего блока формы
- footer__link — ссылка на раздел «Обратная связь»
- footer__copy — копирайт и логотип
- footer__lang — выбор языка
Загрузка и анимации:
- loader-circles — анимация загрузки (три точки)
- three-body — анимация загрузки (три шара)
- dot-windmill — анимация загрузки (вращающиеся точки)
QR-коды для оплаты:
- payment-form__qrcode — контейнер QR-кода
- payment-form__qrcode-block — блок с QR-кодом
- payment-form__qrcode-img — изображение QR-кода
Модальные окна:
- modal-wrapper — фон модального окна
- modal-window — модальное окно
- modal-title — заголовок модального окна
- modal-content — основной контент модального окна
- modal-action — кнопки действий в модальном окне
- modal-closeIcon — иконка закрытия модального окна

3. Как загрузить стили

3.1. Шаги загрузки

Войдите в Личный кабинет moneta.ru:
1. Перейдите в раздел «Мой счёт» → «Управление счетами»
2. Выберите «Редактировать стиль Moneta.Assistant»
Загрузите CSS-стили:
1. В поле «CSS стили» вставьте ваш CSS-код
2. Нажмите кнопку «Сохранить»

Подсказка: Добавление стилей в виде javascript недоступно.

3.2. Ограничения

Недоступны @import и внешние ресурсы (в том числе шрифты)
Отсутствует возможность изменения структуры элементов формы
Доступно использование только следующих шрифтов:
- GolosTextWebRegular — обычный текст
- GolosTextWebMedium — среднее выделение текста
- GolosTextWebDemiBold — полужирный текст для заголовков
- GolosTextWebBold — жирный текст для важных элементов

4. HTML стартовой страницы платёжной формы

Ниже представлена HTML-структура стартовой страницы платёжной формы. Изучение этой структуры поможет вам лучше понять взаимосвязь элементов и правильно определить классы для кастомизации. Данный HTML-код содержит основные контейнеры и элементы интерфейса. При написании CSS-стилей вы можете использовать классы из этой структуры для точного позиционирования и стилизации нужных элементов.

Карточная форма работает через iframe, поэтому html код разделён на два блока.

Подсказка: Для интерактивной работы с html-кодом — доступен просмотр платёжной формы в разделе “Платёжная форма и виджет” — «Новая платёжная форма» с помощью функционала браузера «Просмотреть код».

HTML-код платёжной формы

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">
<head>
  <title>Assistant</title>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <meta http-equiv="cache-control" content="no-cache">
  <meta name="color-scheme" content="light">
  <meta name="supported-color-schemes" content="light">
  <meta name="theme-color" content="#ffffff">
  <link rel="icon" href="static/img/favicon.ico" type="image/x-icon">
  <link rel="icon" href="static/img/favicon.svg" sizes="any" type="image/svg+xml">
  <link rel="stylesheet" href="static/css/assistant.min.css">
  <script src="static/js/assistant.js"></script>
</head>
<body data-test-id="card" id="assistant" style="position: static;">
<div class="modal-wrapper hidden" id="modalWrapper">
  <div class="modal-window">
    <button type="button" class="tooltip-close">
      <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
        <path d="M8.267 8.267C7.911 8.62277 7.911 9.19993 8.267 9.5557L14.7114 15.9999L8.267 22.4441C7.911 22.8001 7.911 23.3772 8.267 23.733C8.62299 24.089 9.20015 24.089 9.5557 23.733L16.0001 17.2886L22.4445 23.733C22.8001 24.089 23.3772 24.089 23.7332 23.733C24.0892 23.3772 24.0892 22.8001 23.7332 22.4441L17.2888 15.9999L23.7332 9.5557C24.0892 9.19993 24.0892 8.62277 23.7332 8.267C23.3772 7.911 22.8001 7.911 22.4445 8.267L16.0001 14.7112L9.5557 8.267C9.20015 7.911 8.62299 7.911 8.267 8.267Z"></path>
      </svg>
    </button>
    <h4 class="tooltip-info-header">Запомним данные карты</h4>
    <div class="tooltip-info-text">
      <p>При следующей оплате вводить ничего не нужно, деньги спишутся автоматически.</p>
      <p>Данные будем хранить в зашифрованном виде. Это надёжно и безопасно.</p>
      <p>Отвязать карту и отменить автоматические списания можно у продавца или в службе поддержки PayAnyWay.</p>
    </div>
  </div>
</div>
<div class="payment-form">
  <div id="header" class="payment-form__header payment-header"
       data-state="CREATED" data-redirecttarget="_parent">
    <div class="payment-header__info">
      <div class="merchant">
        <div class="merchant-name">Название счёта</div>
      </div>
      <div class="amount">
        <div class="amount__total-wrapper">
          <div class="amount__total" id="amountDetailsSwitcher" tabindex="1">
            15,00 ₽
            <div>
              <div class="arrow-bottom">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M4.35199 8.34427C4.77864 7.92697 5.44629 7.88904 5.91676 8.23046L6.05155 8.34427L12 14.1623L17.9485 8.34427C18.3751 7.92697 19.0428 7.88904 19.5132 8.23046L19.648 8.34427C20.0747 8.76157 20.1135 9.41458 19.7644 9.87473L19.648 10.0066L12.8498 16.6557C12.4231 17.073 11.7555 17.111 11.285 16.7695L11.1502 16.6557L4.35199 10.0066C3.88267 9.54753 3.88267 8.8033 4.35199 8.34427Z" fill="#111111"></path>
                </svg>
              </div>
            </div>
          </div>
        </div>
        <div class="amount__details hidden" id="amountDetailsBlock" style="height: 0px;">
          <div class="amount__details-items">
            <div class="amount__details-item">
              <div class="amount__details-item-name">Получатель</div>
              <div class="amount__details-item-value">Название получателя</div>
            </div>
            <div class="amount__details-item">
              <div class="amount__details-item-name">Номер заказа</div>
              <div class="amount__details-item-value">base-241125-1734</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="payment-form__mnt-logo"></div>
  </div>
  <iframe src="card.html" class="paymentForm" allowfullscreen="" id="cardForm" autofocus=""></iframe>
  <div class="iframe_loader" id="ifrLoaderWrapper" style="height: 468px; margin-top: -468px;">
    <div class="dot-windmill" id="iFrameLoader"></div>
  </div>
  <div class="payment-methods">
    <div class="payment-methods__main-list" id="pmMainList">
      <a class="button payment-method__item" href="/sbp" id="pm_sbp">
        <div class="payment-method__item-info">
          <div class="payment-method__item-logo payment-method__item-logo--sbp-ru"></div>
        </div>
      </a>
      <a class="button payment-method__item" href="/sber.pay" id="pm_sberpay">
        <div class="payment-method__item-info">
          <div class="payment-method__item-logo payment-method__item-logo--sberpay"></div>
        </div>
      </a>
      <a class="button payment-method__item" href="/alfa.pay" id="pm_alfapay">
        <div class="payment-method__item-info">
          <div class="payment-method__item-logo payment-method__item-logo--alfapay"></div>
        </div>
      </a>
      <a class="button payment-method__item" href="/t.pay" id="pm_tpay">
        <div class="payment-method__item-info">
          <div class="payment-method__item-logo payment-method__item-logo--tpay"></div>
        </div>
      </a>
    </div>
  </div>
</div>
<footer id="footer" class="footer">
  <div class="footer__main">
    <div class="footer__link">
      <a href="https://www.payanyway.ru/backoffice/auth/support?lang=ru" target="_blank">Обратная связь</a>
    </div>
    <div class="footer__copy">
      Платёжный сервис
      <a href="https://www.payanyway.ru" target="_blank">PayAnyWay</a>
    </div>
  </div>
  <div class="footer__lang">
    <a href="?moneta.locale=en" id="langLinkD">English</a>
  </div>
</footer>
</body>
</html>

HTML-код формы оплаты по карте

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Card Backend</title>
  <link rel="stylesheet" href="static/css/cardform.min.css">
  <script type="text/javascript" src="static/js/cardform.js"></script>
  <script type="text/javascript" src="static/js/threeDSInfo.min.js"></script>
</head>
<body>
<form class="payment-form__content" method="post" action="?">
  <div class="payment-form__title">
    <div class="payment-form__title-text">По карте</div>
    <div class="payment-form__title-logos">
      <div class="logo-cardType default" id="cardTypeLogo"></div>
    </div>
  </div>
  <div class="card">
    <div class="payment-form__input-wrapper">
      <input placeholder="Номер карты" value="" aria-label="cardNumber" autocomplete="cc-number"
             class="payment-form__input card-num" id="cardNumber" inputmode="numeric" maxlength="23" name="cardNumber">
    </div>
    <input placeholder="ММ/ГГ" value="" aria-label="cardExpiration" autocomplete="cc-exp"
           class="payment-form__input card-exp" id="cardExpiration" inputmode="numeric" maxlength="7" name="cardExpiration">
    <input placeholder="Код" aria-label="cardCVV2" autocomplete="cc-csc" class="payment-form__input card-cvv"
           id="cardCVV2" inputmode="numeric" maxlength="3" name="cardCVV2" type="password">
    <input placeholder="Владелец карты" value="" aria-label="cardHolder" autocomplete="cc-name"
           class="payment-form__input card-holder" id="cardHolder" inputmode="text" name="cardHolder" type="text">
    <div class="error-comment">Напишите имя как на карте, например: IVAN IVANOV</div>
    <div class="remember-card">
      <label class="remember-card__label">
        <input id="rememberCard" name="rememberCard" type="checkbox">
        <span class="remember-card__checkbox">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
            <path id="checkbox-icon" fill-rule="evenodd" clip-rule="evenodd"
                  d="m4.2 8.3l6-6.3 0.8 0.8-6.8 7.2-3.2-3.3 0.8-0.9z" fill="currentColor"></path>
          </svg>
        </span>
        <span>Запомнить карту</span>
      </label>
    </div>
  </div>
  <button class="button-primary" type="submit" name="_do_pay">
    <span class="button-text">Оплатить</span>
    <span id="loader-container" class="loader-circles__wrapper">
      <span class="loader-circles loader-circles--center">
        <span class="loader-circles__circle loader-circles__circle--left"></span>
        <span class="loader-circles__circle loader-circles__circle--middle"></span>
        <span class="loader-circles__circle loader-circles__circle--right"></span>
      </span>
    </span>
  </button>
  <div class="payment-form__notice">
    При оплате вы соглашаетесь с <a href="https://www.moneta.ru/info/public/users/nko/cardsserviceoffer.pdf" class="link--gray" target="_blank">Договором</a>
  </div>
  <div class="card__footer">
    <div class="card__footer-security">
      <div class="card__footer-security-logo"></div>
      <div class="card__footer-security-text">Безопасная оплата</div>
    </div>
    <div class="card__footer-cardsystems">
      <div class="card__footer-cardsystems-logo"></div>
    </div>
  </div>
</form>
</body>
</html>

Результаты поиска

Ничего не найдено

Оглавление

Расширенная настройка интерфейса

Расширенная настройка интерфейса

Платежная форма

Оглавление

1. Общая информация

Для платёжной формы доступна опция расширенной кастомизации. В отличие от базовой настройки стилей, эта возможность позволяет полностью разработать собственный интерфейс для всех или отдельных этапов оплаты с сохранением базовой функциональности и безопасности платёжной системы.

Чтобы получить исходный HTML-файл, выгрузите его из интерфейса платёжной формы в браузере.

Ознакомиться с платёжной формой можно в разделе “Платёжная форма и виджет” — «Новая платёжная форма».

2. Файлы кастомизации и ограничения

Для изменения доступны:

HTML-файлы: с семантически правильной структурой, включая все необходимые секции (<!DOCTYPE html>, <html>, <head>, <body>) и полный контент страницы. Файлы должны быть самодостаточными и содержать всю разметку, а не только изменяемые части.
CSS-файлы: должны содержать полное описание стилей для всех элементов интерфейса, а не только переопределения отдельных правил. Рекомендуем добавлять свои стили в css-файл формы.
Шрифты: форматы woff2 и woff.
Изображения и иконки: форматы SVG (рекомендуется для иконок), PNG, JPEG (JPG).

Ограничения:

Добавление JavaScript недоступно.
Для кнопок методов оплаты недоступно изменение наименований и иконок.

Ориентировочная структура предоставляемых файлов:

html-файл — платёжная форма и форма ввода данных карты
css-файл — стили для платёжной формы и формы ввода данных карты (name.css)
fonts/ — папка с файлами шрифтов
img/ — папка с файлами изображений и иконок

3. Процесс передачи и пример архива

Подготовленные файлы кастомизации передайте вашему менеджеру.

При получении файлов мы проведём техническое ревью и предоставим обратную связь по результатам.

Пример структуры архива:

В приложенном архиве представлена папка js с файлом script.js для ознакомления и просмотра работы формы. Его редактирование и добавление новых скриптов недоступны.

custom_assistant.rar

4. Работа с postMessage

Если платёжная форма встроена на страницу магазина через iframe, родительская страница и iframe могут обмениваться сообщениями через механизм postMessage.

Механизм используется для:

автоматического изменения размеров iframe под размер виджета;
передачи CSS-класса для кастомизации виджета при подключённой расширенной настройке интерфейса и переданных стилях (см. разд. 1–3).

Обмен сообщениями происходит между родительской страницей магазина и iframe с платёжной формой. Для приёма сообщений на стороне магазина зарегистрируйте обработчик события message.

Поддерживаемые сообщения:

от платёжной формы → на страницу магазина: widgetSize — актуальные размеры виджета;
от страницы магазина → платёжную форму: bodyClass — CSS-класс для кастомизации виджета.

Минимальный сценарий подключения:

Встроить платёжную форму в страницу через iframe.
Зарегистрировать обработчик window.addEventListener('message', ...).
Обрабатывать сообщение widgetSize и менять размеры iframe.
При необходимости отправлять сообщение bodyClass для кастомизации виджета.

4.1. Получение размеров виджета (widgetSize)

Платёжная форма отправляет сообщение widgetSize, когда размер виджета изменяется. Это позволяет автоматически изменять размеры iframe на стороне магазина.

Формат сообщения:

{
  "m_type": "widgetSize",
  "width": 300,
  "height": 64
}

Где m_type — тип сообщения; width и height — ширина и высота виджета в пикселях. Рекомендуемый формат — число. Если виджет передаёт размеры строками, на стороне магазина их нужно привести к числу (см. пример ниже).

После получения сообщения необходимо:

Убедиться, что сообщение пришло с соответствующим типом и структурой.
Обновить размеры iframe.

Пример кода для родительского окна:

// ID iframe-элемента, в котором размещается форма
const ASSISTANT_WIDGET_ID = 'assistantWidget'

/**
 * Проверка, является ли сообщение валидным
 * @param {unknown} msg - Проверяемый объект
 * @returns {msg is { m_type: string } & Record<string, unknown>}
 */
function isValidMessage(msg) {
    return typeof msg?.m_type === 'string';
}

/**
 * Получает элемент виджета по ID
 * @returns {HTMLIFrameElement | null}
 */
function getAssistantWidget() {
    const widget = document.getElementById(ASSISTANT_WIDGET_ID);
    if (!widget) {
        console.warn(`Элемент с id "${ASSISTANT_WIDGET_ID}" не найден`);
    }
    return widget;
}

/**
 * Обработчик сообщений от виджета
 * @param {MessageEvent} event - Событие сообщения от window
 * @returns {void}
 */
function listener(event) {
    let msg;

    try {
        msg = JSON.parse(event.data);
    } catch (e) {
        return; // Невалидный JSON - игнорируем
    }

    if (!isValidMessage(msg)) {
        return; // Неверная структура сообщения - игнорируем
    }

    switch (msg.m_type) {
        case "widgetSize": {
            const width = Number(msg.width);
            const height = Number(msg.height);
            if (!Number.isFinite(width) || !Number.isFinite(height)) {
                console.warn('Неверный формат сообщения widgetSize:', msg);
                return;
            }

            const assistantWidget = getAssistantWidget();
            if (!assistantWidget) return;

            assistantWidget.style.height = `${height}px`;
            assistantWidget.style.width = `${width}px`;
            break;
        }

        default:
            console.debug(`Получено неизвестное сообщение: ${msg.m_type}`);
            break;
    }
}

// Подписка на сообщения
if (window.addEventListener) {
    window.addEventListener("message", listener, false);
} else {
    window.attachEvent("onmessage", listener);
}

Пример сообщения от платёжной формы:

{"m_type":"widgetSize","width":360,"height":740}

4.2. Передача CSS-класса (bodyClass)

Родительская страница может передать в платёжную форму CSS-класс для дополнительной кастомизации виджета. Функция доступна, если подключена расширенная настройка интерфейса и переданы стили (см. разд. 1–3).

Формат сообщения:

{
  "m_type": "bodyClass",
  "m_val": "class_name"
}

Где m_type — тип сообщения; m_val — имя CSS-класса.

Особенности обработки на стороне платёжной формы:

Из значения m_val удаляются все недопустимые символы. Доступны только буквы, цифры, дефис - и нижнее подчёркивание _.
Платёжная форма устанавливает CSS-класс для body виджета и применяет стили для этого класса (переданные в рамках расширенной настройки интерфейса). Если по значению m_val стили не найдены — отображается стандартный интерфейс платёжной формы.
Отдельный ответ на сообщение bodyClass не отправляется.

Пример отправки класса (предполагается, что объявлена функция getAssistantWidget() из примера выше):

/**
 * Отправляет сообщение в виджет для установки CSS-класса для элемента body
 * @param {string} bodyClass - Название CSS-класса
 */
function setBodyClass(bodyClass) {
    if (!bodyClass || typeof bodyClass !== 'string') {
        console.warn('bodyClass должен быть непустой строкой');
        return;
    }

    const assistantWidget = getAssistantWidget();
    if (!assistantWidget) return;

    const data = {
        m_type: 'bodyClass',
        m_val: bodyClass
    };

    assistantWidget.contentWindow?.postMessage(data, "*");
}

Пример вызова:

setBodyClass('custom-theme-dark');