Обработка действий кнопок в React Native SDK

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

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

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

Покупки, восстановления, закрытие пейвола и открытие 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
    }
});

Для SDK версии < 3.14 поддерживается только модальное представление:


const view = await createPaywallView(paywall);

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

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

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

Чтобы добавить кнопку, открывающую ссылку с пейвола (например, Условия использования или Политика конфиденциальности):

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

В React Native SDK действие 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
    },
});

Для SDK версии < 3.14 поддерживается только модальное представление:


const view = await createPaywallView(paywall);

const unsubscribe = view.registerEventHandlers({
    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');
        }
    }
});

Для SDK версии < 3.14 поддерживается только модальное представление:


const view = await createPaywallView(paywall);

const unsubscribe = view.registerEventHandlers({
    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
        }
    },
});

Для SDK версии < 3.14 поддерживается только модальное представление:

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