---
title: "Получение пейволов Paywall Builder и их конфигурации в React Native SDK"
description: "Узнайте, как получить пейволы PB в Adapty для управления подписками в приложении на React Native."
---

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

:::warning
Новый Paywall Builder работает с React Native SDK версии 3.0 и выше.
:::

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

:::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>

## Получение пейвола, созданного с помощью Paywall Builder \{#fetch-paywall-designed-with-paywall-builder\}

Если вы [создали пейвол с помощью Paywall Builder](adapty-paywall-builder), вам не нужно самостоятельно реализовывать его отрисовку в коде приложения. Такой пейвол содержит как то, что должно отображаться, так и то, как именно это должно выглядеть. Тем не менее вам нужно получить его ID через плейсмент, конфигурацию представления и затем показать его в приложении.

Для оптимальной производительности важно получать пейвол и его [конфигурацию представления](react-native-get-pb-paywalls#fetch-the-view-configuration-of-paywall-designed-using-paywall-builder) как можно раньше — чтобы изображения успели загрузиться до того, как пейвол будет показан пользователю.

Для получения пейвола используйте метод `getPaywall`:

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

    const paywall = await adapty.getPaywall(placementId, locale);
  // the requested paywall
} catch (error) {
    // handle the error
}
```
Параметры:

| Параметр          | Наличие | Описание |
|-------------------|--------|-----------|
| **placementId**   | обязательный | Идентификатор нужного [плейсмента](placements). Это значение вы указывали при создании плейсмента в дашборде Adapty. |
| **locale**        | <p>опциональный</p><p>по умолчанию: `en`</p> | <p>Идентификатор [локализации пейвола](add-paywall-locale-in-adapty-paywall-builder). Ожидается языковой код, состоящий из одного или двух подтегов, разделённых символом минус (**-**). Первый подтег — язык, второй — регион.</p><p></p><p>Пример: `en` — английский язык, `pt-br` — бразильский португальский.</p><p>Подробнее о кодах локалей и рекомендациях по их использованию — в разделе [Локализации и коды локалей](localizations-and-locale-codes).</p> |
| **fetchPolicy**   | по умолчанию: `.reloadRevalidatingCacheData` | <p>По умолчанию SDK пытается загрузить данные с сервера и возвращает кешированные данные в случае сбоя. Мы рекомендуем этот вариант, так как он гарантирует, что пользователи всегда получают актуальные данные.</p><p></p><p>Однако если у ваших пользователей нестабильное подключение к интернету, рассмотрите использование `.returnCacheDataElseLoad`, чтобы возвращать кешированные данные при их наличии. В этом случае пользователи могут видеть не самые свежие данные, но загрузка будет быстрее независимо от качества соединения. Кеш обновляется регулярно, поэтому его безопасно использовать в течение сессии для сокращения сетевых запросов.</p><p></p><p>Обратите внимание: кеш сохраняется при перезапуске приложения и очищается только при его переустановке или вручную.</p><p></p><p>Adapty SDK хранит пейволы локально в двух слоях: описанный выше регулярно обновляемый кеш и [резервные пейволы](fallback-paywalls). Для ускоренной загрузки пейволов используется CDN, а также отдельный резервный сервер на случай недоступности CDN. Эта система обеспечивает актуальность пейволов и надёжность даже при слабом интернет-соединении.</p> |
| **loadTimeoutMs** | по умолчанию: 5 сек | <p>Это значение ограничивает тайм-аут метода. Если тайм-аут истёк, будут возвращены кешированные данные или локальный резервный вариант.</p><p>Обратите внимание: в редких случаях метод может завершиться с тайм-аутом немного позже указанного значения `loadTimeout`, так как операция может включать несколько запросов.</p><p>Для Android: можно создать `TimeInterval` с помощью функций-расширений (например, `5.seconds`, где `.seconds` из `import com.adapty.utils.seconds`) или `TimeInterval.seconds(5)`. Чтобы не ограничивать время ожидания, используйте `TimeInterval.INFINITE`.</p> |

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

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

## Получение конфигурации представления пейвола, созданного с помощью Paywall Builder \{#fetch-the-view-configuration-of-paywall-designed-using-paywall-builder\}

:::important
Убедитесь, что в Paywall Builder включён переключатель **Show on device**. Если эта опция выключена, конфигурацию представления получить не удастся.
:::

После получения пейвола проверьте, содержит ли он `ViewConfiguration` — это означает, что он был создан с помощью Paywall Builder. Это определяет, как отображать пейвол. Если `ViewConfiguration` присутствует, обрабатывайте его как пейвол Paywall Builder; если нет — [обрабатывайте как пейвол на Remote Config](present-remote-config-paywalls-react-native).

В React Native SDK вызывайте метод `createPaywallView` напрямую, без предварительного ручного получения конфигурации представления.

:::warning
Результат метода `createPaywallView` можно использовать только один раз. Если нужно использовать его повторно, вызовите `createPaywallView` заново. Повторный вызов без пересоздания может привести к ошибке `AdaptyUIError.viewAlreadyPresented`.
:::

```typescript showLineNumbers
// for the Adapty SDK < 3.14 – import {createPaywallView} from 'react-native-adapty/dist/ui';

