Répondre aux actions de flow - React Native

Si vous créez des flows dans le Adapty Flow & Paywall Builder, il est essentiel de configurer correctement les boutons :

Ajoutez un bouton dans le builder et assignez-lui une action existante ou créez un identifiant d’action personnalisé.
Écrivez le code dans votre application pour gérer chaque action assignée.

Ce guide explique comment gérer les actions personnalisées et les actions existantes dans votre code.

Warning

Les achats, les restaurations, les fermetures de flow/paywall et l’ouverture d’URL sont gérés automatiquement. Vous pouvez configurer leur comportement par défaut ou implémenter des réponses pour les actions personnalisées.

Note

Le SDK expose un gestionnaire de flow onRequestPermission pour les demandes d’autorisation système, comme les notifications push ou l’accès à la caméra. Les flows ne déclenchent pas encore ces demandes, vous n’avez donc pas besoin de l’implémenter pour l’instant.

Fermer les flows et les paywalls

Pour ajouter un bouton qui fermera votre flow ou paywall :

Dans le builder, ajoutez un bouton et assignez-lui l’action Close.
Dans le code de votre application, implémentez un gestionnaire pour l’action close qui ferme le flow ou le paywall.

Info

Dans le SDK React Native, l’action close déclenche la fermeture du flow ou du paywall par défaut. Vous pouvez toutefois surcharger ce comportement dans votre code si nécessaire. Par exemple, la fermeture d’un flow peut déclencher l’ouverture d’un autre.

Pour les composants React, gérez l’action de fermeture via des props de gestionnaire d’événements individuelles :


function MyPaywall({ flow }) {
  const onCloseButtonPress = useCallback<FlowEventHandlers['onCloseButtonPress']>(() => {
    // Handle close button press - navigate away or hide component
    navigation.goBack();
  }, [navigation]);

  return (
    <AdaptyFlowView
      flow={flow}
      style={styles.container}
      onCloseButtonPress={onCloseButtonPress}
    />
  );
}

Pour une présentation modale, implémentez le gestionnaire de fermeture :


const view = await createFlowView(flow);

const unsubscribe = view.setEventHandlers({
    onCloseButtonPress() {
        return true; // allow flow or paywall closing
    }
});

Ouvrir des URLs depuis les flows et paywalls

Tip

Si vous souhaitez ajouter un groupe de liens (par exemple, conditions d’utilisation et restauration des achats), ajoutez un élément Link dans le builder et gérez-le de la même façon que les boutons avec l’action Open URL.

Pour ajouter un bouton qui ouvre un lien depuis votre flow ou paywall (par exemple, Terms of use ou Privacy policy) :

Dans le builder, ajoutez un bouton, assignez-lui l’action Open URL et saisissez l’URL que vous souhaitez ouvrir.
Dans le code de votre application, implémentez un handler pour l’action openUrl qui ouvre l’URL reçue dans un navigateur.

Info

Dans le SDK React Native, l’action openUrl déclenche l’ouverture de l’URL par défaut. Vous pouvez cependant remplacer ce comportement dans votre code si nécessaire.

Pour un composant React, gérez l’ouverture des URL via la prop du gestionnaire d’événements :


function MyPaywall({ flow }) {
  const onUrlPress = useCallback<FlowEventHandlers['onUrlPress']>((url) => {
    Linking.openURL(url);
  }, []);

  return (
    <AdaptyFlowView
      flow={flow}
      style={styles.container}
      onUrlPress={onUrlPress}
    />
  );
}

Pour la présentation modale, implémentez le gestionnaire d’URL :


const view = await createFlowView(flow);

const unsubscribe = view.setEventHandlers({
    onUrlPress(url) {
        Linking.openURL(url);
        return false; // Keep flow or paywall open
    },
});

Gérer les actions personnalisées

Pour ajouter un bouton qui gère d’autres actions :

Dans le builder, ajoutez un bouton, attribuez-lui l’action Custom, et donnez-lui un identifiant.
Dans le code de votre application, implémentez un gestionnaire pour l’identifiant d’action que vous avez créé.

Par exemple, si vous disposez d’un autre ensemble d’offres d’abonnement ou d’achats uniques, vous pouvez ajouter un bouton qui affichera un autre flow ou paywall :

Pour le composant React, gérez les actions personnalisées via la prop du gestionnaire d’événements :


function MyPaywall({ flow }) {
  const onCustomAction = useCallback<FlowEventHandlers['onCustomAction']>((actionId) => {
    if (actionId === 'openNewPaywall') {
      // Display another flow or paywall
    }
  }, []);

  return (
    <AdaptyFlowView
      flow={flow}
      style={styles.container}
      onCustomAction={onCustomAction}
    />
  );
}

Pour la présentation modale, implémentez des gestionnaires d’actions personnalisés :

const unsubscribe = view.setEventHandlers({
    onCustomAction(actionId) {
        if (actionId === 'openNewPaywall') {
            // Display another flow or paywall
        }
    },
});

