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

Введение

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

Помимо прочего, для 4-го и 5-го поколений Payment Page поддерживаются возможности индивидуального оформления платёжной формы через специализированные конструкторы, встроенные в интерфейс Dashboard (в то время как для предыдущих поколений даже минимальные изменения в целях индивидуального оформления следовало согласовывать с курирующим менеджером и ожидать в реализации).

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

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

Инструментарий

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

Оформление Payment Page 4-го поколения может выглядеть следующим образом.

В свою очередь, оформление Payment Page 5-го поколения может выглядеть так.

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

Возможности

Работа с вариантами оформления Payment Page может строиться по-разному:

если актуальны относительно простые изменения в рамках одного проекта, для этого применима настройка одного варианта оформления;
если актуальна тонкая настройка, с разными вариантами оформления в рамках одного или нескольких проектов, для этого необходимо конфигурирование разных вариантов оформления (при работе с формой 4-го поколения — с использованием разных терминалов для разных случаев, а при работе с формой 5-го поколения — с использованием различных стилей).

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


Возможности	Поколения Payment Page
Возможности	4	5
Добавление логотипа (или иного заголовочного изображения)	+	+
Управление расположением логотипа	+	−
Управление видом и отображением панели с информацией о платеже при различных вариантах открытия формы	−	+
Управление цветами основных элементов	+	+
Задание фонового цвета или изображения, используемого в платёжной форме	−	+
Добавление фонового изображения, используемого за границами платёжной формы при её открытии в отдельной вкладке браузера	+	−
Эмулирование работы различных страниц платёжной формы при использовании разных способов её открытия	+	+

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

Перенос вариантов оформления на 5-е поколение формы

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

При готовности на стороне мерчанта начать работу с 5-м поколением платёжной формы следует:

Согласовать порядок работ со специалистами ecommpay.
Если в рамках целевых проектов используется только типовое оформление, достаточно согласовать лишь сроки тестирования и перехода.
Если в рамках целевых проектов используются варианты индивидуального оформления, необходимы дополнительные согласования:
- Если в рамках одного проекта применяется один вариант индивидуального оформления на базе типового, необходимо сопоставить отображение формы в прежнем и новом виде и при возникновении вопросов решить их со специалистами ecommpay.
- Если в рамках одного проекта применяются разные варианты индивидуального оформления с использованием терминалов, необходимо сопоставить отображение формы для каждого из этих вариантов в прежнем и новом виде и при возникновении вопросов решить их со специалистами ecommpay.
  Также при этом стоит согласовать соответствие между идентификаторами терминалов (terminal_id; используемых при работе с формой 4-го и более ранних поколений) и идентификаторами стилей (style_id; используемых при работе с формой 5-го поколения).
- Если в рамках одного проекта используются какие-либо иные варианты оформления (не на базе типового), необходимо отдельно согласовать дальнейшие действия.
Если была согласована необходимость тестирования, получить от специалистов ecommpay уведомление о готовности к нему, проверить работу платёжной формы 5-го поколения с использованием целевого оформления и сообщить о готовности к запуску. Если это актуально, на стороне веб-сервиса можно также предупредить пользователей об изменениях в оформлении платёжной формы.

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

Настройка одного варианта оформления

Работа с формой 4-го поколения

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

Открыть конструктор в разделе Проекты.
Для этого в интерфейсе Dashboard необходимо открыть раздел Проекты, выбрать целевой проект и перейти на вкладку Payment Page Designer.
Создать вариант оформления, щёлкнув кнопку .
Для этого следует щёлкнуть кнопку справа от названия Default Style, используемого для типового оформления, задать название нового варианта в появившемся диалоговом окне и щёлкнуть кнопку Продолжить.
Настроить параметры оформления.
Для этого можно использовать инструменты, расположенные под выпадающим списком Этапы оплаты на панели инструментов конструктора.
Рис. 9. Интерфейс конструктора: 1 — панель инструментов; 2 — область отображения формы
Проверить вид формы, эмулируя работу платёжной формы.
Для этого можно эмулировать работу платёжной формы в разных ситуациях, выбирая целевые платёжные методы и страницы платёжной формы через выпадающие списки Платежные методы и Этапы оплаты и переходя к отображению формы в актуальных режимах с помощью соответствующих кнопок (Redirect, Popup, iFrame и Mobile).
Применить оформление, щёлкнув кнопку Продолжить в нижней части панели инструментов и сохранив новое оформление.
Для этого необходимо:
1. Щёлкнуть кнопку Продолжить в нижней части панели инструментов.
2. Щёлкнуть кнопку Сохранить (если требуется лишь сохранить новое оформление) или Сохранить и активировать (если требуется применить новое оформление) в появившемся диалоговом окне.
3. Убедиться в появлении сообщения о том, что вариант оформления сохранён (и применён, если это актуально) для выбранного проекта.

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

Работа с формой 5-го поколения

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