if (paywall.hasViewConfiguration) {
  try {
    const view = await createPaywallView(paywall);
  } catch (error) {
    // handle the error
  }
} else {
    //use your custom logic
}
```

Параметры:

| Параметр             | Наличие  | Описание                                                  |
| :------------------- | :------- | :----------------------------------------------------------- |
| **paywall**          | обязательный | Объект `AdaptyPaywall` для получения контроллера нужного пейвола. |
| **customTags**       | опциональный | Словарь пользовательских тегов и их значений. Кастомные теги используются как плейсхолдеры в содержимом пейвола и динамически заменяются конкретными строками для персонализации. Подробнее — в разделе [Кастомные теги в Paywall Builder](custom-tags-in-paywall-builder). |
| **prefetchProducts** | опциональный | Включите для оптимизации времени отображения продуктов на экране. При значении `true` AdaptyUI автоматически загрузит необходимые продукты. По умолчанию: `false`. |

:::note
Если вы используете несколько языков, узнайте, как добавить [локализацию Paywall Builder](add-paywall-locale-in-adapty-paywall-builder) и как правильно использовать коды локалей [здесь](react-native-localizations-and-locale-codes).
:::

Получив представление, [покажите пейвол](react-native-present-paywalls).

## Получение пейвола для аудитории по умолчанию (для ускорения загрузки) \{#get-a-paywall-for-a-default-audience-to-fetch-it-faster\}

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

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

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

Метод `getPaywallForDefaultAudience` имеет ряд существенных недостатков:

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

Если вы готовы принять эти ограничения ради более быстрой загрузки пейволов, используйте метод `getPaywallForDefaultAudience`, как показано ниже. В противном случае используйте `getPaywall`, описанный [выше](#fetch-paywall-designed-with-paywall-builder).
:::

```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). Ожидается языковой код, состоящий из одного или нескольких подтегов, разделённых символом минус (**-**). Первый подтег — язык, второй — регион.</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> |

## Кастомизация ресурсов \{#customize-assets\}

Для кастомизации изображений и видео в пейволе используйте пользовательские ресурсы (custom assets).

Главные изображения и видео имеют предопределённые ID: `hero_image` и `hero_video`. В наборе кастомных ресурсов вы обращаетесь к этим элементам по их ID и настраиваете их поведение.

Для остальных изображений и видео необходимо [задать кастомный ID](custom-media) в дашборде Adapty.

Например, вы можете:

- Показывать разным пользователям разные изображения или видео.
- Показывать локальное превью-изображение, пока загружается основное удалённое.
- Показывать превью-изображение перед воспроизведением видео.

:::important
Для использования этой функции обновите Adapty React Native SDK до версии 3.8.0 или выше.
:::

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

```javascript
const customAssets: Record<string, AdaptyCustomAsset> = {
  'custom_image': { type: 'image', relativeAssetPath: 'custom_image.png' },
  'hero_video': {
    type: 'video',
    fileLocation: {
      ios: { fileName: 'custom_video.mp4' },
      android: { relativeAssetPath: 'videos/custom_video.mp4' }
    }
  }
};

view = await createPaywallView(paywall, { customAssets })

```

:::note
Если ресурс не найден, пейвол вернётся к внешнему виду по умолчанию.
:::