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

Обратите внимание: этот раздел посвящён пейволам, настроенным с помощью Paywall Builder. Если вы реализуете пейволы вручную, обратитесь к разделу Получение пейволов и продуктов для пейволов на Remote Config в мобильном приложении.

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

1. Создайте продукты в дашборде Adapty.
2. Создайте пейвол и добавьте в него продукты в дашборде Adapty.
3. Создайте плейсменты и добавьте в них пейвол в дашборде Adapty.
4. Установите Adapty SDK в мобильное приложение.

Получение пейвола, созданного с помощью Paywall Builder

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

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

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

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	обязательный	Идентификатор нужного плейсмента. Это значение вы указывали при создании плейсмента в дашборде Adapty.
locale	опциональный по умолчанию: en	Идентификатор локализации пейвола. Ожидается языковой код, состоящий из одного или двух подтегов, разделённых символом минус (-). Первый подтег — язык, второй — регион. Пример: en — английский язык, pt-br — бразильский португальский. Подробнее о кодах локалей и рекомендациях по их использованию — в разделе Локализации и коды локалей.
fetchPolicy	по умолчанию: .reloadRevalidatingCacheData	По умолчанию SDK пытается загрузить данные с сервера и возвращает кешированные данные в случае сбоя. Мы рекомендуем этот вариант, так как он гарантирует, что пользователи всегда получают актуальные данные. Однако если у ваших пользователей нестабильное подключение к интернету, рассмотрите использование .returnCacheDataElseLoad, чтобы возвращать кешированные данные при их наличии. В этом случае пользователи могут видеть не самые свежие данные, но загрузка будет быстрее независимо от качества соединения. Кеш обновляется регулярно, поэтому его безопасно использовать в течение сессии для сокращения сетевых запросов. Обратите внимание: кеш сохраняется при перезапуске приложения и очищается только при его переустановке или вручную. Adapty SDK хранит пейволы локально в двух слоях: описанный выше регулярно обновляемый кеш и резервные пейволы. Для ускоренной загрузки пейволов используется CDN, а также отдельный резервный сервер на случай недоступности CDN. Эта система обеспечивает актуальность пейволов и надёжность даже при слабом интернет-соединении.
loadTimeoutMs	по умолчанию: 5 сек	Это значение ограничивает тайм-аут метода. Если тайм-аут истёк, будут возвращены кешированные данные или локальный резервный вариант. Обратите внимание: в редких случаях метод может завершиться с тайм-аутом немного позже указанного значения loadTimeout, так как операция может включать несколько запросов. Для Android: можно создать TimeInterval с помощью функций-расширений (например, 5.seconds, где .seconds из import com.adapty.utils.seconds) или TimeInterval.seconds(5). Чтобы не ограничивать время ожидания, используйте TimeInterval.INFINITE.

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

Параметр	Описание
Paywall	Объект AdaptyPaywall со списком ID продуктов, идентификатором пейвола, Remote Config и рядом других свойств.

Получение конфигурации представления пейвола, созданного с помощью Paywall Builder

После получения пейвола проверьте, содержит ли он ViewConfiguration — это означает, что он был создан с помощью Paywall Builder. Это определяет, как отображать пейвол. Если ViewConfiguration присутствует, обрабатывайте его как пейвол Paywall Builder; если нет — обрабатывайте как пейвол на Remote Config.

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

// 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.
prefetchProducts	опциональный	Включите для оптимизации времени отображения продуктов на экране. При значении true AdaptyUI автоматически загрузит необходимые продукты. По умолчанию: false.

Получив представление, покажите пейвол.

Получение пейвола для аудитории по умолчанию (для ускорения загрузки)

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

Для этого можно использовать метод getPaywallForDefaultAudience, который получает пейвол указанного плейсмента для аудитории All Users. Однако важно понимать, что рекомендуемый подход — использовать метод getPaywall, как описано в разделе Получение пейвола выше.

try {
    const id = 'YOUR_PLACEMENT_ID';
    const locale = 'en';

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

Параметр	Наличие	Описание
placementId	обязательный	Идентификатор плейсмента. Это значение вы указывали при создании плейсмента в дашборде Adapty.
locale	опциональный по умолчанию: en	Идентификатор локализации пейвола. Ожидается языковой код, состоящий из одного или нескольких подтегов, разделённых символом минус (-). Первый подтег — язык, второй — регион. Пример: en — английский язык, pt-br — бразильский португальский. Подробнее о кодах локалей и рекомендациях по их использованию — в разделе Локализации и коды локалей.
fetchPolicy	по умолчанию: .reloadRevalidatingCacheData	По умолчанию SDK пытается загрузить данные с сервера и возвращает кешированные данные в случае сбоя. Мы рекомендуем этот вариант, так как он гарантирует, что пользователи всегда получают актуальные данные. Однако если у ваших пользователей нестабильное подключение к интернету, рассмотрите использование .returnCacheDataElseLoad, чтобы возвращать кешированные данные при их наличии. В этом случае пользователи могут видеть не самые свежие данные, но загрузка будет быстрее независимо от качества соединения. Кеш обновляется регулярно, поэтому его безопасно использовать в течение сессии для сокращения сетевых запросов. Обратите внимание: кеш сохраняется при перезапуске приложения и очищается только при его переустановке или вручную.

Кастомизация ресурсов

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

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

Для остальных изображений и видео необходимо задать кастомный ID в дашборде Adapty.

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

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

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

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 })