React Native - Обработка событий пейвола

Этот гайд охватывает обработку событий для покупок, восстановлений, выбора продуктов и рендеринга пейвола. Вам также необходимо реализовать обработку кнопок (закрытие пейвола, открытие ссылок и т.д.). Подробнее см. в нашем гайде по обработке действий кнопок.

Пейволы, настроенные с помощью Paywall Builder, не требуют дополнительного кода для совершения и восстановления покупок. Однако они генерируют события, на которые ваше приложение может реагировать. Эти события включают нажатия кнопок (кнопки закрытия, URL, выбор продуктов и т.д.), а также уведомления о действиях, связанных с покупками на пейволе. Ниже описано, как реагировать на эти события.

Этот гайд предназначен только для пейволов нового Paywall Builder, которые требуют Adapty SDK v3.0 или новее.

Чтобы контролировать или отслеживать процессы, происходящие на экране пейвола в вашем мобильном приложении, реализуйте обработчики событий:

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


function MyPaywall({ paywall }) {
  const onCloseButtonPress = useCallback<EventHandlers['onCloseButtonPress']>(() => {}, []);
  const onProductSelected = useCallback<EventHandlers['onProductSelected']>((productId) => {}, []);
  const onPurchaseStarted = useCallback<EventHandlers['onPurchaseStarted']>((product) => {}, []);
  const onPurchaseCompleted = useCallback<EventHandlers['onPurchaseCompleted']>((purchaseResult, product) => {}, []);
  const onPurchaseFailed = useCallback<EventHandlers['onPurchaseFailed']>((error, product) => {}, []);
  const onRestoreStarted = useCallback<EventHandlers['onRestoreStarted']>(() => {}, []);
  const onRestoreCompleted = useCallback<EventHandlers['onRestoreCompleted']>((profile) => {}, []);
  const onRestoreFailed = useCallback<EventHandlers['onRestoreFailed']>((error) => {}, []);
  const onPaywallShown = useCallback<EventHandlers['onPaywallShown']>(() => {}, []);
  const onRenderingFailed = useCallback<EventHandlers['onRenderingFailed']>((error) => {}, []);
  const onLoadingProductsFailed = useCallback<EventHandlers['onLoadingProductsFailed']>((error) => {}, []);
  const onUrlPress = useCallback<EventHandlers['onUrlPress']>((url) => {
    Linking.openURL(url);
  }, []);
  const onCustomAction = useCallback<EventHandlers['onCustomAction']>((actionId) => {}, []);
  const onWebPaymentNavigationFinished = useCallback<EventHandlers['onWebPaymentNavigationFinished']>(() => {}, []);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onCloseButtonPress={onCloseButtonPress}
      onProductSelected={onProductSelected}
      onPurchaseStarted={onPurchaseStarted}
      onPurchaseCompleted={onPurchaseCompleted}
      onPurchaseFailed={onPurchaseFailed}
      onRestoreStarted={onRestoreStarted}
      onRestoreCompleted={onRestoreCompleted}
      onRestoreFailed={onRestoreFailed}
      onPaywallShown={onPaywallShown}
      onRenderingFailed={onRenderingFailed}
      onLoadingProductsFailed={onLoadingProductsFailed}
      onUrlPress={onUrlPress}
      onCustomAction={onCustomAction}
      onWebPaymentNavigationFinished={onWebPaymentNavigationFinished}
    />
  );
}

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

Повторный вызов setEventHandlers переопределит предоставленные обработчики, заменив как стандартные, так и ранее установленные обработчики для этих конкретных событий.


const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
  onCloseButtonPress() {
    return true;
  },
  onAndroidSystemBack() {
    return true;
  },
  onPurchaseCompleted(purchaseResult, product) {
    return purchaseResult.type !== 'user_cancelled';
  },
  onPurchaseStarted(product) { /***/},
  onPurchaseFailed(error) { /***/ },
  onRestoreCompleted(profile) { /***/ },
  onRestoreFailed(error, product) { /***/ },
  onProductSelected(productId) { /***/},
  onRenderingFailed(error) { /***/ },
  onLoadingProductsFailed(error) { /***/ },
  onUrlPress(url) {
      Linking.openURL(url);
      return false; // Keep paywall open
  },
  onPaywallShown() { /***/ },
  onPaywallClosed() { /***/ },
  onWebPaymentNavigationFinished() { /***/ },  
});

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


