Étape 2. Ajouter des données à la page paywall

Une fois que vous avez récupéré toutes les données produit nécessaires, il est temps de les associer au beau paywall que vous avez conçu dans FlutterFlow. Dans cet exemple, nous allons associer le titre du produit et son prix.

Étape 2.1. Ajouter le titre du produit à la page paywall

  1. Double-cliquez sur le texte du produit dans votre page paywall. Dans la fenêtre Set from Variable, recherchez la variable getPaywallProductResult et sélectionnez-la.
ff-paywall-text.webp
  1. Remplissez les champs comme suit :
  • Available Options : Data Structured Field
  • Select Field : value
  • Available Options : Item at Index
  • List Index Options : First
  • Available Options : Data Structured Field
  • Select Field : localizedTitle
  • Default Variable Value : null
  • UI Builder Display Value : N’importe quoi, dans l’exemple c’est product.title
ff-product.webp
  1. Cliquez sur Confirm pour enregistrer les modifications.

Étape 2.2. Ajouter le texte du prix à la page paywall

Répétez les étapes de l’Étape 2.1 pour le texte du prix comme indiqué ci-dessous :

  1. Double-cliquez sur le texte du prix dans votre page paywall. Dans la fenêtre Set from Variable, recherchez la variable getPaywallProductResult et sélectionnez-la.
ff-price.webp
  1. Remplissez les champs comme suit :
  • Available Options : Data Structured Field
  • Select Field : value
  • Available Options : Item at Index
  • List Index Options : First
  • Available Options : Data Structured Field
  • Select Field : price
  • Default Variable Value : null
  • UI Builder Display Value : N’importe quoi, dans l’exemple c’est product.price
  1. Cliquez sur le bouton Confirm pour enregistrer les modifications.

Ajouter le prix en devise locale à la page paywall

  1. Double-cliquez sur le prix dans votre page paywall. Dans la fenêtre Set from Variable, recherchez la variable getPaywallProductResult et sélectionnez-la.

  2. Remplissez les champs comme suit :

  • Available Options : Data Structured Field
  • Select Field : value
  • Available Options : Item at Index
  • List Index Options : First
  • Available Options : Data Structured Field
  • Select Field : price
  • Available Options : Data Structured Field
  • Select Field : amount
  • Available Options : Decimal
  • Decimal Type : Automatic
  • Default Variable Value : null
  • UI Builder Display Value : N’importe quoi, dans l’exemple c’est price.amount
  1. Cliquez sur Confirm pour enregistrer les modifications.

Et voilà ! Désormais, au lancement de votre application, elle affichera les données produit du paywall Adapty directement sur votre page paywall ! Il est temps de laisser vos utilisateurs acheter ce produit.