Настройка покупок

Ваш флоу может отображать доступные продукты и инициировать встроенные покупки:

  1. Добавьте продукты стора в дашборд Adapty. Подключите существующие продукты стора или создайте новые в Adapty и опубликуйте их в сторах.
  2. Выберите продукты из дашборда и добавьте их на экран флоу. Карточки, переменные и действия на этом экране смогут их использовать.
  3. (Опционально) Настройте группу карточек продуктов, чтобы предложить несколько вариантов покупки.
  4. Добавьте действие Purchase к кнопке и настройте его. Целью действия может быть конкретный продукт или продукт, выбранный пользователем.
  5. В дальнейшем используйте панель Products, чтобы добавлять, менять или удалять продукты во флоу. Пользователи увидят изменения после публикации флоу — без обновления приложения.
Переформулируйте цену одной фразой.

Попросите AI Editor разбить годовой план до стоимости в день, зачеркнуть старую цену или выделить лучшее предложение. Он меняет только оформление карточек продуктов на этом экране — каталог и цены остаются нетронутыми.

Explore the AI Editor

Добавление продуктов на экран

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

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

Добавление продуктов на панели Products

Панель позволяет добавить продукт в список экрана. Любой элемент на экране может затем использовать его: карточка продукта, текстовая переменная или действие. Например, текстовая переменная может отображать цену продукта, у которого нет карточки.

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

  1. На левой боковой панели откройте раздел Products и нажмите +.
  2. Screen показывает текущий экран. Чтобы добавить продукт на другой экран, выберите нужный здесь.
  3. В поле Product выберите продукт из вашего дашборда.
  4. (Опционально) В поле Offer выберите офер, с которым продаётся продукт. См. Добавить офер во флоу.
  5. Нажмите Add product.
Add product to screen dialog with the Product dropdown open, listing Monthly and Yearly with their access level and price

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

Добавление продуктов при настройке элемента

Когда вы выбираете продукт в элементе, билдер добавляет его в список экрана. Это происходит, когда вы:

  • Назначаете продукт карточке продукта.
  • Вставляете переменную продукта в текстовый элемент.
  • Задаёте Product для действия Purchase.

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

Чтобы настроить сами элементы, переходите к разделам Добавить карточки продуктов и Запустить покупку.

Добавление карточек продуктов

Чтобы предложить пользователям выбор продуктов, добавьте элемент Products. Он представляет собой набор из трёх карточек продуктов в заданном расположении. Карточки образуют группу продуктов: пользователь выбирает одну из них, после чего действие Purchase может купить выбранный продукт.

Набор — единственный способ получить карточки продуктов или группу продуктов. Чтобы получить больше или меньше карточек, после добавления набора продублируйте или удалите нужные из них.

Добавьте группу продуктов

  1. Откройте панель Add element.

  2. Выберите категорию Products.

  3. Выберите макет: Vertical List, Horizontal List, Feature Carousel, Feature Cards или Banner List.

    Добавление элемента Products на холст

Настройка карточки продукта

Для каждой карточки в группе:

  1. Выберите карточку. На вкладке Design в разделе Product назначьте ей продукт. Продукты, уже добавленные на этот экран, находятся в разделе Added, далее идут остальные продукты из вашего каталога.
  2. Подтвердите активный офер. Если вы ранее связали продукт с офером, он появится автоматически. Можно выбрать другой офер вручную, но в результате в панели Products появится копия продукта.
  3. Чтобы эта карточка была выбрана по умолчанию при открытии экрана, нажмите Set as default.
Product dropdown of a product card open, with the screen's products under Added and the rest of the catalog under Other products
  1. (Опционально) Чтобы показать пользователям, какой план выбран, задайте стили для состояния Selected карточек — states.
Important

Карточка без продукта блокирует публикацию. То же самое происходит, если действие или переменная всё ещё ссылается на удалённую группу продуктов: после замены группы обновите все действия и переменные так, чтобы они указывали на новую.

Завершите настройку карточки с помощью четырёх дополнительных функций:

  • Динамическая цена: Замените цену-заглушку на переменную цены продукта. Карточка будет отображать цену из стора в валюте пользователя.
  • Условия предложения: Чтобы расписать детали предложения, используйте в тексте карточки переменные: offer_price, offer_billing_period и offer_full_duration.
  • Бейдж: Добавьте бейдж, чтобы выделить конкретный тариф.
  • Зачёркнутая цена: Элемент Old Price внутри карточки показывает реальную цену, умноженную на заданный вами коэффициент, со зачёркиванием — так реальная цена воспринимается как скидка. Валюта и формат всегда совпадают с реальной ценой, а число автоматически обновляется при изменении цены.

Запуск покупки

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

Добавление кнопки покупки

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

  1. Откройте панель Add element.
  2. Выберите пресет из категории Button.
  3. Выделив кнопку, откройте вкладку Interactions в правой панели.
  4. Нажмите Add trigger > On tap, затем нажмите Add action.
  5. Установите Action в значение Purchase, затем задайте Product — один из вариантов:
    • products.selectedProduct: покупает продукт, который пользователь выбрал в элементе Products на экране.
    • Конкретный продукт: всегда покупает именно этот продукт, независимо от выбора на экране.
Действие покупки на вкладке Interactions с открытым выпадающим списком Product, в котором перечислены переменная selected-product, продукты экрана в разделе Added и остальные в разделе Other products

Запуск покупки из карточки продукта

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