Открыть конструктор в разделе Проекты.
Для этого в интерфейсе Dashboard необходимо открыть раздел Проекты, выбрать целевой проект и перейти на вкладку Редактор платёжной страницы.
Создать вариант оформления, щёлкнув кнопку .
Для этого следует щёлкнуть кнопку в левом верхнем углу конструктора, задать название нового варианта в появившемся диалоговом окне и щёлкнуть кнопку Create.
Настроить параметры оформления.
Для этого можно использовать инструменты, расположенные на панели инструментов в левой части конструктора.
Рис. 10. Интерфейс конструктора: 1 — панель инструментов; 2 — область отображения формы
Проверить вид формы, эмулируя работу платёжной формы.
Для этого можно эмулировать работу платёжной формы в разных ситуациях, выбирая целевые страницы платёжной формы через выпадающий список Preview layout и переходя к отображению формы в актуальных режимах с помощью соответствующих кнопок (Redirect, Popup, iFrame и Mobile).
Сохранить или применить оформление, щёлкнув кнопку Save style в верхней части панели инструментов или Save and apply style — в нижней части.
Для этого необходимо:
1. Щёлкнуть кнопку Save style в верхней части панели инструментов (если требуется только сохранить новое оформление) или Save and apply style в нижней части панели инструментов (если требуется применить новое оформление).
2. Убедиться в появлении сообщения о том, что вариант оформления сохранён (и применён, если это актуально) для выбранного проекта.

Конфигурирование разных вариантов оформления

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

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

Если необходимо одновременно поддерживать разные варианты оформления для разных ситуаций, можно настраивать соответствующие варианты оформления и указывать их при вызове платёжной формы: в 4-м поколении Payment Page для этого применяются терминалы (и их идентификаторы terminal_id), а в 5-м — стили (и их идентификаторы style_id). При этом одни и те же терминалы могут использоваться в разных проектах, а каждый стиль — только в одном, в рамках которого он был создан.

В целом для конфигурирования разных вариантов оформления со стороны мерчанта можно делать следующее:

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

Работа со стилями оформления

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

Управлять стилями оформления Payment Page 4-го и 5-го поколений можно с помощью специализированных конструкторов. Каждый из них доступен только для работы с теми проектами, в рамках которых используется Payment Page соответствующего поколения, и поскольку любые изменения в оформлении платёжной формы могут существенно влиять на пользовательский опыт и проведение платежей, работа с этими конструкторами доступна только для учётных записей Dashboard, обладающих правом работы с инструментарием Payment Page Designer (подробнее).

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

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

Работа с формой 4-го поколения

Особенности

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Работа с формой 5-го поколения

Особенности

Если со стороны мерчанта для работы с платёжной платформой ecommpay используется более одного проекта, то при работе с конструктором стоит учитывать следующее:

Любой индивидуальный стиль оформления может использоваться только в рамках одного проекта.
Для использования одного варианта оформления в отношении разных проектов следует создавать и настраивать соответствующее число стилей.
Конструктор не позволяет переключаться между проектами в процессе работы.
Для управления стилями оформления Payment Page по конкретным проектам следует открывать конструктор для каждого из них (через раздел Проекты).

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

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

Щёлкнуть кнопку в левом верхнем углу конструктора.
Задать название нового стиля в появившемся диалоговом окне и, если актуально применить стиль при его сохранении, перевести переключатель Apply after saving в активное положение.
Подтвердить создание стиля с помощью кнопки Create.
Убедиться в отображении в интерфейсе конструктора страницы созданного стиля, с указанием его названия в выпадающем списке Стиль.

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

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

Выбрать требуемый стиль в выпадающем списке Choose style в левом верхнем углу конструктора.
Внести необходимые изменения с помощью инструментов, расположенных на панели инструментов конструктора.
При необходимости, проверить корректность внесённых изменений.
Сохранить внесённые изменения, щёлкнув кнопку Save style, либо сохранить их и применить стиль, щёлкнув кнопку Save and apply.
Для этого следует:
1. Использовать один из двух вариантов сохранения в появившемся диалоговом окне:
  - для сохранения стиля без его применения — щёлкнуть кнопку Save style в верхней части панели инструментов конструктора;
  - для сохранения стиля и его применения — щёлкнуть кнопку Save and apply в нижней части панели инструментов конструктора.
2. Убедиться в появлении уведомления о сохранении стиля.

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

для сброса всех внесённых, но не сохранённых изменений относительно последних сохранённых изменений — закрыть окно конструктора, щёлкнув кнопку Back to Dashboard в правом верхнем углу, либо обновить используемую вкладку браузера с конструктором;
для сброса всех изменений стиля относительно типового оформления — щёлкнуть кнопку Restore to defaults, расположенную под выпадающим списком всех стилей.
Прим.: При сбросе изменений подтверждение действия не запрашивается и, если требуется отменить такой сброс, то следует закрыть окно конструктора, не сохраняя никаких изменений.

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

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

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

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

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

Выбрать целевой стиль из выпадающего списка стилей.
Щёлкнуть кнопку Save and Apply в нижней части панели инструментов конструктора для применения стиля.
Убедиться в появлении уведомления о применении стиля.

Прим.: Если в рамках проекта актуально использовать разные стили оформления в дополнение к используемому по умолчанию, то в каждом запросе на открытие Payment Page с дополнительным стилем необходимо указывать идентификатор этого стиля в параметре style_id. Идентификаторы являются численными и отображаются справа от названий стилей после служебного символа #, например Custom_red_style #6123.

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

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

Выбрать этот стиль в выпадающем списке Choose style.
Щёлкнуть кнопку справа от названия стиля.
Подтвердить удаление с помощью кнопки Delete в появившемся диалоговом окне.
Убедиться в появлении уведомления об удалении стиля.

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