---
title: "Kích hoạt mua hàng"
description: "Thêm flow hoặc paywall trong Adapty để hiển thị sản phẩm của bạn, sau đó gắn vào một placement."
---

:::info
Để tiếp tục với hướng dẫn này, hãy đảm bảo bạn đã hoàn thành [tích hợp cửa hàng](integrate-payments) và tạo ít nhất một sản phẩm như mô tả trong [hướng dẫn thêm sản phẩm](quickstart-products) trước đó.
:::

Bây giờ bạn đã có sản phẩm, bạn cần một cách để hiển thị chúng cho người dùng. Adapty cung cấp cho bạn ba lựa chọn:
- **Flow Builder (nên dùng)**: Trình chỉnh sửa trực quan không cần code cho toàn bộ hành trình mua hàng. Adapty SDK render kết quả trực tiếp, nên bạn không cần viết code UI.
- **Paywall thủ công**: Bạn tự tạo paywall, gắn sản phẩm vào đó và tự render UI trong code ứng dụng.
- **Adapty Paywall Builder (Legacy)**: Trình chỉnh sửa paywall không cần code.

Cả hai lựa chọn đều kết thúc theo cùng một cách: bạn gắn thứ mình đã tạo vào một [placement](placements). Placement là thứ ứng dụng của bạn gọi tại runtime để lấy nội dung phù hợp cho đúng người dùng.
<Tabs groupId="purchase-setup" queryString>
<TabItem value="flow-builder" label="Use the Flow Builder" default>

:::important
Flow Builder hiện hỗ trợ iOS và Android SDK v4 trở lên. Hỗ trợ cho các nền tảng khác sẽ sớm ra mắt.
:::

Một flow là một hoặc nhiều màn hình có sản phẩm được nhúng trực tiếp. Bạn thiết kế nó trong [Flow Builder](adapty-flow-builder) — không cần viết code.

SDK của Adapty hiển thị các flow trực tiếp trên từng nền tảng. App của bạn gọi `getFlow`, và SDK sẽ hiển thị các màn hình, xử lý mua hàng và ghi lại các sự kiện. Không cần code UI riêng, không cần paywall để duy trì song song.
## 1. Tạo flow \{#1-build-the-flow\}

1. Vào [**Flows**](https://app.adapty.io/flows) trong menu chính của Adapty.
2. Nhấn **Create flow** và thiết kế flow của bạn.

Tìm hiểu thêm về [Adapty Flow Builder](adapty-flow-builder).

Các hướng dẫn theo mẫu dưới đây sẽ hướng dẫn từng bước cho những pattern phổ biến nhất:

<CustomDocCardList ids={['basic-paywall-screen', 'show-plans-bottom-sheet', 'paywall-with-tabs', 'paywall-features-per-product', 'onboarding-flow-tutorial']} />

Sau khi flow đã được lưu và xuất bản, hãy tiến hành kết nối nó vào một placement.
:::warning
Đừng quên xuất bản flow! Nếu bạn không xuất bản, bạn sẽ không thể thêm flow vào placement.
:::
### 2. Thêm flow vào placement \{#2-add-the-flow-to-a-placement\}

Tạo một <InlineTooltip tooltip="placement">Placement là một điểm cụ thể trong ứng dụng của bạn nơi bạn hiển thị flow, paywall, onboarding hoặc A/B test. Placement cho phép bạn nhắm mục tiêu đến các [đối tượng](audience) cụ thể với nội dung của mình. Tìm hiểu thêm về [placements](placements).</InlineTooltip> để ứng dụng của bạn có thể yêu cầu flow trong thời gian chạy.

Hãy bắt đầu với placement quan trọng nhất — placement onboarding. Sau đó, bạn có thể thêm nhiều [placement có ý nghĩa hơn](choose-meaningful-placements) trong suốt hành trình người dùng.
1. Truy cập [**Placements**](https://app.adapty.io/placements) trong menu chính của Adapty và chuyển sang tab **Flows**.
2. Nhấp **Create placement**.
3. Nhập **Placement name** (ví dụ: `main` hoặc `onboarding`). Đây là tên định danh nội bộ trong Adapty Dashboard.
4. Nhập **Placement ID**. Bạn sẽ dùng ID này trong Adapty SDK để tải flow của placement.
5. Nhấp **Run flow** và chọn flow bạn vừa tạo.
6. Nhấp **Save & publish**.
Trong code ứng dụng của bạn, bạn chỉ cần hardcode các placement ID. Mọi thứ khác — flow nào chạy, sản phẩm nào được bán, giao diện trông như thế nào — đều được cấu hình trên Adapty Dashboard và có thể thay đổi bất cứ lúc nào mà không cần cập nhật ứng dụng.

:::tip
Adapty cho phép bạn hiển thị các flow khác nhau cho các nhóm người dùng khác nhau và phân tích hiệu suất. Tìm hiểu thêm về [đối tượng](audience) và [A/B test](ab-tests).
:::

</TabItem>
<TabItem value="manual-paywall" label="Implement paywall manually">
<div style={{
    maxWidth: '560px',
    margin: '0 auto 2rem',
    position: 'relative',
    aspectRatio: '16/9',
    width: '100%'
}}>
    <iframe
        style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%'
        }}
        src="https://www.youtube.com/embed/e4o7Z2tUGL8?si=ipwbW3VVN0fIg0R0"
        title="YouTube video player"
        frameBorder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        referrerPolicy="strict-origin-when-cross-origin"
        allowFullScreen
    />
