---
title: "Bước 2. Thêm dữ liệu vào trang paywall"
description: "Thêm biến Feature Flag vào paywall trong Adapty."
---

Sau khi đã [nhận được toàn bộ dữ liệu sản phẩm cần thiết](ff-action-flow), đã đến lúc ánh xạ chúng vào paywall đẹp mắt mà bạn đã thiết kế trong FlutterFlow. Trong ví dụ này, chúng ta sẽ ánh xạ tiêu đề sản phẩm và giá của nó.

## Bước 2.1. Thêm tiêu đề sản phẩm vào trang paywall \{#step-21-add-product-title-to-paywall-page\}

1. Nhấp đúp vào văn bản sản phẩm trên trang paywall của bạn. Trong cửa sổ **Set from Variable**, tìm kiếm biến `getPaywallProductResult` và chọn nó.

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

2. Điền vào các trường như sau:
  - **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**: Tùy ý, trong ví dụ là `product.title`

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

3. Nhấp **Confirm** để lưu các thay đổi.

## Bước 2.2. Thêm văn bản giá vào trang paywall \{#step-22-add-price-text-to-paywall-page\}

Lặp lại các bước từ Bước 2.1 cho văn bản giá như hướng dẫn bên dưới:

1. Nhấp đúp vào văn bản giá trên trang paywall của bạn. Trong cửa sổ **Set from Variable**, tìm kiếm biến `getPaywallProductResult` và chọn nó.

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

2. Điền vào các trường như sau:

- **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**: Tùy ý, trong ví dụ là `product.price`

3. Nhấp nút **Confirm** để lưu các thay đổi.

### Thêm giá theo đơn vị tiền tệ địa phương vào trang paywall \{#add-price-in-local-currency-to-paywall-page\}

1. Nhấp đúp vào giá trên trang paywall của bạn. Trong cửa sổ **Set from Variable**, tìm kiếm biến `getPaywallProductResult` và chọn nó.

2. Điền vào các trường như sau:

- **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**: Tùy ý, trong ví dụ là `price.amount`

3. Nhấp **Confirm** để lưu các thay đổi.

Và thế là xong! Khi bạn khởi chạy ứng dụng, nó sẽ hiển thị dữ liệu sản phẩm từ paywall Adapty trực tiếp trên trang paywall của bạn!
Bây giờ hãy [cho phép người dùng mua sản phẩm này](ff-make-purchase).