---
title: "Activer les achats avec le Flow Builder dans le SDK React Native"
description: "Guide de démarrage rapide pour activer les achats intégrés avec Adapty Flow Builder."
---

Pour activer les achats intégrés, vous devez comprendre trois concepts clés :

- [**Produits**](product) – tout ce que les utilisateurs peuvent acheter (abonnements, consommables, accès à vie)
- [**Flows**](adapty-flow-builder) – des séquences d'écrans qui présentent des produits aux utilisateurs, créées dans le Flow Builder sans code. Le SDK les récupère via `getFlow`. Si vous préférez créer l'interface dans votre propre code, utilisez plutôt un paywall — voir [Implémenter des paywalls manuellement](react-native-quickstart-manual).
- [**Placements**](placements) – où et quand vous affichez des flows dans votre application (par exemple `main`, `onboarding`, `settings`). Vous associez des flows à des placements dans le tableau de bord, puis vous les demandez par ID de placement dans votre code. Cela facilite l'exécution de tests A/B et l'affichage de flows différents selon les utilisateurs.

Adapty vous propose trois façons d'activer les achats dans votre application. Choisissez celle qui correspond à vos besoins :

| Implémentation | Complexité | Quand l'utiliser |
|---|---|---|
| Adapty Flow Builder | ✅ Facile | Vous [créez un flow complet et prêt à l'achat dans le builder sans code](quickstart-paywalls). Adapty le rend automatiquement et gère tout le processus d'achat, la validation des reçus et la gestion des abonnements en arrière-plan. |
| Paywalls créés manuellement | 🟡 Moyen | Vous implémentez l'interface de votre paywall dans le code de votre application, mais vous récupérez tout de même l'objet flow depuis Adapty pour garder de la flexibilité dans les offres de produits. Voir le [guide](react-native-quickstart-manual). |
| Mode observateur | 🔴 Difficile | Vous disposez déjà de votre propre infrastructure de gestion des achats et souhaitez continuer à l'utiliser. Notez que le mode observateur a ses limitations dans Adapty. Voir l'[article](observer-vs-full-mode). |

:::important
**Les étapes ci-dessous montrent comment implémenter un flow créé dans l'Adapty Flow Builder.**

Si vous préférez créer l'interface du paywall vous-même, voir [Implémenter des paywalls manuellement](react-native-quickstart-manual).
:::

Pour afficher un flow créé dans l'Adapty Flow Builder, vous n'avez besoin que de :

1. **Récupérer le flow** : Obtenez-le depuis Adapty.
2. **L'afficher et laisser Adapty gérer les achats** : Affichez la vue dans votre application.
3. **Gérer les actions des boutons** : Associez les interactions utilisateur aux réponses de votre application. Par exemple, ouvrir des liens ou fermer le flow quand les utilisateurs cliquent sur des boutons.

## Avant de commencer \{#before-you-start\}

Avant de commencer, effectuez ces étapes :

1. Connectez votre application à l'[App Store](initial_ios) et/ou à [Google Play](initial-android) dans l'Adapty Dashboard.
2. [Créez vos produits](create-product) dans Adapty.
3. [Créez un flow et ajoutez-y des produits](create-paywall).
4. [Créez un placement et ajoutez-y votre flow](create-placement).
5. [Installez et activez le SDK Adapty](sdk-installation-reactnative) dans le code de votre application. Ce guide utilise les API du SDK Adapty React Native v4.

## 1. Récupérer le flow \{#1-get-the-flow\}

Vos flows sont associés à des placements configurés dans le tableau de bord. Les placements vous permettent d'afficher des flows différents selon les audiences ou d'exécuter des [tests A/B](ab-tests).

Pour obtenir un flow créé dans l'Adapty Flow Builder, récupérez l'objet `flow` par l'ID de [placement](placements) en utilisant la méthode `getFlow`. Le flow contient les éléments d'interface et les styles nécessaires à son affichage.

```typescript showLineNumbers title="React Native"

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

## 2. Afficher le flow \{#2-display-the-flow\}

Maintenant que vous avez le flow, quelques lignes suffisent pour l'afficher.

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>

Pour intégrer un flow dans votre arborescence de composants existante, utilisez directement le composant `AdaptyFlowView` dans votre hiérarchie de composants React Native :

```typescript showLineNumbers title="React Native (TSX)"

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

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

</TabItem>
<TabItem value="standalone" label="Modal presentation">

Pour afficher le flow comme un écran indépendant, créez une `view` avec la méthode `createFlowView`, définissez ses gestionnaires d'événements, puis appelez `view.present()`. Chaque `view` ne peut être utilisée qu'une seule fois. Si vous devez afficher le flow à nouveau, appelez `createFlowView` une nouvelle fois pour créer une nouvelle instance de `view`.

```typescript showLineNumbers title="React Native"

try {
  const view = await createFlowView(flow);

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

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

</TabItem>
</Tabs>

:::tip
Pour plus de détails sur l'affichage d'un flow, consultez notre [guide](react-native-present-paywalls).
:::

## 3. Gérer les actions des boutons \{#3-handle-button-actions\}

Quand les utilisateurs cliquent sur des boutons dans le flow, le SDK React Native gère automatiquement les achats, la restauration, la fermeture du flow et l'ouverture des URLs.

Cependant, d'autres boutons ont des ID personnalisés ou prédéfinis et nécessitent que vous gériez leurs actions dans votre code. Ou bien, vous pouvez souhaiter remplacer leur comportement par défaut.

Par exemple, voici le comportement par défaut du bouton de fermeture. Vous n'avez pas besoin de l'ajouter dans le code, mais vous pouvez voir ici comment procéder si nécessaire.

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>

Pour le composant React, gérez les actions directement dans le composant `AdaptyFlowView` :

```typescript showLineNumbers title="React Native (TSX)"

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

</TabItem>
<TabItem value="standalone" label="Modal presentation">

Pour la présentation modale, implémentez les gestionnaires d'événements via `setEventHandlers` :

```typescript showLineNumbers title="React Native"
const unsubscribe = view.setEventHandlers({
  onCloseButtonPress() {
    return true; // allow the flow to close
  },
});
```

</TabItem>
</Tabs>

:::tip
Consultez nos guides sur la gestion des [actions](react-native-handle-paywall-actions) et des [événements](react-native-handling-events-1) des boutons.
:::

## Étapes suivantes \{#next-steps\}

:::tip
Des questions ou des problèmes ? Consultez notre [forum d'assistance](https://adapty.featurebase.app/) où vous trouverez des réponses aux questions fréquentes ou pourrez poser les vôtres. Notre équipe et notre communauté sont là pour vous aider !
:::

Votre flow est prêt à être affiché dans l'application. [Testez vos achats](react-native-test) pour vous assurer que vous pouvez effectuer un achat test depuis le flow.

Vous devez maintenant [vérifier le niveau d'accès des utilisateurs](react-native-check-subscription-status) pour vous assurer d'afficher un flow ou d'accorder l'accès aux fonctionnalités payantes aux bons utilisateurs.

## Exemple complet \{#full-example\}

Voici comment toutes les étapes de ce guide peuvent être intégrées ensemble dans votre application.

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>

```javascript showLineNumbers title="React Native (TSX)"

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

</TabItem>
<TabItem value="standalone" label="Modal presentation">

```javascript showLineNumbers title="React Native"

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

</TabItem>
</Tabs>