Skip to main content

Capacitor

What is RevenueCat?​

RevenueCat provides a backend and a wrapper around StoreKit and Google Play Billing to make implementing in-app purchases and subscriptions easy. With our SDK, you can build and manage your app business on any platform without having to maintain IAP infrastructure. You can read more about how RevenueCat fits into your app or you can sign up free to start building.

Installation​

npm install @revenuecat/purchases-capacitor
npx cap sync

Additional iOS Setup​

Add In-app Purchase Capability to Project​

The In-app Purchase capability isn't required to install the SDK, but it is required to make purchases.

  1. In Xcode, in project manager, select your app target.
  2. Open the Signing and Capabilities tab.
  3. Click the + Capability button and double-click on In-App Purchase.

Set Swift Language Version​

You have to make sure that the SWIFT_LANGUAGE_VERSION is set if it's not already. purchases-capacitor needs Swift >= 5.0.

You can either set it in the project yourself, or use an external plugin. In order to set it yourself:

  1. In Xcode, in project manager, select your app target.
  2. Open the Build Settings tab
  3. Look for the Swift Language Version setting.
  4. Set it to 5.0.

Import Purchases​

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!" });
});

Next Steps​