Paso 2. Añadir datos a la página del paywall

Una vez que hayas recibido todos los datos de producto necesarios, es hora de mapearlos al bonito paywall que diseñaste en FlutterFlow. En este ejemplo, mapearemos el título del producto y su precio.

Paso 2.1. Añadir el título del producto a la página del paywall

  1. Haz doble clic en el texto del producto en tu página del paywall. En la ventana Set from Variable, busca la variable getPaywallProductResult y selecciónala.
ff-paywall-text.webp
  1. Rellena los campos de la siguiente manera:
  • 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: Cualquier valor; en el ejemplo es product.title
ff-product.webp
  1. Haz clic en Confirm para guardar los cambios.

Paso 2.2. Añadir el texto del precio a la página del paywall

Repite los pasos del Paso 2.1 para el texto del precio como se muestra a continuación:

  1. Haz doble clic en el texto del precio en tu página del paywall. En la ventana Set from Variable, busca la variable getPaywallProductResult y selecciónala.
ff-price.webp
  1. Rellena los campos de la siguiente manera:
  • 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: Cualquier valor; en el ejemplo es product.price
  1. Haz clic en el botón Confirm para guardar los cambios.

Añadir el precio en moneda local a la página del paywall

  1. Haz doble clic en el precio en tu página del paywall. En la ventana Set from Variable, busca la variable getPaywallProductResult y selecciónala.

  2. Rellena los campos de la siguiente manera:

  • 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: Cualquier valor; en el ejemplo es price.amount
  1. Haz clic en Confirm para guardar los cambios.

¡Y voilà! Ahora, al lanzar tu app, mostrará los datos del producto del paywall de Adapty directamente en tu página del paywall. Es hora de permitir que tus usuarios compren este producto.