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

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

Оглавление

Настройка стилей (лёгкая кастомизация)

Настройка стилей (лёгкая кастомизация)

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

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>