Để kích hoạt in-app purchase, bạn cần nắm được ba khái niệm quan trọng:

• Sản phẩm – những gì người dùng có thể mua (gói đăng ký, consumable, quyền truy cập trọn đời)
• Flows & paywall – các màn hình hiển thị sản phẩm cho người dùng, được xây dựng bằng Flow & Paywall Builder không cần code. SDK truy xuất chúng qua getFlow. Nếu bạn muốn tự xây dựng giao diện bằng code, xem Triển khai paywall tùy chỉnh.
• Placement – nơi và thời điểm hiển thị flow & paywall trong ứng dụng của bạn (ví dụ: main, onboarding, settings). Bạn gắn chúng vào placement trên dashboard, rồi 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 nội dung khác nhau cho từng nhóm người dùng.

Adapty cung cấp ba cách để kích hoạt tính năng mua hàng trong ứng dụng của bạn. Hãy chọn một trong số đó tùy theo yêu cầu của ứng dụng:

Triển khai	Độ phức tạp	Khi nào dùng
Adapty Flow & Paywall Builder	✅ Dễ	Bạn tạo một flow hoặc paywall đầy đủ, sẵn sàng mua trong trình tạo no-code. Adapty tự động hiển thị và xử lý toàn bộ logic mua hàng phức tạp, xác thực biên lai, và quản lý gói đăng ký.
Paywall tùy chỉnh	🟡 Trung bình	Bạn tự triển khai giao diện paywall trong code của ứng dụng, nhưng vẫn lấy đối tượng flow từ Adapty để duy trì tính linh hoạt trong việc cung cấp sản phẩm. Xem hướng dẫn.
Observer mode	🔴 Khó	Bạn đã có cơ sở hạ tầng xử lý mua hàng riêng và muốn tiếp tục sử dụng nó. Lưu ý rằng observer mode có những hạn chế nhất định trong Adapty. Xem bài viết.

Để hiển thị flow hoặc paywall được tạo trong Adapty Flow & Paywall Builder, trong mã ứng dụng của bạn, bạn chỉ cần:

1. Lấy flow hoặc paywall: Lấy từ Adapty.
2. Hiển thị và để Adapty xử lý việc mua hàng: Hiển thị view trong ứng dụng của bạn.
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 phản hồi tương ứng trong ứng dụng. Ví dụ: mở liên kết hoặc đóng paywall khi người dùng nhấn vào các nút.

Trước khi bắt đầu

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 và/hoặc Google Play trong Adapty Dashboard.
2. Tạo sản phẩm trong Adapty.
3. Tạo flow hoặc paywall và thêm sản phẩm vào đó.
4. Tạo placement và thêm flow hoặc paywall vào đó.
5. Cài đặt và kích hoạt Adapty SDK trong code của ứng dụng. Hướng dẫn này sử dụng Adapty Capacitor SDK v4 APIs.

1. Lấy flow hoặc paywall

Các flow và paywall của bạn được liên kết với các placement được cấu hình trong dashboard. Placement cho phép bạn chạy các flow hoặc paywall khác nhau cho các đối tượng khác nhau hoặc chạy A/B test.

Để lấy một flow hoặc paywall được tạo trong Adapty Flow & Paywall Builder, hãy lấy đối tượng flow theo ID placement bằng phương thức getFlow. Flow chứa các thành phần UI và kiểu dáng cần thiết để hiển thị.

try {
  const flow = await adapty.getFlow({
    placementId: 'YOUR_PLACEMENT_ID',
  });
  // the requested flow
} catch (error) {
  // handle the error
}

2. Hiển thị flow hoặc paywall

Bây giờ, khi bạn đã có flow, chỉ cần thêm vài dòng code để hiển thị nó.

Tạo một view bằng phương thức createFlowView, đặt các event handler cho nó, rồi gọi view.present(). Mỗi view chỉ có thể dùng một lần. Nếu cần hiển thị lại flow, hãy gọi createFlowView thêm một lần nữa để tạo view mới.

try {
  const view = await createFlowView(flow);

  await view.setEventHandlers({
    onPurchaseCompleted(purchaseResult, product) {
      return purchaseResult.type === 'success'; // close the flow on a successful purchase, keep it open for cancelled or pending purchases
    },
  });

  await view.present();
} catch (error) {
  // handle the error
}

3. Xử lý hành động nút bấm

Khi người dùng nhấn các nút trong flow hoặc paywall, Capacitor SDK tự động xử lý việc mua hàng, khôi phục, đóng màn hình và mở URL.

Tuy nhiên, các nút khác có ID tùy chỉnh hoặc được xác định trước và cần 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ụ: đây là hành vi mặc định của nút đóng. Bạn không cần thêm nó vào code, nhưng ở đây bạn có thể thấy cách thực hiện nếu cần.

const unsubscribe = await view.setEventHandlers({
  onCloseButtonPress() {
    return true; // allow the flow to close
  },
});

Bước tiếp theo

Flow hoặc paywall của bạn đã sẵn sàng để hiển thị trong ứng dụng. Kiểm tra giao dịch mua để đảm bảo bạn có thể hoàn thành một giao dịch mua thử từ flow.

Tiếp theo, bạn cần kiểm tra mức độ truy cập của người dùng để đảm bảo hiển thị paywall hoặc cấp quyền truy cập tính năng trả phí cho đúng người dùng.

Ví dụ đầy đủ

Dưới đây là cách tích hợp tất cả các bước trong hướng dẫn này vào ứng dụng của bạn.

export async function showFlow() {
  try {
    const flow = await adapty.getFlow({
      placementId: 'YOUR_PLACEMENT_ID',
    });

    const view = await createFlowView(flow);

    await view.setEventHandlers({
      onCloseButtonPress() {
        return true;
      },
      onPurchaseCompleted(purchaseResult, product) {
        return purchaseResult.type === 'success'; // close the flow on a successful purchase, keep it open for cancelled or pending purchases
      },
    });

    await view.present();
  } catch (error) {
    // handle any error that may occur during the process
    console.warn('Error showing flow:', error);
  }
}