Реакция на действия флоу - React Native

Если вы создаёте флоу или пейволы с помощью Adapty Flow Builder или Paywall Builder, важно правильно настроить кнопки:

Добавьте кнопку во флоу/Paywall Builder и назначьте ей уже существующее действие или создайте пользовательский ID действия.
Напишите в приложении код для обработки каждого назначенного действия.

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

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

SDK предоставляет обработчик флоу onRequestPermission для системных запросов разрешений, например на push-уведомления или доступ к камере. Флоу пока не инициируют такие запросы, поэтому реализовывать его сейчас не нужно.

Закрытие флоу и пейволов

Чтобы добавить кнопку для закрытия флоу или пейвола:

В билдере добавьте кнопку и назначьте ей действие Close.
В коде приложения реализуйте обработчик действия close, который закрывает флоу или пейвол.

В React Native SDK действие close по умолчанию закрывает флоу или пейвол. При необходимости это поведение можно переопределить в коде. Например, закрытие одного флоу может запускать открытие другого.

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


function MyPaywall({ flow }) {
  const onCloseButtonPress = useCallback<FlowEventHandlers['onCloseButtonPress']>(() => {
    // Handle close button press - navigate away or hide component
    navigation.goBack();
  }, [navigation]);

  return (
    <AdaptyFlowView
      flow={flow}
      style={styles.container}
      onCloseButtonPress={onCloseButtonPress}
    />
  );
}

Для модального представления реализуйте обработчик закрытия:


const view = await createFlowView(flow);

const unsubscribe = view.setEventHandlers({
    onCloseButtonPress() {
        return true; // allow flow or paywall closing
    }
});

Открытие URL из флоу и пейволов

Если вы хотите добавить группу ссылок (например, пользовательское соглашение и восстановление покупок), добавьте элемент Link в билдере и обработайте его так же, как кнопки с действием Open URL.

Чтобы добавить кнопку, открывающую ссылку из флоу или пейвола (например, Terms of use или Privacy policy):

В билдере добавьте кнопку, назначьте ей действие Open URL и укажите нужный URL.
В коде приложения реализуйте обработчик действия openUrl, который открывает полученный URL в браузере.

В React Native SDK действие openUrl по умолчанию открывает URL. Однако при необходимости вы можете переопределить это поведение в своём коде.

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


function MyPaywall({ flow }) {
  const onUrlPress = useCallback<FlowEventHandlers['onUrlPress']>((url) => {
    Linking.openURL(url);
  }, []);

  return (
    <AdaptyFlowView
      flow={flow}
      style={styles.container}
      onUrlPress={onUrlPress}
    />
  );
}

For modal presentation, implement the URL handler:


const view = await createFlowView(flow);

const unsubscribe = view.setEventHandlers({
    onUrlPress(url) {
        Linking.openURL(url);
        return false; // Keep flow or paywall open
    },
});

Обработка кастомных действий

Чтобы добавить кнопку с любым другим действием:

В конструкторе добавьте кнопку, назначьте ей действие Custom и задайте ID.
В коде приложения реализуйте обработчик для созданного вами ID действия.

Например, если у вас есть другой набор предложений по подписке или разовых покупок, можно добавить кнопку, которая откроет другой флоу или пейвол:

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


function MyPaywall({ flow }) {
  const onCustomAction = useCallback<FlowEventHandlers['onCustomAction']>((actionId) => {
    if (actionId === 'openNewPaywall') {
      // Display another flow or paywall
    }
  }, []);

  return (
    <AdaptyFlowView
      flow={flow}
      style={styles.container}
      onCustomAction={onCustomAction}
    />
  );
}

Для модальной презентации реализуйте обработчики пользовательских действий:

const unsubscribe = view.setEventHandlers({
    onCustomAction(actionId) {
        if (actionId === 'openNewPaywall') {
            // Display another flow or paywall
        }
    },
});

