Включение покупок с помощью 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 | ✅ Просто | Вы создаёте готовый к покупкам флоу или пейвол в no-code конструкторе. Adapty автоматически отображает его и берёт на себя всю сложную логику покупок, валидацию чеков и управление подписками. |
| Кастомные пейволы | 🟡 Средне | Вы реализуете UI пейвола в коде своего приложения, но при этом получаете объект флоу из Adapty, сохраняя гибкость в управлении продуктами. См. гайд. |
| Observer mode | 🔴 Сложно | У вас уже есть собственная инфраструктура обработки покупок, и вы хотите продолжать её использовать. Учтите, что observer mode имеет ряд ограничений в Adapty. См. статью. |
Ниже описано, как реализовать флоу или пейвол, созданный в Adapty Flow & Paywall Builder.
Если вы хотите создать UI пейвола самостоятельно, см. Реализация кастомных пейволов.
Чтобы отобразить флоу или пейвол, созданный в Adapty Flow & Paywall Builder, в коде приложения нужно:
- Получите флоу или пейвол: Получите его из Adapty.
- Отобразите его — Adapty сам обработает покупки: Покажите вью в вашем приложении.
- Обработайте действия кнопок: Свяжите действия пользователя с реакцией вашего приложения. Например, открывайте ссылки или закрывайте пейвол при нажатии кнопок.
Перед началом работы
Прежде чем начать, выполните следующие шаги:
- Подключите приложение к App Store и/или Google Play в дашборде Adapty.
- Создайте продукты в Adapty.
- Создайте флоу или пейвол и добавьте в него продукты.
- Создайте плейсмент и добавьте в него флоу или пейвол.
- Установите и активируйте SDK в коде вашего приложения.
Самый быстрый способ выполнить эти шаги — следовать руководству по быстрому старту или создавать флоу и плейсменты с помощью Developer CLI.
1. Получите флоу или пейвол
Ваши флоу и пейволы связаны с плейсментами, настроенными в дашборде. Плейсменты позволяют показывать разные флоу или пейволы разным аудиториям или запускать A/B-тесты.
Чтобы получить флоу или пейвол, созданный в Adapty Flow & Paywall Builder, необходимо:
-
Получить объект
flowпо ID плейсмента с помощью методаgetFlow. -
Создайте представление флоу с помощью метода
createFlowView. Представление содержит UI-элементы и стили, необходимые для отображения флоу. Если для флоу не настроено представление,createFlowViewвозвращает ошибку — обработайте её вonError.
Чтобы получить представление, опубликуйте флоу или пейвол. Флоу или пейвол с неопубликованными изменениями имеет статус Dirty, и его плейсмент продолжает показывать последнюю опубликованную версию.
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
}