const view = await createPaywallView(paywall);

const unsubscribe = view.registerEventHandlers({
  onCloseButtonPress() {
    return true;
  },
  onAndroidSystemBack() {
    return true;
  },
  onPurchaseCompleted(purchaseResult, product) {
    return purchaseResult.type !== 'user_cancelled';
  },
  onPurchaseStarted(product) { /***/},
  onPurchaseFailed(error, product) { /***/ },
  onRestoreCompleted(profile) { /***/ },
  onRestoreFailed(error) { /***/ },
  onProductSelected(productId) { /***/},
  onRenderingFailed(error) { /***/ },
  onLoadingProductsFailed(error) { /***/ },
  onUrlPress(url) {
      Linking.openURL(url);
      return false; // Keep paywall open
  },
  onPaywallShown() { /***/ },
  onPaywallClosed() { /***/ },
  onWebPaymentNavigationFinished() { /***/ },
});

Примеры событий (нажмите, чтобы развернуть)

// onCloseButtonPress
{
  "event": "close_button_press"
}

// onAndroidSystemBack
{
  "event": "android_system_back"
}

// onUrlPress
{
  "event": "url_press",
  "url": "https://example.com/terms"
}

// onCustomAction
{
  "event": "custom_action",
  "actionId": "login"
}

// onProductSelected
{
  "event": "product_selected",
  "productId": "premium_monthly"
}

// onPurchaseStarted
{
  "event": "purchase_started",
  "product": {
    "vendorProductId": "premium_monthly",
    "localizedTitle": "Premium Monthly",
    "localizedDescription": "Premium subscription for 1 month",
    "localizedPrice": "$9.99",
    "price": 9.99,
    "currencyCode": "USD"
  }
}

// onPurchaseCompleted - Success
{
  "event": "purchase_completed",
  "purchaseResult": {
    "type": "success",
    "profile": {
      "accessLevels": {
        "premium": {
          "id": "premium",
          "isActive": true,
          "expiresAt": "2024-02-15T10:30:00Z"
        }
      }
    }
  },
  "product": {
    "vendorProductId": "premium_monthly",
    "localizedTitle": "Premium Monthly",
    "localizedDescription": "Premium subscription for 1 month",
    "localizedPrice": "$9.99",
    "price": 9.99,
    "currencyCode": "USD"
  }
}

// onPurchaseCompleted - Cancelled
{
  "event": "purchase_completed",
  "purchaseResult": {
    "type": "user_cancelled"
  },
  "product": {
    "vendorProductId": "premium_monthly",
    "localizedTitle": "Premium Monthly",
    "localizedDescription": "Premium subscription for 1 month",
    "localizedPrice": "$9.99",
    "price": 9.99,
    "currencyCode": "USD"
  }
}

// onPurchaseFailed
{
  "event": "purchase_failed",
  "error": {
    "code": "purchase_failed",
    "message": "Purchase failed due to insufficient funds",
    "details": {
      "underlyingError": "Insufficient funds in account"
    },
    "product": {
        "vendorProductId": "premium_monthly",
            "localizedTitle": "Premium Monthly",
            "localizedDescription": "Premium subscription for 1 month",
            "localizedPrice": "$9.99",
            "price": 9.99,
            "currencyCode": "USD"
    }
  }
}

// onRestoreCompleted
{
  "event": "restore_completed",
  "profile": {
    "accessLevels": {
      "premium": {
        "id": "premium",
        "isActive": true,
        "expiresAt": "2024-02-15T10:30:00Z"
      }
    },
    "subscriptions": [
      {
        "vendorProductId": "premium_monthly",
        "isActive": true,
        "expiresAt": "2024-02-15T10:30:00Z"
      }
    ]
  }
}

// onRestoreFailed
{
  "event": "restore_failed",
  "error": {
    "code": "restore_failed",
    "message": "Purchase restoration failed",
    "details": {
      "underlyingError": "No previous purchases found"
    }
  }
}

// onRenderingFailed
{
  "event": "rendering_failed",
  "error": {
    "code": "rendering_failed",
    "message": "Failed to render paywall interface",
    "details": {
      "underlyingError": "Invalid paywall configuration"
    }
  }
}

