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

Введение

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

Рис. 1. Типовое оформление


Рис. 2. Индивидуальное оформление (1)


Рис. 3. Индивидуальное оформление (2)


Рис. 4. Интерфейс конструктора


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

Рис. 5. Типовое оформление


Рис. 6. Индивидуальное оформление (1)


Рис. 7. Индивидуальное оформление (2)


Рис. 8. Интерфейс конструктора


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

Возможности

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

  • если актуальны относительно простые изменения в рамках одного проекта, для этого применима настройка одного варианта оформления;
  • если актуальна тонкая настройка, с разными вариантами оформления в рамках одного или нескольких проектов, для этого необходимо конфигурирование разных вариантов оформления (при работе с формой 4-го поколения — с использованием разных терминалов для разных случаев, а при работе с формой 5-го поколения — с использованием различных стилей).
Каждый из этих способов настройки оформления описан далее. В свою очередь, для настройки отдельных вариантов оформления каждый из конструкторов поддерживает свой набор возможностей.
Возможности Поколения Payment Page
4 5
Добавление логотипа (или иного заголовочного изображения) + +
Управление расположением логотипа + +
Задание фонового цвета или изображения, используемого на панели с информацией о платеже − +
Управление цветами основных элементов + +
Управление отображением панели с информацией о платеже при различных вариантах открытия формы − +
Задание фонового цвета или изображения, используемого в платёжной форме − +
Оформление элементов платёжной формы с помощью встроенного CSS-редактора − +
Добавление фонового изображения, используемого за границами платёжной формы при её открытии в отдельной вкладке браузера + −
Эмулирование работы различных страниц платёжной формы при использовании разных способов её открытия + +
Notice: При работе с индивидуальными вариантами оформления следует учитывать, что ответственность за их возможное негативное влияние на конверсию возлагается на мерчанта. Поэтому крайне важно вдумчиво готовить и анализировать любые изменения и при необходимости возвращаться к проверенным базовым вариантам.

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

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

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

  1. Согласовать порядок работ со специалистами ecommpay.

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

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

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

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

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

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

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

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

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

  1. Открыть конструктор в разделе Проекты.

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

  2. Создать вариант оформления, щёлкнув кнопку .

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

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

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

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


  4. Проверить вид формы, эмулируя работу платёжной формы.

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

  5. Применить оформление, щёлкнув кнопку Продолжить в нижней части панели инструментов и сохранив новое оформление.

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

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

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

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

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

  1. Открыть конструктор в разделе Проекты.

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

  2. Создать вариант оформления, щёлкнув кнопку .

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

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

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

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


  4. Проверить вид формы, эмулируя работу платёжной формы.

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

  5. Сохранить или применить оформление, щёлкнув кнопку Save style в верхней части панели инструментов или Save and apply — в нижней части.

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

    1. Щёлкнуть кнопку Save style в верхней части панели инструментов (если требуется только сохранить новое оформление) или Save and apply в нижней части панели инструментов (если требуется применить новое оформление).
    2. Убедиться в появлении сообщения о том, что вариант оформления сохранён (и применён, если это актуально) для выбранного проекта.

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

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

Когда необходимо настраивать и применять разные варианты оформления платёжной формы для разных ситуаций в рамках одного или нескольких проектов, могут быть актуальны возможности конфигурирования терминалов, моделей интерфейса и стилей оформления. Для этого полезно понимать, как строится оформление 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. Задать название нового стиля в появившемся диалоговом окне.
  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. Убедиться в появлении уведомления об удалении стиля.

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

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

Особенности

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

  • Любой индивидуальный стиль оформления может использоваться только в рамках одного проекта.

    Для использования одного варианта оформления в отношении разных проектов следует создавать и настраивать соответствующее число стилей.

  • Конструктор не позволяет переключаться между проектами в процессе работы.

    Для управления стилями оформления Payment Page по конкретным проектам следует открывать конструктор для каждого из них (через раздел Проекты).

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

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

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

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

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

  1. Выбрать требуемый стиль в выпадающем списке Choose style в левом верхнем углу конструктора.
  2. Внести необходимые изменения с помощью инструментов, расположенных на панели инструментов конструктора.

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

    .pp-info-subcontainer {
  border: 10px solid #ef6301;
}
  3. При необходимости, проверить корректность внесённых изменений.
  4. Сохранить внесённые изменения, щёлкнув кнопку Save style, либо сохранить их и применить стиль, щёлкнув кнопку Save and apply.

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

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

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

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

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

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

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

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

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

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

  1. Выбрать целевой стиль из выпадающего списка стилей.
  2. Щёлкнуть кнопку Save and apply в нижней части панели инструментов конструктора для применения стиля.
  3. Убедиться в появлении уведомления о применении стиля.
Прим.: Если в рамках проекта актуально использовать разные стили оформления в дополнение к используемому по умолчанию, то в каждом запросе на открытие Payment Page с дополнительным стилем необходимо указывать идентификатор этого стиля в параметре style_id. Идентификаторы являются численными и отображаются справа от названий стилей после служебного символа #, например Custom_red_style #6123.

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

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

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

  3. Подтвердить удаление с помощью кнопки Delete в появившемся диалоговом окне.
  4. Убедиться в появлении уведомления об удалении стиля.

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