Skip to main content

Ionic

We offer official plugins for both Capacitor and Cordova. We recommend using the Capacitor plugin when possible. Install the plugin depending on your framework:

// Install Capacitor plugin
npm install @revenuecat/purchases-capacitor

// Update native platform project(s) to include newly added plugin
ionic cap sync

TypeScript

The types are shipped inside the npm package. You can import them like this:

import {
Purchases,
PurchasesOfferings, // Types for TypeScript
} from '@revenuecat/purchases-capacitor';

Angular

Wait for the Platform to be ready, then configure the plugin in your src/app/app.component.ts:

import { Platform } from "@ionic/angular";
// TS typings for the plugin
import { Purchases, LOG_LEVEL } from '@revenuecat/purchases-capacitor';

constructor(platform: Platform) {
platform.ready().then(async () => {
await Purchases.setLogLevel({ level: LOG_LEVEL.DEBUG }); // Enable to get debug logs
await Purchases.configure({
apiKey: "my_api_key",
appUserID: "my_app_user_id" // Optional
});
});
}

React

Import the plugin object then use its static methods:

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

const Tab1: React.FC = () => {
useEffect(() => {
(async function () {
await Purchases.setLogLevel({ level: LOG_LEVEL.DEBUG }); // Enable to get debug logs
await Purchases.configure({
apiKey: "my_api_key",
appUserID: "my_app_user_id" // Optional
});
})();
}, []);
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>My App</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonButton onClick={purchasePackage}>Subscribe now</IonButton>
</IonContent>
</IonPage>
);
};

Vue.js

⚠️Important note if using Vue.js reactivity wrappers

If using Vue.js and its Reactivity API wrappers like reactive or readonly, make sure you pass the raw objects (rather than Proxy objects) to the Capacitor plugin methods. You can use the toRaw method to convert to the raw object.

Import the plugin object then use its static methods:

import {LOG_LEVEL, Purchases} from "@revenuecat/purchases-capacitor";

const app = createApp(App)
.use(IonicVue)
.use(router);

const configure = async () => {
await Purchases.setLogLevel({ level: LOG_LEVEL.DEBUG }); // Enable to get debug logs
await Purchases.configure({
apiKey: "my_api_key",
appUserID: "my_app_user_id" // Optional
});
};

router.isReady().then(() => {
app.mount('#app');
configure().then(() => { "RevenueCat SDK configured!" });
});