From 7010bc66d78d18efa723fe61518d5e400f802966 Mon Sep 17 00:00:00 2001 From: Cesar de la Vega Date: Wed, 17 Apr 2024 15:16:11 +0200 Subject: [PATCH] cleanup ionic and add capacitor --- .../installation/capacitor_add_plugin.shell | 2 + .../installation/capacitor.mdx | 87 +++++++++++++++++++ docs/getting-started/installation/cordova.mdx | 40 +++++++-- docs/getting-started/installation/flutter.mdx | 10 +-- docs/getting-started/installation/ionic.mdx | 66 -------------- sidebars.js | 2 +- 6 files changed, 130 insertions(+), 77 deletions(-) create mode 100644 code_blocks/getting-started/installation/capacitor_add_plugin.shell create mode 100644 docs/getting-started/installation/capacitor.mdx delete mode 100644 docs/getting-started/installation/ionic.mdx diff --git a/code_blocks/getting-started/installation/capacitor_add_plugin.shell b/code_blocks/getting-started/installation/capacitor_add_plugin.shell new file mode 100644 index 00000000..e39ced5d --- /dev/null +++ b/code_blocks/getting-started/installation/capacitor_add_plugin.shell @@ -0,0 +1,2 @@ +npm install @revenuecat/purchases-capacitor +npx cap sync \ No newline at end of file diff --git a/docs/getting-started/installation/capacitor.mdx b/docs/getting-started/installation/capacitor.mdx new file mode 100644 index 00000000..6c876065 --- /dev/null +++ b/docs/getting-started/installation/capacitor.mdx @@ -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"; + + + +## 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"; + + + +### 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"; + + + +### 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"; + + + +### 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"; + + + +## 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) \ No newline at end of file diff --git a/docs/getting-started/installation/cordova.mdx b/docs/getting-started/installation/cordova.mdx index 2ae1d5ef..30cc7691 100644 --- a/docs/getting-started/installation/cordova.mdx +++ b/docs/getting-started/installation/cordova.mdx @@ -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"; ## 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"; + + + +## 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"; + + + +## 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"; + + ## Next Steps diff --git a/docs/getting-started/installation/flutter.mdx b/docs/getting-started/installation/flutter.mdx index 2e6896fd..ae2e39a6 100644 --- a/docs/getting-started/installation/flutter.mdx +++ b/docs/getting-started/installation/flutter.mdx @@ -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"; :::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`. ::: diff --git a/docs/getting-started/installation/ionic.mdx b/docs/getting-started/installation/ionic.mdx deleted file mode 100644 index f6c0deed..00000000 --- a/docs/getting-started/installation/ionic.mdx +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Ionic -slug: ionic -excerpt: Instructions for Installing Purchases SDK for Ionic -hidden: false ---- - -We offer official plugins for both Capacitor and Cordova. We recommend using the Capacitor plugin when possible. Install the plugin depending on your framework: - -import capacitorContent from "!!raw-loader!@site/code_blocks/getting-started/installation/ionic_capacitor.txt"; -import cordovaContent from "!!raw-loader!@site/code_blocks/getting-started/installation/ionic_cordova.txt"; - - - -## 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"; -import cordovaTypesContent from "!!raw-loader!@site/code_blocks/getting-started/installation/ionic_typescript_cordova.ts"; - - - -## 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"; -import cordovaAngularContent from "!!raw-loader!@site/code_blocks/getting-started/installation/ionic_angular_cordova.ts"; - - - -## 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"; -import cordovaReactContent from "!!raw-loader!@site/code_blocks/getting-started/installation/ionic_react_cordova.ts"; - - - -## 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"; - - \ No newline at end of file diff --git a/sidebars.js b/sidebars.js index 612638a6..d9ad8c5e 100644 --- a/sidebars.js +++ b/sidebars.js @@ -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" }),