Si vous créez des paywalls avec le Paywall Builder d’Adapty, il est essentiel de configurer correctement les boutons :

Dans l’ancien Paywall Builder, ajoutez un bouton et assignez-lui une action prédéfinie ou un identifiant d’action personnalisé.
Écrivez du code dans votre application pour gérer chaque action assignée.

Ce guide explique comment gérer les actions personnalisées et prédéfinies dans votre code.

Warning

Seuls les achats, les restaurations, les fermetures de paywall et l’ouverture d’URL sont gérés automatiquement. Toutes les autres actions de bouton nécessitent une implémentation appropriée dans le code de l’application.

Fermer les paywalls

Pour ajouter un bouton qui ferme votre paywall :

Dans le Paywall Builder, ajoutez un bouton et assignez-lui l’action Close.
Dans le code de votre application, implémentez un handler pour l’action close qui ferme le paywall.

Info

Dans le SDK React Native, l’action close déclenche la fermeture du paywall par défaut. Vous pouvez toutefois remplacer ce comportement dans votre code si nécessaire. Par exemple, la fermeture d’un paywall peut déclencher l’ouverture d’un autre.

Pour un composant React, gérez l’action de fermeture via des props de gestionnaire d’événements individuels :


function MyPaywall({ paywall }) {
  const onCloseButtonPress = useCallback<EventHandlers['onCloseButtonPress']>(() => {
    // Handle close button press - navigate away or hide component
    navigation.goBack();
  }, [navigation]);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onCloseButtonPress={onCloseButtonPress}
    />
  );
}

Pour la présentation modale, implémentez le gestionnaire de fermeture :


const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
    onCloseButtonPress() {
        return true; // allow paywall closing
    }
});

Ouvrir des URLs depuis les paywalls

Tip

Si vous souhaitez ajouter un groupe de liens (par exemple, les conditions d’utilisation et la restauration des achats), ajoutez un élément Link dans le Paywall Builder et gérez-le de la même façon que les boutons avec l’action Open URL.

Pour ajouter un bouton qui ouvre un lien depuis votre paywall (par exemple, Terms of use ou Privacy policy) :

Dans le Paywall Builder, ajoutez un bouton, assignez-lui l’action Open URL et saisissez l’URL à ouvrir.
Dans le code de votre application, implémentez un gestionnaire pour l’action openUrl qui ouvre l’URL reçue dans un navigateur.

Info

Dans le SDK React Native, l’action openUrl déclenche l’ouverture de l’URL par défaut. Vous pouvez toutefois modifier ce comportement dans votre code si nécessaire.

Pour un composant React, gérez l’ouverture des URL via la prop du gestionnaire d’événements :


function MyPaywall({ paywall }) {
  const onUrlPress = useCallback<EventHandlers['onUrlPress']>((url) => {
    Linking.openURL(url);
  }, []);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onUrlPress={onUrlPress}
    />
  );
}

Pour la présentation modale, implémentez le gestionnaire d’URL :


const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
    onUrlPress(url) {
        Linking.openURL(url);
        return false; // Keep paywall open
    },
});

Se connecter à l’application

Pour ajouter un bouton permettant aux utilisateurs de se connecter à votre application :

Dans le Paywall Builder, ajoutez un bouton et assignez-lui l’action Login.
Dans le code de votre application, implémentez un gestionnaire pour l’action login qui identifie votre utilisateur.

Pour le composant React, gérez la connexion via la prop du gestionnaire d’événements :


function MyPaywall({ paywall }) {
  const onCustomAction = useCallback<EventHandlers['onCustomAction']>((actionId) => {
    if (actionId === 'login') {
      navigation.navigate('Login');
    }
  }, [navigation]);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onCustomAction={onCustomAction}
    />
  );
}

Pour une présentation modale, implémentez le gestionnaire de connexion :


const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
    onCustomAction(actionId) {
        if (actionId === 'login') {
            navigation.navigate('Login');
        }
    }
});

Gérer les actions personnalisées

Pour ajouter un bouton qui gère d’autres actions :

Dans le Paywall Builder, ajoutez un bouton, assignez-lui l’action Custom, et donnez-lui un identifiant.
Dans le code de votre application, implémentez un gestionnaire pour l’identifiant d’action que vous avez créé.

Par exemple, si vous avez un autre ensemble d’offres d’abonnement ou d’achats uniques, vous pouvez ajouter un bouton qui affichera un autre paywall :

Pour un composant React, gérez les actions personnalisées via la prop du gestionnaire d’événements :


function MyPaywall({ paywall }) {
  const onCustomAction = useCallback<EventHandlers['onCustomAction']>((actionId) => {
    if (actionId === 'openNewPaywall') {
      // Display another paywall
    }
  }, []);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onCustomAction={onCustomAction}
    />
  );
}

Pour la présentation modale, implémentez des gestionnaires d’actions personnalisés :

const unsubscribe = view.setEventHandlers({
    onCustomAction(actionId) {
        if (actionId === 'openNewPaywall') {
            // Display another paywall
        }
    },
});