Включение покупок в вашем кастомном пейволе в Capacitor SDK
Это руководство описывает интеграцию Adapty в ваши кастомные пейволы. Вы сохраняете полный контроль над реализацией пейвола, а SDK Adapty получает продукты, обрабатывает новые покупки и восстанавливает предыдущие. Руководство использует API Adapty Capacitor SDK v4 — если вы используете v3, обратитесь к руководству по миграции за соответствующими названиями методов.
Это руководство для разработчиков, которые реализуют пользовательские пейволы. Если вы хотите подключить покупки максимально просто, используйте Adapty Paywall Builder. С Paywall Builder вы создаёте пейволы в визуальном редакторе без кода, Adapty берёт на себя всю логику покупок, а тестировать разные дизайны можно без повторной публикации приложения.
Прежде чем начать
Настройка продуктов
Чтобы подключить встроенные покупки, нужно разобраться в трёх ключевых понятиях:
- Продукты – всё, что пользователи могут купить (подписки, расходуемые покупки, пожизненный доступ)
- Пейволы – конфигурации, определяющие, какие продукты предлагать. В Adapty пейволы — единственный способ получить продукты, но такая архитектура позволяет менять продукты, цены и офферы без изменения кода приложения. В SDK v4 варианты пейвола для плейсмента передаются через объект flow — вы получаете флоу и запрашиваете его продукты.
- Плейсменты – где и когда вы показываете пейволы в приложении (например,
main,onboarding,settings). Вы настраиваете пейволы для плейсментов в дашборде, а затем запрашиваете их по ID плейсмента в коде. Это упрощает проведение A/B-тестов и показ разных пейволов разным пользователям. Убедитесь, что вы понимаете эти концепции, даже если используете собственный пейвол. По сути, это просто способ управлять продуктами, которые вы продаёте в приложении.
Чтобы реализовать собственный пейвол, вам нужно создать пейвол и добавить его в плейсмент. Это позволит вам получать свои продукты. Чтобы разобраться, что нужно сделать в дашборде, следуйте этому гайду по быстрому старту.
Управление пользователями
Вы можете работать как с аутентификацией на стороне бэкенда, так и без неё.
Однако SDK обрабатывает анонимных и идентифицированных пользователей по-разному. Прочитайте гайд по быстрому старту с идентификацией, чтобы понять особенности и убедиться, что вы правильно работаете с пользователями.
Шаг 1. Получение продуктов
Чтобы получить продукты для вашего кастомного пейвола, нужно:
- Получить объект
flow, передав ID плейсмента в методgetFlow. - Получить массив продуктов для этого флоу с помощью метода
getPaywallProducts.
async function loadPaywall() {
try {
const flow: AdaptyFlow = await adapty.getFlow({
placementId: 'YOUR_PLACEMENT_ID'
});
const products: AdaptyPaywallProduct[] = await adapty.getPaywallProducts({
flow
});
// Use products to build your custom paywall UI
} catch (error) {
// Handle the error
}
}
Шаг 2. Принимайте покупки
Когда пользователь нажимает на продукт в вашем кастомном пейволе, вызовите метод makePurchase с выбранным продуктом. Это запустит флоу покупки и вернёт обновлённый профиль.
async function purchaseProduct(product: AdaptyPaywallProduct) {
try {
const result: AdaptyPurchaseResult = await adapty.makePurchase({ product });
if (result.type === 'success') {
// Purchase successful, profile updated
} else if (result.type === 'user_cancelled') {
// User canceled the purchase
} else if (result.type === 'pending') {
// Purchase is pending (e.g., user will pay offline with cash)
}
} catch (error) {
// Handle the error
}
}
Шаг 3. Восстановление покупок
Сторы требуют, чтобы все приложения с подписками предоставляли пользователям возможность восстановить покупки.
Вызывайте метод restorePurchases, когда пользователь нажимает кнопку восстановления. Это синхронизирует историю покупок с Adapty и вернёт обновлённый профиль.
async function restorePurchases() {
try {
const profile: AdaptyProfile = await adapty.restorePurchases();
// Restore successful, profile updated
} catch (error) {
// Handle the error
}
}
Шаг 4. Проверьте статус подписки
После покупки или восстановления проверьте уровень доступа пользователя, чтобы решить, показывать ли пейвол или открыть платные функции. Методы makePurchase и restorePurchases уже возвращают обновлённый профиль; если вам нужен текущий статус в другом месте приложения, используйте метод getProfile:
async function hasPremiumAccess(): Promise<boolean> {
try {
const profile = await adapty.getProfile();
return profile.accessLevels?.['premium']?.isActive ?? false;
} catch (error) {
// Handle the error
}
return false;
}
Подробнее о способах проверки и отслеживания статуса подписки, включая получение обновлений в реальном времени, см. в разделе Проверка статуса подписки.
Следующие шаги
Есть вопросы или возникли проблемы? Загляните на наш форум поддержки, где можно найти ответы на распространённые вопросы или задать свой. Наша команда и сообщество всегда готовы помочь!
Ваш пейвол готов к отображению в приложении. Протестируйте покупки в песочнице App Store или в Google Play Store, чтобы убедиться, что тестовая покупка проходит корректно. Чтобы увидеть, как это работает в production-ready реализации, посмотрите на App.tsx в нашем примере приложения — там показана обработка покупок с правильной обработкой ошибок, состояниями загрузки и полной интеграцией SDK.