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

• Продукты – всё, что пользователи могут купить (подписки, расходуемые покупки, пожизненный доступ)
• Флоу – последовательности экранов, которые представляют продукты пользователям, созданные в no-code Flow Builder. SDK получает их через getFlow. Если вы предпочитаете строить UI в собственном коде, используйте пейвол — см. Реализация пейволов вручную.
• Плейсменты – где и когда вы показываете флоу в приложении (например, main, onboarding, settings). Вы привязываете флоу к плейсментам в дашборде, а затем запрашиваете их по ID плейсмента в коде. Это упрощает проведение A/B-тестов и показ разных флоу разным пользователям. Adapty предлагает три способа подключить покупки в вашем приложении. Выберите подходящий в зависимости от требований вашего приложения: | Реализация | Сложность | Когда использовать | |---|---|---| | Adapty Flow Builder | ✅ Легко | Вы создаёте полноценный флоу с поддержкой покупок в конструкторе без кода. Adapty автоматически отображает его и берёт на себя весь процесс покупки, валидацию чеков и управление подписками. | | Самостоятельно созданные пейволы | 🟡 Средне | Вы реализуете интерфейс пейвола в коде приложения, но по-прежнему получаете объект флоу от Adapty, сохраняя гибкость в настройке продуктов. См. гайд. | | Observer mode | 🔴 Сложно | У вас уже есть собственная инфраструктура обработки покупок, и вы хотите продолжать её использовать. Обратите внимание, что observer mode имеет ограничения в Adapty. См. статью. |

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

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

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

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

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

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

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

Чтобы получить флоу, созданный в Adapty Flow Builder, запросите объект flow по ID плейсмента с помощью метода 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);
  }
}