---
title: "Включение покупок с помощью Flow Builder в Capacitor SDK"
description: "Краткое руководство по включению встроенных покупок с помощью Adapty Flow Builder."
---

Чтобы включить встроенные покупки, нужно понять три ключевых понятия:
- [**Продукты**](product) – всё, что пользователи могут купить (подписки, расходуемые покупки, пожизненный доступ)
- [**Флоу**](adapty-flow-builder) – последовательности экранов, которые представляют продукты пользователям, созданные в no-code Flow Builder. SDK получает их через `getFlow`. Если вы предпочитаете строить UI в собственном коде, используйте пейвол — см. [Реализация пейволов вручную](capacitor-quickstart-manual).
- [**Плейсменты**](placements) – где и когда вы показываете флоу в приложении (например, `main`, `onboarding`, `settings`). Вы привязываете флоу к плейсментам в дашборде, а затем запрашиваете их по ID плейсмента в коде. Это упрощает проведение A/B-тестов и показ разных флоу разным пользователям.
Adapty предлагает три способа подключить покупки в вашем приложении. Выберите подходящий в зависимости от требований вашего приложения:
| Реализация | Сложность | Когда использовать |
|---|---|---|
| Adapty Flow Builder | ✅ Легко | Вы [создаёте полноценный флоу с поддержкой покупок в конструкторе без кода](quickstart-paywalls). Adapty автоматически отображает его и берёт на себя весь процесс покупки, валидацию чеков и управление подписками. |
| Самостоятельно созданные пейволы | 🟡 Средне | Вы реализуете интерфейс пейвола в коде приложения, но по-прежнему получаете объект флоу от Adapty, сохраняя гибкость в настройке продуктов. См. [гайд](capacitor-quickstart-manual). |
| Observer mode | 🔴 Сложно | У вас уже есть собственная инфраструктура обработки покупок, и вы хотите продолжать её использовать. Обратите внимание, что observer mode имеет ограничения в Adapty. См. [статью](observer-vs-full-mode). |
:::important
**Шаги ниже показывают, как реализовать флоу, созданный в Adapty Flow Builder.**

Если вы предпочитаете строить UI пейвола самостоятельно, см. [Реализация пейволов вручную](capacitor-quickstart-manual).
:::

Чтобы отобразить флоу, созданный в Adapty Flow Builder, в коде вашего приложения нужно только:

1. **Получить флоу**: Запросить его из Adapty.
2. **Отобразить его — Adapty сам обработает покупки**: Показать представление в вашем приложении.
3. **Обработать действия кнопок**: Связать взаимодействия пользователя с реакцией приложения на них. Например, открывать ссылки или закрывать флоу по нажатию кнопок.
## Перед началом \{#before-you-start\}

Перед началом выполните следующие шаги:

1. Подключите приложение к [App Store](initial_ios) и/или [Google Play](initial-android) в дашборде Adapty.
2. [Создайте продукты](create-product) в Adapty.
3. [Создайте пейвол и добавьте в него продукты](create-paywall).
4. [Создайте плейсмент и добавьте в него пейвол](create-placement).
5. [Установите и активируйте Adapty SDK](sdk-installation-capacitor) в коде приложения.

:::tip
Быстрее всего выполнить эти шаги поможет [quickstart-гайд](quickstart) или создание пейволов и плейсментов с помощью [Developer CLI](developer-cli-quickstart).
:::

## 1. Получите флоу \{#1-get-the-flow\}

Флоу привязаны к плейсментам, настроенным в дашборде. Плейсменты позволяют показывать разные флоу разным аудиториям или запускать [A/B-тесты](ab-tests).

Чтобы получить флоу, созданный в Adapty Flow Builder, запросите объект `flow` по ID [плейсмента](placements) с помощью метода `getFlow`. Флоу содержит элементы интерфейса и стили, необходимые для его отображения.
```typescript showLineNumbers title="Capacitor"

try {
  const flow = await adapty.getFlow({
    placementId: 'YOUR_PLACEMENT_ID',
  });
  // the requested flow
} catch (error) {
  // handle the error
}
```

## 2. Отображение флоу \{#2-display-the-flow\}

Теперь, когда у вас есть флоу, достаточно добавить несколько строк для его отображения.

Создайте `view` с помощью метода `createFlowView`, задайте обработчики событий, затем вызовите `view.present()`. Каждый `view` можно использовать только один раз. Если нужно показать флоу повторно, вызовите `createFlowView` ещё раз, чтобы создать новый экземпляр `view`.
```typescript showLineNumbers title="Capacitor"

try {
  const view = await createFlowView(flow);

  await view.setEventHandlers({
    onPurchaseCompleted(purchaseResult, product) {
      return purchaseResult.type === 'success'; // close the flow on a successful purchase, keep it open for cancelled or pending purchases
    },
  });

  await view.present();
} catch (error) {
  // handle the error
}
```

:::tip
Подробнее о том, как отобразить флоу, читайте в нашем [гайде](capacitor-present-paywalls).
:::
## 3. Обработка нажатий на кнопки \{#handle-button-actions\}

Когда пользователи нажимают кнопки во флоу, Capacitor SDK автоматически обрабатывает покупки, восстановление, закрытие флоу и открытие URL.

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

Например, вот поведение кнопки закрытия по умолчанию. Добавлять его в код не нужно, но здесь видно, как это делается при необходимости.
```typescript showLineNumbers title="Capacitor"
const unsubscribe = await view.setEventHandlers({
  onCloseButtonPress() {
    return true; // allow the flow to close
  },
});
```

:::tip
Читайте наши гайды о том, как обрабатывать [действия кнопок](capacitor-handle-paywall-actions) и [события](capacitor-handling-events).
:::
## Следующие шаги \{#next-steps\}

:::tip
Есть вопросы или возникли проблемы? Загляните на наш [форум поддержки](https://adapty.featurebase.app/), где можно найти ответы на распространённые вопросы или задать свой. Наша команда и сообщество всегда готовы помочь!
:::

Ваш пейвол готов к отображению в приложении. Протестируйте покупки в [песочнице App Store](test-purchases-in-sandbox) или в [Google Play Store](testing-on-android), чтобы убедиться, что тестовая покупка из пейвола проходит успешно.

Теперь нужно [проверить уровень доступа пользователей](capacitor-check-subscription-status), чтобы показывать пейвол или предоставлять доступ к платным функциям нужным пользователям.

## Полный пример \{#full-example\}

Вот как все шаги из этого гайда можно объединить в вашем приложении.
```typescript showLineNumbers title="Capacitor"

export async function showFlow() {
  try {
    const flow = await adapty.getFlow({
      placementId: 'YOUR_PLACEMENT_ID',
    });

    const view = await createFlowView(flow);

    await view.setEventHandlers({
      onCloseButtonPress() {
        return true;
      },
      onPurchaseCompleted(purchaseResult, product) {
        return purchaseResult.type === 'success'; // close the flow on a successful purchase, keep it open for cancelled or pending purchases
      },
    });

    await view.present();
  } catch (error) {
    // handle any error that may occur during the process
    console.warn('Error showing flow:', error);
  }
}
```