Включение покупок с помощью Flow и Paywall Builder в React Native SDK

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

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

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

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

Important

Шаги ниже показывают, как реализовать флоу или пейвол, созданный в Adapty Flow & Paywall Builder.

Если вы предпочитаете создавать UI пейвола самостоятельно, см. Реализация пользовательских пейволов.

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

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

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

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

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

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

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

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


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

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

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

Чтобы встроить флоу в существующее дерево компонентов, используйте компонент AdaptyFlowView напрямую в иерархии компонентов React Native:


function MyFlow({ flow }) {
  const onPurchaseCompleted = useCallback<FlowEventHandlers['onPurchaseCompleted']>(
    (result, product) => result.type !== 'user_cancelled',
    [],
  );

  return (
    <AdaptyFlowView
      flow={flow}
      style={{ flex: 1 }}
      onPurchaseCompleted={onPurchaseCompleted}
    />
  );
}

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


try {
  const view = await createFlowView(flow);

  view.setEventHandlers({
    onPurchaseCompleted(result, product) {
      return result.type !== 'user_cancelled';
    },
  });

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

Tip

Подробнее о том, как отображать флоу или пейвол, смотрите в нашем гайде.

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

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

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

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

For the React component, handle actions directly in the AdaptyFlowView component:


function MyFlow({ flow }) {
  const onCloseButtonPress = useCallback<FlowEventHandlers['onCloseButtonPress']>(
    () => true, // allow the flow to close
    [],
  );
  const onCustomAction = useCallback<FlowEventHandlers['onCustomAction']>(
    (actionId) => false,
    [],
  );

  return (
    <AdaptyFlowView
      flow={flow}
      style={{ flex: 1 }}
      onCloseButtonPress={onCloseButtonPress}
      onCustomAction={onCustomAction}
    />
  );
}

Для модального представления реализуйте обработчики событий с помощью setEventHandlers:

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

Tip

Прочитайте наши гайды по обработке действий и событий кнопок.

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

Tip

Есть вопросы или возникли проблемы? Загляните на наш форум поддержки, где можно найти ответы на распространённые вопросы или задать свой. Наша команда и сообщество всегда готовы помочь!

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

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

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

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


export default function FlowScreen() {
  const [flow, setFlow] = useState(null);

  const loadFlow = async () => {
    try {
      const flowData = await adapty.getFlow('YOUR_PLACEMENT_ID');
      setFlow(flowData);
    } catch (error) {
      console.warn('Error loading flow:', error);
    }
  };

  const onCloseButtonPress = useCallback<FlowEventHandlers['onCloseButtonPress']>(
    () => true,
    [],
  );

  const onPurchaseCompleted = useCallback<FlowEventHandlers['onPurchaseCompleted']>(
    (result, product) => result.type !== 'user_cancelled',
    [],
  );

  useEffect(() => {
    loadFlow();
  }, []);

  return (
    <View style={{ flex: 1 }}>
      {flow ? (
        <AdaptyFlowView
          flow={flow}
          style={{ flex: 1 }}
          onCloseButtonPress={onCloseButtonPress}
          onPurchaseCompleted={onPurchaseCompleted}
        />
      ) : (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Button title="Load Flow" onPress={loadFlow} />
        </View>
      )}
    </View>
  );
}


export default function FlowScreen() {
  const showFlow = async () => {
    try {
      const flow = await adapty.getFlow('YOUR_PLACEMENT_ID');

      const view = await createFlowView(flow);

      view.setEventHandlers({
        onCloseButtonPress() {
          return true;
        },
        onPurchaseCompleted(result, product) {
          return result.type !== 'user_cancelled';
        },
      });

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

  // you can add a button to manually trigger the flow for testing purposes
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Show Flow" onPress={showFlow} />
    </View>
  );
}