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

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

Что такое кастомизация?
(от англ. to customize – настраивать, изменять что-то, делая более подходящим под нужды конкретного потребителя) — индивидуализация продукции под заказы конкретных потребителей путём внесения конструктивных или дизайнерских изменений. В данном случае — это изменение платежной страницы PayMaster под стилистику сайта.

Кастомизация позволяет:

    Изменять:
  • Фон страницы
  • Цвета ссылок и текста
  • Шрифты текста
  • Логотип вверху
    Добавлять:
  • Произвольные надписи
  • Картинки на странице
  • Возможность скрытия элементов
  • Изменения расположения элементов

После нажатия кнопки «Оплатить» на Вашем сайте, покупатель переадресуется на страницу оплаты платежного агрегатора PayMaster, оформленную в Вашем дизайне, что создаст у плательщика ощущение, будто он остался на Вашем сайте и не переходил на внешнюю страницу оплаты. Ниже приведены несколько:

Кастомизированная страница оплаты

Оригинальная страница оплаты

Внимание!
Ниже пойдет речь о самостоятельной кастомизации страницы оплаты. Все изменения вы делаете на свой страх и риск. Кастомизация рассчитана на людей с достаточным уровнем знания языков html + css и поэтому PayMaster не несет ответственности за неправильное отображение страницы оплаты после Ваших манипуляций.

Как кастомизировать платежную страницу

  • Шаг 1 — Начало

    Для начала Вам необходимо скачать CSS файл стилей по ссылке ниже:

    Скачать
  • Шаг 2 — Загрузка CSS в ЛК

    1. Заходим в Личный кабине PayMaster
    2. В левом меню выбираем <список сайтов>
    3. справа напротив каждого сайта(добавленного в вашем ЛК) есть кнопка <настроить>
    4. нажимаем её.


    5. прокручиваем в самый низ и видим раздел Загрузка CSS
    6. Нажимаем на кнопку Portal

    7. В разделе ZIP-файл с вашим стилем нажимаем на кнопку выберите файл / выбираем скачанный ранее файл и загружаем его на сервер.
    Пример загруженного кастомного файла css.
    В разделе Текущие файлы будут отображаться все загруженные файлы из zip архива.
    В разделе Примеры для тестирования будут ссылки на страницу с кастомизированным CSS. Они нужны для того, чтобы Вы могли сразу посмотреть изменения каждой страницы и в случае чего исправить ошибки отображения.

  • Шаг 3 — Узнаем основные стили

    Для того чтобы узнать какой стиль отвечает за отображение того или иного элемента Вам необходимо(разберем на примере браузера chrome): 1. Открыть любую тестовую страницу(мы открыли оплату картой)
    2. Наводим на элемент который Вы хотите изменить(допустим это фон страницы) наводим на фон
    3. Жмем правой кнопкой мыши по фону и выбираем Просмотреть код

    4. Откроется режим просмотра открытого кода внизу браузера.
    5. Необходимо посмотреть в правую колонку там мы видим:
    https://paymaster.ru/Test/Card/3add80a1-73a3-45bf-986e-15199c372e9b

    что за фон страницы отвечает класс body и он находится на 125 строке файла pp.bundle.css(файл zip архива), а за фон отвечает параметр background: #eff1f3;
    6. Открываем этот файл любым текстовым редактором (мы для примера использовали программу notepad++) переходим на 125 строку и ищем background: #eff1f3; и меняем #eff1f3 на любой цвет например в красный red у нас должно получится background: red;(т.е фон будет красным). Сохраняем / обновляем архив и загружаем на сервер.