Показ пейволов Paywall Builder в режиме Observer в Android SDK

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

Этот раздел относится только к режиму Observer. Если вы не работаете в режиме Observer, обратитесь к разделу Android — показ флоу и пейволов.

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

Настройте начальную интеграцию Adapty с Google Play. 2. Установите и настройте SDK. Убедитесь, что параметр observerMode имеет значение true. Следуйте нашим инструкциям для конкретного фреймворка для Android. 3. Создайте продукты в дашборде Adapty. 4. Настройте флоу или пейволы в билдерах и привяжите к ним продукты. 5. Создайте плейсменты и назначьте им флоу или пейволы в дашборде Adapty. 6. Загрузите флоу и их конфигурацию в коде вашего мобильного приложения.

Реализуйте AdaptyUiObserverModeHandler.

Событие onPurchaseInitiated сообщает о том, что пользователь инициировал покупку. В ответ на этот коллбэк вы можете запустить собственный флоу покупки:

val observerModeHandler =
 AdaptyUiObserverModeHandler { product, flow, flowView, onStartPurchase, onFinishPurchase ->
    onStartPurchase()
    yourBillingClient.makePurchase(
        product,
        onSuccess = { purchase ->
            onFinishPurchase()
            //handle success
        },
        onError = {
            onFinishPurchase()
            //handle error
        },
        onCancel = {
            onFinishPurchase()
            //handle cancel
        }
    )
}

AdaptyUiObserverModeHandler observerModeHandler = (product, flow, flowView, onStartPurchase, onFinishPurchase) -> {
    onStartPurchase.invoke();
    yourBillingClient.makePurchase(
        product,
        purchase -> {
            onFinishPurchase.invoke();
            //handle success
        },
        error -> {
            onFinishPurchase.invoke();
            //handle error
        },
        () -> { //cancellation
            onFinishPurchase.invoke();
            //handle cancel
        }
    );
};

Чтобы обрабатывать восстановление покупок в режиме Observer, переопределите getRestoreHandler(). По умолчанию метод возвращает null, что означает использование встроенного флоу Adapty.restorePurchases(). Чтобы задать собственную реализацию восстановления:

val observerModeHandler = object : AdaptyUiObserverModeHandler {
    // onPurchaseInitiated implementation (see above)

    override fun getRestoreHandler() =
        AdaptyUiObserverModeHandler.RestoreHandler { onStartRestore, onFinishRestore ->
            onStartRestore()
            yourBillingClient.restorePurchases(
                onSuccess = { restoredPurchases ->
                    onFinishRestore()
                    //handle successful restore
                },
                onError = {
                    onFinishRestore()
                    //handle error
                }
            )
        }
}

AdaptyUiObserverModeHandler observerModeHandler = new AdaptyUiObserverModeHandler() {
    // onPurchaseInitiated implementation (see above)

    @Override
    public RestoreHandler getRestoreHandler() {
        return (onStartRestore, onFinishRestore) -> {
            onStartRestore.invoke();
            yourBillingClient.restorePurchases(
                restoredPurchases -> {
                    onFinishRestore.invoke();
                    //handle successful restore
                },
                error -> {
                    onFinishRestore.invoke();
                    //handle error
                }
            );
        };
    }
};

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

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

Чтобы отобразить визуальное флоу на экране устройства, его необходимо сначала настроить.

Для этого вызовите метод AdaptyUI.getFlowView() или создайте AdaptyFlowView напрямую:

   val flowView = AdaptyUI.getFlowView(
       activity,
       flowConfiguration,
       products,
       eventListener,
       insets,
       customAssets,
       tagResolver,
       timerResolver,
       observerModeHandler, 
   )

   val flowView =
        AdaptyFlowView(activity) // or retrieve it from xml
   ...
   with(flowView) {
       showFlow(
           flowConfiguration,
           products,
					 eventListener,
           insets,
           customAssets,
           tagResolver,
           timerResolver,
					 observerModeHandler,
       )
   }

