---
title: "Thiết lập mua hàng"
description: "Gán sản phẩm cho màn hình, thêm phần tử sản phẩm, và kết nối nút mua hàng trong Flow Builder."
---

Để thiết lập mua hàng trên một màn hình, hãy thêm nút mua hàng và cấu hình hành động **Purchase** cho nút đó. Hành động này có thể nhắm đến một sản phẩm cụ thể hoặc sản phẩm mà người dùng chọn từ phần tử Products trên màn hình.

## Thêm sản phẩm \{#add-products\}

Phần tử sản phẩm là một thẻ hiển thị sản phẩm trên canvas.

Để thêm phần tử sản phẩm:

1. Trên canvas, nhấn **+** trên màn hình đích.
2. Chọn **Products**.
3. Chọn kiểu bố cục: danh sách dọc, danh sách ngang, băng chuyền tính năng, thẻ tính năng, danh sách banner, hoặc bottom sheet.

   

4. Chọn từng thẻ sản phẩm và gán sản phẩm cho nó trong dropdown ở bảng **Design**.

   :::important
   Phần tử sản phẩm chưa được gán sản phẩm sẽ [chặn tính năng xem trước và xuất bản](builder-save-publish#troubleshooting). Hãy gán sản phẩm hoặc xóa phần tử đó đi.
   :::

   

:::note
Bạn cũng có thể gắn hành động **Purchase** trực tiếp vào tương tác **On tap** của thẻ sản phẩm. Khi nhấn vào thẻ, thao tác mua hàng sẽ được kích hoạt mà không cần thêm nút mua hàng riêng.
:::

:::important
Nếu bạn xóa một nhóm sản phẩm và thay bằng nhóm mới, hãy kiểm tra lại tất cả các hành động và biến để đảm bảo chúng trỏ đúng đến nhóm mới. Các tham chiếu còn trỏ đến nhóm đã xóa sẽ [chặn tính năng xem trước và xuất bản](builder-save-publish#troubleshooting).
:::

## Thêm nút mua hàng \{#add-a-purchase-button\}

Nút mua hàng kích hoạt hành động **Purchase** khi người dùng nhấn vào.

Để thêm nút mua hàng:

1. Trên canvas, nhấn **+** trên màn hình.
2. Chọn **Button** và chọn kiểu nút.
3. Khi nút được chọn, mở tab **Interactions** ở bảng bên phải.
4. Nhấn **Add trigger** > **On tap**, rồi nhấn **Add action**.
5. Đặt **Action** thành **Purchase**, sau đó đặt **Product** thành một trong các tùy chọn:
   - `products.selectedProduct`: Mua sản phẩm mà người dùng đang chọn từ phần tử Products trên màn hình.
   - Một sản phẩm cụ thể: Luôn mua sản phẩm đó, bất kể người dùng chọn gì trên màn hình.

### Hiển thị giá trên nút \{#show-the-price-on-the-button\}

Để chèn giá của sản phẩm đang được chọn vào nhãn nút, sử dụng biến:

1. Khi nút được chọn, mở tab **Design** ở bảng bên phải.
2. Trong trường **Content**, đặt con trỏ vào vị trí muốn hiển thị giá.
3. Nhấn vào biểu tượng biến, chọn `products.selectedProduct`, rồi chọn thuộc tính `prod_price`. Biến đầy đủ sẽ là `products.selectedProduct.prod_price`.
4. Thêm văn bản tĩnh xung quanh biến — ví dụ: `Đăng ký với giá {prod_price}`.

Nhãn sẽ cập nhật khi người dùng chọn các sản phẩm khác nhau.

## Khôi phục giao dịch mua \{#restore-purchases\}

Để cho phép người dùng khôi phục các giao dịch mua trước đó, hãy thêm nút hoặc liên kết khôi phục vào màn hình.

Để thêm phần tử khôi phục giao dịch mua:

1. Trên canvas, nhấn **+** trên màn hình.
2. Chọn **Button**, rồi chọn **Links** cho liên kết văn bản hoặc kiểu nút khác cho nút có kiểu dáng.

3. Khi phần tử được chọn, mở tab **Interactions** ở bảng bên phải và nhấn **Add trigger**.
4. Chọn **On tap** và nhấn **Add action**.
5. Từ dropdown **Action**, chọn **Restore purchases**.

## Hiển thị các phần tử bổ sung dựa trên sản phẩm được chọn \{#display-additional-elements-based-on-the-selected-product\}

Nếu một màn hình có sản phẩm, bạn có thể hiển thị hoặc ẩn các phần tử khác tùy theo sản phẩm người dùng chọn.

Để thiết lập hiển thị có điều kiện:

1. Trong phần tử **Products**, chọn một thẻ sản phẩm.
2. Mở tab **Interactions** ở bảng bên phải và nhấn **Add trigger**.

3. Chọn **On tap** và nhấn **Add action**.
4. Từ dropdown **Action**, chọn **Show** hoặc **Hide**.
5. Chọn phần tử cần hiển thị hoặc ẩn khi sản phẩm đó được chọn.

## Xem sản phẩm trong flow \{#review-products-in-flow\}

Bảng **Products** ở thanh bên trái hiển thị các sản phẩm hiện có được ánh xạ đến từng màn hình trong flow.

Mỗi màn hình có hai phần:

- **Default** — một sản phẩm, được chọn sẵn khi màn hình tải.
- **Other** — các sản phẩm bổ sung có sẵn trên cùng màn hình đó.