Skip to main content
Version: 3.0

Step 2. Add data to paywall page

Once you've received all the necessary product data, it's time to map it to the beautiful paywall you designed in FlutterFlow. In this example, we'll map the product title and its price.

Step 2.1. Add product title to paywall page

  1. Double-click the product text on your paywall page.
  1. In the Set from Variable window, search for getPaywallProductResult variable and choose it.
  1. Fill in the fields as follows:
ParameterValue
Available OptionsData Structured Field
Select Fieldvalue
Available OptionsData as Index
List Index OptionsFirst
Available OptionsData Structured Field
Select FieldLocalized Title
Default Variable Valuenull
UI Builder Display ValueAnything, in the example, it's product.title
  1. Click the Confirm button to save the changes.

Step 2.2. Add price text to paywall page

Repeat the steps from Step 2.1 for the price text as shown below:

  1. Double-click the price text on your paywall page.
  1. Fill in the fields as follows:
ParameterValue
Search variablegetPaywallProductResult
Available OptionsData Structured Field
Select Fieldvalue
Available OptionsData as Index
List Index OptionsFirst
Available OptionsData Structured Field
Select Fieldprice
Available OptionsData Structured Field
Select FieldLocalizedString
Default Variable Valuenull
UI Builder Display ValueAnything, in the example, it's product.price
  1. Click the Confirm button to save the changes.

Step 2.2. Add price in local currency to paywall page

  1. Double-click the price on your paywall page.

  2. Fill in the fields as follows:

ParameterValue
Search variablegetPaywallProductResult
Available OptionsData Structured Field
Select Fieldvalue
Available OptionsData as Index
List Index OptionsFirst
Available OptionsData Structured Field
Select Fieldprice
Available OptionsData Structured Field
Select Fieldamount
Available OptionsDecimal
Decimal TypeAutomatic
Default Variable Valuenull
UI Builder Display ValueAnything, in the example, it's price.amount
  1. Click the Confirm button to save the changes.

And voilà! Now, when you launch your app, it will display the product data from the Adapty paywall directly on your paywall page! It's time to let your users purchase this product.