---
title: "Шаг 1. Создание флоу для отображения данных пейвола"
description: "Настройте флоу действий для feature flag в Adapty, чтобы персонализировать подписки пользователей."
---

:::important
При использовании плагина FlutterFlow нельзя использовать пейволы, созданные в Adapty Paywall Builder. Необходимо реализовать собственную страницу пейвола в FlutterFlow и подключить её к Adapty.
:::

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

Сначала нужно получить данные пейвола от Adapty. Начнём с запроса пейвола Adapty, затем связанных с ним продуктов и проверки успешности получения данных. Если всё прошло успешно — отобразим название продукта и цену на странице пейвола. В противном случае покажем сообщение об ошибке.

Прежде чем продолжить, убедитесь, что вы выполнили следующее:

1. [Создали хотя бы один пейвол и добавили в него хотя бы один продукт](create-paywall) в дашборде Adapty.
2. [Создали хотя бы один плейсмент](create-placement) и [добавили в него свой пейвол](add-audience-paywall-ab-test) в дашборде Adapty.

Приступим!

## Шаг 1.1. Запрос пейвола Adapty \{#step-11-request-adapty-paywall\}

Как уже упоминалось, для отображения данных на пейволе FlutterFlow сначала нужно получить их от Adapty. Первый шаг — получить сам пейвол Adapty. Вот как это сделать:

1. Откройте экран пейвола и перейдите в раздел **Actions** на правой панели. Там откройте **Action Flow Editor**.

  
    <img src="/assets/shared/img/ff_action_flow.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

2. В окне **Select Action Trigger** выберите **On Page Load**.
  
    <img src="/assets/shared/img/ff_action_trigger.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

3. Нажмите **Add Action**. Затем найдите кастомное действие `getPaywall` и выберите его.

  
    <img src="/assets/shared/img/ff_getpaywall.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

4. В разделе **Set Actions Arguments** введите реальный ID [плейсмента, который вы создали](create-placement) в дашборде Adapty и который включает нужный пейвол. В примере это `monthly`. Обязательно используйте свой реальный ID плейсмента!

  
    <img src="/assets/shared/img/ff_placementid.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

5. Если вы [локализовали](localizations-and-locale-codes) свой пейвол в дашборде Adapty, вы также можете задать аргумент **locale**.

6. В поле **Action Output Variable Name** создайте новую переменную и назовите её `getPaywallResult`. Она понадобится на следующем шаге для обращения к пейволу Adapty и запроса его продуктов.

  
    <img src="/assets/shared/img/ff_getpaywallresult.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

## Шаг 1.2. Запрос продуктов пейвола Adapty \{#step-12-request-adapty-paywall-products\}

Отлично! Мы получили пейвол Adapty. Теперь запросим продукты, связанные с ним:

1. Нажмите **+** под созданным действием и выберите **Add Action**. Это действие получит продукты пейвола Adapty. Для этого найдите и выберите `getPaywallProducts`.

2. В разделе **Set Actions Arguments** выберите созданную ранее переменную `getPaywallResult`.

  
    <img src="/assets/shared/img/ff_getpaywallproduct.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

3. Заполните остальные поля следующим образом:
  - **Available Options**: Data Structured Field
  - **Select Field**: value
  - **Available Options**: без изменений

  
    <img src="/assets/shared/img/ff_getpaywallresult2.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

4. Нажмите **Confirm**.
5. В поле **Action Output Variable Name** создайте новую переменную и назовите её `getPaywallProductsResult`. С её помощью мы свяжем разработанный в FlutterFlow пейвол с данными пейвола Adapty.

  
    <img src="/assets/shared/img/ff_getpaywallproductsresult.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

## Шаг 1.3. Добавление проверки успешной загрузки пейвола \{#step-13-add-check-if-the-paywall-uploaded-successfully\}

Прежде чем двигаться дальше, проверим, что пейвол Adapty был получен успешно. Если да — обновим пейвол данными продуктов. Если нет — обработаем ошибку. Вот как добавить эту проверку:

1. Нажмите **+** и выберите **Add Conditional**.

  
    <img src="/assets/shared/img/ff-add-conditional.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

2. В разделе **Action Output** выберите созданную ранее переменную результата действия (`getPaywallResult` в нашем примере).

  
    <img src="/assets/shared/img/ff-getpaywallresult.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

3. Чтобы проверить, что пейвол Adapty получен, убедитесь в наличии поля со значением. Заполните поля следующим образом:
 - **Available Options**: Has Field
 - **Field (AdaptyGetPaywallResult)**: value

4. Нажмите **Confirm**, чтобы завершить создание условия.

## Шаг 1.4. Логирование просмотра пейвола \{#step-14-log-the-paywall-review\}

Чтобы аналитика Adapty фиксировала просмотры пейвола, нужно залогировать это событие. Без этого шага просмотр не будет учтён в аналитике. Вот как это сделать:

1. Нажмите **+** под меткой **TRUE** и выберите **Add Action**.
2. В поле **Select Action** найдите и выберите **logShowPaywall**.

  
    <img src="/assets/shared/img/ff-logshowpaywall.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

3. Нажмите **Value** в области **Set Action Arguments** и выберите созданную переменную `getPaywallResult`. Эта переменная содержит данные пейвола.
4. Заполните поля следующим образом:
  - **Available Options**: Data Structured Field
  - **Select Field**: value

5. Нажмите **Confirm**.

  
    <img src="/assets/shared/img/ff-lohsgowpaywallresult.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

## Шаг 1.5. Отображение ошибки при неполучении пейвола \{#step-15-show-error-if-paywall-not-received\}

Если пейвол Adapty не получен, необходимо [обработать ошибку](error-handling-on-flutter-react-native-unity#system-storekit-codes). В этом примере мы просто покажем диалоговое окно с сообщением.

1. Добавьте действие **Informational Dialog** к метке **FALSE**.
2. В поле **Title** введите текст, который хотите видеть в качестве заголовка диалога. В этом примере — **Error**.
3. Нажмите **Value** в поле **Message**.

4. Заполните поля следующим образом:
  - **Set Variable**: переменная `getPaywallProductResult`, которую мы создали
  - **Available Options**: Data Structure Field
  - **Select Field**: error
  - **Available Options**: Data Structure Field
  - **Select Field**: errorMessage

  
    <img src="/assets/shared/img/ff-error.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

5. Нажмите **Confirm**.
6. Добавьте действие **Terminate action** во флоу **FALSE**.

  
    <img src="/assets/shared/img/ff-terminate.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

7. Нажмите **Close** в правом верхнем углу.

  Поздравляем! Вы успешно получили данные продуктов. Теперь давайте [свяжем их с пейволом, разработанным в FlutterFlow](ff-add-variables-to-paywalls).