---
title: "Bật tính năng mua hàng bằng cách sử dụng paywall trong Capacitor SDK"
description: "Tìm hiểu cách hiển thị paywall trong ứng dụng Capacitor của bạn với Adapty SDK."
---
Để bật tính năng in-app purchase, bạn cần nắm rõ ba khái niệm chính:
- **Sản phẩm** – bất cứ thứ gì người dùng có thể mua (gói đăng ký, consumable, quyền truy cập trọn đời)
- **Paywall** là các cấu hình xác định sản phẩm nào sẽ được cung cấp. Trong Adapty, paywall là cách duy nhất để lấy sản phẩm, nhưng thiết kế này cho phép bạn thay đổi danh sách cung cấp, giá cả và tổ hợp sản phẩm mà không cần chỉnh sửa code ứng dụng.
- **Placement** – vị trí và thời điểm hiển thị paywall trong ứng dụng (ví dụ: `main`, `onboarding`, `settings`). Bạn thiết lập paywall cho các placement trên dashboard, sau đó yêu cầu chúng theo placement ID trong code. Điều này giúp dễ dàng chạy A/B test và hiển thị các paywall khác nhau cho từng nhóm người dùng.
Adapty cung cấp cho bạn ba cách để bật tính năng mua hàng trong ứng dụng. Chọn một trong số đó tùy theo yêu cầu của ứng dụng:
| Cách triển khai | Độ phức tạp | Khi nào nên dùng |
|----------------------------|-------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| **Adapty Paywall Builder** | ✅ Dễ | Bạn [tạo một paywall hoàn chỉnh, sẵn sàng mua hàng trong trình tạo không cần code](quickstart-paywalls). Adapty tự động hiển thị paywall và xử lý toàn bộ flow mua hàng phức tạp, xác thực biên lai và quản lý gói đăng ký ở phía sau. |
| `makePurchase` | 🟡 Trung bình | Bạn tự xây dựng UI paywall trong code ứng dụng, nhưng vẫn lấy đối tượng paywall từ Adapty để duy trì sự linh hoạt trong danh sách sản phẩm. Xem [hướng dẫn](capacitor-quickstart-manual). |
| Observer mode | 🔴 Khó | Bạn tự triển khai toàn bộ flow mua hàng. Xem [hướng dẫn](implement-observer-mode-capacitor). |
:::important
**Các bước dưới đây hướng dẫn cách triển khai paywall được tạo trong Adapty paywall builder.**
Nếu bạn không muốn dùng paywall builder, hãy xem [hướng dẫn xử lý mua hàng trong paywall được tạo thủ công](capacitor-making-purchases).
:::
Để hiển thị paywall được tạo trong Adapty paywall builder, trong code ứng dụng, bạn chỉ cần:
1. **Lấy paywall**: Lấy paywall từ Adapty.
2. **Hiển thị paywall và Adapty sẽ xử lý mua hàng cho bạn**: Hiển thị container paywall bạn đã lấy trong ứng dụng.
3. **Xử lý các hành động nút bấm**: Liên kết các tương tác của người dùng với paywall với phản hồi của ứng dụng. Ví dụ: mở liên kết hoặc đóng paywall khi người dùng nhấn nút.
## Trước khi bắt đầu \{#before-you-start\}
Trước khi bắt đầu, hãy hoàn thành các bước sau:
1. Kết nối ứng dụng của bạn với [App Store](initial_ios) và/hoặc [Google Play](initial-android) trong Adapty Dashboard.
2. [Tạo sản phẩm](create-product) trong Adapty.
3. [Tạo paywall và thêm sản phẩm vào đó](create-paywall).
4. [Tạo placement và thêm paywall vào đó](create-placement).
5. [Cài đặt và kích hoạt Adapty SDK](sdk-installation-capacitor) trong code ứng dụng của bạn.
:::tip
Cách nhanh nhất để hoàn thành các bước này là làm theo [hướng dẫn quickstart](quickstart) hoặc tạo paywall và placement bằng [Developer CLI](developer-cli-quickstart).
:::
## 1. Lấy paywall \{#1-get-the-paywall\}
Các paywall của bạn được liên kết với các placement được cấu hình trên dashboard. Placement cho phép bạn chạy các paywall khác nhau cho các đối tượng khác nhau hoặc để chạy [A/B test](ab-tests).
Để lấy paywall được tạo trong Adapty paywall builder, bạn cần:
1. Lấy đối tượng `paywall` theo ID [placement](placements) bằng phương thức `getPaywall` và kiểm tra xem đây có phải là paywall được tạo trong builder hay không thông qua thuộc tính `hasViewConfiguration`.
2. Tạo view của paywall bằng phương thức `createPaywallView`. View chứa các thành phần UI và kiểu dáng cần thiết để hiển thị paywall.
:::important
Để lấy cấu hình view, bạn phải bật toggle **Show on device** trong Paywall Builder. Nếu không, bạn sẽ nhận được cấu hình view rỗng và paywall sẽ không được hiển thị.
:::
```typescript showLineNumbers title="Capacitor"
try {
const paywall = await adapty.getPaywall({
placementId: 'YOUR_PLACEMENT_ID',
});
// the requested paywall
} catch (error) {
// handle the error
}
if (paywall.hasViewConfiguration) {
try {
const view = await createPaywallView(paywall);
} catch (error) {
// handle the error
}
} else {
// use your custom logic
}
```
## 2. Hiển thị paywall \{#2-display-the-paywall\}
Khi bạn đã có cấu hình paywall, chỉ cần thêm vài dòng code để hiển thị paywall của bạn.
Để hiển thị paywall, dùng phương thức `view.present()` trên `view` được tạo bởi phương thức `createPaywallView`. Mỗi `view` chỉ có thể được dùng một lần. Nếu bạn cần hiển thị lại paywall, hãy gọi `createPaywallView` thêm một lần nữa để tạo một `view` mới.
```typescript showLineNumbers title="Capacitor"
try {
await view.present();
} catch (error) {
// handle the error
}
```
:::tip
Để biết thêm chi tiết về cách hiển thị paywall, xem [hướng dẫn](capacitor-present-paywalls) của chúng tôi.
:::
## 3. Xử lý các hành động nút bấm \{#3-handle-button-actions\}
Khi người dùng nhấn các nút trong paywall, Capacitor SDK tự động xử lý mua hàng, khôi phục và đóng paywall.
Tuy nhiên, các nút khác có ID tùy chỉnh hoặc được xác định trước và yêu cầu xử lý hành động trong code của bạn. Hoặc, bạn có thể muốn ghi đè hành vi mặc định của chúng.
Ví dụ: bạn có thể muốn giữ paywall mở sau khi người dùng mở một liên kết web. Hãy xem cách bạn có thể xử lý điều này trong triển khai của mình.
:::tip
Đọc hướng dẫn của chúng tôi về cách xử lý [hành động](capacitor-handle-paywall-actions) và [sự kiện](capacitor-handling-events) nút bấm.
:::
```typescript showLineNumbers title="Capacitor"
const unsubscribe = view.setEventHandlers({
onUrlPress(url) {
window.open(url, '_blank');
return false;
},
});
```
## Bước tiếp theo \{#next-steps\}
---
no_index: true
---
import Callout from '../../../components/Callout.astro';
Bạn có câu hỏi hoặc gặp sự cố? Hãy xem [diễn đàn hỗ trợ](https://adapty.featurebase.app/) của chúng tôi — nơi bạn có thể tìm câu trả lời cho các câu hỏi thường gặp hoặc đặt câu hỏi của riêng mình. Đội ngũ và cộng đồng của chúng tôi luôn sẵn sàng giúp đỡ!
Paywall của bạn đã sẵn sàng để hiển thị trong ứng dụng. Kiểm tra các giao dịch mua trong [sandbox App Store](test-purchases-in-sandbox) hoặc trong [Google Play Store](testing-on-android) để đảm bảo bạn có thể hoàn thành một giao dịch mua thử từ paywall.
Tiếp theo, bạn cần [kiểm tra mức độ truy cập của người dùng](capacitor-check-subscription-status) để đảm bảo bạn hiển thị paywall hoặc cấp quyền truy cập vào các tính năng trả phí đúng cho người dùng.
## Ví dụ đầy đủ \{#full-example\}
Đây là cách tất cả các bước đó có thể được tích hợp cùng nhau trong ứng dụng của bạn.
```typescript showLineNumbers title="Capacitor"
export default function PaywallScreen() {
const showPaywall = async () => {
try {
const paywall = await adapty.getPaywall({
placementId: 'YOUR_PLACEMENT_ID',
});
if (!paywall.hasViewConfiguration) {
// use your custom logic
return;
}
const view = await createPaywallView(paywall);
view.setEventHandlers({
onUrlPress(url) {
window.open(url, '_blank');
return false;
},
});
await view.present();
} catch (error) {
// handle any error that may occur during the process
console.warn('Error showing paywall:', error);
}
};
return (