Bật tính năng mua hàng với Flow Builder trong Capacitor SDK

Để bật in-app purchase, bạn cần hiểu ba khái niệm chính:

Sản phẩm – mọi thứ người dùng có thể mua (gói đăng ký, consumable, quyền truy cập trọn đời)
Flows – chuỗi màn hình giới thiệu sản phẩm đến người dùng, được xây dựng trong Flow Builder không cần code. SDK lấy chúng qua getFlow. Nếu bạn muốn tự xây dựng giao diện bằng code, hãy dùng paywall thay thế — xem Triển khai paywall thủ công.
Placements – nơi và thời điểm bạn hiển thị flow trong ứng dụng (như main, onboarding, settings). Bạn gắn flow vào placement trên dashboard, sau đó gọi 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ị flow 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 sử dụng | |---|---|---| | Adapty Flow Builder | ✅ Dễ | Bạn tạo một flow hoàn chỉnh, sẵn sàng thanh toán trong trình xây dựng không cần code. Adapty tự động hiển thị và xử lý toàn bộ luồng mua hàng phức tạp, xác thực biên lai và quản lý gói đăng ký. | | Paywall tự tạo | 🟡 Trung bình | Bạn tự triển khai giao diện paywall trong code ứng dụng, nhưng vẫn lấy đối tượng flow từ Adapty để 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ý thanh toán 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. |

Các bước dưới đây hướng dẫn cách triển khai một flow được tạo trong Adapty Flow Builder.

Nếu bạn muốn tự xây dựng giao diện paywall, hãy xem Triển khai paywall thủ công.

Để hiển thị một flow được tạo trong Adapty Flow Builder, trong code của ứng dụng, bạn chỉ cần:

Lấy flow: Lấy từ Adapty.
Hiển thị nó và Adapty sẽ xử lý giao dịch mua cho bạn: Hiển thị view trong ứng dụng của bạn.
Xử lý hành động nút: Liên kết 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 flow khi người dùng nhấn 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:

Kết nối ứng dụng của bạn với App Store và/hoặc Google Play trong Adapty Dashboard.
Tạo sản phẩm trong Adapty.
Tạo paywall và thêm sản phẩm vào đó.
Tạo placement và thêm paywall vào đó.
Cài đặt và kích hoạt Adapty SDK trong code ứng dụng của bạn.

Cách nhanh nhất để hoàn thành các bước này là làm theo hướng dẫn quickstart hoặc tạo paywall và placement bằng Developer CLI.

1. Lấy flow

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

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


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

2. Hiển thị flow

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, thiết lập 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 bạn cần hiển thị lại flow, hãy gọi createFlowView thêm một lần nữa để tạo một view instance 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
}

Để biết thêm chi tiết về cách hiển thị một flow, xem hướng dẫn của chúng tôi.

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

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

Tuy nhiên, một số nút có ID tùy chỉnh hoặc được định nghĩa sẵn và cần bạn xử lý hành động trong code. 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 đoạn này 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
  },
});

Đọc hướng dẫn của chúng tôi về cách xử lý hành động và sự kiện của nút bấm.

Bước tiếp theo

Bạn có câu hỏi hoặc gặp sự cố? Hãy xem diễn đàn hỗ trợ 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 hoặc trong Google Play Store để đả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 để đả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 đủ

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);
  }
}