---
title: "Paso 1. Crear el flujo para mostrar los datos del paywall"
description: "Configura los flujos de acción de feature flags en Adapty para personalizar los journeys de suscripción de los usuarios."
---

:::important
Al usar el plugin de FlutterFlow, no puedes usar paywalls creados en el Paywall Builder de Adapty. Debes implementar tu propia página de paywall en FlutterFlow y conectarla a Adapty.
:::

Después de añadir la librería de Adapty como dependencia a tu proyecto de FlutterFlow, es momento de construir el flujo que **recupera los datos del paywall y los productos de Adapty, y los muestra en el paywall que has diseñado en FlutterFlow**.

Primero necesitamos recibir los datos del paywall desde Adapty. Empezaremos solicitando el paywall de Adapty, luego sus productos asociados, y finalmente comprobaremos si los datos se recibieron correctamente. Si es así, mostraremos el título y el precio del producto en la página del paywall. En caso contrario, mostraremos un mensaje de error.

Antes de continuar, asegúrate de haber hecho lo siguiente:

1. [Crear al menos un paywall y añadir al menos un producto](create-paywall) en el Adapty Dashboard.
2. [Crear al menos un placement](create-placement) y [añadir tu paywall](add-audience-paywall-ab-test) en el Adapty Dashboard.

¡Empecemos!

## Paso 1.1. Solicitar el paywall de Adapty \{#step-11-request-adapty-paywall\}
Como se mencionó, para mostrar datos en tu paywall de FlutterFlow, primero necesitamos recuperarlos desde Adapty. El primer paso es obtener el paywall de Adapty. Así se hace:

1. Abre tu pantalla de paywall y cambia a la sección **Actions** en el panel derecho. Ahí, abre el **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. En la ventana **Select Action Trigger**, selecciona **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. Haz clic en **Add Action**. Luego, busca la acción personalizada `getPaywall` y selecciónala.

  
    <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. En la sección **Set Actions Arguments**, introduce el ID real del [placement que has creado](create-placement) en el Adapty Dashboard que incluye el paywall. En este ejemplo es `monthly`. ¡Asegúrate de usar tu ID de placement real!

  
    <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 has [localizado](localizations-and-locale-codes) tu paywall en el dashboard de Adapty, también puedes configurar el argumento **locale**.

6. En **Action Output Variable Name**, crea una nueva variable y nómbrala `getPaywallResult`. La usaremos en el siguiente paso para referenciar el paywall de Adapty y solicitar sus productos.

  
    <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 */
    }}
  />
  

## Paso 1.2. Solicitar los productos del paywall de Adapty \{#step-12-request-adapty-paywall-products\}

¡Genial! Ya hemos recuperado el paywall de Adapty. Ahora, obtengamos los productos asociados a este paywall:

1. Haz clic en **+** bajo la acción creada y selecciona **Add Action**. Esta acción recibirá los productos del paywall de Adapty. Para ello, busca y selecciona `getPaywallProducts`.

2. En la sección **Set Actions Arguments**, selecciona la variable `getPaywallResult` creada anteriormente.

  
    <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. Rellena los demás campos de la siguiente manera:
  - **Available Options**: Data Structured Field
  - **Select Field**: value
  - **Available Options**: No further changes

  
    <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. Haz clic en **Confirm**.
5. En **Action Output Variable Name**, crea una nueva variable y nómbrala `getPaywallProductsResult`. La usaremos para vincular el paywall que diseñaste en FlutterFlow con los datos del paywall de 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 */
    }}
  />
  

## Paso 1.3. Añadir comprobación de si el paywall se cargó correctamente \{#step-13-add-check-if-the-paywall-uploaded-successfully\}

Antes de continuar, verifiquemos que el paywall de Adapty se recibió correctamente. Si es así, podemos actualizar el paywall con los datos de los productos. Si no, gestionaremos el error. Así se añade la comprobación:

1. Haz clic en **+** y luego en **Add Conditional**.

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

2. En la sección **Action Output**, selecciona la variable de salida de acción creada anteriormente (`getPaywallResult` en nuestro ejemplo).

  
    <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. Para verificar que el paywall de Adapty se recibió, comprueba la presencia de un campo con valor. Rellena los campos de la siguiente manera:
 - **Available Options**: Has Field
 - **Field (AdaptyGetPaywallResult)**: value

4. Haz clic en **Confirm** para finalizar la condición.

## Paso 1.4. Registrar la visualización del paywall \{#step-14-log-the-paywall-review\}

Para asegurarte de que los análisis de Adapty registran la visualización del paywall, necesitamos registrar este evento. Sin este paso, la visualización no se contabilizará en los análisis. Así se hace:

1. Haz clic en **+** bajo la etiqueta **TRUE** y haz clic en **Add Action**.
2. En el campo **Select Action**, busca y elige **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. Haz clic en **Value** en el área **Set Action Arguments** y elige la variable `getPaywallResult` que hemos creado. Esta variable contiene los datos del paywall.
4. Rellena los campos de la siguiente manera:
  - **Available Options**: Data Structured Field
  - **Select Field**: value

5. Haz clic en **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 */
    }}
  />
  

## Paso 1.5. Mostrar error si el paywall no se recibe \{#step-15-show-error-if-paywall-not-received\}

Si el paywall de Adapty no se recibe, necesitas [gestionar el error](error-handling-on-flutter-react-native-unity#system-storekit-codes). En este ejemplo, simplemente mostraremos un mensaje de alerta.

1. Añade una acción **Informational Dialog** a la etiqueta **FALSE**.
2. En el campo **Title**, añade el texto que quieras ver como título del diálogo. En este ejemplo, es **Error**.
3. Haz clic en **Value** en el cuadro **Message**.

4. Rellena los campos de la siguiente manera:
  - **Set Variable**: variable `getPaywallProductResult` que hemos creado
  - **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. Haz clic en **Confirm**.
6. Añade una acción **Terminate action** al flujo **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. Haz clic en **Close** en la esquina superior derecha.

  ¡Felicidades! Has recibido correctamente los datos del producto. Ahora, [vincúlalos al paywall que has diseñado en FlutterFlow](ff-add-variables-to-paywalls).