Включение покупок через Flow Builder в Kotlin Multiplatform SDK

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

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

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

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

Реализация	Сложность	Когда использовать
Adapty Flow Builder	✅ Просто	Вы создаёте готовый к покупке флоу в no-code конструкторе. Adapty автоматически отображает его и берёт на себя весь сложный процесс покупки, валидацию чеков и управление подписками.
Пейволы, созданные вручную	🟡 Средне	Вы реализуете интерфейс пейвола в коде приложения, но всё равно получаете объект флоу от Adapty, сохраняя гибкость в управлении продуктами. См. гайд.
Observer mode	🔴 Сложно	У вас уже есть собственная инфраструктура обработки покупок, и вы хотите продолжать её использовать. Обратите внимание, что observer mode имеет ограничения в Adapty. См. статью.

Шаги ниже показывают, как реализовать флоу, созданный в Adapty Flow Builder.

Если вы предпочитаете создавать UI пейвола самостоятельно, смотрите Реализация пейволов вручную.

Чтобы отобразить флоу, созданный в Adapty Flow Builder, в коде приложения нужно сделать следующее:

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

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

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

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

Самый быстрый способ выполнить эти шаги — следовать руководству по быстрому старту или создавать флоу и плейсменты с помощью Developer CLI.

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

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

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

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

Чтобы получить отображение, необходимо включить переключатель Show on device во Flow Builder. В противном случае createFlowView вернёт ошибку, и флоу не отобразится.

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
    }