AdaptyFlowView flowView = AdaptyUI.getFlowView(
        activity,
        flowConfiguration,
        products,
        eventListener,
        insets,
        customAssets,
        tagResolver,
        timerResolver,
        observerModeHandler
);

AdaptyFlowView flowView =
  new AdaptyFlowView(activity); //add to the view hierarchy if needed, or you receive it from xml
...
flowView.showFlow(flowConfiguration, products, eventListener, insets, customAssets, tagResolver, timerResolver, observerModeHandler);

<com.adapty.ui.AdaptyFlowView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

После успешного создания представления вы можете добавить его в иерархию представлений и отобразить.

Используйте следующую composable-функцию:

AdaptyFlowScreen(
    flowConfiguration,
    products,
    eventListener,
    insets,
    customAssets,
    tagResolver,
    timerResolver,
    observerModeHandler,
)

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

Параметр	Обязательность	Описание
flowConfiguration	обязательный	Передайте объект `AdaptyUI.FlowConfiguration`, содержащий визуальные данные флоу. Используйте метод `AdaptyUI.getFlowConfiguration(flow)` для его загрузки. Подробнее см. в разделе Получение конфигурации представления.
products	необязательный	Передайте массив `AdaptyPaywallProduct`, чтобы оптимизировать время отображения продуктов на экране. Если передать `null`, AdaptyUI автоматически загрузит нужные продукты.
eventListener	необязательный	Передайте `AdaptyFlowEventListener` для отслеживания событий флоу. Рекомендуется использовать `AdaptyFlowDefaultEventListener` для упрощения работы. Подробнее см. в разделе Обработка событий флоу и пейвола.
insets	необязательный	Отступы вокруг флоу, которые не дают кликабельным элементам скрыться за системными панелями. По умолчанию: `Unspecified` — Adapty настраивает отступы автоматически. См. Изменение отступов флоу.
customAssets	необязательный	Передайте объект `AdaptyCustomAssets`, чтобы заменить изображения и видео во флоу или пейволе во время выполнения. Подробнее см. в разделе Настройка ресурсов.
tagResolver	необязательный	Используйте `AdaptyUiTagResolver` для обработки пользовательских тегов в тексте флоу. Этот резолвер принимает тег и возвращает соответствующую строку. Подробнее см. в разделе «Пользовательские теги в Paywall Builder».
observerModeHandler	обязательный для режима Observer	Реализованный вами на предыдущем шаге объект `AdaptyUiObserverModeHandler`.

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

Before you start presenting paywalls (Click to Expand)

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

Реализуйте AdaptyUiObserverModeHandler.

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

val observerModeHandler =
 AdaptyUiObserverModeHandler { product, paywall, paywallView, onStartPurchase, onFinishPurchase ->
    onStartPurchase()
    yourBillingClient.makePurchase(
        product,
        onSuccess = { purchase ->
            onFinishPurchase()
            //handle success
        },
        onError = {
            onFinishPurchase()
            //handle error
        },
        onCancel = {
            onFinishPurchase()
            //handle cancel
        }
    )
}

AdaptyUiObserverModeHandler observerModeHandler = (product, paywall, paywallView, onStartPurchase, onFinishPurchase) -> {
    onStartPurchase.invoke();
    yourBillingClient.makePurchase(
        product,
        purchase -> {
            onFinishPurchase.invoke();
            //handle success
        },
        error -> {
            onFinishPurchase.invoke();
            //handle error
        },
        () -> { //cancellation
            onFinishPurchase.invoke();
            //handle cancel
        }
    );
};

Чтобы обрабатывать восстановление покупок в режиме Observer, переопределите getRestoreHandler(). По умолчанию он возвращает null, что означает использование встроенного флоу Adapty.restorePurchases(). Чтобы предоставить собственную реализацию восстановления:

