Отображение флоу в режиме Observer в iOS SDK

Если вы используете режим Observer, вы самостоятельно управляете логикой покупок. Но UI пейвола можно делегировать Flow & Paywall Builder.

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

В этом гайде описано, как отображать такой экран и обрабатывать вызов покупки. Если Adapty сам завершает покупки за вас, смотрите Отображение флоу и пейволов.

Прежде чем начать

Вам понадобится:

Adapty iOS SDK v4 или новее: Более ранние версии не поддерживают рендеринг флоу. Чтобы перейти с v3, см. гайд по миграции.
observerMode со значением true: См. гайд по установке iOS SDK.
Первичная интеграция со стором: Настройте Adapty с App Store.
Опубликованный флоу с продуктами: Создайте его в Flow & Paywall Builder и привяжите к нему продукты.
Плейсмент для флоу: Создайте плейсмент и назначьте в него свой флоу.
Флоу, загруженный в приложении: Получите флоу и его конфигурацию до его отображения.

Реализация

Реализуйте объект AdaptyObserverModeResolver:

func observerMode(didInitiatePurchase product: AdaptyPaywallProduct,
                  onStartPurchase: @MainActor @Sendable @escaping () -> Void,
                  onFinishPurchase: @MainActor @Sendable @escaping () -> Void) {
       // use the product object to handle the purchase
       // call onStartPurchase / onFinishPurchase to notify AdaptyUI about the purchase progress
}

func observerModeDidInitiateRestorePurchases(onStartRestore: @MainActor @Sendable @escaping () -> Void,
                                             onFinishRestore: @MainActor @Sendable @escaping () -> Void) {
       // call onStartRestore / onFinishRestore to notify AdaptyUI about the restore progress
}

Создайте объект конфигурации флоу, передав ваш резолвер в качестве параметра observerModeResolver::

do {
    let flowConfiguration = try await AdaptyUI.getFlowConfiguration(
        forFlow: flow,
        observerModeResolver: <AdaptyObserverModeResolver>
    )
} catch {
    // handle the error
}

Параметры запроса:

Параметр	Наличие	Описание
forFlow	обязательный	Объект `AdaptyFlow`, полученный через `Adapty.getFlow(placementId:)`. См. Получение флоу и пейволов.
observerModeResolver	обязательный	Реализованный вами `AdaptyObserverModeResolver`.

Инициализируйте контроллер флоу с помощью AdaptyUI.flowController(with:delegate:):

import AdaptyUI

let visualFlow = try AdaptyUI.flowController(
    with: flowConfiguration,
    delegate: <AdaptyFlowControllerDelegate>
)

Параметры запроса:

Параметр	Наличие	Описание
flowConfiguration	обязателен	Объект `AdaptyUI.FlowConfiguration`, содержащий визуальные параметры флоу. См. Получение флоу и пейволов.
delegate	обязателен	`AdaptyFlowControllerDelegate` для отслеживания событий флоу. См. Обработка событий флоу и пейвола.

Возвращает:

Объект	Описание
AdaptyFlowController	Объект, представляющий запрошенный экран флоу.

Отобразите контроллер:
```
present(visualFlow, animated: true)
```

Warning

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

В SwiftUI получите конфигурацию флоу с помощью резолвера и передайте её в модификатор .flow:

@State var flowPresented = false
@State var flowConfiguration: AdaptyUI.FlowConfiguration?

var body: some View {
    Text("Hello, AdaptyUI!")
        .flow(
            isPresented: $flowPresented,
            flowConfiguration: flowConfiguration,
            didPerformAction: { action in
                switch action {
                    case .close:
                        flowPresented = false
                    default:
                        break
                }
            },
            didFinishPurchase: { product, purchaseResult in /* dismiss, or do nothing to let the flow continue */ },
            didFailPurchase: { product, error in /* handle the error */ },
            didFinishRestore: { profile in /* check access level and dismiss */ },
            didFailRestore: { error in /* handle the error */ },
            didReceiveError: { error in flowPresented = false }
        )
        .task {
            flowConfiguration = try? await AdaptyUI.getFlowConfiguration(
                forFlow: flow,
                observerModeResolver: <AdaptyObserverModeResolver>
            )
        }
}

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