Если вы создаёте пейволы с помощью Paywall Builder, важно правильно настроить кнопки:

Добавьте кнопку в Paywall Builder и назначьте ей готовое действие или создайте пользовательский ID действия.
Напишите код в своём приложении для обработки каждого назначенного действия.

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

Только покупки, восстановления, закрытие пейвола и открытие URL обрабатываются автоматически. Все остальные действия кнопок требуют явной реализации обработки в коде приложения.

Закрытие пейвола

Чтобы добавить кнопку закрытия пейвола:

В Paywall Builder добавьте кнопку и назначьте ей действие Close.
В коде приложения реализуйте обработчик действия close, который скрывает пейвол.

В React Native SDK действие close по умолчанию закрывает пейвол. Однако при необходимости это поведение можно переопределить в коде. Например, закрытие одного пейвола может инициировать открытие другого.

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


function MyPaywall({ paywall }) {
  const onCloseButtonPress = useCallback<EventHandlers['onCloseButtonPress']>(() => {
    // Handle close button press - navigate away or hide component
    navigation.goBack();
  }, [navigation]);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onCloseButtonPress={onCloseButtonPress}
    />
  );
}

Для модального представления реализуйте обработчик закрытия:


const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
    onCloseButtonPress() {
        return true; // allow paywall closing
    }
});

Открытие URL-адресов из пейволов

Если вы хотите добавить группу ссылок (например, условия использования и восстановление покупок), добавьте элемент Link в Paywall Builder и обработайте его так же, как кнопки с действием Open URL.

Чтобы добавить кнопку, открывающую ссылку из пейвола (например, Terms of use или Privacy policy):

В Paywall Builder добавьте кнопку, назначьте ей действие Open URL и введите URL, который нужно открыть.
В коде приложения реализуйте обработчик действия openUrl, который открывает полученный URL в браузере.

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


function MyPaywall({ paywall }) {
  const onUrlPress = useCallback<EventHandlers['onUrlPress']>((url) => {
    Linking.openURL(url);
  }, []);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onUrlPress={onUrlPress}
    />
  );
}

Для модального представления реализуйте обработчик URL:


const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
    onUrlPress(url) {
        Linking.openURL(url);
        return false; // Keep paywall open
    },
});

Войдите в приложение

Чтобы добавить кнопку входа пользователей в приложение:

В Paywall Builder добавьте кнопку и назначьте ей действие Login.
В коде приложения реализуйте обработчик для действия login, который идентифицирует пользователя.

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


function MyPaywall({ paywall }) {
  const onCustomAction = useCallback<EventHandlers['onCustomAction']>((actionId) => {
    if (actionId === 'login') {
      navigation.navigate('Login');
    }
  }, [navigation]);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onCustomAction={onCustomAction}
    />
  );
}

Для модального представления реализуйте обработчик входа:


const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
    onCustomAction(actionId) {
        if (actionId === 'login') {
            navigation.navigate('Login');
        }
    }
});

Обработка пользовательских действий

Чтобы добавить кнопку для обработки произвольных действий:

В Paywall Builder добавьте кнопку, назначьте ей действие Custom и задайте идентификатор.
В коде приложения реализуйте обработчик для созданного вами идентификатора действия.

Например, если у вас есть другой набор предложений по подписке или разовых покупок, вы можете добавить кнопку, которая откроет другой пейвол:

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


function MyPaywall({ paywall }) {
  const onCustomAction = useCallback<EventHandlers['onCustomAction']>((actionId) => {
    if (actionId === 'openNewPaywall') {
      // Display another paywall
    }
  }, []);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onCustomAction={onCustomAction}
    />
  );
}

Для модального представления реализуйте пользовательские обработчики действий:

const unsubscribe = view.setEventHandlers({
    onCustomAction(actionId) {
        if (actionId === 'openNewPaywall') {
            // Display another paywall
        }
    },
});