Индивидуальное оформление
Общая информация
По умолчанию при работе с Payment Page используется типовое оформление, разработанное и поддерживаемое специалистами ecommpay с учётом актуальных требований и тенденций индустрии электронных платежей. Вместе с тем, каждый мерчант может настраивать оформление платёжной формы с учётом специфики своих проектов — с помощью конструктора, встроенного в интерфейс Dashboard.
Для работы с конструктором оформления Payment Page необходима учётная запись Dashboard с правом настройки свойств проектов.
- Если актуальны простые изменения в рамках одного проекта, для этого применима настройка одного варианта оформления.
- Если актуальна тонкая настройка, с разными вариантами оформления в рамках одного или нескольких проектов, для этого необходимо конфигурирование разных вариантов оформления, с использованием различных терминалов для разных случаев.
Каждый из этих вариантов работы описан далее и в каждом из этих вариантов можно:
- добавлять логотип или иное заголовочное изображение и определять его расположение в форме;
- настраивать цвета основных элементов формы;
- добавлять фоновое изображение, используемое при открытии формы в отдельной вкладке браузера.
При работе с индивидуальными вариантами оформления следует учитывать, что ответственность за их возможное негативное влияние на конверсию возлагается на мерчанта. Поэтому крайне важно вдумчиво готовить и анализировать любые изменения и при необходимости возвращаться к проверенным базовым вариантам.
С вопросами и предложениями по работе с конструктором оформления Payment Page можно обращаться к курирующему менеджеру ecommpay.
Настройка одного варианта
Чтобы настроить один вариант оформления Payment Page для одного проекта, следует:
- Открыть конструктор.
Для этого в интерфейсе Dashboard необходимо открыть раздел Проекты, выбрать целевой проект и перейти на вкладку Payment Page Designer.
- Создать вариант оформления.
Для этого следует щёлкнуть кнопку справа от названия типового оформления, задать название нового варианта в появившемся диалоговом окне и щёлкнуть кнопку Продолжить.
- Настроить параметры оформления.
Для этого можно использовать инструменты, расположенные под выпадающим списком Этапы оплаты на панели инструментов конструктора.
- Проверить вид формы.
Для этого можно эмулировать работу платёжной формы в разных ситуациях, выбирая разные платёжные методы и страницы платёжной формы через выпадающие списки Платежные методы и Этапы оплаты и переходя к отображению формы в разных режимах с помощью соответствующих кнопок (Redirect, Popup, iFrame и Mobile).
- Применить оформление.
Для этого необходимо:
- Щёлкнуть кнопку Продолжить в нижней части панели инструментов.
- Щёлкнуть кнопку Сохранить и активировать в появившемся диалоговом окне.
- Убедиться в появлении сообщения о том, что вариант оформления сохранён и применён для выбранного проекта.
После применения изменений новый вариант оформления используется для всех новых сеансов работы Payment Page в рамках целевого проекта. И может быть скорректирован или заменён на другой по такой же схеме.
Конфигурирование разных вариантов
Когда необходимо настраивать и применять разные варианты оформления платёжной формы для разных ситуаций в рамках одного или нескольких проектов, могут быть актуальны возможности конфигурирования терминалов, моделей интерфейса и стилей оформления. Для этого полезно понимать, как строится оформление Payment Page и что можно делать с отдельными составляющими.
Каждый вариант оформления Payment Page строится на базе модели интерфейса и стиля оформления, при этом в модели задаются состав, размеры, цвета и расположение различных элементов, а в стиле может дополнительно определяться часть используемых изображений и цветов. Для каждого вызова платёжной формы применимыми могут быть только одна модель интерфейса и один стиль оформления. И если необходимо одновременно поддерживать разные варианты оформления для разных ситуаций, для этого можно применять соответствующие модели и стили на необходимом количестве проектов и терминалов и указывать необходимый вариант при вызове формы.
В целом для конфигурирования разных вариантов оформления Payment Page со стороны мерчанта можно делать следующее:
- Согласовывать и использовать необходимую структуру проектов и терминалов.
Все действия по настройке этой структуры в платёжной платформе выполняются специалистами ecommpay с учётом потребностей мерчанта. А для использования в конкретных случаях необходимых проекта и терминала со стороны мерчанта достаточно указывать их идентификаторы в запросах на открытие Payment Page (в параметрах
project_id
иterminal_id
соответственно). - Согласовывать применение необходимых моделей интерфейса для конкретных проектов и терминалов.
Как правило, оформление Payment Page строится на актуальной версии базовой модели интерфейса. Вместе с тем, по согласованию с курирующим менеджером ecommpay возможны и случаи применения других моделей для заданных проектов и терминалов.
- Создавать, настраивать и применять необходимые стили оформления для конкретных проектов и терминалов.
Такие возможности полноценно доступны при работе с актуальной версией базовой модели интерфейса и могут быть частично или полностью недоступны при работе с другими моделями. Работа со стилями описана в следующем разделе этой статьи.
Работа со стилями оформления
Общая информация
Добавлять, изменять, применять и удалять стили оформления Payment Page можно с помощью конструктора. Поскольку любые изменения этих стилей могут существенно влиять на пользовательский опыт и проведение платежей, работа с конструктором оформления Payment Page доступна только для учётных записей Dashboard с правом настройки свойств проектов.
Чтобы открыть конструктор, следует открыть раздел Проекты интерфейса Dashboard, выбрать целевой проект и перейти на вкладку Payment Page Designer. В случаях, когда актуальна параллельная работа с несколькими стилями, можно открыть и использовать конструктор в нескольких вкладках браузера.
Если со стороны мерчанта для работы с платёжной платформой ecommpay используется более одного проекта или выделяются терминалы, то при работе с конструктором может быть актуальным выбор необходимых проектов и терминалов. Это можно делать при открытии конструктора, а также в процессе работы с ним, через соответствующие выпадающие списки (Проекты и Терминал) на панели инструментов. При этом следует учитывать, что если какой-либо стиль оформления применяется для нескольких проектов (или терминалов), его изменение распространяется сразу на все случаи применения.
Добавление стиля
Чтобы добавить стиль оформления, следует:
- Выбрать в выпадающем списке Стиль тот стиль, свойства которого актуально наследовать.
- Щёлкнуть кнопку справа от названия выбранного стиля.
- Задать название нового стиля в появившемся диалоговом окне.
- Подтвердить создание стиля с помощью кнопки Продолжить.
- Убедиться в отображении в интерфейсе конструктора страницы созданного стиля, с указанием его названия в выпадающем списке Стиль.
Изменение стиля
Чтобы изменить какой-либо стиль оформления, следует:
- Выбрать требуемый стиль в выпадающем списке Стиль.
- Внести изменения с помощью инструментов, расположенных под выпадающим списком Этапы оплаты на панели инструментов конструктора.
- При необходимости, проверить корректность внесённых изменений.
- Сохранить стиль.
Для этого следует:
- Щёлкнуть кнопку Продолжить в нижней части панели инструментов.
- Использовать один из двух вариантов сохранения в появившемся диалоговом окне:
- для сохранения стиля и его применения — щёлкнуть кнопку Сохранить и активировать;
- для сохранения стиля без его применения — щёлкнуть кнопку Сохранить.
- Убедиться в появлении уведомления о сохранении стиля.
Если один и тот же стиль используется для нескольких терминалов, то при сохранении внесённых в этот стиль изменений, они будут актуальны для всех этих терминалов.
Чтобы отменить внесённые в стиль изменения, можно использовать следующие варианты:
- для сброса всех внесённых, но не сохранённых изменений относительно последнего сохранённого варианта — обновить используемую вкладку браузера с конструктором;
- для сброса всех изменений стиля относительно типового оформления — щёлкнуть ссылку Сбросить настройки, расположенную в нижней части панели инструментов, и подтвердить сброс параметров в появившемся диалоговом окне.
Проверка стиля
Чтобы проверить отображение платёжной формы в различных случаях с применением какого-либо стиля оформления, следует выбрать этот стиль в выпадающем списке Стиль и эмулировать необходимые сценарии. Для этого можно использовать:
- выпадающий список Платежные методы — для выбора платёжного метода;
- выпадающий список Этапы оплаты — для выбора страницы Payment Page;
- кнопки Redirect, Popup, iFrame и Mobile — для выбора режима отображения платёжной формы;
- отображаемую страницу Payment Page — для проверки возможностей заполнения полей.
Следует учитывать, что для отображения в конструкторе могут быть доступны не все платёжные методы и не все страницы Payment Page, а эмулирование поведения платёжной формы выполняется только для отдельных элементов на отображаемых страницах.
Применение стиля
Чтобы назначить определённый стиль оформления используемым на каком-либо проекте или терминале (применить его для этого проекта или терминала), следует:
- При необходимости, выбрать целевые проект, терминал и стиль из соответствующих выпадающих списков.
- Щёлкнуть кнопку Продолжить в нижней части панели инструментов.
- Щёлкнуть кнопку Сохранить и активировать для применения стиля.
- Убедиться в появлении уведомления о применении стиля.
Удаление стиля
Чтобы удалить определённый стиль оформления, необходимо:
- Выбрать этот стиль в выпадающем списке Стиль.
- Щёлкнуть кнопку справа от выпадающего списка Стиль.
- Подтвердить удаление с помощью кнопки Удалить в появившемся диалоговом окне.
- Убедиться в появлении уведомления об удалении стиля.
Стоит учитывать, что при удалении применяемого стиля (об этом свидетельствует значок рядом с названием стиля), для всех терминалов, для которых применялся этот стиль, автоматически применяется типовой стиль оформления, который не может быть изменён или удалён.