---
title: "Получение пейволов и продуктов для Remote Config пейволов в React Native SDK"
description: "Получайте пейволы и продукты в Adapty React Native SDK для монетизации пользователей."
---

Прежде чем отображать пейволы на основе Remote Config или кастомные пейволы, необходимо получить информацию о них. Обратите внимание, что этот раздел посвящён пейволам на основе Remote Config и кастомным пейволам. Если вы работаете с пейволами, настроенными в Paywall Builder, обратитесь к разделу [Получение пейволов Paywall Builder и их конфигурации](react-native-get-pb-paywalls).

:::tip

Хотите увидеть реальный пример интеграции Adapty SDK в мобильное приложение? Посмотрите наши [примеры приложений](sample-apps) — они демонстрируют полную настройку: отображение пейволов, совершение покупок и другие базовые функции.

:::

<details>
   <summary>Перед тем как начать получать пейволы и продукты в мобильном приложении (нажмите, чтобы развернуть)</summary>

   1. [Создайте продукты](create-product) в дашборде Adapty.

2. [Создайте пейвол и добавьте в него продукты](create-paywall) в дашборде Adapty.

3. [Создайте плейсменты и добавьте пейвол в плейсмент](create-placement) в дашборде Adapty.

4. [Установите Adapty SDK](sdk-installation-reactnative) в своём мобильном приложении.
</details>

## Получение информации о пейволе \{#fetch-paywall-information\}

В Adapty [продукт](product) — это объединение продуктов из App Store и Google Play. Эти кросс-платформенные продукты добавляются в пейволы, позволяя показывать их пользователям в нужных плейсментах мобильного приложения.

Чтобы отобразить продукты, необходимо получить [пейвол](paywalls) из одного из ваших [плейсментов](placements) с помощью метода `getPaywall`.

:::important
**Не прописывайте ID продуктов в коде.** Единственный ID, который стоит хардкодить — это ID плейсмента. Пейволы настраиваются удалённо, поэтому количество продуктов и доступные офферы могут меняться в любой момент. Ваше приложение должно обрабатывать эти изменения динамически: если сегодня пейвол возвращает два продукта, а завтра три — отображайте все без изменений в коде.
:::

```typescript showLineNumbers
try {
    const id = 'YOUR_PLACEMENT_ID';
    const locale = 'en';

    const paywall = await adapty.getPaywall(id, locale);
    // the requested paywall
} catch (error) {
    // handle the error
}
```

| Параметр          | Обязательность | Описание |
|-------------------|--------|-----------|
| **placementId**   | обязательный | Идентификатор [плейсмента](placements). Это значение вы указали при создании плейсмента в дашборде Adapty. |
| **locale**        | <p>необязательный</p><p>по умолчанию: `en`</p> | <p>Идентификатор [локализации пейвола](add-remote-config-locale). Ожидается языковой код, состоящий из одного или нескольких subtag-ов, разделённых символом минус (**-**). Первый subtag — язык, второй — регион.</p><p></p><p>Пример: `en` — английский, `pt-br` — бразильский португальский.</p><p></p><p>Подробнее о кодах локалей и рекомендациях по их использованию см. в разделе [Локализации и коды локалей](react-native-localizations-and-locale-codes).</p> |
| **fetchPolicy**   | по умолчанию: `.reloadRevalidatingCacheData` | <p>По умолчанию SDK пытается загрузить данные с сервера и возвращает кешированные данные в случае ошибки. Мы рекомендуем этот вариант, так как он гарантирует, что пользователи всегда получают актуальные данные.</p><p></p><p>Однако если у ваших пользователей нестабильное интернет-соединение, рассмотрите использование `.returnCacheDataElseLoad` — оно вернёт кешированные данные, если они есть. В этом случае данные могут быть не самыми свежими, но загрузка будет быстрее при любом качестве соединения. Кеш регулярно обновляется, так что его безопасно использовать в течение сессии для снижения числа сетевых запросов.</p><p></p><p>Обратите внимание: кеш сохраняется при перезапуске приложения и очищается только при его переустановке или вручную.</p><p></p><p>Adapty SDK хранит пейволы на двух уровнях: в описанном выше кеше с регулярным обновлением и в [резервных пейволах](react-native-use-fallback-paywalls). Для ускоренной загрузки используется CDN, а при его недоступности — резервный сервер. Эта система гарантирует получение актуальных пейволов даже при слабом интернет-соединении.</p> |
| **loadTimeoutMs** | по умолчанию: 5 сек | <p>Ограничивает время выполнения этого метода. При истечении таймаута возвращаются кешированные данные или локальный фолбэк.</p><p></p><p>Обратите внимание, что в редких случаях метод может завершиться немного позже указанного в `loadTimeout` значения, поскольку операция может включать несколько запросов под капотом.</p> |