val observerModeHandler = object : AdaptyUiObserverModeHandler {
    // onPurchaseInitiated implementation (see above)

    override fun getRestoreHandler() =
        AdaptyUiObserverModeHandler.RestoreHandler { onStartRestore, onFinishRestore ->
            onStartRestore()
            yourBillingClient.restorePurchases(
                onSuccess = { restoredPurchases ->
                    onFinishRestore()
                    //handle successful restore
                },
                onError = {
                    onFinishRestore()
                    //handle error
                }
            )
        }
}

AdaptyUiObserverModeHandler observerModeHandler = new AdaptyUiObserverModeHandler() {
    // onPurchaseInitiated implementation (see above)

    @Override
    public RestoreHandler getRestoreHandler() {
        return (onStartRestore, onFinishRestore) -> {
            onStartRestore.invoke();
            yourBillingClient.restorePurchases(
                restoredPurchases -> {
                    onFinishRestore.invoke();
                    //handle successful restore
                },
                error -> {
                    onFinishRestore.invoke();
                    //handle error
                }
            );
        };
    }
};

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

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

Чтобы отобразить визуальный пейвол на экране устройства, его нужно сначала настроить.

Для этого вызовите метод AdaptyUI.getPaywallView() или создайте AdaptyPaywallView напрямую:

   val paywallView = AdaptyUI.getPaywallView(
       activity,
       viewConfiguration,
       products,
       eventListener,
       personalizedOfferResolver,
       tagResolver,
       timerResolver,
       observerModeHandler, 
   )

   val paywallView =
        AdaptyPaywallView(activity) // or retrieve it from xml
   ...
   with(paywallView) {
       showPaywall(
           viewConfiguration,
           products,
					 eventListener,
           personalizedOfferResolver,
           tagResolver,
           timerResolver,
					 observerModeHandler,
       )
   }

AdaptyPaywallView paywallView = AdaptyUI.getPaywallView(
        activity,
        viewConfiguration,
        products,
        eventListener,
        personalizedOfferResolver,
        tagResolver,
        timerResolver,
        observerModeHandler
);

AdaptyPaywallView paywallView =
  new AdaptyPaywallView(activity); //add to the view hierarchy if needed, or you receive it from xml
...
paywallView.showPaywall(viewConfiguration, products, eventListener, personalizedOfferResolver, tagResolver, timerResolver, observerModeHandler);

<com.adapty.ui.AdaptyPaywallView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

После успешного создания представления вы можете добавить его в иерархию представлений и отобразить.

Используйте следующую composable-функцию:

AdaptyPaywallScreen(
    viewConfiguration,
    products,
    eventListener,
    personalizedOfferResolver,
    tagResolver,
    timerResolver,
)

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

Параметр	Обязательность	Описание
Products	опционально	Передайте массив `AdaptyPaywallProduct`, чтобы оптимизировать время отображения продуктов на экране. Если передать `null`, AdaptyUI автоматически загрузит необходимые продукты.
ViewConfiguration	обязательно	Передайте объект `AdaptyViewConfiguration`, содержащий визуальные настройки пейвола. Используйте метод `Adapty.getViewConfiguration(paywall)` для его загрузки. Подробнее см. в разделе Получение визуальной конфигурации пейвола.
EventListener	опционально	Передайте `AdaptyUiEventListener` для отслеживания событий пейвола. Для удобства рекомендуется наследоваться от `AdaptyUiDefaultEventListener`. Подробнее см. в разделе Обработка событий пейвола.
PersonalizedOfferResolver	опционально	Чтобы указать персонализированное ценообразование (подробнее), реализуйте `AdaptyUiPersonalizedOfferResolver` и передайте собственную логику, которая возвращает `true` для `AdaptyPaywallProduct`, если цена продукта персонализирована, и `false` в остальных случаях.
TagResolver	опционально	Используйте `AdaptyUiTagResolver` для обработки пользовательских тегов в тексте пейвола. Этот резолвер принимает тег и возвращает соответствующую строку. Подробнее см. в разделе «Пользовательские теги в Paywall Builder».
ObserverModeHandler	обязательно для режима Observer	Реализованный вами на предыдущем шаге `AdaptyUiObserverModeHandler`.
variationId	обязательно	Строковый идентификатор варианта. Его можно получить через свойство `variationId` объекта `AdaptyPaywall`.
transaction	обязательно	Для iOS, StoreKit 1: объект `SKPaymentTransaction`. Для iOS, StoreKit 2: объект Transaction. Для Android: строковый идентификатор (`purchase.getOrderId()`) покупки, где покупка является экземпляром класса Purchase из библиотеки биллинга.

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

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

