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

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

Products – всё, что пользователи могут купить (подписки, расходуемые покупки, пожизненный доступ)
Flows – последовательности экранов, которые показывают продукты пользователям; создаются в no-code Flow & Paywall Builder. SDK получает их через getFlow. Если вы предпочитаете строить UI в собственном коде, используйте пейвол — см. Реализация пейволов вручную.
Placements – где и когда в приложении показываются флоу (например, main, onboarding, settings). Вы привязываете флоу к плейсментам в дашборде, а затем запрашиваете их по ID плейсмента в коде. Это упрощает проведение 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

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

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

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

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

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


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>
  );
}