Отображение флоу в режиме Observer — React Native

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

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

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

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

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

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

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

Установите обработчики событий в режиме наблюдателя

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

function MyFlow({ flow }) {
  const onObserverPurchaseInitiated = useCallback<
    FlowEventHandlers['onObserverPurchaseInitiated']
  >((product, onStartPurchase, onFinishPurchase) => {
    onStartPurchase(); // the flow shows its loading indicator
    myPurchaseApi(product.vendorProductId)
      .then((transactionId) => adapty.reportTransaction(transactionId, flow.variationId))
      .finally(() => onFinishPurchase()); // the flow hides the loading indicator
  }, [flow]);

  const onObserverRestoreInitiated = useCallback<
    FlowEventHandlers['onObserverRestoreInitiated']
  >((onStartRestore, onFinishRestore) => {
    onStartRestore();
    myRestoreApi().finally(() => onFinishRestore());
  }, []);

  return (
    <AdaptyFlowView
      flow={flow}
      onObserverPurchaseInitiated={onObserverPurchaseInitiated}
      onObserverRestoreInitiated={onObserverRestoreInitiated}
      // ... your other event handlers
    />
  );
}

const view = await createFlowView(flow);

const unsubscribe = view.setEventHandlers({
  onObserverPurchaseInitiated(product, onStartPurchase, onFinishPurchase) {
    onStartPurchase(); // the flow shows its loading indicator
    myPurchaseApi(product.vendorProductId)
      .then((transactionId) => adapty.reportTransaction(transactionId, flow.variationId))
      .finally(() => onFinishPurchase()); // the flow 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 о ходе покупки или восстановления. Это необходимо для корректного поведения флоу — например, для отображения загрузчика:

Показ флоу

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