Это самый распространённый шаблон пейвола. Используйте его как отдельный экран или размещайте в конце многоэкранного флоу. Стандартный экран пейвола содержит заголовок, описание ценности, список возможностей, список продуктов, кнопку покупки и ссылки в футере для восстановления покупок, условий использования и политики конфиденциальности.

Перед началом работы

• Создайте продукты в дашборде Adapty.
• Подключите Adapty к App Store и Google Play.

1. Настройте переиспользуемые стили

Переиспользуемые стили позволяют применять одинаковую типографику и цвета на всех экранах одним кликом. Каждый новый флоу поставляется с набором стандартных текстовых стилей (H1, Body, Button Label и т. д.) — настройте их под свой дизайн, прежде чем начинать добавлять элементы. Добавьте цветовые стили для фирменных цветов, которые будете использовать на экранах.

Подробные инструкции см. в разделе Оформление элементов — Переиспользуемые стили.

Чтобы настроить стили:

1. На левой панели откройте панель Styles .
2. На вкладке Text нажмите на существующий стиль, чтобы изменить шрифт, начертание, размер и цвет. Добавляйте новые стили только если стандартных не хватает.

3. На вкладке Colors нажмите Create style и добавьте цвета, которые планируете использовать на всём экране повторно.

2. Настройка макета экрана

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

Полный список свойств экрана см. в разделе Экраны и слои — Настройки экрана.

Чтобы настроить экран:

1. Нажмите на пустую область холста, чтобы выбрать экран. Правая панель переключится на настройки экрана.
2. В разделе System UI отключите Safe area, чтобы контент растянулся до краёв экрана.
3. В разделе Layout задайте направление Vertical и распределение Space evenly.

4. В разделе Fill выберите тип фона — сплошной цвет, градиент или изображение. В этом примере используется Gradient с двумя точками цвета.

3. Добавьте кнопку закрытия

Кнопка закрытия скрывает пейвол. Пресет Close уже настроен — дополнительная настройка действия не требуется.

1. На канвасе нажмите +.
2. Выберите Buttons > Close.

4. Добавьте заголовок и поместите его рядом с кнопкой закрытия

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

Чтобы добавить заголовок:

1. Нажмите + > Text > H1.
2. Выбрав H1, откройте вкладку Design на правой панели и отредактируйте текст в поле Content.

Чтобы сгруппировать заголовок с кнопкой закрытия:

1. На панели Layers нажмите на трёхточечное меню слоя кнопки закрытия и выберите Wrap > Wrap in Horizontal Container.

2. Перетащите слой H1 в новый горизонтальный контейнер.

Чтобы выровнять два элемента:

1. Отрегулируйте размер кнопки закрытия и размер шрифта H1 так, чтобы они комфортно располагались на одной строке.
2. Выделив горизонтальный контейнер, задайте выравнивание и распределение в правой панели, чтобы элементы выстроились корректно.

5. Добавьте описание ценности

Короткая строка под заголовком объясняет пользователю, что он получит от подписки.

1. Нажмите + > Text > Body.
2. Выделив элемент body, отредактируйте текст в поле Content на вкладке Design.

6. Добавьте список возможностей

Список возможностей показывает, что даёт подписка после оформления. Каждая строка содержит иконку, заголовок и краткое описание.

Полный набор пресетов списков описан в разделе Элементы — Список.

Чтобы добавить список возможностей:

1. Нажмите + > List и выберите пресет. Для пейволов чаще всего подходит Icon List.
2. Выделите каждую строку и отредактируйте заголовок и описание в поле Content.
3. Чтобы добавить или удалить строки, выделите список и воспользуйтесь элементами управления строками на панели Layers.

7. Добавьте список продуктов

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

Подробнее об управлении продуктами — в разделе Настройка покупок.

Чтобы добавить и настроить продукты:

1. Нажмите + > Products и выберите пресет макета. Чаще всего используется Vertical List.
2. Выделите каждую карточку продукта на холсте и выберите продукт из выпадающего списка во вкладке Design. В списке отображаются все продукты, настроенные в дашборде Adapty.
3. Чтобы изменить выбор по умолчанию, выберите нужную карточку и включите Set as default product во вкладке Design.
4. Чтобы настроить значок скидки, разверните карточку продукта на панели Layers, выберите слой значка и отредактируйте его текст в поле Content. Скройте значок на остальных карточках, нажав значок глаза рядом с каждым слоем значка.

8. Добавьте кнопку покупки

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

Чтобы добавить кнопку покупки:

1. Нажмите + > Buttons и выберите пресет кнопки.
2. Выделив кнопку, откройте вкладку Interactions в правой панели.
3. Нажмите Add trigger > On tap, затем нажмите Add action.
4. Установите Action в значение Purchase, а Product — в products.selectedProduct.

9. Добавьте ссылки в футер

Футер содержит ссылки на условия использования и политику конфиденциальности (обязательные требования сторов), а также кнопку для восстановления предыдущих покупок.

Чтобы добавить ссылки в футер:

1. Нажмите + > Buttons > Links. На экран добавится строка с кнопками Restore Purchases, Terms of Use и Privacy Policy.
2. На панели Layers выберите кнопку Terms of Use. Откройте вкладку Interactions — действие Open URL уже привязано. Нажмите на него и введите нужный URL.
3. Повторите то же самое для кнопки Privacy Policy, указав ссылку на политику конфиденциальности.
4. Кнопку Restore Purchases оставьте как есть — её действие уже настроено.

Следующие шаги

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