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 Android Setup​

Set the correct launchMode​

Depending on your user's payment method, they may be asked by Google Play to verify their purchase in their (banking) app. This means they will have to background your app and go to another app to verify the purchase. If your Activity's launchMode is set to anything other than standard or singleTop, backgrounding your app can cause the purchase to get cancelled. To avoid this, set the launchMode of your Activity to standard or singleTop in your Android app's AndroidManifest.xml file:

<activity 
    android:name="com.your.Activity"
    android:launchMode="standard" />  <!-- or singleTop -->

You can find Android's documentation on the various launchMode options here.

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​