---
title: "Étape 1. Créer un flow pour afficher les données du paywall"
description: "Créez un flow d'action FlutterFlow qui récupère les données de paywall et de produit Adapty pour votre propre page de paywall."
---

:::important
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 :

1. [Créé au moins un paywall et ajouté au moins un produit](create-paywall) dans l'Adapty Dashboard.
2. [Créé au moins un placement](create-placement) et [ajouté votre paywall à celui-ci](add-audience-paywall-ab-test) dans l'Adapty Dashboard.

C'est parti !

## Étape 1.1. Récupérer le paywall Adapty \{#step-11-request-adapty-paywall\}

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 :

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

    <img src="/assets/shared/img/ff_action_flow.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

2. Dans la fenêtre **Select Action Trigger**, sélectionnez **On Page Load**.
  
    <img src="/assets/shared/img/ff_action_trigger.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

3. Cliquez sur **Add Action**. Ensuite, recherchez l'action personnalisée `getPaywall` et sélectionnez-la.

    <img src="/assets/shared/img/ff_getpaywall.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

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

    <img src="/assets/shared/img/ff_placementid.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

5. Si vous avez [localisé](localizations-and-locale-codes) votre paywall dans l'Adapty Dashboard, vous pouvez également configurer l'argument **locale**.

6. 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.

  
    <img src="/assets/shared/img/ff_getpaywallresult.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

## Étape 1.2. Récupérer les produits du paywall Adapty \{#step-12-request-adapty-paywall-products\}

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

1. 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`.

2. Dans la section **Set Actions Arguments**, sélectionnez la variable `getPaywallResult` créée précédemment.

    <img src="/assets/shared/img/ff_getpaywallproduct.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

3. Remplissez les autres champs comme suit :
  - **Available Options** : Data Structured Field
  - **Select Field** : value
  - **Available Options** : Aucune autre modification

    <img src="/assets/shared/img/ff_getpaywallresult2.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

4. Cliquez sur **Confirm**.
5. 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.

    <img src="/assets/shared/img/ff_getpaywallproductsresult.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

## Étape 1.3. Vérifier si le paywall a été chargé avec succès \{#step-13-add-check-if-the-paywall-uploaded-successfully\}

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 :

1. Cliquez sur **+** puis sur **Add Conditional**.

2. Dans la section **Action Output**, sélectionnez la variable de sortie d'action créée précédemment (`getPaywallResult` dans notre exemple).

    <img src="/assets/shared/img/ff-getpaywallresult.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

3. 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

4. Cliquez sur **Confirm** pour finaliser la condition.

## Étape 1.4. Enregistrer l'affichage du paywall \{#step-14-log-the-paywall-review\}

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 :

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

    <img src="/assets/shared/img/ff-logshowpaywall.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

3. 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.
4. Renseignez les champs comme suit :
  - **Available Options** : Data Structured Field
  - **Select Field** : value

5. Cliquez sur **Confirm**.

    <img src="/assets/shared/img/ff-lohsgowpaywallresult.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

## Étape 1.5. Afficher une erreur si le paywall n'est pas reçu \{#step-15-show-error-if-paywall-not-received\}

Si le paywall Adapty n'est pas reçu, vous devez [gérer l'erreur](error-handling-on-flutter-react-native-unity#system-storekit-codes). Dans cet exemple, nous afficherons simplement un message d'alerte.

1. Ajoutez une action **Informational Dialog** au label **FALSE**.
2. Dans le champ **Title**, ajoutez le texte que vous souhaitez afficher comme titre du dialogue. Dans cet exemple, c'est **Error**.
3. Cliquez sur **Value** dans la zone **Message**.

4. 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

  
    <img src="/assets/shared/img/ff-error.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

5. Cliquez sur **Confirm**.
6. Ajoutez une **Terminate action** au flow **FALSE**.

  
    <img src="/assets/shared/img/ff-terminate.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
  />
  

7. 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](ff-add-variables-to-paywalls).