Отображение флоу в Observer mode в Capacitor SDK

Если вы используете Observer mode, вся логика покупок остаётся на вашей стороне. Но отображение UI пейвола можно делегировать Flow & Paywall Builder.

Создайте экран в конструкторе — SDK Adapty отрендерит его нативно. Обновляйте текст, макет и цены в любой момент без выпуска нового релиза приложения.

В этом гайде показано, как отобразить флоу и обработать колбэки покупок. Если Adapty сам выполняет покупки за вас, см. Отображение флоу и пейволов.

Прежде чем начать

Вам понадобится:

• Adapty Capacitor SDK 4.1 или выше: Более ранние версии не поддерживают рендеринг флоу. Чтобы перейти с существующего приложения, смотрите гайд по миграции.
• observerMode со значением true: Смотрите гайд по установке Capacitor SDK.
• Базовая интеграция со стором: Настройте Adapty с App Store и с Google Play.
• Опубликованный флоу с продуктами: Создайте его в Flow & Paywall Builder и привяжите к нему продукты.
• Плейсмент для флоу: Создайте плейсмент и назначьте на него флоу.
• Флоу, загруженный в приложении: Получите флоу и его конфигурацию перед показом.

Реализация

В режиме Observer SDK не совершает покупки за вас. Когда пользователь нажимает кнопку покупки или восстановления во флоу, отрисованном Adapty, SDK вызывает ваш обработчик события onObserverPurchaseInitiated или onObserverRestoreInitiated. Выполните покупку или восстановление с помощью собственного кода в этом обработчике.

1. Установите обработчики событий режима Observer на представлении. В отличие от других платформ, здесь нет отдельного объекта resolver — обработчики являются частью обычных обработчиков событий, поэтому устанавливайте их для каждого создаваемого представления:

   import { adapty, createFlowView } from '@adapty/capacitor';
   
   const view = await createFlowView(flow);
   
   const unsubscribe = await view.setEventHandlers({
     onObserverPurchaseInitiated(product, onStartPurchase, onFinishPurchase) {
       onStartPurchase(); // the view shows its loading indicator
       myPurchaseApi(product.vendorProductId)
         .then((transactionId) =>
           adapty.reportTransaction({ transactionId, variationId: flow.variationId }),
         )
         .finally(() => onFinishPurchase()); // the view hides the loading indicator
       return false; // keep the flow open; dismiss it yourself after success
     },
     onObserverRestoreInitiated(onStartRestore, onFinishRestore) {
       onStartRestore();
       myRestoreApi().finally(() => onFinishRestore());
       return false;
     },
   });

onObserverPurchaseInitiated сообщает о том, что пользователь инициировал покупку, а onObserverRestoreInitiated — что пользователь инициировал восстановление покупок. В ответ на эти события запустите свой кастомный флоу покупки или восстановления.

Также не забудьте вызвать следующие коллбэки, чтобы уведомить AdaptyUI о процессе покупки или восстановления. Это необходимо для корректного поведения флоу — например, для отображения лоадера:

2. Представьте флоу как обычно: получите флоу и создайте его представление, затем отобразите его. Дополнительные параметры не нужны — обработчики срабатывают только тогда, когда SDK был активирован с observerMode: true.