// onLoadingProductsFailed
{
  "event": "loading_products_failed",
  "error": {
    "code": "products_loading_failed",
    "message": "Failed to load products from the server",
    "details": {
      "underlyingError": "Network timeout"
    }
  }
}

// onPaywallShown
{
  "event": "paywall_shown"
}

// onPaywallClosed
{
  "event": "paywall_closed"
}

// onWebPaymentNavigationFinished
{
  "event": "web_payment_navigation_finished"
}

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

Обработчики событий возвращают булево значение. Если возвращается true, процесс отображения считается завершённым: экран пейвола закрывается, а обработчики событий для этого представления удаляются.

У некоторых обработчиков событий есть поведение по умолчанию, которое при необходимости можно переопределить:

onCloseButtonPress: закрывает пейвол при нажатии кнопки закрытия.
onUrlPress: открывает нажатый URL и оставляет пейвол открытым.
onAndroidSystemBack (только для модального отображения): закрывает пейвол при нажатии кнопки Back.
onRestoreCompleted: закрывает пейвол после успешного восстановления.
onPurchaseCompleted: закрывает пейвол, если пользователь не отменил покупку.
onRenderingFailed: закрывает пейвол при ошибке рендеринга.

Обработчики событий

Обработчик события	Описание
onCustomAction	Вызывается, когда пользователь выполняет пользовательское действие, например нажимает кастомную кнопку.
onUrlPress	Вызывается, когда пользователь нажимает на URL в вашем пейволе.
onAndroidSystemBack	Только для модального отображения: вызывается, когда пользователь нажимает системную кнопку Back на Android.
onCloseButtonPress	Вызывается, когда кнопка закрытия видима и пользователь нажимает на неё. Рекомендуется закрывать экран пейвола в этом обработчике.
onPurchaseCompleted	Вызывается при завершении покупки — успешном, отменённом пользователем или ожидающем подтверждения. В случае успешной покупки предоставляет обновлённый `AdaptyProfile`. Отмена пользователем и ожидающие платежи (например, требующие родительского разрешения) вызывают это событие, а не `onPurchaseFailed`.
onPurchaseStarted	Вызывается, когда пользователь нажимает кнопку действия «Купить» для начала процесса покупки.
onPurchaseFailed	Вызывается при ошибке покупки (например, ограничения платежей, недействительные продукты, сбои сети, ошибки верификации транзакций). Не вызывается при отмене пользователем или ожидающих платежах — для них срабатывает `onPurchaseCompleted`.
onRestoreStarted	Вызывается, когда пользователь начинает процесс восстановления покупок.
onRestoreCompleted	Вызывается при успешном восстановлении покупок и предоставляет обновлённый `AdaptyProfile`. Рекомендуется закрывать экран, если у пользователя есть необходимый `accessLevel`. Подробнее о проверке уровня доступа — в разделе Статус подписки.
onRestoreFailed	Вызывается при ошибке восстановления и предоставляет `AdaptyError`.
onProductSelected	Вызывается при выборе любого продукта в представлении пейвола — позволяет отслеживать, что пользователь выбирает до совершения покупки.
onRenderingFailed	Вызывается при ошибке рендеринга представления и предоставляет `AdaptyError`. Такие ошибки не должны возникать, поэтому если вы с ними столкнётесь — дайте нам знать.
onLoadingProductsFailed	Вызывается при ошибке загрузки продуктов и предоставляет `AdaptyError`. Если вы не указали `prefetchProducts: true` при создании представления, AdaptyUI самостоятельно получит необходимые объекты с сервера.
onPaywallShown	Вызывается, когда пейвол отображается пользователю. На iOS также вызывается, когда пользователь нажимает кнопку веб-пейвола внутри пейвола и веб-пейвол открывается во встроенном браузере.
onPaywallClosed	Только для модального отображения: вызывается, когда пейвол закрывается пользователем. На iOS также вызывается, когда веб-пейвол, открытый из пейвола во встроенном браузере, исчезает с экрана.
onWebPaymentNavigationFinished	Вызывается после попытки открыть веб-пейвол для совершения покупки — независимо от того, успешной она была или нет.