Включение покупок в вашем кастомном пейволе в React Native SDK
Этот гайд описывает, как интегрировать Adapty в ваши кастомные пейволы. Сохраните полный контроль над реализацией пейвола, пока Adapty SDK получает продукты, обрабатывает новые покупки и восстанавливает предыдущие.
Этот гайд предназначен для разработчиков, реализующих кастомные пейволы. Если вы хотите проще всего включить покупки, используйте Adapty Paywall Builder. С Paywall Builder вы создаёте пейволы в визуальном редакторе без кода, Adapty берёт на себя всю логику покупок, а вы можете тестировать разные дизайны без повторной публикации приложения.
Прежде чем начать
Настройте продукты
Чтобы включить встроенные покупки, нужно понять три ключевых концепции:
- Продукты — всё, что пользователи могут купить (подписки, расходуемые покупки, пожизненный доступ)
- Пейволы — конфигурации, определяющие, какие продукты предлагать. В Adapty пейволы — единственный способ получить продукты, но такой подход позволяет изменять продукты, цены и офферы без изменения кода приложения.
- Плейсменты — где и когда показывать пейволы в приложении (например,
main,onboarding,settings). Вы настраиваете пейволы для плейсментов в дашборде, а затем запрашиваете их по ID плейсмента в коде. Это упрощает проведение A/B-тестов и показ разных пейволов разным пользователям.
Разберитесь в этих концепциях, даже если вы работаете с кастомным пейволом. По сути, это просто способ управлять продуктами, которые вы продаёте в приложении.
Для реализации кастомного пейвола вам нужно создать paywall и добавить его в placement. Эта настройка позволяет получать ваши продукты. Чтобы понять, что нужно сделать в дашборде, следуйте этому гайду по быстрому старту.
Управление пользователями
Вы можете работать как с backend-аутентификацией, так и без неё.
Тем не менее Adapty SDK по-разному обрабатывает анонимных и идентифицированных пользователей. Прочитайте гайд по быстрой идентификации, чтобы разобраться в деталях и убедиться, что вы правильно работаете с пользователями.
Шаг 1. Получите продукты
Чтобы получить продукты для вашего кастомного пейвола, необходимо:
- Получить объект
paywall, передав ID плейсмента в методgetPaywall. - Получить массив продуктов для этого пейвола с помощью метода
getPaywallProducts.
async function loadPaywall() {
try {
const paywall: AdaptyPaywall = await adapty.getPaywall('YOUR_PLACEMENT_ID');
const products: AdaptyPaywallProduct[] = await adapty.getPaywallProducts(paywall);
// Use products to build your custom paywall UI
} catch (error) {
// Handle the error
}
}
Шаг 2. Принимайте покупки
Когда пользователь нажимает на продукт в вашем кастомном пейволе, вызовите метод makePurchase с выбранным продуктом. Он обработает процесс покупки и вернёт обновлённый профиль.
async function purchaseProduct(product: AdaptyPaywallProduct) {
try {
const purchaseResult: AdaptyPurchaseResult = await adapty.makePurchase(product);
switch (purchaseResult.type) {
case 'success':
// Purchase successful, profile updated
break;
case 'user_cancelled':
// User canceled the purchase
break;
case 'pending':
// Purchase is pending (e.g., user will pay offline with cash)
break;
}
} 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
}
}
Следующие шаги
Есть вопросы или возникли проблемы? Загляните на наш форум поддержки, где можно найти ответы на распространённые вопросы или задать свой. Наша команда и сообщество всегда готовы помочь!
Ваш пейвол готов к отображению в приложении. Протестируйте покупки в песочнице App Store или в Google Play Store, чтобы убедиться, что тестовая покупка проходит успешно. Чтобы увидеть, как это работает в продакшн-реализации, посмотрите на CustomPurchaseScreen.tsx в нашем примере приложения — он демонстрирует обработку покупок с правильной обработкой ошибок, состояниями загрузки и управлением состоянием UI.
Далее проверьте, совершил ли пользователь покупку, чтобы решить — показывать пейвол или открыть доступ к платным функциям.