---
title: "Включение покупок с помощью пейволов в Capacitor SDK"
description: "Узнайте, как отображать пейволы в вашем приложении на Capacitor с помощью Adapty SDK."
---
Чтобы включить встроенные покупки, нужно разобраться с тремя ключевыми понятиями:
- **Продукты** — всё, что пользователи могут купить (подписки, расходуемые покупки, пожизненный доступ).
- **Пейволы** — конфигурации, определяющие, какие продукты предлагать. В Adapty пейволы — единственный способ получить продукты, и такой подход позволяет менять предложения, цены и наборы продуктов без изменения кода приложения.
- **Плейсменты** — места и моменты, где пейволы показываются в приложении (например, `main`, `onboarding`, `settings`). Вы привязываете пейволы к плейсментам в дашборде, а затем запрашиваете их по ID плейсмента в коде. Это упрощает запуск A/B-тестов и показ разных пейволов разным пользователям.
Adapty предлагает три способа включить покупки в приложении. Выберите подходящий в зависимости от требований вашего приложения:
| Реализация | Сложность | Когда использовать |
|----------------------------|------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| **Adapty Paywall Builder** | ✅ Легко | Вы [создаёте полноценный пейвол в no-code конструкторе](quickstart-paywalls). Adapty автоматически отрисовывает его и берёт на себя весь процесс покупки, валидацию чеков и управление подписками. |
| `makePurchase` | 🟡 Средне | Вы реализуете UI пейвола в коде приложения, но получаете объект пейвола из Adapty, сохраняя гибкость в управлении предложениями. См. [гайд](capacitor-quickstart-manual). |
| Observer mode | 🔴 Сложно | Вы полностью реализуете процесс покупки самостоятельно. См. [гайд](implement-observer-mode-capacitor). |
:::important
**Шаги ниже показывают, как реализовать пейвол, созданный в Adapty Paywall Builder.**
Если вы не хотите использовать Paywall Builder, ознакомьтесь с [гайдом по обработке покупок в пейволах, созданных вручную](capacitor-making-purchases).
:::
Чтобы отобразить пейвол, созданный в Adapty Paywall Builder, в коде приложения нужно:
1. **Получить пейвол**: запросить пейвол из Adapty.
2. **Отобразить пейвол — Adapty возьмёт покупки на себя**: показать контейнер пейвола в приложении.
3. **Обработать действия кнопок**: связать действия пользователей в пейволе с реакцией приложения. Например, открывать ссылки или закрывать пейвол при нажатии кнопок.
## Перед началом \{#before-you-start\}
Перед началом выполните следующие шаги:
1. Подключите приложение к [App Store](initial_ios) и/или [Google Play](initial-android) в дашборде Adapty.
2. [Создайте продукты](create-product) в Adapty.
3. [Создайте пейвол и добавьте в него продукты](create-paywall).
4. [Создайте плейсмент и добавьте в него пейвол](create-placement).
5. [Установите и активируйте Adapty SDK](sdk-installation-capacitor) в коде приложения.
:::tip
Быстрее всего выполнить эти шаги поможет [quickstart-гайд](quickstart) или создание пейволов и плейсментов с помощью [Developer CLI](developer-cli-quickstart).
:::
## 1. Получите пейвол \{#1-get-the-paywall\}
Ваши пейволы привязаны к плейсментам, настроенным в дашборде. Плейсменты позволяют показывать разные пейволы разным аудиториям или запускать [A/B-тесты](ab-tests).
Чтобы получить пейвол, созданный в Adapty Paywall Builder, нужно:
1. Получить объект `paywall` по ID [плейсмента](placements) с помощью метода `getPaywall` и проверить, является ли он пейволом из конструктора, используя свойство `hasViewConfiguration`.
2. Создать представление пейвола с помощью метода `createPaywallView`. Представление содержит элементы UI и стили, необходимые для отображения пейвола.
:::important
Чтобы получить конфигурацию представления, необходимо включить переключатель **Show on device** в Paywall Builder. В противном случае вы получите пустую конфигурацию представления, и пейвол не отобразится.
:::
```typescript showLineNumbers title="Capacitor"
try {
const paywall = await adapty.getPaywall({
placementId: 'YOUR_PLACEMENT_ID',
});
// the requested paywall
} catch (error) {
// handle the error
}
if (paywall.hasViewConfiguration) {
try {
const view = await createPaywallView(paywall);
} catch (error) {
// handle the error
}
} else {
// use your custom logic
}
```
## 2. Отобразите пейвол \{#2-display-the-paywall\}
Теперь, когда у вас есть конфигурация пейвола, достаточно добавить несколько строк кода, чтобы отобразить его.
Для отображения пейвола вызовите метод `view.present()` на объекте `view`, созданном методом `createPaywallView`. Каждый `view` можно использовать только один раз. Если нужно показать пейвол снова, вызовите `createPaywallView` ещё раз, чтобы создать новый экземпляр `view`.
```typescript showLineNumbers title="Capacitor"
try {
await view.present();
} catch (error) {
// handle the error
}
```
:::tip
Подробнее об отображении пейвола читайте в нашем [гайде](capacitor-present-paywalls).
:::
## 3. Обработайте действия кнопок \{#3-handle-button-actions\}
Когда пользователи нажимают кнопки в пейволе, Capacitor SDK автоматически обрабатывает покупки, восстановление и закрытие пейвола.
Однако другие кнопки имеют пользовательские или предустановленные ID и требуют обработки действий в вашем коде. Или вы можете захотеть переопределить их поведение по умолчанию.
Например, вы можете захотеть оставить пейвол открытым, когда пользователь переходит по веб-ссылке. Посмотрим, как это можно реализовать.
:::tip
Читайте наши гайды по обработке [действий](capacitor-handle-paywall-actions) и [событий](capacitor-handling-events) кнопок.
:::
```typescript showLineNumbers title="Capacitor"
const unsubscribe = view.setEventHandlers({
onUrlPress(url) {
window.open(url, '_blank');
return false;
},
});
```
## Следующие шаги \{#next-steps\}
---
no_index: true
---
import Callout from '../../../components/Callout.astro';
Есть вопросы или возникли проблемы? Загляните на наш [форум поддержки](https://adapty.featurebase.app/), где можно найти ответы на распространённые вопросы или задать свой. Наша команда и сообщество всегда готовы помочь!
Ваш пейвол готов к отображению в приложении. Протестируйте покупки в [песочнице App Store](test-purchases-in-sandbox) или в [Google Play Store](testing-on-android), чтобы убедиться, что тестовая покупка из пейвола проходит успешно.
Теперь нужно [проверить уровень доступа пользователей](capacitor-check-subscription-status), чтобы показывать пейвол или предоставлять доступ к платным функциям нужным пользователям.
## Полный пример \{#full-example\}
Вот как все эти шаги можно объединить в приложении.
```typescript showLineNumbers title="Capacitor"
export default function PaywallScreen() {
const showPaywall = async () => {
try {
const paywall = await adapty.getPaywall({
placementId: 'YOUR_PLACEMENT_ID',
});
if (!paywall.hasViewConfiguration) {
// use your custom logic
return;
}
const view = await createPaywallView(paywall);
view.setEventHandlers({
onUrlPress(url) {
window.open(url, '_blank');
return false;
},
});
await view.present();
} catch (error) {
// handle any error that may occur during the process
console.warn('Error showing paywall:', error);
}
};
return (