RevenueCat · vegaro · Apr 17, 2024 · Apr 17, 2024
@@ -0,0 +1,2 @@
+npm install @revenuecat/purchases-capacitor
+npx cap sync
@@ -0,0 +1,87 @@
+---
+title: Capacitor
+slug: capacitor
+excerpt: Instructions for installing Purchases SDK for Cordova
+hidden: false
+---
+## 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](https://www.revenuecat.com/blog/growth/where-does-revenuecat-fit-in-your-app/) or you can [sign up free](https://app.revenuecat.com/signup) to start building.
+
+## Installation
+
+import content from "!!raw-loader!@site/code_blocks/getting-started/installation/capacitor_add_plugin.shell";
+
+<RCCodeBlock tabs={[
+    { type: 'shell', content: content, name: 'Installation' }
+]} />
+
+## 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.
+
+![](/images/75574fc-Screen_Shot_2020-02-19_at_4.43.13_PM_eebd70add07dffea591603870ded41c3.png "Screen Shot 2020-02-19 at 4.43.13 PM.png")
+
+### 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 capacitorTypesContent from "!!raw-loader!@site/code_blocks/getting-started/installation/ionic_typescript_capacitor.ts";
+
+<RCCodeBlock tabs={[
+    { type: 'ts', content: capacitorTypesContent, name: 'TypeScript' },
+]} />
+
+### Angular
+
+Wait for the Platform to be ready, then configure the plugin in your `src/app/app.component.ts`:
+
+import capacitorAngularContent from "!!raw-loader!@site/code_blocks/getting-started/installation/ionic_angular_capacitor.ts";
+
+<RCCodeBlock tabs={[
+    { type: 'capacitor', content: capacitorAngularContent, name: 'Angular' },
+]} />
+
+### React
+
+Import the plugin object then use its static methods:
+
+import capacitorReactContent from "!!raw-loader!@site/code_blocks/getting-started/installation/ionic_react_capacitor.ts";
+
+<RCCodeBlock tabs={[
+    { type: 'capacitor', content: capacitorReactContent, name: 'React' },
+]} />
+
+### Vue.js
+
+:::warning Important note if using Vue.js reactivity wrappers
+If using Vue.js and its Reactivity API wrappers like [reactive](https://vuejs.org/api/reactivity-core.html#reactive) or [readonly](https://vuejs.org/api/reactivity-core.html#readonly), make sure you pass the raw objects (rather than `Proxy` objects) to the Capacitor plugin methods. You can use the [toRaw](https://vuejs.org/api/reactivity-advanced.html#toraw) method to convert to the raw object.
+:::
+
+Import the plugin object then use its static methods:
+
+import capacitorVuejsContent from "!!raw-loader!@site/code_blocks/getting-started/installation/ionic_vuejs_capacitor.ts";
+
+<RCCodeBlock tabs={[
+    { type: 'capacitor', content: capacitorVuejsContent, name: 'Vue.js' }
+]} />
+
+## Next Steps
+
+* Now that you've installed the Purchases SDK in your Capacitor app, get started by [configuring an instance of Purchases ➡️](/getting-started/quickstart#4-using-revenuecats-purchases-sdk)
@@ -13,7 +13,7 @@ RevenueCat provides a backend and a wrapper around StoreKit and Google Play Bill
 import content from "!!raw-loader!@site/code_blocks/getting-started/installation/cordova_1.shell";
 
 <RCCodeBlock tabs={[
-    { type: 'shell', content: content, name: 'Shell' }
+    { type: 'shell', content: content, name: 'Installation' }
 ]} />
 
 ## Additional iOS Setup
@@ -35,18 +35,48 @@ The App Store, in its infinite wisdom, still rejects fat frameworks, so we need
 
 ![](/images/giphy_f322310d93a3cb823a6244ab241dd40b.gif)
 
-
 ### Set `SWIFT_LANGUAGE_VERSION`
 
-You have to make sure that the `SWIFT_LANGUAGE_VERSION` is set if it's not already. `cordova-plugin-purchases` needs Swift >= 5.0. 
+You have to make sure that the `SWIFT_LANGUAGE_VERSION` is set if it's not already. `cordova-plugin-purchases` needs Swift >= 5.0.
 
-You can either set it in the project yourself, or use an external plugin like https://www.npmjs.com/package/cordova-plugin-add-swift-support. 
+You can either set it in the project yourself, or use an external plugin like https://www.npmjs.com/package/cordova-plugin-add-swift-support.
 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. 
+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 cordovaTypesContent from "!!raw-loader!@site/code_blocks/getting-started/installation/ionic_typescript_cordova.ts";
+
+<RCCodeBlock tabs={[
+    { type: 'cordova', content: cordovaTypesContent, name: 'Cordova Typescript types' }
+]} />
+
+## Angular
+
+Wait for the Platform to be ready, then configure the plugin in your `src/app/app.component.ts`:
+
+import cordovaAngularContent from "!!raw-loader!@site/code_blocks/getting-started/installation/ionic_angular_cordova.ts";
+
+<RCCodeBlock tabs={[
+    { type: 'cordova', content: cordovaAngularContent, name: 'Cordova' }
+]} />
+
+## React
+
+Import the plugin object then use its static methods:
+
+import cordovaReactContent from "!!raw-loader!@site/code_blocks/getting-started/installation/ionic_react_cordova.ts";
+
+<RCCodeBlock tabs={[
+    { type: 'cordova', content: cordovaReactContent, name: 'Cordova' }
+]} />
 
 ## Next Steps
 

@@ -29,10 +29,10 @@ Alternatively run this command:
  $ flutter pub add purchases_flutter
 ```
 
-### Amazon Appstore 
+### Amazon Appstore
 The latest stable version of the Flutter SDK doesn't have support for the Amazon Appstore. If you would like to use our SDK with the Amazon Appstore, use the version tagged [amazon-latest](https://github.com/RevenueCat/purchases-flutter/releases/tag/amazon-latest) and follow the [AMAZON_INSTRUCTIONS.md](https://rev.cat/amazon-flutter-instructions) docs to get set up.
 
-### iOS Deployment Target 
+### iOS Deployment Target
 RevenueCat is compatible with iOS 11.0 or higher. Flutter does not automatically set the iOS deployment target for your project. You need to make sure that the deployment target is set to 11.0 or higher. To do that, simply edit `ios/Podfile` and add the following line if it's not already there:
 
 ```
@@ -41,7 +41,7 @@ platform :ios, '11.0'
 Set it to 11.0 or a higher version for RevenueCat to work.
 
 ### iOS Swift Version
-RevenueCat requires Swift >= 5.0 to work. If the `Podfile` in your project's `ios` folder specifies a Swift version, make sure that it's at least 5.0, otherwise you may run into build issues.  
+RevenueCat requires Swift >= 5.0 to work. If the `Podfile` in your project's `ios` folder specifies a Swift version, make sure that it's at least 5.0, otherwise you may run into build issues.
 
 ## Import Purchases
 
@@ -50,7 +50,7 @@ You should now be able to import `purchases_flutter`.
 import content2 from "!!raw-loader!@site/code_blocks/getting-started/installation/flutter_2.kt";
 
 <RCCodeBlock tabs={[
-    { type: 'kotlin', content: content2, name: 'Kotlin' }
+    { type: 'flutter', content: content2, name: 'Dart' }
 ]} />
 
 :::info Enable In-App Purchase capability for iOS projects in Xcode
@@ -61,7 +61,7 @@ Don't forget to enable the In-App Purchase capability for your iOS project under
 
 ![](/images/66c301a-65db383-Screen_Shot_2018-12-18_at_9.15.09_AM_51ae7051850be013d83c1e9a8f107b61.png "65db383-Screen_Shot_2018-12-18_at_9.15.09_AM.png")
 
-:::warning 
+:::warning
 If you're using other plugins like [mobx](https://pub.dev/packages/flutter_mobx), you may run into conflicts with types from other plugins having the same name as those defined in `purchases_flutter`. \nIf this happens, you can resolve the ambiguity in the types by adding an import alias, for example: \n```dart\nimport 'package:purchases_flutter/purchases_flutter.dart' as purchases;\n```\nAfter that, you can reference the types from `purchases_flutter` as `purchases.Foo`, like `purchases.PurchaserInfo`.
 :::
 

@@ -78,7 +78,7 @@ const gettingStartedCategory = Category({
         Page({ slug: "android" }),
         Page({ slug: "reactnative" }),
         Page({ slug: "flutter" }),
-        Page({ slug: "ionic" }),
+        Page({ slug: "capacitor" }),
         Page({ slug: "cordova" }),
         Page({ slug: "unity" }),
         Page({ slug: "web-sdk" }),
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		npm install @revenuecat/purchases-capacitor
		npx cap sync