Показать цену на кнопке

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

  1. Выделите кнопку и откройте вкладку Design в правой панели.
  2. В поле Content поставьте курсор в место, где должна появиться цена.
  3. Нажмите на иконку переменной, выберите products.selectedProduct, затем атрибут prod_price. Полная переменная принимает вид products.selectedProduct.prod_price.
  4. Добавьте статический текст вокруг переменной — например, Subscribe for {prod_price}.

Текст кнопки обновляется при каждом выборе продукта пользователем.

Кнопка покупки с переменной цены выбранного продукта в подписи

Восстановление покупок

Существующим подписчикам нужна возможность восстановить предыдущие покупки. Добавьте кнопку с действием Restore purchases:

  • Используйте пресет Links в категории Button. Он включает строку из трёх текстовых кнопок — Restore (уже настроена), Terms of use и Privacy policy.
    Adding a restore button to the canvas
  • Добавьте действие Restore purchases к другой кнопке.
    1. Выберите кнопку и откройте вкладку Interactions.
    2. Нажмите Add trigger > On tap, затем нажмите Add action.
    3. В выпадающем списке Action выберите Restore purchases.
Restore purchases action in the Interactions tab

Отсутствие кнопки восстановления не мешает публикации, но может привести к отклонению в сторе. Используйте скилл flow-audit, чтобы найти пейволы без функции восстановления покупок.

Изменение содержимого экрана в зависимости от выбранного продукта

Если на экране есть карточки продуктов, вы можете показывать или скрывать другие элементы в зависимости от того, какую карточку выбрал пользователь.

Чтобы настроить условную видимость:

  1. В элементе Products выберите карточку продукта.

  2. Откройте вкладку Interactions на правой панели и нажмите Add trigger.

    Добавление триггера к карточке продукта
  3. Выберите On tap и нажмите Add action.

  4. В выпадающем списке Action выберите Show или Hide.

  5. Укажите элемент, который нужно показать или скрыть при выборе этого продукта.

    Действие Show/Hide на вкладке Interactions

Изменение выбранного продукта из других элементов

Обычно пользователи меняют выбранный продукт, нажимая на карточку. Но другие элементы, например переключатель триала, могут использовать действие Select product, чтобы изменить выбор вместо этого.

Чтобы настроить действие:

  1. Выберите элемент, который будет менять выбор — кнопку, переключатель или любой другой элемент. Целевая карточка должна находиться на том же экране.
  2. Откройте вкладку Interactions в правой панели и нажмите Add trigger.
  3. Выберите триггер и нажмите Add action.
  4. В выпадающем списке Action выберите Select product.
  5. В поле Product укажите карточку продукта, которую должно выбрать это действие.
Select product action in the Edit action window with the Product picker listing product cards

Управление продуктами флоу

Панель Products отображает все продукты флоу, сгруппированные по экранам.

  • Число рядом с названием продукта показывает, сколько раз он упоминается на экране: каждая карточка, каждая переменная продукта в текстовом элементе и каждое действие.
  • Цена справа — базовая цена продукта. Если к нему привязан оффер, указывается цена как со скидкой, так и без.
  • Продукты по умолчанию вынесены в отдельный раздел.
Панель Products со списком продуктов двух экранов с количеством использований, ценами, предложениями и разделами Default и Other

Чтобы добавить запись, нажмите + и следуйте инструкциям в разделе Добавление продуктов в панели Products.

Действия с продуктом

Откройте контекстное меню записи продукта для управления им:

Контекстное меню записи продукта в панели Products с открытым подменю Replace in 2 places, в котором перечислены продукты каталога с уровнями доступа и ценами
  • Set as default: Предварительно выбирает карточку этого продукта при открытии экрана — то же самое, что чекбокс Set as default на карточке. Доступно только для продуктов, у которых на экране ровно одна карточка.
  • Replace in N places: Заменяет продукт во всех карточках, текстовых элементах и действиях, которые его используют на этом экране. Поле Offer сбрасывается. Если другие экраны используют тот же продукт и оффер, всплывающее уведомление предложит повторить изменение там.
  • Offer: Меняет оффер для всех использований продукта на этом экране. Если продукт есть на других экранах, изменение можно применить и там. Чтобы посмотреть, как экран выглядит для пользователей с разными типами офферов, выберите Preview as в том же подменю.
  • Remove: Удаляет продукт из списка экрана. Карточки и действия Purchase, которые его использовали, мгновенно теряют настройки продукта — замените продукт до публикации. Текстовые переменные и условия сохраняют ссылку и получают значок предупреждения. Подсказка к нему гласит This product is off this screen — до тех пор, пока вы не добавите продукт обратно, не замените ссылку или не удалите текст.
  • Missing: Продукт или оффер, удалённый в вашем дашборде, остаётся в списке с пометкой Missing и счётчиком использований. Доступны только Replace in N places и Remove, а каждое оставшееся использование блокирует публикацию.

Устранение неполадок с продуктами

Следующие проблемы с продуктами и предложениями блокируют публикацию:

  • Карточка продукта или действие Purchase без привязанного продукта. Привяжите продукт или удалите карточку/действие.
  • Продукт или оффер отсутствует в вашем дашборде. Возникает, если вы добавили продукт во флоу, а затем удалили его из аккаунта Adapty. Найдите запись Missing в панели Products и замените все вхождения существующим продуктом.
  • Переменная оффера используется с продуктом, у которого нет оффера. Задайте оффер для продукта в панели Products или удалите переменную.
  • Текстовая переменная или условие по-прежнему ссылается на продукт, который вы удалили в панели Products. Добавьте продукт обратно с помощью + или измените ссылку.

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