Add Capacitor docs for Paywalls and Customer Center (#920)

Author: tonidero

code_blocks/tools/paywalls_cap_1.ts.txt

@@ -0,0 +1,37 @@
+import { RevenueCatUI } from '@revenuecat/purchases-capacitor-ui';
+import { PAYWALL_RESULT } from '@revenuecat/purchases-capacitor';
+
+async function presentPaywall(): Promise<boolean> {
+    // Present paywall for current offering:
+    const { result } = await RevenueCatUI.presentPaywall();
+    // or if you need to present a specific offering:
+    const { result } = await RevenueCatUI.presentPaywall({
+        offering: offering // Optional Offering object obtained through getOfferings
+    });
+
+    // Handle result if needed.
+    switch (paywallResult) {
+        case PAYWALL_RESULT.NOT_PRESENTED:
+        case PAYWALL_RESULT.ERROR:
+        case PAYWALL_RESULT.CANCELLED:
+            return false;
+        case PAYWALL_RESULT.PURCHASED:
+        case PAYWALL_RESULT.RESTORED:
+            return true;
+        default:
+            return false;
+    }
+}
+
+async function presentPaywallIfNeeded() {
+    // Present paywall for current offering:
+    const { result } = await RevenueCatUI.presentPaywallIfNeeded({ requiredEntitlementIdentifier: 'YOUR_ENTITLEMENT_ID'});
+
+    // If you need to present a specific offering:
+    const { result } = await RevenueCatUI.presentPaywallIfNeeded({
+        offering: offering, // Optional Offering object obtained through getOfferings
+        requiredEntitlementIdentifier: "pro"
+    });
+
+    // Handle result if needed.
+}

docs/tools/customer-center/customer-center-capacitor.mdx

@@ -0,0 +1,39 @@
+---
+title: Integrating Customer Center on Capacitor
+sidebar_label: Capacitor Integration
+slug: customer-center-capacitor
+hidden: false
+---
+import { sdkVersions } from '@site/src/components/CustomerCenter/CustomerCenterSDKTable';
+
+## Installation
+
+[![Release](https://img.shields.io/github/release/RevenueCat/purchases-capacitor.svg?filter=!*beta*&style=flat)](https://github.com/RevenueCat/purchases-capacitor/releases)
+
+Before integrating the Customer Center in Capacitor, update your `package.json` to include `@revenuecat/purchases-capacitor-ui` <code>{sdkVersions.capacitor}</code> or higher to your app.
+
+```json
+{
+  "dependencies": {
+    "@revenuecat/purchases-capacitor": "<latest version>",
+    "@revenuecat/purchases-capacitor-ui": "<latest version>"
+  }
+}
+```
+
+## Integration
+
+Opening the customer center is as simple as:
+
+```tsx
+await RevenueCatUI.presentCustomerCenter();
+```
+
+## Setup promotional offers
+
+Promotional Offers allow developers to apply custom pricing and trials to new customers and to existing and lapsed subscriptions. Unique promotional offers can be assigned to different paths and survey responses in the Customer Center, but first they must be setup in App Store Connect and Google Play Store.
+
+The Customer Center will automatically show offers based on specific user actions. By default we have defined it for cancellations but it can be modified to any of the defined paths. For Capacitor you are going to have to configure these promotional offers in both Google Play Console and App Store Connect.
+Refer to [configuring Google Play Store promotional offers](/tools/customer-center/customer-center-promo-offers-google) and [configuring App Store Connect promotional offers](/tools/customer-center/customer-center-promo-offers-apple) for detailed instructions.
+
+Learn more about configuring the Customer Center in the [configuration guide](/tools/customer-center/customer-center-configuration).

docs/tools/customer-center/customer-center-installation.mdx

@@ -29,4 +29,5 @@ Follow instructions on how to install the SDK in your particular platform:
 - [Native iOS](/tools/customer-center/customer-center-integration#installation)
 - [Native Android](/tools/customer-center/customer-center-integration-android#installation)
 - [Flutter](/tools/customer-center/customer-center-flutter#installation)
-- [React Native](/tools/customer-center/customer-center-react-native#installation)
+- [React Native](/tools/customer-center/customer-center-react-native#installation)
+- [Capacitor](/tools/customer-center/customer-center-capacitor#installation)

docs/tools/paywalls/displaying-paywalls.mdx

@@ -207,6 +207,25 @@ Available listeners at this time are:
 - onRestoreCompleted
 - onRestoreError
 
+### Capacitor
+
+There are several ways to present paywalls:
+
+- Using `RevenueCatUI.presentPaywall`: this will display a paywall when invoked.
+- Using `RevenueCatUI.presentPaywallIfNeeded`: this will present a paywall only if the customer does not have an unlocked entitlement.
+
+import cap1 from '@site/code_blocks/tools/paywalls_cap_1.ts.txt?raw';
+
+<RCCodeBlock
+  tabs={[
+    {
+      type: "capacitor",
+      title: "RevenueCatUI.presentPaywall",
+      content: cap1,
+    },
+  ]}
+/>
+
 ## Handling paywall navigation
 
 When creating a paywall, consider whether it will be presented in a sheet, or as a full screen view. Sheets won't require a dedicated close button. Full screen views should have either a close button (if presented modally) or a back button (if part of a navigation stack or host) unless you intend to provide a hard paywall to your customers that cannot be bypassed.

docs/tools/paywalls/installation.mdx

@@ -14,6 +14,7 @@ RevenueCat Paywalls are included as part of the RevenueCatUI package in the Reve
 | react-native-purchases | 8.6.1 and up                 | 
 | purchases-flutter         | 8.5.0 and up                 |
 | purchases-kmp             | 1.5.1+13.18.1 and up                  |
+| purchases-capacitor       | 10.3.1 and up                         |
 
 ### Platforms (support for more coming)
 
@@ -145,4 +146,16 @@ kotlin {
 }
 ```
 
-Lastly, you'll need to make sure you link the `PurchasesHybridCommonUI` native iOS framework. If your iOS app uses Swift Package Manager, add the `PurchasesHybridCommonUI` library to your target in the same way you added the `PurchasesHybridCommon` library. If your iOS app uses CocoaPods, either update its `Podfile`, or update your Compose Multiplatform module's `build.gradle.kts`, depending on how your Multiplatform module is integrated with your iOS project.
+Lastly, you'll need to make sure you link the `PurchasesHybridCommonUI` native iOS framework. If your iOS app uses Swift Package Manager, add the `PurchasesHybridCommonUI` library to your target in the same way you added the `PurchasesHybridCommon` library. If your iOS app uses CocoaPods, either update its `Podfile`, or update your Compose Multiplatform module's `build.gradle.kts`, depending on how your Multiplatform module is integrated with your iOS project.
+
+## Capacitor Installation
+
+- Update your `package.json` to include `@revenuecat/purchases-capacitor-ui`. Make sure it matches the version of `@revenuecat/purchases-capacitor`:
+```json
+{
+  "dependencies": {
+    "@revenuecat/purchases-capacitor": "<latest version>",
+    "@revenuecat/purchases-capacitor-ui": "<latest version>"
+  }
+}
+```

src/components/CustomerCenter/CustomerCenterSDKTable.tsx

@@ -6,6 +6,7 @@ export const sdkVersions = {
   reactNative: "8.7.0",
   flutter: "8.6.0",
   kmp: "1.7.0",
+  capacitor: "10.3.1",
 };
 
 export const CustomerCenterSDKTable: React.FC = () => {
@@ -40,6 +41,12 @@ export const CustomerCenterSDKTable: React.FC = () => {
       link: "https://github.com/RevenueCat/purchases-kmp",
       version: `${sdkVersions.kmp} and higher`,
     },
+    {
+      name: "Capacitor",
+      sdk: "@revenuecat/purchases-capacitor-ui",
+      link: "https://github.com/RevenueCat/purchases-capacitor",
+      version: `${sdkVersions.capacitor} and higher`,
+    },
   ];
 
   return (