</div>
Một paywall là container được cấu hình từ xa chứa một hoặc nhiều sản phẩm. Adapty cung cấp danh sách sản phẩm và một JSON payload [Remote Config](customize-paywall-with-remote-config) tùy chọn — code ứng dụng của bạn đọc chúng và tự dựng giao diện.

:::tip
Muốn thiết lập Adapty bằng lập trình? Bạn có thể hoàn thành bước này bằng [Developer CLI](developer-cli-quickstart).
:::
### 1. Tạo một paywall \{#create-a-paywall\}

1. Vào [**Paywalls**](https://app.adapty.io/paywalls) trong menu chính của Adapty.
2. Nhấn **Create paywall**.
3. Nhập **Paywall name**. Đây là tên định danh nội bộ trong Adapty Dashboard.
4. Nhấn **Add product** và chọn các sản phẩm muốn hiển thị trên paywall.
5. (Tùy chọn) Mở tab **Remote config** và thêm JSON payload mà ứng dụng cần (tiêu đề, nội dung, feature flag). Xem [Thiết kế paywall với Remote Config](customize-paywall-with-remote-config) để biết thêm chi tiết.
6. Nhấn **Create as a draft**, sau đó xuất bản khi sẵn sàng.

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

Bạn sẽ render paywall này trong code ứng dụng của mình. <InlineTooltip tooltip="tự triển khai paywall">Xem hướng dẫn cho nền tảng của bạn: [iOS](ios-implement-paywalls-manually), [Android](android-implement-paywalls-manually), [React Native](react-native-implement-paywalls-manually), [Flutter](flutter-implement-paywalls-manually), [Unity](unity-implement-paywalls-manually).</InlineTooltip>
### 2. Thêm paywall vào một placement \{#2-add-the-paywall-to-a-placement\}

Tạo một <InlineTooltip tooltip="placement">Placement là một vị trí cụ thể trong ứng dụng của bạn, nơi bạn hiển thị flow, paywall, onboarding hoặc A/B test. Placement cho phép bạn nhắm mục tiêu đến các [đối tượng](audience) cụ thể với nội dung của mình. Tìm hiểu thêm về [placements](placements).</InlineTooltip> để ứng dụng có thể yêu cầu paywall khi chạy.

Hãy bắt đầu với placement cơ bản nhất — placement onboarding. Sau đó, bạn có thể thêm nhiều [placement có ý nghĩa hơn](choose-meaningful-placements) trong suốt hành trình người dùng.
1. Vào [**Placements**](https://app.adapty.io/placements) trong menu chính của Adapty và chuyển sang tab **Paywalls**.
2. Nhấn **Create placement**.
3. Nhập **Placement name** (ví dụ: `main` hoặc `onboarding`). Đây là định danh nội bộ trong Adapty Dashboard.
4. Nhập **Placement ID**. Bạn sẽ dùng ID này trong SDK để tải paywall của placement.
5. Nhấn **Run paywall** và chọn paywall vừa tạo.
6. Nhấn **Save & publish**.

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

Trong code ứng dụng, bạn chỉ cần hardcode các placement ID. Mọi thứ còn lại — paywall nào sẽ chạy, sản phẩm nào được bán, Remote Config — đều được cấu hình trong Adapty Dashboard và có thể thay đổi bất kỳ lúc nào mà không cần cập nhật ứng dụng.
:::tip
Adapty cho phép bạn hiển thị các paywall khác nhau cho từng nhóm người dùng và phân tích hiệu suất. Tìm hiểu thêm về [đối tượng](audience) và [A/B test](ab-tests).
:::

</TabItem>
<TabItem value="paywall-builder" label="Adapty Paywall Builder (Legacy)">

Paywall được xây dựng trong [Paywall Builder](adapty-paywall-builder) là màn hình không cần code với các sản phẩm được nhúng trực tiếp. Adapty SDK render natively, vì vậy bạn không cần viết code UI.
:::warning
Paywall Builder vẫn hoạt động đầy đủ, nhưng Adapty sẽ không bổ sung tính năng mới hay cập nhật cho nó nữa. Với các dự án mới, hãy sử dụng [Flow Builder](adapty-flow-builder) thay thế.
:::
### 1. Xây dựng paywall \{#1-build-the-paywall\}

1. Vào [**Paywalls**](https://app.adapty.io/paywalls) trong menu chính của Adapty.
2. Nhấp **Create paywall**.
3. Nhập **Paywall name**. Đây là tên định danh nội bộ trong Adapty Dashboard.
4. Nhấp **Add product** và chọn các sản phẩm để hiển thị trên paywall.
5. Mở tab **Builder & Generator**. Tạo paywall từ template hoặc tạo bằng AI.
6. Bật toggle **Show on device** để SDK có thể render nó.

### 2. Thêm paywall vào một placement \{#2-add-the-paywall-to-a-placement\}

Tạo một <InlineTooltip tooltip="placement">Placement là một vị trí cụ thể trong ứng dụng của bạn, nơi bạn hiển thị flow, paywall, onboarding hoặc A/B test. Placement cho phép bạn nhắm mục tiêu đến các [đối tượng](audience) cụ thể với nội dung của mình. Tìm hiểu thêm về [placement](placements).</InlineTooltip> để ứng dụng của bạn có thể yêu cầu paywall trong thời gian chạy.
1. Truy cập [**Placements**](https://app.adapty.io/placements) trong menu chính của Adapty và chuyển sang tab **Paywalls**.
2. Nhấp vào **Create placement**.
3. Nhập **Placement name** (ví dụ: `main` hoặc `onboarding`). Đây là mã định danh nội bộ trong Adapty Dashboard.
4. Nhập **Placement ID**. Bạn sẽ dùng ID này trong SDK để tải paywall của placement.
5. Nhấp vào **Run paywall** và chọn paywall bạn đã tạo.
6. Nhấp vào **Save & publish**.

Trong code ứng dụng, bạn chỉ cần hardcode các placement ID. Tất cả những thứ còn lại — paywall nào đang chạy, sản phẩm nào được bán, giao diện trông như thế nào — đều được cấu hình trong Adapty Dashboard và có thể thay đổi bất kỳ lúc nào mà không cần cập nhật ứng dụng.

</TabItem>
</Tabs>
## Các bước tiếp theo \{#next-steps\}

Giờ bạn đã có nội dung để SDK phân phối. Tiếp theo, hãy [tích hợp Adapty SDK](quickstart-sdk) vào ứng dụng của bạn và bắt đầu lấy placement.