Để bật tính năng in-app purchase, bạn cần nắm rõ 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 danh sách cung cấp, giá cả và tổ hợp sản phẩm mà không cần chỉnh sửa code ứng dụng.
• Placement – vị trí và thời điểm hiển thị paywall trong ứng dụng (ví dụ: main, onboarding, settings). Bạn thiết lập paywall cho các placement trên dashboard, sau đó 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 paywall khác nhau cho từng nhóm người dùng.

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

Cách triển khai	Độ phức tạp	Khi 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 trình tạo không cần code. Adapty tự động hiển thị paywall 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.
makePurchase	🟡 Trung bình	Bạn tự xây dựng UI paywall trong code ứng dụng, nhưng vẫn lấy đối tượng paywall từ Adapty để duy trì sự linh hoạt trong danh sách sản phẩm. Xem hướng dẫn.
Observer mode	🔴 Khó	Bạn tự triển khai toàn bộ flow mua hàng. Xem hướng dẫn.

Để hiển thị paywall được tạo trong Adapty paywall builder, trong code ứng dụng, 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 trong ứng dụng.
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 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.

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 ID placement bằng phương thức getPaywall và kiểm tra xem đây có phải là paywall được tạo trong builder hay không thông qua thuộc tính hasViewConfiguration.

2. Tạo view của paywall bằng phương thức createPaywallView. View chứa các thành phần UI và kiểu dáng cần thiết để hiển thị paywall.

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

if (paywall.hasViewConfiguration) {
  try {
    const view = await createPaywallView(paywall);
  } catch (error) {
    // handle the error
  }
} else {
  // use your custom logic
}

2. Hiển thị paywall

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

Để hiển thị paywall, dùng phương thức view.present() trên view được tạo bởi phương thức createPaywallView. Mỗi view chỉ có thể được dùng một lần. Nếu bạn cần hiển thị lại paywall, hãy gọi createPaywallView thêm một lần nữa để tạo một view mới.

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

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

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

Tuy nhiên, các nút khác có ID tùy chỉnh hoặc được xác định 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ụ: bạn có thể muốn giữ paywall mở sau khi người dùng mở một liên kết web. Hãy xem cách bạn có thể xử lý điều này trong triển khai của mình.

const unsubscribe = view.setEventHandlers({
  onUrlPress(url) {
    window.open(url, '_blank');
    return false;
  },
});

Bước tiếp theo

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 đủ

Đâ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.

export default function PaywallScreen() {
  const showPaywall = async () => {
    try {
      const paywall = await adapty.getPaywall({
        placementId: 'YOUR_PLACEMENT_ID',
      });

      if (!paywall.hasViewConfiguration) {
        // use your custom logic
        return;
      }

      const view = await createPaywallView(paywall);

      view.setEventHandlers({
        onUrlPress(url) {
          window.open(url, '_blank');
          return false;
        },
      });

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

  return (
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
      <button onClick={showPaywall}>Show Paywall</button>
    </div>
  );
}