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

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

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

Эта функция требует Adapty React Native SDK 4.0 или выше — ранее она была доступна только в нативных SDK для iOS и Android. Для обновления ознакомьтесь с гайдом по миграции.

Прежде чем начать показывать флоу (нажмите, чтобы развернуть)

Настройте первоначальную интеграцию Adapty с App Store и с Google Play. 2. Установите и настройте Adapty SDK. Убедитесь, что параметр observerMode установлен в значение true. Обратитесь к руководству по установке React Native SDK. 3. Создайте продукты в дашборде Adapty. 4. Настройте флоу или пейволы в билдерах и привяжите к ним продукты. 5. Создайте плейсменты и назначьте им флоу или пейволы. 6. Получите флоу и их конфигурацию в коде мобильного приложения.

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

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

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

Для React-компонента передайте обработчики как пропсы в AdaptyFlowView:


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 о ходе покупки или восстановления. Это необходимо для корректного поведения флоу — например, для отображения загрузчика:

Callback	Description
onStartPurchase()	Коллбэк следует вызывать, чтобы уведомить AdaptyUI о начале покупки.
onFinishPurchase()	Коллбэк следует вызывать, чтобы уведомить AdaptyUI о завершении покупки.
onStartRestore()	Коллбэк следует вызывать, чтобы уведомить AdaptyUI о начале восстановления покупок.
onFinishRestore()	Коллбэк следует вызывать, чтобы уведомить AdaptyUI о завершении восстановления покупок.

Показ флоу

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

Не забудьте передать транзакцию и привязать её к пейволу. В противном случае Adapty не распознает транзакцию и не определит пейвол-источник покупки.