---
title: "React Native - Обработка событий пейвола"
description: "Обрабатывайте события подписок в React Native с помощью SDK Adapty."
---

:::important
Этот гайд охватывает обработку событий для покупок, восстановлений, выбора продуктов и рендеринга пейвола. Вам также необходимо реализовать обработку кнопок (закрытие пейвола, открытие ссылок и т.д.). Подробнее см. в нашем [гайде по обработке действий кнопок](react-native-handle-paywall-actions).
:::

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

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

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

<Tabs groupId="version" queryString>
<TabItem value="new" label="SDK version 3.14 or later" default>

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>

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

```typescript showLineNumbers title="React Native (TSX)"

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}
    />
  );
}
```

</TabItem>
<TabItem value="standalone" label="Modal presentation">

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

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

```javascript showLineNumbers title="React Native (TSX)"

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() { /***/ },  
});
```

</TabItem>
</Tabs>

</TabItem>

<TabItem value="old" label="SDK version < 3.14" default>

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

```javascript showLineNumbers title="React Native (TSX)"

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() { /***/ },
});
```

</TabItem>
</Tabs>

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

```javascript
// 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"
}
```
</Details>

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

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

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

### Обработчики событий \{#event-handlers\}

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