---
title: "Отображение пейволов Paywall Builder в Capacitor SDK"
description: "Отображение пейволов в Capacitor-приложениях с помощью Adapty."
---

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

:::warning
Этот гайд предназначен только для пейволов **Paywall Builder**. Процесс отображения пейволов Remote Config отличается. Для отображения **пейволов Remote Config** см. [Отображение пейвола, созданного с помощью Remote Config](present-remote-config-paywalls).
:::

Чтобы показать пейвол, вызовите метод `view.present()` на объекте `view`, созданном методом [`createPaywallView`](capacitor-get-pb-paywalls#fetch-the-view-configuration-of-paywall-designed-using-paywall-builder). Каждый объект `view` можно использовать только один раз. Если нужно показать пейвол повторно, снова вызовите `createPaywallView`, чтобы создать новый экземпляр `view`.

:::warning

Повторное использование одного и того же объекта `view` без его пересоздания может привести к ошибке.
:::

```typescript showLineNumbers

const view = await createPaywallView(paywall);

view.setEventHandlers({
  onUrlPress(url) {
    window.open(url, '_blank');
    return false; 
  },
});

try {
  await view.present();
} catch (error) {
  // handle the error
}
```

## Таймер, заданный разработчиком \{#use-developer-defined-timer\}

Чтобы использовать таймеры, заданные разработчиком, в своём мобильном приложении, укажите `timerId` — в данном примере `CUSTOM_TIMER_NY`, **Timer ID** таймера, заданного разработчиком в дашборде Adapty. Это позволяет приложению динамически обновлять таймер с корректным значением — например, `13д 09ч 03м 34с` (рассчитывается как время окончания таймера, например Новый год, минус текущее время).

```typescript showLineNumbers
const customTimers = { 'CUSTOM_TIMER_NY': new Date(2025, 0, 1) };

const view = await createPaywallView(paywall, { customTimers });
```

В этом примере `CUSTOM_TIMER_NY` — это **Timer ID** таймера, заданного разработчиком в дашборде Adapty. Таймер обеспечивает динамическое обновление значения в приложении — например, `13д 09ч 03м 34с` (рассчитывается как время окончания таймера, например Новый год, минус текущее время).

## Диалоговое окно \{#show-dialog\}

Используйте этот метод вместо стандартных диалоговых окон, когда на Android отображается пейвол. На Android обычные алерты появляются позади пейвола и становятся невидимы для пользователя. Данный метод гарантирует корректное отображение диалога поверх пейвола на всех платформах.

```typescript showLineNumbers title="Capacitor"
try {
  const action = await view.showDialog({
    title: 'Close paywall?',
    content: 'You will lose access to exclusive offers.',
    primaryActionTitle: 'Stay',
    secondaryActionTitle: 'Close',
  });
  
  if (action === 'secondary') {
    // User confirmed - close the paywall
    await view.dismiss();
  }
  // If primary - do nothing, user stays
} catch (error) {
  // handle error
}
```

## Настройка стиля отображения на iOS \{#configure-ios-presentation-style\}

Настройте способ отображения пейвола на iOS, передав параметр `iosPresentationStyle` в метод `present()`. Параметр принимает значения `'full_screen'` (по умолчанию) или `'page_sheet'`.

```typescript showLineNumbers
await view.present({ iosPresentationStyle: 'page_sheet' });
```