Warning

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

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

Настройте первоначальную интеграцию Adapty с Google Play и с App Store.
Установите и настройте SDK. Убедитесь, что параметр observerMode установлен в значение true. Обратитесь к инструкциям для вашего фреймворка: iOS.
Создайте продукты в дашборде Adapty.
Настройте пейволы, добавьте к ним продукты и кастомизируйте их с помощью Paywall Builder в дашборде Adapty.
Создайте плейсменты и привяжите к ним пейволы в дашборде Adapty.
Получите пейволы Paywall Builder и их конфигурацию в коде мобильного приложения.

Реализуйте объект AdaptyObserverModeResolver:

func observerMode(didInitiatePurchase product: AdaptyPaywallProduct,
                  onStartPurchase: @MainActor @Sendable @escaping () -> Void,
                  onFinishPurchase: @MainActor @Sendable @escaping () -> Void) {
       // use the product object to handle the purchase
       // use the onStartPurchase and onFinishPurchase callbacks to notify AdaptyUI about the process of the purchase
}

func observerModeDidInitiateRestorePurchases(onStartRestore: @MainActor @Sendable @escaping () -> Void,
                                             onFinishRestore: @MainActor @Sendable @escaping () -> Void) {
       // use the onStartRestore and onFinishRestore callbacks to notify AdaptyUI about the process of the restore
}

Событие observerMode(didInitiatePurchase:onStartPurchase:onFinishPurchase:) уведомит вас о том, что пользователь инициировал покупку. В ответ на этот колбэк вы можете запустить собственный флоу покупки.

Событие observerModeDidInitiateRestorePurchases(onStartRestore:onFinishRestore:) уведомит вас о том, что пользователь инициировал восстановление покупок. В ответ на этот колбэк вы можете запустить собственный флоу восстановления.

Также не забудьте вызывать следующие колбэки, чтобы уведомлять AdaptyUI о процессе покупки или восстановления. Это необходимо для корректного поведения пейвола, например для отображения индикатора загрузки:

Callback	Description
onStartPurchase()	Коллбэк должен вызываться, чтобы уведомить AdaptyUI о начале покупки.
onFinishPurchase()	Коллбэк должен вызываться, чтобы уведомить AdaptyUI о завершении покупки.
onStartRestore()	Коллбэк должен вызываться, чтобы уведомить AdaptyUI о начале восстановления.
onFinishRestore()	Коллбэк должен вызываться, чтобы уведомить AdaptyUI о завершении восстановления.

Создайте объект конфигурации пейвола:

do {
    let paywallConfiguration = try AdaptyUI.getPaywallConfiguration(
     forPaywall: <paywall object>, 
     observerModeResolver: <AdaptyObserverModeResolver>
     )
} catch {
    // handle the error
}

Параметры запроса:

Параметр	Наличие	Описание
Paywall	обязательный	Объект `AdaptyPaywall` для получения контроллера нужного пейвола.
ObserverModeResolver	обязательный	Объект `AdaptyObserverModeResolver`, реализованный на предыдущем шаге.

Инициализируйте визуальный пейвол, который хотите отобразить, с помощью метода .paywallController(for:products:viewConfiguration:delegate:):
```
import AdaptyUI

let visualPaywall = AdaptyUI.paywallController(
    with: <paywall configuration object>,
    delegate: <AdaptyPaywallControllerDelegate>
)
```

Параметры запроса:

Параметр	Наличие	Описание
Paywall Configuration	обязательный	Объект `AdaptyUI.PaywallConfiguration`, содержащий визуальные детали пейвола. Используйте метод `AdaptyUI.getPaywallConfiguration(forPaywall:locale:)`. Подробнее см. в разделе Получение пейволов Paywall Builder и их конфигурации.
Delegate	обязательный	Объект `AdaptyPaywallControllerDelegate` для прослушивания событий пейвола. Подробнее см. в разделе Обработка событий пейвола.

Возвращает:

Объект	Описание
AdaptyPaywallController	Объект, представляющий запрошенный экран пейвола

После успешного создания объекта его можно отобразить следующим образом:

present(visualPaywall, animated: true)

Warning

