Step 1. Create flow to show paywall data

After adding the Adapty Plugin as a dependency to your FlutterFlow project, it's time to build the flow that retrieves Adapty paywall data and displays it on the paywall you've designed in FlutterFlow.

We first need to receive the paywall data from Adapty. We'll start by requesting the Adapty paywall, then its associated products, and finally checking if the data was successfully received. If successful, we’ll display the product title and price on the paywall page. Otherwise, we'll show an error message.

Before proceeding, make sure you've done the following:

1. Created at least one paywall and added at least one product to it in the Adapty Dashboard.
2. Created at last one placement and added your paywall to it in the Adapty Dashboard.

Let's get started!

Step 1.1. Request Adapty paywall

As mentioned, to display data in your FlutterFlow paywall, we first need to retrieve it from Adapty. The initial step is to get the Adapty paywall itself. Here’s how:

1. Open the Actions section in the right pane.

2. Open the Action Flow Editor.

3. In the Select Action Trigger window, choose On Page Load.

4. In the No Actions Created window, click the Add Action button.

5. In the Actions Flow Editor window, search for getPaywall custom action and choose it.

6. In the Set Actions Arguments section, enter the real ID of the placement you have created in the Adapty Dashboard that includes the paywall. In this example it's example_ab_test. Be sure to use your real placement ID!

7. In the Action Output Variable Name, create a new variable and name it getPaywallResult. We'll use this in the next step to reference the Adapty paywall and request its products.

Step 1.2. Request Adapty paywall products

Great! We’ve retrieved the Adapty paywall. Now, let's get the products associated with this paywall:

1. Click the plus (+) button below, click the Add Action button to add an action to receive Adapty paywall products. For this, search and choose getPaywallProducts.

2. In the Set Actions Arguments section, choose getPaywallResult variable created earlier.

3. Fill in the other fields as follows:

Parameter	Value
Available Options	Data Structured Field
Select Field	value

4. Click the Confirm button.
5. In the Action Output Variable Name, create a new variable and name it getPaywallProductsResult. We'll use this to map the paywall you designed in FlutterFlow with the Adapty paywall data.

Step 1.3. Add check if the paywall uploaded successfully

Before moving on, let’s verify that the Adapty paywall was received successfully. If so, we can update the paywall with the product data. If not, we’ll handle the error. Here's how to add the check:

1. Click the plus (+) button and click Add Conditional.

2. In the Action Output section, select the action output variable created earlier (getPaywallResult in our example).

3. To verify that the Adapty paywall was received, check for the presence of a field with a value. In the Available Options list, choose Has Field.

4. In the Field (AdaptyGetPaywallResult) list, choose value.
5. Click the Confirm button to finalize the condition.

Step 1.4. Log the paywall review

To ensure Adapty analytics track the paywall view, we need to log this event. Without this step, the view won’t be counted in the analytics. Here’s how:

1. Click the plus (+) button under the TRUE label and click Add Action.
2. In the Select Action field, search for and choose **logShowPaywall **.
3. Click the Value field in the Set Action Arguments area and choose the getPaywallResult variable we've created. This variable contains the paywall data.
4. Fill in the fields as follows:

Parameter	Value
Available Options	Data Structured Field
Select Field	value

5. Click the Confirm button.

Step 1.5. Show error if paywall not received

If the Adapty paywall is not received, you need to handle the error. In this example, we'll simply display an alert message.

1. Add an Informational Dialog action to the FALSE label.

2. In the Title field, add text you want to see as the dialog title. In this example, it's Error.
3. Click at the Value button of the Message box.

4. Fill in the fields as follows:

Parameter	Value
Set Variable	getPaywallProductResult variable we've created
Available Options	Data Structure Field
Select Field	error
Available Options	Data Structure Field
Select Field	errorMessage

5. Click the Confirm button.
6. Add a Terminate action to the FALSE flow.
7. Click the Close button in the top-right corner.

Congratulations! You’ve successfully received the product data. Now, let’s map it to your paywall you've designed in FlutterFlow.