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

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

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

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

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

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

Чтобы получить пейвол, используйте метод getPaywall:

try {
  const paywall = await adapty.getPaywall({
    placementId: 'YOUR_PLACEMENT_ID',
    locale: 'en',
  });
  // the requested paywall
} catch (error) {
  // handle the error
}

Параметры:

Параметр	Наличие	Описание
placementId	обязательный	Идентификатор нужного плейсмента. Это значение вы указываете при создании плейсмента в дашборде Adapty.
locale	необязательный по умолчанию: en	Идентификатор локализации пейвола. Ожидается языковой код, состоящий из одного или двух подтегов, разделённых символом «минус» (-). Первый подтег обозначает язык, второй — регион. Пример: en означает английский, pt-br — бразильский португальский. Подробнее о кодах локалей и рекомендациях по их использованию см. в разделе Локализации и коды локалей.
params	необязательный	Дополнительные параметры для получения пейвола.
Не прописывайте product ID в коде. Единственный ID, который нужно хардкодить — это ID плейсмента. Пейволы настраиваются удалённо, поэтому количество продуктов и доступных предложений может меняться в любой момент. Приложение должно обрабатывать эти изменения динамически: если сегодня пейвол возвращает два продукта, а завтра три — отображайте все без изменений в коде.

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

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

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

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

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

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 paywall = await adapty.getPaywallForDefaultAudience({
    placementId: 'YOUR_PLACEMENT_ID',
    locale: 'en',
  });
  // the requested paywall
} catch (error) {
  // handle the error
}

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

Настройка ассетов

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

У hero-изображений и видео есть предопределённые 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 });