Чтобы отобразить визуальный пейвол на экране устройства, используйте модификатор .paywall в SwiftUI:

@State var paywallPresented = false

var body: some View {
	Text("Hello, AdaptyUI!")
			.paywall(
          isPresented: $paywallPresented,
          paywallConfiguration: <paywall configuration object>,
          didPerformAction: { action in
              switch action {
                  case .close:
                      paywallPresented = false
                  default:
                      // Handle other actions
                      break
              }
          },
          didFinishRestore: { profile in /* check access level and dismiss */  },
          didFailRestore: { error in /* handle the error */ },
          didFailRendering: { error in paywallPresented = false }
      )
}

Параметры запроса:

Параметр	Наличие	Описание
Paywall Configuration	обязательный	Объект `AdaptyUI.PaywallConfiguration`, содержащий визуальные настройки пейвола. Используйте метод `AdaptyUI.getPaywallConfiguration(forPaywall:locale:)`. Подробнее см. в разделе Получение пейволов Paywall Builder и их конфигурации.
Products	необязательный	Передайте массив объектов `AdaptyPaywallProduct`, чтобы оптимизировать время отображения продуктов на экране. Если передать `nil`, AdaptyUI автоматически загрузит необходимые продукты.
TagResolver	необязательный	Задайте словарь пользовательских тегов и их значений. Пользовательские теги служат плейсхолдерами в контенте пейвола и динамически заменяются конкретными строками для персонализации содержимого. Подробнее см. в разделе «Пользовательские теги в Paywall Builder».
ObserverModeResolver	необязательный	Объект `AdaptyObserverModeResolver`, реализованный на предыдущем шаге.

Параметры замыкания:

Параметр замыкания	Описание
didFinishRestore	Если Adapty.restorePurchases() выполнится успешно, будет вызван этот колбэк.
didFailRestore	Если Adapty.restorePurchases() завершится с ошибкой, будет вызван этот колбэк.
didFailRendering	Если в процессе отрисовки интерфейса произойдёт ошибка, будет вызван этот колбэк.

Смотрите раздел iOS — Обработка событий для ознакомления с другими параметрами замыканий.

Warning

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

Before you start presenting paywalls (Click to Expand)

Настройте начальную интеграцию Adapty с Google Play и с App Store.
Установите и настройте Adapty SDK. Убедитесь, что параметр observerMode установлен в значение true. Воспользуйтесь нашими инструкциями для конкретных фреймворков: iOS, React Native, Flutter и Unity.
Создайте продукты в дашборде Adapty.
Настройте пейволы, добавьте к ним продукты и кастомизируйте их с помощью Paywall Builder в дашборде Adapty.
Создайте плейсменты и привяжите к ним пейволы в дашборде Adapty.
Получите пейволы Paywall Builder и их конфигурацию в коде вашего мобильного приложения.

Реализуйте объект AdaptyObserverModeDelegate:

func paywallController(_ controller: AdaptyPaywallController,
                       didInitiatePurchase product: AdaptyPaywallProduct,
                       onStartPurchase: @escaping () -> Void,
                       onFinishPurchase: @escaping () -> Void) {
       // use the product object to handle the purchase
       // use the onStartPurchase and onFinishPurchase callbacks to notify AdaptyUI about the process of the purchase
}

paywallController(_:didInitiatePurchase:onStartPurchase:onFinishPurchase:) уведомит вас о том, что пользователь инициировал покупку. В ответ на это событие можно запустить собственный флоу покупки.

Также не забудьте вызвать следующие колбэки, чтобы уведомить AdaptyUI о ходе покупки. Это необходимо для корректного поведения пейвола, например для отображения загрузчика:

Callback	Description
onStartPurchase	Коллбэк должен вызываться, чтобы уведомить AdaptyUI о начале покупки.
onFinishPurchase	Коллбэк должен вызываться, чтобы уведомить AdaptyUI о завершении покупки.

Инициализируйте визуальный пейвол для отображения с помощью метода .paywallController(for:products:viewConfiguration:delegate:observerModeDelegate:):

import AdaptyUI

let visualPaywall = AdaptyUI.paywallController(
    for: <paywall object>,
    products: <paywall products array>,
    viewConfiguration: <LocalizedViewConfiguration>,
    delegate: <AdaptyPaywallControllerDelegate>
    observerModeDelegate: <AdaptyObserverModeDelegate>
)

