Отображение флоу и пейволов — Capacitor

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

Перед началом убедитесь, что вы:

1. Создали флоу или пейвол.
2. Добавили его в плейсмент.
3. Получили флоу и подготовили отображение.

Чтобы отобразить флоу или пейвол как отдельный экран, используйте метод view.present() на view, созданном методом createFlowView. Каждый view можно использовать только один раз. Если нужно показать флоу повторно, вызовите createFlowView ещё раз, чтобы создать новый экземпляр view.

const view = await createFlowView(flow);

// Optional: handle flow events (close, purchase, restore, etc)
// await view.setEventHandlers({ ... });

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

Настройка стиля отображения на iOS

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

try {
  await view.present({ iosPresentationStyle: 'page_sheet' });
} catch (error) {
  // handle the error
}

Использование таймера, заданного разработчиком

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

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

const view = await createFlowView(flow, { customTimers });

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

Показ диалогового окна

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

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 flow
    await view.dismiss();
  }
  // If primary - do nothing, user stays
} catch (error) {
  // handle error
}

Замена одной подписки на другую

Когда пользователь пытается купить новую подписку при наличии активной на Android, вы можете управлять тем, как должна обрабатываться новая покупка, передав параметры обновления подписки при создании представления флоу. Чтобы заменить текущую подписку на новую, используйте productPurchaseParams в createFlowView с параметрами oldSubVendorProductId и prorationMode.

const productPurchaseParams = flow.paywalls
  .flatMap((paywall) => paywall.productIdentifiers)
  .map((productId) => {
    const params: MakePurchaseParamsInput = {};
    if (Capacitor.getPlatform() === 'android') {
      params.android = {
        subscriptionUpdateParams: {
          oldSubVendorProductId: 'PRODUCT_ID_OF_THE_CURRENT_ACTIVE_SUBSCRIPTION',
          prorationMode: 'with_time_proration',
        },
      };
    }
    return { productId, params };
  });

const view = await createFlowView(flow, { productPurchaseParams });

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

Чтобы отобразить пейвол, используйте метод view.present() на объекте view, созданном методом createPaywallView. Каждый view можно использовать только один раз. Если нужно показать пейвол повторно, вызовите createPaywallView ещё раз, чтобы создать новый экземпляр view.

const view = await createPaywallView(paywall);

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

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

Использование таймера, заданного разработчиком

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

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

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

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

Показ диалогов

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

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

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

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