# Индивидуальное оформление {#ru_PP__design_customisation}

статья о возможностях оформлять платёжную форму Payment Page с помощью специализированного конструктора, встроенного в интерфейс Dashboard

## Общая информация {#section_odq_gbr_jgc .section}

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

![](images/ecommpay/pp_designer_v5_1.svg "Типовое оформление")

![](images/ecommpay/pp_designer_v5_2.svg "Индивидуальное оформление (1)")

![](images/ecommpay/pp_designer_v5_3.svg "Индивидуальное оформление (2)")

![](images/ecommpay/pp_designer_v5_4.svg "Интерфейс конструктора (1)")

![](images/ecommpay/pp_designer_v5_6.svg "Интерфейс конструктора (2)")

Интерфейс конструктора поддерживает широкий спектр возможностей и позволяет гибко настраивать оформление Payment Page, как для её основной редакции, так и для [облегчённой](ru_pp_microframe_solution.md). При этом следует учитывать, что изменения в оформлении платёжной формы могут существенно влиять на пользовательский опыт и проведение платежей, а ответственность за их возможное негативное влияние на конверсию возлагается на мерчанта. В связи с этим крайне важно вдумчиво готовить и анализировать любые изменения и при необходимости возвращаться к проверенным базовым вариантам.

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

## Возможности {#section_e1z_gbr_jgc .section}

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

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

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

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

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

**На уровень выше:**[Payment Page](ru_PP_about.md)

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

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

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

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

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

    Для этого следует щёлкнуть кнопку ![](images/universal/dbl/icon_add1.svg) в левом верхнем углу конструктора, задать название нового варианта в появившемся диалоговом окне и щёлкнуть кнопку **Create**.

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

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

    ![](images/ecommpay/pp_designer_v5_5.svg "Интерфейс конструктора: 1 — панель инструментов; 2 — область отображения формы")

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

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

5.  Сохранить или применить оформление.

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

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

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

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

### Общая информация {#section_sf4_m33_2rb .section}

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

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

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

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

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

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

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

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

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

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


### Инструментарий {#section_l5c_4br_jgc .section}

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

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

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

## Работа со стилями оформления {#ru_pp_working_with_stylesv5}

### Общая информация {#section_jh4_jl3_2rb .section}

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

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

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

### Особенности {#section_t1p_dgf_kcc .section}

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

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

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

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

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


### Добавление стиля {#section_ff4_4sp_2rb .section}

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

1.  Щёлкнуть кнопку ![](images/universal/dbl/icon_add1.svg) в левом верхнем углу конструктора.
2.  Задать название нового стиля в появившемся диалоговом окне и, если актуально применить стиль при его сохранении, перевести переключатель **Apply after saving** в активное положение.
3.  Подтвердить создание стиля с помощью кнопки **Create**.
4.  Убедиться в отображении в интерфейсе конструктора страницы созданного стиля, с указанием его названия в выпадающем списке **Choose style**.

### Изменение стиля {#section_ipr_4sp_2rb .section}

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

1.  Выбрать требуемый стиль в выпадающем списке **Choose style** в левом верхнем углу конструктора.
2.  Внести необходимые изменения с помощью инструментов, расположенных на панели инструментов конструктора.
3.  При необходимости, [проверить](ru_PP__design_customisation.md#section_pqv_4sp_2rb) корректность внесённых изменений.
4.  Сохранить внесённые изменения.

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

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

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

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

    **Прим.:** При сбросе изменений подтверждение действия не запрашивается и, если требуется отменить такой сброс, то следует закрыть окно конструктора, не сохраняя никаких изменений.


### Проверка стиля {#section_pqv_4sp_2rb .section}

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

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

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

### Применение стиля {#section_bsy_4sp_2rb .section}

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

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

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

### Удаление стиля {#section_nlb_psp_2rb .section}

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

1.  Выбрать этот стиль в выпадающем списке **Choose style**.
2.  Щёлкнуть кнопку ![](images/universal/dbl/icon_trashbean2.svg) справа от названия стиля.

    ![](images/universal/dbl/all_dbl_pp_designer_dropdown_list_of_styles.svg)

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

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