Kích hoạt mua hàng bằng cách sử dụng paywall trong Kotlin Multiplatform SDK

Để kích hoạt in-app purchase, bạn cần hiểu 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 các ưu đãi, giá cả và tổ hợp sản phẩm mà không cần chỉnh sửa code ứng dụng.
  • Placement – nơi và thời điểm bạn hiển thị paywall trong ứng dụng (ví dụ như main, onboarding, settings). Bạn thiết lập paywall cho các placement trên dashboard, sau đó yêu cầu chúng bằng placement ID trong code. Điều này giúp bạn dễ dàng chạy A/B test và hiển thị các paywall khác nhau cho các đối tượng khác nhau.

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

Cách triển khaiĐộ phức tạpKhi 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 no-code builder. Adapty tự động hiển thị 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.
Paywall tạo thủ công🟡 Trung bìnhBạn tự triển khai UI paywall trong code ứng dụng, nhưng vẫn lấy đối tượng paywall 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.

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 sử dụng paywall builder, hãy xem hướng dẫn xử lý mua hàng trong paywall tạo thủ công.

Để hiển thị paywall được tạo trong Adapty paywall builder, trong code ứng dụng của bạn, 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 được trong ứng dụng.
  3. Xử lý các hành động của nút: 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

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 paywall và thêm sản phẩm vào đó.
  4. Tạo placement và thêm paywall vào đó.
  5. 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 nhanh hoặc tạo paywall và placement bằng Developer CLI.

1. Lấy 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.

Để lấy paywall được tạo trong Adapty paywall builder, bạn cần:

  1. Lấy đối tượng paywall theo placement ID bằng phương thức getPaywall và kiểm tra xem đó có phải là paywall được tạo trong builder hay không.

  2. Lấy cấu hình view của paywall bằng phương thức createPaywallView. Cấu hình view chứa các phần tử UI và kiểu dáng cần thiết để hiển thị paywall.

Để lấy cấu hình view, bạn phải bật nút Show on device trong Paywall Builder. Nếu không, bạn sẽ nhận được cấu hình view trống và paywall sẽ không được hiển thị.

Adapty.getPaywall("YOUR_PLACEMENT_ID")
    .onSuccess { paywall ->
        if (!paywall.hasViewConfiguration) {
            return@onSuccess
        }
        
        val paywallView = AdaptyUI.createPaywallView(paywall = paywall)
        paywallView?.present()
    }
    .onError { error ->
        // handle the error
    }

2. Hiển thị paywall

Bây giờ khi bạn đã có cấu hình paywall, chỉ cần thêm vài dòng code là có thể hiển thị paywall của bạn.

Để hiển thị paywall trực quan trên màn hình thiết bị, trước tiên bạn phải cấu hình nó. Để làm điều này, hãy gọi phương thức AdaptyUI.createPaywallView():

val paywallView = AdaptyUI.createPaywallView(paywall = paywall)
paywallView?.present()

Sau khi view được tạo thành công, bạn có thể hiển thị nó trên màn hình thiết bị.

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

3. Xử lý các hành động của nút

Khi người dùng nhấn các nút trong paywall, Kotlin Multiplatform SDK tự động xử lý mua hàng, khôi phục, đóng paywall và mở liên kết.

Tuy nhiên, các nút khác có ID tùy chỉnh hoặc được định nghĩa 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ụ: đây là hành vi mặc định cho 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.

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

AdaptyUI.setPaywallsEventsObserver(object : AdaptyUIPaywallsEventsObserver {
    override fun paywallViewDidPerformAction(view: AdaptyUIPaywallView, action: AdaptyUIAction) {
        when (action) {
            AdaptyUIAction.CloseAction, AdaptyUIAction.AndroidSystemBackAction -> view.dismiss()
        }
    }
})

Các bước tiếp theo

Paywall của bạn đã sẵn sàng để hiển thị trong ứng dụng. Hãy kiểm tra mua hàng của bạn trong App Store sandbox 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í cho đúng người dùng.

Ví dụ đầy đủ

Dưới đâ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.

// Set up the observer for handling paywall actions
AdaptyUI.setPaywallsEventsObserver(object : AdaptyUIPaywallsEventsObserver {
    override fun paywallViewDidPerformAction(view: AdaptyUIPaywallView, action: AdaptyUIAction) {
        when (action) {
            is AdaptyUIAction.CloseAction -> view.dismiss()
        }
    }
})

// Get and display the paywall
Adapty.getPaywall("YOUR_PLACEMENT_ID")
    .onSuccess { paywall ->
        if (!paywall.hasViewConfiguration) {
            // Use custom logic
            return@onSuccess
        }

        val paywallView = AdaptyUI.createPaywallView(paywall = paywall)
        paywallView?.present()
    }
    .onError { error ->
        // handle the error
    }