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

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

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

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

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

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

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

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

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

Настройка одного варианта

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

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

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

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

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

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

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

    Рис.: Интерфейс конструктора: 1 — панель инструментов; 2 — область отображения формы



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

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

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