Включение покупок с помощью Flow и Paywall Builder в Kotlin Multiplatform SDK

Это руководство использует API Adapty Kotlin Multiplatform SDK v4 (beta). Если вы используете v3, ознакомьтесь с руководством по миграции для получения соответствующих имён методов.

Чтобы подключить встроенные покупки, вам нужно разобраться с тремя ключевыми концепциями:

• Продукты – всё, что пользователи могут купить (подписки, расходуемые покупки, пожизненный доступ)
• Флоу – последовательности экранов, которые представляют продукты пользователям, созданные в конструкторе флоу и пейволов без кода. SDK получает их через getFlow. Если вы предпочитаете строить UI в собственном коде, используйте пейвол — см. Реализация пейволов вручную.
• Плейсменты – где и когда в приложении отображаются флоу (например, main, onboarding, settings). Вы привязываете флоу к плейсментам в дашборде, а затем запрашиваете их по ID плейсмента в коде. Это упрощает проведение A/B-тестов и показ разных флоу разным пользователям.

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

Чтобы отобразить флоу, созданное в Adapty Flow & Paywall Builder, в коде вашего приложения нужно только:

1. Получите флоу: Получите его из Adapty.
2. Отобразите его, и Adapty сам обработает покупки: Покажите вью в вашем приложении.
3. Обработайте действия кнопок: Свяжите действия пользователей с реакцией вашего приложения. Например, открывайте ссылки или закрывайте флоу при нажатии кнопок.

Перед началом работы

Перед началом выполните следующие шаги:

1. Подключите приложение к App Store и/или Google Play в дашборде Adapty.
2. Создайте продукты в Adapty.
3. Создайте флоу и добавьте в него продукты.
4. Создайте плейсмент и добавьте в него флоу.
5. Установите и активируйте SDK в коде приложения.

1. Получите флоу

Ваши флоу связаны с плейсментами, настроенными в дашборде. Плейсменты позволяют показывать разные флоу разным аудиториям или запускать A/B-тесты.

Чтобы получить флоу, созданный в Adapty Flow & Paywall Builder, нужно:

1. Получить объект flow по ID плейсмента с помощью метода getFlow.

2. Создать представление флоу с помощью метода createFlowView. Представление содержит элементы интерфейса и стили, необходимые для отображения флоу. Если для флоу не настроено представление, createFlowView вернёт ошибку — обработайте её в onError.

Adapty.getFlow("YOUR_PLACEMENT_ID")
    .onSuccess { flow ->
        AdaptyUI.createFlowView(flow)
            .onSuccess { view ->
                view.present()
            }
            .onError { error ->
                // the flow has no view configured, or view creation failed
            }
    }
    .onError { error ->
        // handle the error
    }

2. Отобразите флоу

Теперь, когда у вас есть флоу, достаточно добавить несколько строк, чтобы отобразить его.

Чтобы показать визуальный флоу на экране устройства, нужно сначала создать представление. Для этого вызовите метод AdaptyUI.createFlowView():

AdaptyUI.createFlowView(flow)
    .onSuccess { view ->
        view.present()
    }
    .onError { error ->
        // handle the error
    }

После успешного создания представления его можно отобразить на экране устройства. Каждое представление можно использовать только один раз: после вызова dismiss() вызовите createFlowView ещё раз, чтобы снова показать флоу.

3. Обработка нажатий на кнопки

Когда пользователи нажимают кнопки во флоу, Kotlin Multiplatform SDK автоматически обрабатывает покупки, восстановление, закрытие флоу и открытие ссылок.

Однако у других кнопок есть пользовательские или предопределённые идентификаторы, и их действия нужно обрабатывать в вашем коде. Также вы можете переопределить их поведение по умолчанию.

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

Обратите внимание, что по умолчанию флоу остаётся открытым после успешной покупки. Если вы хотите закрыть его после завершения покупки, скройте вью в колбэке flowViewDidFinishPurchase.

AdaptyUI.setFlowsEventsObserver(object : AdaptyUIFlowsEventsObserver {
    override fun flowViewDidPerformAction(view: AdaptyUIFlowView, action: AdaptyUIAction) {
        when (action) {
            is AdaptyUIAction.CloseAction -> mainUiScope.launch { view.dismiss() }
            else -> Unit
        }
    }

    override fun flowViewDidFinishPurchase(
        view: AdaptyUIFlowView,
        product: AdaptyPaywallProduct,
        purchaseResult: AdaptyPurchaseResult
    ) {
        if (purchaseResult !is AdaptyPurchaseResult.UserCanceled) {
            mainUiScope.launch { view.dismiss() }
        }
    }
})

Следующие шаги

Ваш пейвол готов к показу в приложении. Протестируйте покупки в песочнице App Store или в Google Play Store, чтобы убедиться, что тестовая покупка через пейвол проходит успешно.

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

Полный пример

Вот как все эти шаги можно объединить в вашем приложении.

// Set up the observer for handling flow events
AdaptyUI.setFlowsEventsObserver(object : AdaptyUIFlowsEventsObserver {
    override fun flowViewDidPerformAction(view: AdaptyUIFlowView, action: AdaptyUIAction) {
        when (action) {
            is AdaptyUIAction.CloseAction -> mainUiScope.launch { view.dismiss() }
            else -> Unit
        }
    }

    override fun flowViewDidFinishPurchase(
        view: AdaptyUIFlowView,
        product: AdaptyPaywallProduct,
        purchaseResult: AdaptyPurchaseResult
    ) {
        if (purchaseResult !is AdaptyPurchaseResult.UserCanceled) {
            mainUiScope.launch { view.dismiss() }
        }
    }
})

// Get and display the flow
Adapty.getFlow("YOUR_PLACEMENT_ID")
    .onSuccess { flow ->
        AdaptyUI.createFlowView(flow)
            .onSuccess { view ->
                view.present()
            }
            .onError { error ->
                // the flow has no view configured — use custom logic
            }
    }
    .onError { error ->
        // handle the error
    }