Параметры запроса:

Параметр	Обязательность	Описание
Paywall	обязательный	Объект `AdaptyPaywall` для получения контроллера нужного пейвола.
Products	необязательный	Передайте массив объектов `AdaptyPaywallProduct`, чтобы оптимизировать время отображения продуктов на экране. Если передать `nil`, AdaptyUI автоматически загрузит необходимые продукты.
ViewConfiguration	обязательный	Объект `AdaptyUI.LocalizedViewConfiguration`, содержащий визуальные настройки пейвола. Используйте метод `AdaptyUI.getViewConfiguration(paywall:locale:)`. Подробнее см. в разделе Получение пейволов Paywall Builder и их конфигурации.
Delegate	обязательный	Объект `AdaptyPaywallControllerDelegate` для обработки событий пейвола. Подробнее см. в разделе Обработка событий пейвола.
ObserverModeDelegate	обязательный	Объект `AdaptyObserverModeDelegate`, реализованный на предыдущем шаге.
TagResolver	необязательный	Задайте словарь пользовательских тегов и их значений. Пользовательские теги служат плейсхолдерами в содержимом пейвола и динамически заменяются конкретными строками для персонализации контента. Подробнее см. в разделе Custom tags in Paywall Builder.

Возвращает:

Объект	Описание
AdaptyPaywallController	Объект, представляющий запрошенный экран пейвола

После успешного создания объекта его можно отобразить следующим образом:

present(visualPaywall, animated: true)

Warning

Не забудьте привязать пейволы к транзакциям покупок. Иначе Adapty не сможет определить источник пейвола для покупки.

Чтобы отобразить визуальный пейвол на экране устройства, используйте модификатор .paywall в SwiftUI:

@State var paywallPresented = false

var body: some View {
	Text("Hello, AdaptyUI!")
			.paywall(
          isPresented: $paywallPresented,
          paywall: <paywall object>,
          configuration: <LocalizedViewConfiguration>,
          didPerformAction: { action in
              switch action {
                  case .close:
                      paywallPresented = false
                  default:
                      // Handle other actions
                      break
              }
          },
          didFinishRestore: { profile in /* check access level and dismiss */  },
          didFailRestore: { error in /* handle the error */ },
          didFailRendering: { error in paywallPresented = false },
          observerModeDidInitiatePurchase: { product, onStartPurchase, onFinishPurchase in
              // use the product object to handle the purchase
              // use the onStartPurchase and onFinishPurchase callbacks to notify AdaptyUI about the process of the purchase
          }, 
      )
}

The input is empty — there is no MDX content to translate. Please provide the fragment you want translated.

Параметр	Наличие	Описание
Paywall	обязательный	Объект `AdaptyPaywall` для получения контроллера нужного пейвола.
Product	необязательный	Передайте массив объектов `AdaptyPaywallProduct`, чтобы оптимизировать время отображения продуктов на экране. Если передать `nil`, AdaptyUI автоматически загрузит необходимые продукты.
Configuration	обязательный	Объект `AdaptyUI.LocalizedViewConfiguration`, содержащий визуальные параметры пейвола. Используйте метод `AdaptyUI.getViewConfiguration(paywall:locale:)`. Подробнее см. в разделе Получение пейволов Paywall Builder и их конфигурации.
TagResolver	необязательный	Задайте словарь пользовательских тегов и их значений. Пользовательские теги служат плейсхолдерами в контенте пейвола и динамически заменяются конкретными строками для персонализации содержимого. Подробнее см. в разделе «Пользовательские теги в Paywall Builder».

Closure parameters:

Параметр замыкания	Описание
didFinishRestore	Вызывается, если Adapty.restorePurchases() завершается успешно.
didFailRestore	Вызывается, если Adapty.restorePurchases() завершается с ошибкой.
didFailRendering	Вызывается, если в процессе отрисовки интерфейса возникает ошибка.
observerModeDidInitiatePurchase	Вызывается, когда пользователь инициирует покупку.

Обратитесь к разделу iOS — Обработка событий для получения информации о других параметрах замыкания.

Warning