Triển khai web paywall

Trước khi bắt đầu, hãy đảm bảo bạn đã cấu hình web paywall trong dashboard và đã cài đặt Adapty SDK phiên bản 3.6.1 trở lên.

Mở web paywall

Nếu bạn đang làm việc với paywall tự phát triển, bạn cần xử lý web paywall bằng phương thức SDK. Phương thức .openWebPaywall:

  1. Tạo một URL duy nhất cho phép Adapty liên kết paywall cụ thể đang hiển thị với một người dùng cụ thể đến trang web mà họ được chuyển hướng đến.
  2. Theo dõi khi người dùng quay lại ứng dụng, sau đó gọi .getProfile theo các khoảng thời gian ngắn để xác định xem quyền truy cập trong hồ sơ người dùng có được cập nhật hay không. Bằng cách này, nếu thanh toán thành công và quyền truy cập được cập nhật, gói đăng ký sẽ kích hoạt trong ứng dụng gần như ngay lập tức.

try {
  await adapty.openWebPaywall({ paywallOrProduct: product });
} catch (error) {
  console.error('Failed to open web paywall:', error);
}

Có hai phiên bản của phương thức openWebPaywall:

  1. openWebPaywall({ paywallOrProduct: product }) tạo URL theo paywall và thêm dữ liệu sản phẩm vào URL.
  2. openWebPaywall({ paywallOrProduct: paywall }) tạo URL theo paywall mà không thêm dữ liệu sản phẩm vào URL. Dùng phiên bản này khi các sản phẩm trong paywall Adapty của bạn khác với các sản phẩm trong web paywall. Trong SDK v4, phía paywall của paywallOrProduct nhận một AdaptyFlowPaywall — một biến thể paywall của flow đã tải về. Hãy kiểm tra flow.paywalls không rỗng trước khi truy cập vào nó, ví dụ flow.paywalls[0].

Xử lý lỗi

LỗiMô tảHành động khuyến nghị
AdaptyError.paywallWithoutPurchaseUrlPaywall chưa được cấu hình URL mua hàng qua webKiểm tra xem paywall đã được cấu hình đúng trong Adapty Dashboard chưa
AdaptyError.productWithoutPurchaseUrlSản phẩm chưa có URL mua hàng qua webXác minh cấu hình sản phẩm trong Adapty Dashboard
AdaptyError.failedOpeningWebPaywallUrlKhông thể mở URL trong trình duyệtKiểm tra cài đặt thiết bị hoặc cung cấp phương thức mua hàng thay thế
AdaptyError.failedDecodingWebPaywallUrlKhông thể mã hóa đúng các tham số trong URLXác minh rằng các tham số URL hợp lệ và được định dạng đúng

Lấy URL web paywall mà không cần mở nó

Nếu bạn muốn tự hiển thị trang mua hàng trên web thay vì để SDK mở nó, hãy dùng createWebPaywallUrl. Hàm này trả về cùng một URL duy nhất mà openWebPaywall sẽ mở, vì vậy bạn có thể render nó trong web view của riêng mình hoặc xử lý redirect theo cách bạn muốn. Hàm này nhận cùng tham số paywallOrProduct — một biến thể paywall của flow đã fetch (AdaptyFlowPaywall) hoặc một AdaptyPaywallProduct.


try {
  const url = await adapty.createWebPaywallUrl({ paywallOrProduct: product });
  // open `url` in your own web view, or handle the redirect yourself
} catch (error) {
  console.error('Failed to create web paywall URL:', error);
}

Để mở một URL tùy ý (không phải web paywall) qua trình duyệt native — ví dụ từ nút bấm trong flow — hãy dùng adapty.openWebUrl thay thế.

Mở web paywall trong trình duyệt trong ứng dụng

Mở web paywall trong trình duyệt trong ứng dụng được hỗ trợ từ Adapty SDK v3.15 trở lên.

Theo mặc định, web paywall sẽ mở trong trình duyệt bên ngoài.

Để mang lại trải nghiệm liền mạch cho người dùng, bạn có thể mở web paywall trong trình duyệt tích hợp trong ứng dụng. Điều này hiển thị trang mua hàng ngay bên trong ứng dụng của bạn, cho phép người dùng hoàn tất giao dịch mà không cần chuyển sang ứng dụng khác.

Để bật tính năng này, đặt openIn thành WebPresentation.BrowserInApp trong openWebPaywall:


try {
    await adapty.openWebPaywall({
        paywallOrProduct: product,
        openIn: WebPresentation.BrowserInApp, // default – WebPresentation.BrowserOutApp
    });
} catch (error) {
    console.error('Failed to open web paywall:', error);
}