Чтобы включить встроенные покупки, нужно понять три ключевых понятия:

• Продукты – всё, что пользователи могут купить (подписки, расходуемые покупки, пожизненный доступ)
• Флоу и пейволы – экраны, которые показывают продукты пользователям; создаются в визуальном конструкторе Flow & Paywall Builder без написания кода. SDK получает их через getFlow. Если вы предпочитаете строить интерфейс в собственном коде, см. Реализация кастомных пейволов.
• Плейсменты – где и когда показывать флоу и пейволы в приложении (например, main, onboarding, settings). Вы привязываете их к плейсментам в дашборде, а затем запрашиваете по ID плейсмента в коде. Это упрощает запуск A/B-тестов и показ разных вариантов разным пользователям.

Adapty предлагает три способа подключить покупки в вашем приложении. Выберите подходящий в зависимости от требований вашего приложения:

Реализация	Сложность	Когда использовать
Adapty Flow & Paywall Builder	✅ Легко	Вы создаёте готовый к покупке флоу или пейвол в no-code конструкторе. Adapty автоматически отображает его и берёт на себя всю сложную логику покупок, валидацию чеков и управление подписками.
Кастомные пейволы	🟡 Средне	Вы реализуете UI пейвола в коде приложения, но всё равно получаете объект флоу от Adapty, сохраняя гибкость в управлении продуктами. См. гайд.
Observer mode	🔴 Сложно	У вас уже есть собственная инфраструктура обработки покупок, и вы хотите продолжать её использовать. Обратите внимание, что observer mode имеет свои ограничения в Adapty. См. статью.

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

1. Получите флоу или пейвол: Получите его из Adapty.
2. Отобразите его — Adapty сам обработает покупки: Покажите экран в своём приложении.
3. Обработайте действия кнопок: Свяжите действия пользователя с реакцией вашего приложения. Например, открывайте ссылки или закрывайте пейвол при нажатии кнопок.

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

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

1. Подключите приложение к App Store и/или Google Play в дашборде Adapty.
2. Создайте продукты в Adapty.
3. Создайте флоу или пейвол и добавьте в него продукты.
4. Создайте плейсмент и добавьте в него флоу или пейвол.
5. Установите и активируйте SDK в коде приложения. В этом гайде используются API Adapty Capacitor SDK v4.

1. Получите флоу или пейвол

Ваши флоу и пейволы привязаны к плейсментам, настроенным в дашборде. Плейсменты позволяют показывать разные флоу или пейволы разным аудиториям, а также запускать A/B-тесты.

Чтобы получить флоу или пейвол, созданный в Adapty Flow & Paywall Builder, получите объект flow по ID плейсмента с помощью метода getFlow. Флоу содержит элементы UI и стили, необходимые для его отображения.

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

2. Отобразите флоу или пейвол

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

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

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
}

3. Обработка нажатий кнопок

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

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

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

const unsubscribe = await view.setEventHandlers({
  onCloseButtonPress() {
    return true; // allow the flow to close
  },
});

Дальнейшие шаги

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

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

Полный пример

Вот как все шаги из этого гайда можно объединить в вашем приложении.

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);
  }
}