Étape 1. Créer un flow pour afficher les données du paywall

Lorsque vous utilisez le plugin FlutterFlow, vous ne pouvez pas utiliser les paywalls créés dans le Paywall Builder d’Adapty. Vous devez implémenter votre propre page de paywall dans FlutterFlow et la connecter à Adapty.

Après avoir ajouté la bibliothèque Adapty en tant que dépendance à votre projet FlutterFlow, il est temps de construire le flow qui récupère les données de paywall et de produit Adapty et les affiche sur le paywall que vous avez conçu dans FlutterFlow.

Nous devons d’abord recevoir les données du paywall depuis Adapty. Nous allons commencer par demander le paywall Adapty, puis ses produits associés, et enfin vérifier si les données ont bien été reçues. En cas de succès, nous afficherons le titre et le prix du produit sur la page du paywall. Dans le cas contraire, nous afficherons un message d’erreur.

Avant de continuer, assurez-vous d’avoir effectué les étapes suivantes :

Créé au moins un paywall et ajouté au moins un produit dans l’Adapty Dashboard.
Créé au moins un placement et ajouté votre paywall à celui-ci dans l’Adapty Dashboard.

C’est parti !

Étape 1.1. Récupérer le paywall Adapty

Comme mentionné, pour afficher des données dans votre paywall FlutterFlow, il faut d’abord les récupérer depuis Adapty. La première étape consiste à obtenir le paywall Adapty lui-même. Voici comment procéder :

Ouvrez votre écran de paywall et passez à la section Actions dans le panneau de droite. Là, ouvrez l’Action Flow Editor.

Dans la fenêtre Select Action Trigger, sélectionnez On Page Load.

Cliquez sur Add Action. Ensuite, recherchez l’action personnalisée getPaywall et sélectionnez-la.

Dans la section Set Actions Arguments, saisissez l’ID réel du placement que vous avez créé dans l’Adapty Dashboard qui inclut le paywall. Dans cet exemple, c’est monthly. Assurez-vous d’utiliser votre vrai ID de placement !

Si vous avez localisé votre paywall dans l’Adapty Dashboard, vous pouvez également configurer l’argument locale.
Dans Action Output Variable Name, créez une nouvelle variable et nommez-la getPaywallResult. Nous l’utiliserons à l’étape suivante pour référencer le paywall Adapty et demander ses produits.

Étape 1.2. Récupérer les produits du paywall Adapty

Parfait ! Nous avons récupéré le paywall Adapty. Récupérons maintenant les produits associés à ce paywall :

Cliquez sur + sous l’action créée et sélectionnez Add Action. Cette action recevra les produits du paywall Adapty. Pour cela, recherchez et sélectionnez getPaywallProducts.
Dans la section Set Actions Arguments, sélectionnez la variable getPaywallResult créée précédemment.

Remplissez les autres champs comme suit :

Available Options : Data Structured Field
Select Field : value
Available Options : Aucune autre modification

Cliquez sur Confirm.
Dans Action Output Variable Name, créez une nouvelle variable et nommez-la getPaywallProductsResult. Nous l’utiliserons pour associer le paywall que vous avez conçu dans FlutterFlow aux données de paywall Adapty.

Étape 1.3. Vérifier si le paywall a été chargé avec succès

Avant de continuer, vérifions que le paywall Adapty a bien été reçu. Si c’est le cas, nous pourrons mettre à jour le paywall avec les données produit. Sinon, nous gérerons l’erreur. Voici comment ajouter la vérification :

Cliquez sur + puis sur Add Conditional.
Dans la section Action Output, sélectionnez la variable de sortie d’action créée précédemment (getPaywallResult dans notre exemple).

Pour vérifier que le paywall Adapty a bien été reçu, vérifiez la présence d’un champ avec une valeur. Remplissez les champs comme suit :

Available Options : Has Field
Field (AdaptyGetPaywallResult) : value

Cliquez sur Confirm pour finaliser la condition.

Étape 1.4. Enregistrer l’affichage du paywall

Pour qu’Adapty Analytics comptabilise l’affichage du paywall, vous devez enregistrer cet événement. Sans cette étape, la vue ne sera pas prise en compte dans les analyses. Voici comment procéder :

Cliquez sur + sous le libellé TRUE et cliquez sur Add Action.
Dans le champ Select Action, recherchez et sélectionnez logShowPaywall.

Cliquez sur Value dans la zone Set Action Arguments et choisissez la variable getPaywallResult que nous avons créée. Cette variable contient les données du paywall.
Renseignez les champs comme suit :

Available Options : Data Structured Field
Select Field : value

Cliquez sur Confirm.

Étape 1.5. Afficher une erreur si le paywall n’est pas reçu

Si le paywall Adapty n’est pas reçu, vous devez gérer l’erreur. Dans cet exemple, nous afficherons simplement un message d’alerte.

Ajoutez une action Informational Dialog au label FALSE.
Dans le champ Title, ajoutez le texte que vous souhaitez afficher comme titre du dialogue. Dans cet exemple, c’est Error.
Cliquez sur Value dans la zone Message.
Remplissez les champs comme suit :

Set Variable : variable getPaywallProductResult que nous avons créée
Available Options : Data Structure Field
Select Field : error
Available Options : Data Structure Field
Select Field : errorMessage

Cliquez sur Confirm.
Ajoutez une Terminate action au flow FALSE.

Cliquez sur Close en haut à droite.

Félicitations ! Vous avez récupéré les données du produit avec succès. Maintenant, associez-les à votre paywall conçu dans FlutterFlow.