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
- 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.
- In Xcode, in project manager, select your app target.
- Open the
Signing and Capabilities
tab. - 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:
- In Xcode, in project manager, select your app target.
- Open the
Build Settings
tab - Look for the
Swift Language Version
setting. - Set it to 5.0.
Import Purchases
TypeScript
The types are shipped inside the npm package. You can import them like this:
- TypeScript
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
:
- Angular
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:
- React
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
Import the plugin object then use its static methods:
- Vue.js
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
- Now that you've installed the Purchases SDK in your Capacitor app, get started by configuring an instance of Purchases →