Включение покупок с Flow & Paywall Builder в Capacitor SDK

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

• Продукты – всё, что пользователи могут купить (подписки, расходуемые покупки, пожизненный доступ)
• Флоу – последовательности экранов, представляющие продукты пользователям и созданные в визуальном редакторе Flow & Paywall Builder без кода. SDK получает их через getFlow. Если вы предпочитаете строить UI в собственном коде, используйте вместо этого пейвол — см. Реализация пейволов вручную.
• Плейсменты – где и когда в приложении показываются флоу (например, main, onboarding, settings). Вы привязываете флоу к плейсментам в дашборде, а затем запрашиваете их по ID плейсмента в коде. Это упрощает проведение A/B-тестов и показ разных флоу разным пользователям.

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

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

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

Прежде чем начать

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

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

1. Получите флоу

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

Чтобы получить флоу, созданный в Adapty Flow & Paywall Builder, запросите объект flow по идентификатору плейсмента с помощью метода getFlow. Флоу содержит элементы интерфейса и стили, необходимые для его отображения.

try {
  const flow = await adapty.getFlow({
    placementId: 'YOUR_PLACEMENT_ID',
  });
  // the requested flow
} catch (error) {
  // handle the error
}

2. Отображение флоу

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

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

try {
  const view = await createFlowView(flow);

  await view.setEventHandlers({
    onPurchaseCompleted(purchaseResult, product) {
      return purchaseResult.type === 'success'; // close the flow on a successful purchase, keep it open for cancelled or pending purchases
    },
  });

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

3. Обработка нажатий на кнопки

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

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

Например, вот поведение кнопки закрытия по умолчанию. Добавлять его в код не нужно, но здесь видно, как это делается при необходимости.

const unsubscribe = await view.setEventHandlers({
  onCloseButtonPress() {
    return true; // allow the flow to close
  },
});

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

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

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

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

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

export async function showFlow() {
  try {
    const flow = await adapty.getFlow({
      placementId: 'YOUR_PLACEMENT_ID',
    });

    const view = await createFlowView(flow);

    await view.setEventHandlers({
      onCloseButtonPress() {
        return true;
      },
      onPurchaseCompleted(purchaseResult, product) {
        return purchaseResult.type === 'success'; // close the flow on a successful purchase, keep it open for cancelled or pending purchases
      },
    });

    await view.present();
  } catch (error) {
    // handle any error that may occur during the process
    console.warn('Error showing flow:', error);
  }
}