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

• Продукты — всё, что пользователи могут купить (подписки, расходуемые покупки, пожизненный доступ).
• Пейволы — конфигурации, определяющие, какие продукты предлагать. В Adapty пейволы — единственный способ получить продукты, и такой подход позволяет менять предложения, цены и наборы продуктов без изменения кода приложения.
• Плейсменты — места и моменты, где пейволы показываются в приложении (например, main, onboarding, settings). Вы привязываете пейволы к плейсментам в дашборде, а затем запрашиваете их по ID плейсмента в коде. Это упрощает запуск A/B-тестов и показ разных пейволов разным пользователям.

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

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

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

1. Получить пейвол: запросить пейвол из Adapty.
2. Отобразить пейвол — Adapty возьмёт покупки на себя: показать контейнер пейвола в приложении.
3. Обработать действия кнопок: связать действия пользователей в пейволе с реакцией приложения. Например, открывать ссылки или закрывать пейвол при нажатии кнопок.

Перед началом

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

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

1. Получите пейвол

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

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

1. Получить объект paywall по ID плейсмента с помощью метода getPaywall и проверить, является ли он пейволом из конструктора, используя свойство hasViewConfiguration.

2. Создать представление пейвола с помощью метода createPaywallView. Представление содержит элементы UI и стили, необходимые для отображения пейвола.

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. Отобразите пейвол

Теперь, когда у вас есть конфигурация пейвола, достаточно добавить несколько строк кода, чтобы отобразить его.

Для отображения пейвола вызовите метод view.present() на объекте view, созданном методом createPaywallView. Каждый view можно использовать только один раз. Если нужно показать пейвол снова, вызовите createPaywallView ещё раз, чтобы создать новый экземпляр view.

try {
  await view.present();
} catch (error) {
  // handle the error
}

3. Обработайте действия кнопок

Когда пользователи нажимают кнопки в пейволе, Capacitor SDK автоматически обрабатывает покупки, восстановление и закрытие пейвола.

Однако другие кнопки имеют пользовательские или предустановленные ID и требуют обработки действий в вашем коде. Или вы можете захотеть переопределить их поведение по умолчанию.

Например, вы можете захотеть оставить пейвол открытым, когда пользователь переходит по веб-ссылке. Посмотрим, как это можно реализовать.

const unsubscribe = view.setEventHandlers({
  onUrlPress(url) {
    window.open(url, '_blank');
    return false;
  },
});

Следующие шаги

Ваш пейвол готов к отображению в приложении. Протестируйте покупки в песочнице App Store или в Google Play Store, чтобы убедиться, что тестовая покупка из пейвола проходит успешно.

Теперь нужно проверить уровень доступа пользователей, чтобы показывать пейвол или предоставлять доступ к платным функциям нужным пользователям.

Полный пример

Вот как все эти шаги можно объединить в приложении.

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 (
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
      <button onClick={showPaywall}>Show Paywall</button>
    </div>
  );
}