Répondre aux actions de flow - Capacitor

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

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

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

Fermer les flows et les paywalls

Pour ajouter un bouton qui ferme votre flow ou paywall :

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

const view = await createFlowView(flow);

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

Sur Android, le bouton Retour système et le geste de retour déclenchent un événement onAndroidSystemBack distinct. Dans le SDK v4, il ne ferme plus le flow par défaut. Retournez true depuis le handler si vous souhaitez que le bouton Retour ferme le flow :

const unsubscribe = await view.setEventHandlers({
  onAndroidSystemBack() {
    return true; // close the flow when the Back button is pressed
  },
});

Ouvrir des URLs depuis les flows et les paywalls

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

1. Dans le builder, ajoutez un bouton, assignez-lui l’action Open URL et saisissez l’URL à ouvrir.
2. Si nécessaire, dans le code de votre application, implémentez un gestionnaire pour l’action openUrl qui ouvre l’URL reçue à votre façon.

const unsubscribe = await view.setEventHandlers({
  onUrlPress(url) {
    // Open the URL your own way, e.g. with the Capacitor Browser plugin
    Browser.open({ url });
    return false; // keep the flow open
  },
});

Gérer les actions personnalisées

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

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

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

const unsubscribe = await 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 :

1. Dans l’ancien Paywall Builder, ajoutez un bouton et assignez-lui soit une action existante, soit un identifiant d’action personnalisé.
2. Écrivez le code dans votre application pour gérer chaque action que vous avez assignée.

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

Fermer les paywalls

Pour ajouter un bouton permettant de fermer votre paywall :

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

const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
  onCloseButtonPress() {
    console.log('User closed paywall');
    return true; // Allow the paywall to close
  }
});

Ouvrir des URLs depuis les paywalls

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

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

const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
  onUrlPress(url) {
    window.open(url, '_blank');
    return false; // Don't close the paywall
  },
});

Se connecter à l’application

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

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

const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
  onCustomAction(actionId) {
    if (actionId === 'login') {
      // Navigate to login screen
      console.log('User requested login');
    }
  }
});

Gérer les actions personnalisées

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

1. Dans le Paywall Builder, ajoutez un bouton, attribuez-lui l’action Custom et donnez-lui un identifiant.
2. 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 paywall :

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