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

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

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

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

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

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

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

Перед началом работы

Выполните следующие шаги:

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

Быстрее всего выполнить эти шаги можно с помощью quickstart-гайда или создав пейволы и плейсменты через Developer CLI.

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

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

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


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
}

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

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

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

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

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

Пейвол готов к отображению в приложении. Протестируйте покупки в песочнице 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>
  );
}