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

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

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

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

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

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

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

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

   
   
   

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

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

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

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

  Все действия по настройке этой структуры в платёжной платформе выполняются специалистами ecommpay с учётом потребностей мерчанта.

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

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

• Создавать, настраивать и применять необходимые стили оформления для конкретных проектов.

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

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

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

При работе с этим конструктором стоит учитывать следующие особенности:

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

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

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

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

Особенности

Если со стороны мерчанта для работы с платёжной платформой 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. Убедиться в появлении уведомления о применении стиля.

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

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

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

   

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

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