Activer les achats avec Flow & Paywall Builder dans le SDK React Native

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

Produits – tout ce que les utilisateurs peuvent acheter (abonnements, consommables, accès à vie)
Flows & paywalls – les écrans qui présentent les produits aux utilisateurs, créés dans le Flow & Paywall Builder sans code. Le SDK les récupère via getFlow. Si vous préférez construire l’interface dans votre propre code, consultez Implémenter des paywalls personnalisés.
Placements – où et quand vous affichez les flows & paywalls dans votre app (par exemple main, onboarding, settings). Vous les associez à des placements dans le tableau de bord, puis vous les demandez par identifiant de placement dans votre code. Cela facilite la mise en place de tests A/B et l’affichage de contenus différents selon les utilisateurs.

Adapty vous propose trois façons d’activer les achats dans votre application. Choisissez-en une selon les besoins de votre application :

Implémentation	Complexité	Quand l’utiliser
Adapty Flow & Paywall Builder	✅ Facile	Vous créez un flow ou un paywall complet et prêt à l’achat dans le builder no-code. Adapty le génère automatiquement et gère toute la logique d’achat complexe, la validation des reçus et la gestion des abonnements en coulisses.
Paywalls personnalisés	🟡 Moyen	Vous implémentez l’interface de votre paywall dans le code de votre application, mais récupérez tout de même l’objet flow depuis Adapty pour conserver de la flexibilité dans vos offres de produits. Voir le guide.
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 présente des limitations dans Adapty. Voir l’article.

Important

Les étapes ci-dessous montrent comment implémenter un flow ou un paywall créé dans l’Adapty Flow & Paywall Builder.

Si vous préférez créer l’interface du paywall vous-même, consultez Implémenter des paywalls personnalisés.

Pour afficher un flow ou un paywall créé dans l’Adapty Flow & Paywall Builder, vous n’avez besoin que de :

Récupérez le flow ou le paywall : Récupérez-le depuis Adapty.
Affichez-le et Adapty gère les achats pour vous : Intégrez la vue dans votre application.
Gérez les actions des boutons : Associez les interactions utilisateur aux réponses de votre application. Par exemple, ouvrez des liens ou fermez le paywall lorsque l’utilisateur clique sur un bouton.

Avant de commencer

Avant de commencer, effectuez les étapes suivantes :

Connectez votre application à l’App Store et/ou à Google Play dans l’Adapty Dashboard.
Créez vos produits dans Adapty.
Créez un flow ou un paywall et ajoutez-y des produits.
Créez un placement et ajoutez-y votre flow ou paywall.
Installez et activez le SDK Adapty dans le code de votre application. Ce guide utilise les APIs du SDK Adapty React Native v4.

1. Récupérer le flow ou le paywall

Vos flows et paywalls sont associés à des placements configurés dans le tableau de bord. Les placements vous permettent d’afficher différents flows ou paywalls selon les audiences, ou de lancer des tests A/B.

Pour récupérer un flow ou un paywall créé dans l’Adapty Flow & Paywall Builder, obtenez l’objet flow via l’ID du placement en utilisant la méthode getFlow. Le flow contient les éléments d’interface et le style nécessaires à son affichage.


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

2. Afficher le flow ou le paywall

Maintenant que vous avez le flow, il suffit d’ajouter quelques lignes pour l’afficher.

Pour intégrer un flow dans votre arborescence de composants existante, utilisez le composant AdaptyFlowView directement dans la hiérarchie de composants 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}
    />
  );
}

Pour afficher le flow en plein écran, 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.


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

Pour plus de détails sur l’affichage d’un flow ou d’un paywall, consultez notre guide.

3. Gérer les actions des boutons

Quand les utilisateurs cliquent sur des boutons dans le flow ou le paywall, le SDK React Native gère automatiquement les achats, la restauration, la fermeture de l’écran et l’ouverture des URL.

Cependant, d’autres boutons ont des identifiants personnalisés ou prédéfinis et nécessitent une gestion des actions dans votre code. Vous pouvez également vouloir 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.

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


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

Pour une présentation modale, implémentez les gestionnaires d’événements avec setEventHandlers :

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

Tip

Consultez nos guides sur la gestion des actions et des événements des boutons.

Étapes suivantes

Tip

Des questions ou des problèmes ? Consultez notre forum d’assistance 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 ou paywall est prêt à être affiché dans l’application. Testez vos achats pour vous assurer de pouvoir effectuer un achat de test depuis le flow.

Maintenant, vous devez vérifier le niveau d’accès des utilisateurs pour vous assurer d’afficher un paywall ou de donner accès aux fonctionnalités payantes aux bons utilisateurs.

Exemple complet

Voici comment intégrer toutes les étapes de ce guide dans votre application.


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