Индивидуальное оформление

По умолчанию при работе с Payment Page используется типовое оформление, разработанное и поддерживаемое специалистами ecommpay с учётом актуальных требований и тенденций индустрии электронных платежей. Вместе с тем, каждый мерчант может настраивать оформление платёжной формы с учётом специфики своих проектов — с помощью конструктора, встроенного в интерфейс Dashboard.

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

• Если актуальны простые изменения в рамках одного проекта, для этого применима настройка одного варианта оформления.
• Если актуальна тонкая настройка, с разными вариантами оформления в рамках одного или нескольких проектов, для этого необходимо конфигурирование разных вариантов оформления, с использованием различных терминалов для разных случаев.

Каждый из этих вариантов работы описан далее и в каждом из этих вариантов можно:

• добавлять логотип или иное заголовочное изображение и определять его расположение в форме;
• настраивать цвета основных элементов формы;
• добавлять фоновое изображение, используемое при открытии формы в отдельной вкладке браузера.

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

С вопросами и предложениями по работе с конструктором оформления Payment Page можно обращаться к курирующему менеджеру ecommpay.

Чтобы настроить один вариант оформления Payment Page для одного проекта, следует:

1. Открыть конструктор.

   Для этого в интерфейсе Dashboard необходимо открыть раздел Проекты, выбрать целевой проект и перейти на вкладку Payment Page Designer.

2. Создать вариант оформления.

   Для этого следует щёлкнуть кнопку справа от названия типового оформления, задать название нового варианта в появившемся диалоговом окне и щёлкнуть кнопку Продолжить.

3. Настроить параметры оформления.

   Для этого можно использовать инструменты, расположенные под выпадающим списком Этапы оплаты на панели инструментов конструктора.

   
   
   

4. Проверить вид формы.

   Для этого можно эмулировать работу платёжной формы в разных ситуациях, выбирая разные платёжные методы и страницы платёжной формы через выпадающие списки Платежные методы и Этапы оплаты и переходя к отображению формы в разных режимах с помощью соответствующих кнопок (Redirect, Popup, iFrame и Mobile).

5. Применить оформление.

   Для этого необходимо:

   1. Щёлкнуть кнопку Продолжить в нижней части панели инструментов.
   2. Щёлкнуть кнопку Сохранить и активировать в появившемся диалоговом окне.
   3. Убедиться в появлении сообщения о том, что вариант оформления сохранён и применён для выбранного проекта.

После применения изменений новый вариант оформления используется для всех новых сеансов работы 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 используется более одного проекта или выделяются терминалы, то при работе с конструктором может быть актуальным выбор необходимых проектов и терминалов. Это можно делать при открытии конструктора, а также в процессе работы с ним, через соответствующие выпадающие списки (Проекты и Терминал) на панели инструментов. При этом следует учитывать, что если какой-либо стиль оформления применяется для нескольких проектов (или терминалов), его изменение распространяется сразу на все случаи применения.

Добавление стиля

Чтобы добавить стиль оформления, следует:

1. Выбрать в выпадающем списке Стиль тот стиль, свойства которого актуально наследовать.
2. Щёлкнуть кнопку справа от названия выбранного стиля.
3. Задать название нового стиля в появившемся диалоговом окне.
4. Подтвердить создание стиля с помощью кнопки Продолжить.
5. Убедиться в отображении в интерфейсе конструктора страницы созданного стиля, с указанием его названия в выпадающем списке Стиль.

Изменение стиля

Чтобы изменить какой-либо стиль оформления, следует:

1. Выбрать требуемый стиль в выпадающем списке Стиль.
2. Внести изменения с помощью инструментов, расположенных под выпадающим списком Этапы оплаты на панели инструментов конструктора.
3. При необходимости, проверить корректность внесённых изменений.
4. Сохранить стиль.

   Для этого следует:

   1. Щёлкнуть кнопку Продолжить в нижней части панели инструментов.
   2. Использовать один из двух вариантов сохранения в появившемся диалоговом окне:
      • для сохранения стиля и его применения — щёлкнуть кнопку Сохранить и активировать;
      • для сохранения стиля без его применения — щёлкнуть кнопку Сохранить.
   3. Убедиться в появлении уведомления о сохранении стиля.

Если один и тот же стиль используется для нескольких терминалов, то при сохранении внесённых в этот стиль изменений, они будут актуальны для всех этих терминалов.

Чтобы отменить внесённые в стиль изменения, можно использовать следующие варианты:

• для сброса всех внесённых, но не сохранённых изменений относительно последнего сохранённого варианта — обновить используемую вкладку браузера с конструктором;
• для сброса всех изменений стиля относительно типового оформления — щёлкнуть ссылку Сбросить настройки, расположенную в нижней части панели инструментов, и подтвердить сброс параметров в появившемся диалоговом окне.

Проверка стиля

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

• выпадающий список Платежные методы — для выбора платёжного метода;
• выпадающий список Этапы оплаты — для выбора страницы Payment Page;
• кнопки Redirect, Popup, iFrame и Mobile — для выбора режима отображения платёжной формы;
• отображаемую страницу Payment Page — для проверки возможностей заполнения полей.

Следует учитывать, что для отображения в конструкторе могут быть доступны не все платёжные методы и не все страницы Payment Page, а эмулирование поведения платёжной формы выполняется только для отдельных элементов на отображаемых страницах.

Применение стиля

Чтобы назначить определённый стиль оформления используемым на каком-либо проекте или терминале (применить его для этого проекта или терминала), следует:

1. При необходимости, выбрать целевые проект, терминал и стиль из соответствующих выпадающих списков.
2. Щёлкнуть кнопку Продолжить в нижней части панели инструментов.
3. Щёлкнуть кнопку Сохранить и активировать для применения стиля.
4. Убедиться в появлении уведомления о применении стиля.

Удаление стиля

Чтобы удалить определённый стиль оформления, необходимо:

1. Выбрать этот стиль в выпадающем списке Стиль.
2. Щёлкнуть кнопку справа от выпадающего списка Стиль.
3. Подтвердить удаление с помощью кнопки Удалить в появившемся диалоговом окне.
4. Убедиться в появлении уведомления об удалении стиля.

Стоит учитывать, что при удалении применяемого стиля (об этом свидетельствует значок рядом с названием стиля), для всех терминалов, для которых применялся этот стиль, автоматически применяется типовой стиль оформления, который не может быть изменён или удалён.