Реализуйте AdaptyUiObserverModeHandler. Колбэк AdaptyUiObserverModeHandler (onPurchaseInitiated) срабатывает, когда пользователь инициирует покупку. Вы можете запустить собственный процесс покупки в ответ на этот колбэк:

val observerModeHandler =
AdaptyUiObserverModeHandler { product, paywall, paywallView, onStartPurchase, onFinishPurchase ->
    onStartPurchase()
    yourBillingClient.makePurchase(
        product,
        onSuccess = { purchase ->
            onFinishPurchase()
            //handle success
        },
        onError = {
            onFinishPurchase()
            //handle error
        },
        onCancel = {
            onFinishPurchase()
            //handle cancel
        }
    )
}

AdaptyUiObserverModeHandler observerModeHandler = (product, paywall, paywallView, onStartPurchase, onFinishPurchase) -> {
    onStartPurchase.invoke();
    yourBillingClient.makePurchase(
        product,
        purchase -> {
            onFinishPurchase.invoke();
            //handle success
        },
        error -> {
            onFinishPurchase.invoke();
            //handle error
        },
        () -> { //cancellation
            onFinishPurchase.invoke();
            //handle cancel
        }
    );
};

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

Callback в Kotlin	Callback в Java	Описание
onStartPurchase()	onStartPurchase.invoke()	Callback нужно вызвать, чтобы уведомить AdaptyUI о том, что покупка начата.
onFinishPurchase()	onFinishPurchase.invoke()	Callback нужно вызвать, чтобы уведомить AdaptyUI о том, что покупка завершена успешно, завершена с ошибкой или отменена.

Чтобы отобразить визуальный пейвол, его необходимо сначала инициализировать. Для этого вызовите метод AdaptyUI.getPaywallView() или создайте AdaptyPaywallView напрямую:

val paywallView = AdaptyUI.getPaywallView(
    activity,
    viewConfiguration,
    products,
    AdaptyPaywallInsets.of(topInset, bottomInset),
    eventListener,
    personalizedOfferResolver,
    tagResolver,
    observerModeHandler,
)

//======= OR =======

val paywallView =
     AdaptyPaywallView(activity) // or retrieve it from xml
...
with(paywallView) {
    setEventListener(eventListener)
    setObserverModeHandler(observerModeHandler)
    showPaywall(
        viewConfiguration,
        products,
        AdaptyPaywallInsets.of(topInset, bottomInset),
        personalizedOfferResolver,
        tagResolver,
    )
}

AdaptyPaywallView paywallView = AdaptyUI.getPaywallView(
        activity,
        viewConfiguration,
        products,
        AdaptyPaywallInsets.of(topInset, bottomInset),
        eventListener,
        personalizedOfferResolver,
        tagResolver,
        observerModeHandler
);

//======= OR =======

AdaptyPaywallView paywallView =
  new AdaptyPaywallView(activity); //add to the view hierarchy if needed, or you receive it from xml
...
paywallView.setEventListener(eventListener);
paywallView.setObserverModeHandler(observerModeHandler);
paywallView.showPaywall(viewConfiguration, products, AdaptyPaywallInsets.of(topInset, bottomInset), personalizedOfferResolver);

<com.adapty.ui.AdaptyPaywallView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

После успешного создания представления вы можете добавить его в иерархию представлений и отобразить.

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

