@revenuecat/purchases-capacitor-ui

UI components for RevenueCat Capacitor SDK. This plugin extends the functionality of the @revenuecat/purchases-capacitor plugin to provide UI components for displaying paywalls and customer center.

Platform Support

⚠️ IMPORTANT: Platform Limitations

• iOS: Paywalls and Customer Center are fully supported on iOS 15.0+
• Android: Paywalls and Customer Center are now fully supported on Android 7.0+ (API level 24+)
• Web: Not supported

Install

npm install @revenuecat/purchases-capacitor
npm install @revenuecat/purchases-capacitor-ui
npx cap sync

Note: Make sure to use the same version for both @revenuecat/purchases-capacitor and @revenuecat/purchases-capacitor-ui.

iOS Configuration

For iOS, you need to add SwiftUI to your app's capabilities. Follow the iOS SDK's SwiftUI Configuration guide for details.

API

• presentPaywall(...)
• presentPaywallIfNeeded(...)
• presentCustomerCenter()
• addListener('paywallDisplayed', ...)
• addListener('paywallDismissed', ...)
• removeAllListeners()
• Interfaces
• Enums

Usage

Initialization

First, initialize the main RevenueCat SDK:

import { Purchases } from '@revenuecat/purchases-capacitor';

// Initialize the SDK
await Purchases.configure({
  apiKey: 'your_api_key',
});

Presenting Paywalls

import { RevenueCatUI } from '@revenuecat/purchases-capacitor-ui';

// Present a paywall with the default offering
const result = await RevenueCatUI.presentPaywall();

// Present a paywall with a specific offering
const result = await RevenueCatUI.presentPaywall({
  offeringIdentifier: 'premium',
  displayCloseButton: true,
});

// Present a paywall only if the user doesn't have a specific entitlement
const result = await RevenueCatUI.presentPaywallIfNeeded({
  requiredEntitlementIdentifier: 'pro_access',
  offeringIdentifier: 'premium',
});

Customer Center

import { RevenueCatUI } from '@revenuecat/purchases-capacitor-ui';

// Present the customer center
await RevenueCatUI.presentCustomerCenter();

Demo

Here's a quick demo of Paywalls running on iOS:

Note: To view the demo, please download the MP4 file from the assets directory.

Events

You can listen for paywall events:

import { RevenueCatUI } from '@revenuecat/purchases-capacitor-ui';

// Listen for when a paywall is displayed
RevenueCatUI.addListener('paywallDisplayed', () => {
  console.log('Paywall displayed');
});

// Listen for when a paywall is dismissed
RevenueCatUI.addListener('paywallDismissed', () => {
  console.log('Paywall dismissed');
});

License

MIT