Add community plugin registry

pages/community/registry.md

@@ -0,0 +1,8 @@
+---
+title: Capacitor Community Plugin Registry
+description: Capacitor Community Plugin Registry
+contributors:
+  - ihadeed
+---
+
+TODO: add list of community plugins + search box

pages/community/stripe.md

@@ -0,0 +1,248 @@
+---
+title: Stripe
+description: Stripe plugin for Capacitor apps
+contributors:
+  - ihadeed
+platforms:
+  - ios
+  - android
+categories:
+  - payments
+---
+
+# Installation
+
+## Basic setup
+<br>
+
+#### 1. Install NPM package
+
+```shell
+npm i -S @capacitor-community/stripe
+```
+<br>
+
+#### 2. Import from @capacitor/core
+```ts
+import { Plugins } from '@capacitor/core';
+
+const { Stripe } = Plugins;
+```
+
+#### 3. Provide your publishable key
+```ts
+Stripe.setPublishableKey({ key: 'Your key here' });
+```
+
+<br><br>
+
+## Android Setup
+
+<br>
+
+#### Requirements
+This plugin requires `@capacitor/[email protected]` or higher as it relies on Android X support.
+
+<br>
+
+#### Basic setup
+Include the plugin in your app's `MainActivity.java` file:
+```java
+//
+// other imports
+// ...
+
+// 1. Import Stripe plugin
+import ca.zyra.capacitor.stripe.Stripe;
+
+public class MainActivity extends BridgeActivity {
+    @Override
+    public void onCreate(Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+
+        // Initializes the Bridge
+        this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
+            //
+            // other plugins
+            // ...
+
+            // 2. Add Stripe plugin here
+            add(Stripe.class);
+        }});
+    }
+}
+```
+
+<br>
+
+#### Google Pay
+To enable payments using Google Pay you must add the following `<meta-data>` tag to `AndroidManifest.xml` inside the  
+main `<application />` tag:
+```xml
+<application
+  ...
+  <meta-data
+    android:name="com.google.android.gms.wallet.api.enabled"
+    android:value="true" />
+</application>
+```
+
+There is no need to add any Gradle dependencies as they are already included with this plugin.
+
+> Review the steps outlined here for more details on [Going live with Google Pay](https://stripe.com/docs/google-pay#going-live-with-google-pay).
+
+<br><br>
+
+## iOS Setup
+To enable payments using Apple Pay you must follow the first 3 steps in [this guide](https://stripe.com/docs/apple-pay#native):
+
+- 1. [Register for Apple Merchant ID](https://stripe.com/docs/apple-pay#merchantid)
+- 2. [Create a new Apple Pay certificate](https://stripe.com/docs/apple-pay#csr)
+- 3. [Integrate with Xcode](https://stripe.com/docs/apple-pay#setup)
+
+
+ # Usage Example
+
+
+ ## Initializing the plugin
+ ```ts
+ import { Plugins } from '@capacitor/core';
+
+ const { Stripe } = Plugins;
+
+ ...
+
+ await Stripe.setPublishableKey('pk_test_....');
+ ```
+
+ ## Validating card information
+ ```ts
+ const { valid } = await Stripe.validateCardNumber({ number: '424242424242' });
+ // valid: true
+
+ const { valid } = await Stripe.validateExpiryDate({ exp_month: 12, exp_year: 25 });
+ // valid: true
+
+ const { valid } = await Stripe.validateCVC({ cvc: '244' });
+ // valid: true
+ ```
+
+ ## Creating card token 
+ ```ts
+ const res = await Stripe.createCardToken({
+   number: '4242424242424242',
+   exp_month: 12,
+   exp_year: 25,
+   cvc: '224',
+ });
+
+ // {
+ //    id: 'tok_....',
+ //    card: {
+ //      last4: '4242',
+ //      exp_month: 12,
+ //      exp_year: 25,
+ //    }
+ // }
+ ```
+
+ ## Confirming setup intent
+ ```ts
+ const clientSecret: string = 'secret from your API';
+
+ const res = await Stripe.confirmSetupIntent({
+   clientSecret,
+   card: {
+       number: '4242424242424242',
+       exp_month: 12,
+       exp_year: 25,
+       cvc: '224',
+   },
+   redirectUrl: 'https://app.myapp.com', // Required for Android
+ });
+ ```
+
+ ## Confirming payment intent
+ ```ts
+ const clientSecret: string = 'secret from your API';
+
+ //
+ // confirm with card
+ await Stripe.confirmPaymentIntent({
+   clientSecret,
+   card: {
+       number: '4242424242424242',
+       exp_month: 12,
+       exp_year: 25,
+       cvc: '224',
+   },
+   redirectUrl: 'https://app.myapp.com', // Required for Android
+ });
+
+ //
+ // confirm with apple pay
+ await Stripe.confirmPaymentIntent({
+   clientSecret,
+   applePayOptions: {
+     // options here
+     merchantId: 'merchant.company',
+     country: 'CA',
+     currency: 'CAD',
+     items: [
+       {
+         label: 'Some item',
+         amount: '50', // amount in dollars
+       }
+     ]
+   },
+ });
+
+ //
+ // confirm with payment method id
+ await Stripe.confirmPaymentIntent({
+   clientSecret,
+   paymentMethodId: 'pm_...',
+ });
+
+ //
+ // confirm with Google Pay
+ await Stripe.confirmPaymentIntent({
+   clientSecret,
+   fromGooglePay: true,
+   googlePayOptions: { // just demo options
+     currencyCode: 'CAD',
+     totalPrice: 500.00,
+     totalPriceStatus: 'FINAL',
+     allowedAuthMethods: ['PAN_ONLY'],
+     allowedCardNetworks: ['VISA'],
+   },
+ });
+ ```
+
+ ## Payment methods
+
+ ```ts
+ // ephemeral key issued by your API
+ const ephemeralKey = {
+   id: 'eph_....',
+   object: 'ephemeral_key',
+   secret: '....',
+   ...
+ };
+
+ await Stripe.initCustomerSession(ephemeralKey);
+
+ // get payment methods
+ const { paymentMethods } = await Stripe.customerPaymentMethods();
+
+ // add new payment method
+ const token = 'tok_....'; // token from createCardToken
+ await Stripe.addCustomerSource({ sourceId: token });
+
+ // set payment method as default
+ // (Android only)
+ const sourceId = 'card_....';
+ await Stripe.setCustomerDefaultSource({ sourceId });
+ ```
+
+

pages/docs/plugins/README.md

@@ -2,7 +2,6 @@
 
 - Getting Started
   - [Introduction](index.md)
-  - [Community Plugins](community.md)
   - [Enterprise Plugins](enterprise.md)
 - Creating Plugins
   - [Overview](creating-plugins.md)
@@ -36,3 +35,6 @@
   - [Status Bar](../apis/status-bar/index.md)
   - [Storage](../apis/storage/index.md)
   - [Toast](../apis/toast/index.md)
+- Community Plugins
+  - [Introduction](community.md)
+  - [Plugins ->](../../community/registry.md)

pages/docs/plugins/community.md

@@ -7,16 +7,16 @@ description: Capacitor Community Plugins
 
 The community has built a number of Capacitor plugins to add functionality to your app.
 
-There are a number of ways to find community plugins: Search the web or npm to find any published plugins, or explore the official [Capacitor Community](https://github.com/capacitor-community) GitHub org and [NPM scope](https://npmjs.com/~capacitor-community) for a curated list of quality, community supported Capacitor plugins.
+There are a number of ways to find community plugins: Search the web or npm to find any published plugins, or explore the official [Capacitor Community](https://github.com/capacitor-community) GitHub org and [npm scope](https://npmjs.com/~capacitor-community) for a curated list of quality, community-supported Capacitor plugins.
 
 ## Capacitor Community
 
-The official [Capacitor Community](https://github.com/capacitor-community) GitHub org and [NPM scope](https://npmjs.com/~capacitor-community) is a new effort to curate the best Capacitor community-supported plugins and provide consistent project and code conventions. The Capacitor core team facilitates work but does not officially maintain any plugins in this org.
+The official [Capacitor Community](https://github.com/capacitor-community) GitHub org and [npm scope](https://npmjs.com/~capacitor-community) is a new effort to curate the best Capacitor community-supported plugins and provide consistent project and code conventions. The Capacitor core team facilitates work but does not officially maintain any plugins in this org.
 
-<a href="https://github.com/capacitor-community/" class="ui-button">Explore Capacitor Community</a>
+[Explore the Capacitor Community &#8250;](https://github.com/capacitor-community)
 
 ## Cordova Ecosystem
 
-Capacitor has support for most Cordova plugins, so developers can use the [hundreds of existing Cordova plugins](https://cordova.apache.org/plugins/) in their Capacitor apps. While certain Cordova plugins are [not compatible](https://capacitorjs.com/docs/cordova/known-incompatible-plugins) with Capacitor, most are, so it's worth trying one if there's no existing Capacitor-specific plugin available.
+Capacitor has support for most Cordova plugins, so developers can use the [hundreds of existing Cordova plugins](https://cordova.apache.org/plugins/) in their Capacitor apps. While certain Cordova plugins are [not compatible](/docs/plugins/cordova#known-incompatible-plugins) with Capacitor, most are, so it's worth trying one if there's no existing Capacitor-specific plugin available.
 
 Also see the [Ionic Native Community](https://ionicframework.com/docs/native/community) plugins for a list of primarily Cordova plugins with convenient wrappers to make them easier to use in your apps. Feel free to use the Ionic Native Community wrappers or simply use the list as a reference for quality Cordova plugins.

src/components.d.ts

@@ -6,7 +6,9 @@
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { BlogData } from "./data.server/blog";
+import { CommunityData } from "./data.server/community";
 import { DocsData, DocsTemplate } from "./data.server/docs";
+import { PluginInfo } from "./components/community-menu/community-menu";
 import { HeadingData, PageNavigation, TableOfContents } from "@stencil/ssg";
 export namespace Components {
     interface AnchorLink {
@@ -47,6 +49,15 @@ export namespace Components {
     code: string[];
   };
     }
+    interface CommunityComponent {
+        "data": CommunityData;
+    }
+    interface CommunityMenu {
+        "activePath": string;
+        "plugins": PluginInfo[];
+        "template": DocsTemplate;
+        "toggleOverlayMenu": () => Promise<void>;
+    }
     interface CommunityPage {
         "data": any;
     }
@@ -175,6 +186,18 @@ declare global {
         prototype: HTMLCodeTabsElement;
         new (): HTMLCodeTabsElement;
     };
+    interface HTMLCommunityComponentElement extends Components.CommunityComponent, HTMLStencilElement {
+    }
+    var HTMLCommunityComponentElement: {
+        prototype: HTMLCommunityComponentElement;
+        new (): HTMLCommunityComponentElement;
+    };
+    interface HTMLCommunityMenuElement extends Components.CommunityMenu, HTMLStencilElement {
+    }
+    var HTMLCommunityMenuElement: {
+        prototype: HTMLCommunityMenuElement;
+        new (): HTMLCommunityMenuElement;
+    };
     interface HTMLCommunityPageElement extends Components.CommunityPage, HTMLStencilElement {
     }
     var HTMLCommunityPageElement: {
@@ -295,6 +318,8 @@ declare global {
         "capacitor-site-footer": HTMLCapacitorSiteFooterElement;
         "code-snippet": HTMLCodeSnippetElement;
         "code-tabs": HTMLCodeTabsElement;
+        "community-component": HTMLCommunityComponentElement;
+        "community-menu": HTMLCommunityMenuElement;
         "community-page": HTMLCommunityPageElement;
         "contributor-list": HTMLContributorListElement;
         "cordova-page": HTMLCordovaPageElement;
@@ -356,6 +381,15 @@ declare namespace LocalJSX {
     code: string[];
   };
     }
+    interface CommunityComponent {
+        "data"?: CommunityData;
+    }
+    interface CommunityMenu {
+        "activePath"?: string;
+        "onMenuToggled"?: (event: CustomEvent<any>) => void;
+        "plugins"?: PluginInfo[];
+        "template"?: DocsTemplate;
+    }
     interface CommunityPage {
         "data"?: any;
     }
@@ -428,6 +462,8 @@ declare namespace LocalJSX {
         "capacitor-site-footer": CapacitorSiteFooter;
         "code-snippet": CodeSnippet;
         "code-tabs": CodeTabs;
+        "community-component": CommunityComponent;
+        "community-menu": CommunityMenu;
         "community-page": CommunityPage;
         "contributor-list": ContributorList;
         "cordova-page": CordovaPage;
@@ -463,6 +499,8 @@ declare module "@stencil/core" {
             "capacitor-site-footer": LocalJSX.CapacitorSiteFooter & JSXBase.HTMLAttributes<HTMLCapacitorSiteFooterElement>;
             "code-snippet": LocalJSX.CodeSnippet & JSXBase.HTMLAttributes<HTMLCodeSnippetElement>;
             "code-tabs": LocalJSX.CodeTabs & JSXBase.HTMLAttributes<HTMLCodeTabsElement>;
+            "community-component": LocalJSX.CommunityComponent & JSXBase.HTMLAttributes<HTMLCommunityComponentElement>;
+            "community-menu": LocalJSX.CommunityMenu & JSXBase.HTMLAttributes<HTMLCommunityMenuElement>;
             "community-page": LocalJSX.CommunityPage & JSXBase.HTMLAttributes<HTMLCommunityPageElement>;
             "contributor-list": LocalJSX.ContributorList & JSXBase.HTMLAttributes<HTMLContributorListElement>;
             "cordova-page": LocalJSX.CordovaPage & JSXBase.HTMLAttributes<HTMLCordovaPageElement>;