Kích hoạt mua hàng trong paywall tùy chỉnh của bạn với React Native SDK

Hướng dẫn này mô tả cách tích hợp Adapty vào các paywall tùy chỉnh của bạn. Toàn quyền kiểm soát việc triển khai paywall, trong khi Adapty SDK lấy sản phẩm, xử lý các giao dịch mua mới và khôi phục các giao dịch trước đó.

Hướng dẫn này dành cho các developer đang triển khai paywall tùy chỉnh. Nếu bạn muốn cách đơn giản nhất để kích hoạt tính năng mua hàng, hãy sử dụng Adapty Flow Builder. Với Flow Builder, bạn tạo flow trong trình chỉnh sửa trực quan không cần code, Adapty tự động xử lý toàn bộ logic mua hàng, và bạn có thể thử nghiệm các thiết kế khác nhau mà không cần phát hành lại ứng dụng.

Trước khi bắt đầu

Thiết lập sản phẩm

Để kích hoạt in-app purchase, bạn cần nắm vững ba khái niệm cốt lõi:

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 – cấu hình xác định những sản phẩm nào sẽ được cung cấp. Trong Adapty, paywall là cách duy nhất để lấy danh sách sản phẩm, nhưng thiết kế này cho phép bạn thay đổi sản phẩm, giá cả và ưu đãi mà không cần chỉnh sửa code.
Placement – nơi và thời điểm hiển thị paywall trong ứng dụng của bạn (ví dụ: main, onboarding, settings). Bạn cài đặt paywall cho các placement trên dashboard, sau đó gọi chúng bằng placement ID trong code. Điều này giúp việc chạy A/B test và hiển thị các paywall khác nhau cho từng nhóm người dùng trở nên dễ dàng hơn. Hãy đảm bảo bạn hiểu rõ các khái niệm này, dù bạn đang dùng paywall tùy chỉnh của riêng mình. Về cơ bản, đây chỉ là cách bạn quản lý các sản phẩm mà bạn bán trong ứng dụng.

Để triển khai paywall tùy chỉnh, bạn cần tạo một paywall và thêm nó vào một placement. Cài đặt này cho phép bạn lấy danh sách sản phẩm. Để hiểu những gì cần thực hiện trên dashboard, hãy xem hướng dẫn quickstart tại đây.

Quản lý người dùng

Bạn có thể làm việc có hoặc không cần xác thực backend ở phía mình.

Tuy nhiên, Adapty SDK xử lý người dùng ẩn danh và người dùng đã xác định theo cách khác nhau. Đọc hướng dẫn bắt đầu nhanh về xác định người dùng để hiểu các điểm đặc thù và đảm bảo bạn đang làm việc với người dùng đúng cách.

Bước 1. Lấy danh sách sản phẩm

Để lấy danh sách sản phẩm cho paywall tùy chỉnh, bạn cần:

Lấy đối tượng flow bằng cách truyền ID placement vào phương thức getFlow.
Lấy mảng sản phẩm cho flow này bằng phương thức getPaywallProducts.


async function loadPaywall() {
  try {
    const flow: AdaptyFlow = await adapty.getFlow('YOUR_PLACEMENT_ID');
    const products: AdaptyPaywallProduct[] = await adapty.getPaywallProducts(flow);
    
    // Use products to build your custom paywall UI
  } catch (error) {
    // Handle the error
  }
}

Bước 2. Xử lý thanh toán

Khi người dùng nhấn vào một sản phẩm trong paywall tùy chỉnh của bạn, hãy gọi phương thức makePurchase với sản phẩm đã chọn. Phương thức này sẽ xử lý flow thanh toán và trả về hồ sơ người dùng đã được cập nhật.


async function purchaseProduct(product: AdaptyPaywallProduct) {
  try {
    const purchaseResult: AdaptyPurchaseResult = await adapty.makePurchase(product);
    
    switch (purchaseResult.type) {
      case 'success':
        // Purchase successful, profile updated
        break;
      case 'user_cancelled':
        // User canceled the purchase
        break;
      case 'pending':
        // Purchase is pending (e.g., user will pay offline with cash)
        break;
    }
  } catch (error) {
    // Handle the error
  }
}

Bước 3. Khôi phục giao dịch mua

Các cửa hàng ứng dụng yêu cầu tất cả ứng dụng có gói đăng ký phải cung cấp cách để người dùng khôi phục giao dịch mua của họ.

Gọi phương thức restorePurchases khi người dùng nhấn nút khôi phục. Thao tác này sẽ đồng bộ lịch sử giao dịch mua của họ với Adapty và trả về hồ sơ người dùng đã được cập nhật.


async function restorePurchases() {
  try {
    const profile: AdaptyProfile = await adapty.restorePurchases();
    // Restore successful, profile updated
  } catch (error) {
    // Handle the error
  }
}

Các 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. Hãy 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ử nghiệm từ paywall. Để xem cách hoạt động trong một triển khai sẵn sàng cho môi trường production, hãy xem CustomPurchaseScreen.tsx trong ứng dụng mẫu của chúng tôi, nơi minh họa cách xử lý giao dịch mua với xử lý lỗi đúng cách, trạng thái tải, và quản lý trạng thái giao diện. Tiếp theo, kiểm tra xem người dùng đã hoàn tất giao dịch mua chưa để quyết định hiển thị paywall hay cấp quyền truy cập vào các tính năng trả phí.