Параметр	Наличие	Описание
Products	опциональный	Передайте массив `AdaptyPaywallProduct`, чтобы оптимизировать время отображения продуктов на экране. Если передать `null`, AdaptyUI автоматически загрузит необходимые продукты.
ViewConfiguration	обязательный	Передайте объект `AdaptyViewConfiguration`, содержащий визуальные параметры пейвола. Используйте метод `Adapty.getViewConfiguration(paywall)` для его загрузки. Подробнее см. в разделе Получение визуальной конфигурации пейвола.
Insets	обязательный	Задайте объект `AdaptyPaywallInsets` с информацией об области, перекрываемой системными панелями, чтобы создать вертикальные отступы для контента. Если строка состояния и панель навигации не перекрывают `AdaptyPaywallView`, передайте `AdaptyPaywallInsets.NONE`. В полноэкранном режиме, когда системные панели перекрывают часть интерфейса, получите отступы так, как показано под таблицей.
EventListener	опциональный	Передайте `AdaptyUiEventListener` для отслеживания событий пейвола. Для удобства рекомендуется расширить `AdaptyUiDefaultEventListener`. Подробнее см. в разделе Обработка событий пейвола.
PersonalizedOfferResolver	опциональный	Чтобы указать персонализированную цену (подробнее), реализуйте `AdaptyUiPersonalizedOfferResolver` и передайте собственную логику, которая сопоставляет `AdaptyPaywallProduct` со значением `true`, если цена продукта персонализирована, иначе — `false`.
TagResolver	опциональный	Используйте `AdaptyUiTagResolver` для обработки пользовательских тегов в тексте пейвола. Этот резолвер принимает параметр тега и преобразует его в соответствующую строку. Подробнее см. в разделе «Пользовательские теги в Paywall Builder».
ObserverModeHandler	обязательный для режима Observer	`AdaptyUiObserverModeHandler`, реализованный на предыдущем шаге.
variationId	обязательный	Строковый идентификатор варианта. Его можно получить через свойство `variationId` объекта `AdaptyPaywall`.
transaction	обязательный	Для iOS, StoreKit 1: объект `SKPaymentTransaction`. Для iOS, StoreKit 2: объект Transaction. Для Android: строковый идентификатор (`purchase.getOrderId()`) покупки, где покупка — экземпляр класса Purchase из библиотеки биллинга.
Для полноэкранного режима, в котором системные панели перекрывают часть интерфейса, получайте отступы следующим образом:

import androidx.core.graphics.Insets
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat

//create extension function
fun View.onReceiveSystemBarsInsets(action: (insets: Insets) -> Unit) {
    ViewCompat.setOnApplyWindowInsetsListener(this) { _, insets ->
        val systemBarInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars())
        ViewCompat.setOnApplyWindowInsetsListener(this, null)
        action(systemBarInsets)
        insets
    }
}
//and then use it with the view
paywallView.onReceiveSystemBarsInsets { insets ->
    val paywallInsets = AdaptyPaywallInsets.of(insets.top, insets.bottom)
    paywallView.setEventListener(eventListener)
    paywallView.setObserverModeHandler(observerModeHandler)
    paywallView.showPaywall(viewConfig, products, paywallInsets, personalizedOfferResolver, tagResolver)
}

import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;

...

ViewCompat.setOnApplyWindowInsetsListener(paywallView, (view, insets) -> {
    Insets systemBarInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars());
    ViewCompat.setOnApplyWindowInsetsListener(paywallView, null);
  
    AdaptyPaywallInsets paywallInsets =
                 AdaptyPaywallInsets.of(systemBarInsets.top, systemBarInsets.bottom);
    paywallView.setEventListener(eventListener);
    paywallView.setObserverModeHandler(observerModeHandler);
    paywallView.showPaywall(viewConfiguration, products, paywallInsets, personalizedOfferResolver, tagResolver);
            
    return insets;
});

Возвращает:

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

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