Не прописывайте ID продуктов в коде! Так как пейволы настраиваются удалённо, доступные продукты, их количество и специальные офферы (например, бесплатные пробные периоды) могут меняться со временем. Убедитесь, что ваш код корректно обрабатывает эти сценарии.  
Например, если изначально вы получаете 2 продукта, приложение должно показывать 2 продукта. Но если позже вы получите 3 продукта, приложение должно отображать все 3 без изменений в коде. Единственное, что нужно хардкодить — это ID плейсмента.

Параметры ответа:

| Параметр | Описание                                                                                                                                                  |
| :-------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Paywall   | Объект [`AdaptyPaywall`](https://react-native.adapty.io/interfaces/adaptypaywall) со списком ID продуктов, идентификатором пейвола, Remote Config и рядом других свойств. |

## Получение продуктов \{#fetch-products\}

Получив пейвол, вы можете запросить массив продуктов, соответствующих ему:

```typescript showLineNumbers
try {
    // ...paywall
    const products = await adapty.getPaywallProducts(paywall);
  // the requested products list
} catch (error) {
    // handle the error
}
```

Параметры ответа:

| Параметр | Описание                                                                                                                                                                                |
| :-------- |:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| Products  | Список объектов [`AdaptyPaywallProduct`](https://react-native.adapty.io/interfaces/adaptypaywallproduct) с идентификатором продукта, названием, ценой, валютой, длительностью подписки и рядом других свойств.                                   |

При реализации собственного дизайна пейвола вам, скорее всего, понадобятся эти свойства объекта [`AdaptyPaywallProduct`](https://react-native.adapty.io/interfaces/adaptypaywallproduct). Ниже перечислены наиболее часто используемые из них; полный список доступных свойств смотрите в документации по ссылке.

| Свойство                | Описание                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
|-------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| **Title**               | Для отображения названия продукта используйте `product.localizedTitle`. Локализация основана на стране магазина, выбранной пользователем, а не на локали устройства.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| **Price**               | Для отображения локализованной цены используйте `product.price?.localizedString`. Локализация основана на настройках локали устройства. Цену в виде числа можно получить через `product.price?.amount` — значение будет в местной валюте. Для получения символа валюты используйте `product.price?.currencySymbol`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| **Subscription Period** | Для отображения периода (например, неделя, месяц, год и т.д.) используйте `product.subscription?.localizedSubscriptionPeriod`. Локализация основана на локали устройства. Для программного получения периода подписки используйте `product.subscription?.subscriptionPeriod`. Из этого объекта можно получить свойство `unit` — длину периода (`'day'`, `'week'`, `'month'`, `'year'` или `'unknown'`). Свойство `numberOfUnits` возвращает количество единиц периода. Например, для квартальной подписки в `unit` будет `'month'`, а в `numberOfUnits` — `3`.                                                                                                                                                                                                                                                                                                                                                                                                       |
| **Introductory Offer**  | Чтобы отобразить бейдж или другой индикатор наличия introductory offer у подписки, используйте свойство `product.subscription?.offer?.phases`. Это список, который может содержать до двух фаз скидки: фазу бесплатного пробного периода и фазу вводной цены. Каждый объект фазы содержит следующие полезные свойства:<br/>• `paymentMode`: строка со значениями `'free_trial'`, `'pay_as_you_go'`, `'pay_up_front'` и `'unknown'`. Бесплатные пробные периоды имеют тип `'free_trial'`.<br/>• `price`: скидочная цена в виде числа. Для бесплатных пробных периодов здесь будет `0`.<br/>• `localizedNumberOfPeriods`: строка, локализованная в соответствии с локалью устройства, описывающая длительность оффера. Например, для трёхдневного пробного периода в этом поле будет `'3 days'`.<br/>• `subscriptionPeriod`: отдельные детали периода оффера. Работает так же, как описано в предыдущем разделе для обычных подписок.<br/>• `localizedSubscriptionPeriod`: форматированный период подписки для оффера в соответствии с локалью пользователя. |

## Ускорение загрузки пейвола с помощью пейвола для аудитории по умолчанию \{#speed-up-paywall-fetching-with-default-audience-paywall\}

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

Для этого можно использовать метод `getPaywallForDefaultAudience`, который получает пейвол указанного плейсмента для аудитории **All Users**. Однако важно понимать, что рекомендуемый подход — использовать метод `getPaywall`, описанный в разделе [Получение информации о пейволе](fetch-paywalls-and-products-react-native#fetch-paywall-information) выше.

:::warning
Почему мы рекомендуем использовать `getPaywall`

У метода `getPaywallForDefaultAudience` есть несколько существенных недостатков:

- **Возможные проблемы с обратной совместимостью**: если вам нужно показывать разные пейволы для разных версий приложения (текущей и будущих), могут возникнуть трудности. Придётся либо разрабатывать пейволы с поддержкой текущей (устаревшей) версии, либо мириться с тем, что у пользователей с этой версией пейволы могут не отображаться корректно.
- **Потеря таргетинга**: все пользователи увидят одинаковый пейвол, предназначенный для аудитории **All Users**, — вы теряете персонализированный таргетинг (в том числе по странам, маркетинговой атрибуции и собственным атрибутам).

Если вы готовы принять эти ограничения ради более быстрой загрузки пейвола, используйте метод `getPaywallForDefaultAudience` следующим образом. В противном случае придерживайтесь метода `getPaywall`, описанного [выше](fetch-paywalls-and-products-react-native#fetch-paywall-information).
:::

```typescript showLineNumbers
try {
    const id = 'YOUR_PLACEMENT_ID';
    const locale = 'en';

    const paywall = await adapty.getPaywallForDefaultAudience(id, locale);
  // the requested paywall
} catch (error) {
    // handle the error
}
```

:::note
Метод `getPaywallForDefaultAudience` доступен начиная с версии React Native SDK 2.11.2.
:::

| Параметр | Обязательность | Описание |
|---------|--------|-----------|
| **placementId** | обязательный | Идентификатор [плейсмента](placements). Это значение вы указали при создании плейсмента в дашборде Adapty. |
| **locale** | <p>необязательный</p><p>по умолчанию: `en`</p> | <p>Идентификатор [локализации пейвола](add-remote-config-locale). Ожидается языковой код, состоящий из одного или нескольких subtag-ов, разделённых символом минус (**-**). Первый subtag — язык, второй — регион.</p><p></p><p>Пример: `en` — английский, `pt-br` — бразильский португальский.</p><p></p><p>Подробнее о кодах локалей и рекомендациях по их использованию см. в разделе [Локализации и коды локалей](react-native-localizations-and-locale-codes).</p> |
| **fetchPolicy** | по умолчанию: `.reloadRevalidatingCacheData` | <p>По умолчанию SDK пытается загрузить данные с сервера и возвращает кешированные данные в случае ошибки. Мы рекомендуем этот вариант, так как он гарантирует, что пользователи всегда получают актуальные данные.</p><p></p><p>Однако если у ваших пользователей нестабильное интернет-соединение, рассмотрите использование `.returnCacheDataElseLoad` — оно вернёт кешированные данные, если они есть. В этом случае данные могут быть не самыми свежими, но загрузка будет быстрее при любом качестве соединения. Кеш регулярно обновляется, так что его безопасно использовать в течение сессии для снижения числа сетевых запросов.</p><p></p><p>Обратите внимание: кеш сохраняется при перезапуске приложения и очищается только при его переустановке или вручную.</p> |