docs(payments-plugin): Add inline documentation for Mollie plugin

Relates to #1087

packages/core/src/api/schema/shop-api/shop.api.graphql

@@ -164,7 +164,7 @@ Passed as input to the `addPaymentToOrder` mutation.
 """
 input PaymentInput {
     """
-    This field should correspond to the `code` property of a PaymentMethodHandler.
+    This field should correspond to the `code` property of a PaymentMethod.
     """
     method: String!
     """

packages/payment-plugin/src/braintree/braintree-payment-method.ts → packages/payments-plugin/src/braintree/braintree-payment-method.ts

@@ -11,9 +11,9 @@ export const braintreePaymentMethodHandler = new PaymentMethodHandler({
     code: 'braintree',
     description: [{ languageCode: LanguageCode.en, value: 'Braintree' }],
     args: {
-        merchantId: { type: 'string' },
-        publicKey: { type: 'string' },
-        privateKey: { type: 'string' },
+        merchantId: { type: 'string', label: [{ languageCode: LanguageCode.en, value: 'Merchant ID' }] },
+        publicKey: { type: 'string', label: [{ languageCode: LanguageCode.en, value: 'Private Key' }] },
+        privateKey: { type: 'string', label: [{ languageCode: LanguageCode.en, value: 'Public Key' }] },
     },
 
     async createPayment(ctx, order, amount, args, metadata) {

packages/payment-plugin/src/index.ts → packages/payments-plugin/src/index.ts

@@ -1,4 +1,4 @@
 /**
- * This is a placeholder. Please import from one of the sub-packages, e.g `@vendure/payments-plugin/package/stripe`
+ * This is a placeholder. Please import from one of the sub-packages, e.g `@vendure/payments-plugin/package/braintree`
  */
 export const placeholder = 'Vendure Payments Plugin';

packages/payments-plugin/src/mollie/README.md

@@ -0,0 +1,5 @@
+# Mollie payment plugin
+
+Plugin to enable payments through the [Mollie platform](https://docs.mollie.com/).
+
+For documentation, see https://www.vendure.io/docs/typescript-api/payments-plugin/mollie-plugin

packages/payment-plugin/src/mollie/mollie.handler.ts → packages/payments-plugin/src/mollie/mollie.handler.ts

@@ -26,22 +26,32 @@ export const molliePaymentHandler = new PaymentMethodHandler({
     args: {
         apiKey: {
             type: 'string',
+            label: [{ languageCode: LanguageCode.en, value: 'API Key' }],
         },
         redirectUrl: {
             type: 'string',
+            label: [{ languageCode: LanguageCode.en, value: 'Redirect URL' }],
         },
     },
     init(injector) {
         paymentMethodService = injector.get(PaymentMethodService);
         options = injector.get(PLUGIN_INIT_OPTIONS);
     },
-    createPayment: async (ctx, order, amount, args, _metadata): Promise<CreatePaymentResult | CreatePaymentErrorResult> => {
+    createPayment: async (
+        ctx,
+        order,
+        amount,
+        args,
+        _metadata,
+    ): Promise<CreatePaymentResult | CreatePaymentErrorResult> => {
         try {
             const { apiKey } = args;
             let { redirectUrl } = args;
             const paymentMethods = await paymentMethodService.findAll(ctx);
-            const paymentMethod = paymentMethods.items.find(pm =>
-                pm.handler.args.find(arg => arg.value === apiKey) && pm.handler.args.find(arg => arg.value === redirectUrl),
+            const paymentMethod = paymentMethods.items.find(
+                pm =>
+                    pm.handler.args.find(arg => arg.value === apiKey) &&
+                    pm.handler.args.find(arg => arg.value === redirectUrl),
             );
             if (!paymentMethod) {
                 throw Error(`No paymentMethod found for given apiKey`); // This should never happen
@@ -78,7 +88,7 @@ export const molliePaymentHandler = new PaymentMethodHandler({
             return {
                 amount: order.totalWithTax,
                 state: 'Error',
-                errorMessage: err.message
+                errorMessage: err.message,
             };
         }
     },

packages/payments-plugin/src/mollie/mollie.plugin.ts

@@ -0,0 +1,121 @@
+import { PluginCommonModule, RuntimeVendureConfig, VendurePlugin } from '@vendure/core';
+
+import { PLUGIN_INIT_OPTIONS } from './constants';
+import { MollieController } from './mollie.controller';
+import { molliePaymentHandler } from './mollie.handler';
+
+/**
+ * @description
+ * Configuration options for the Mollie payments plugin.
+ *
+ * @docsCategory payments-plugin
+ * @docsPage MolliePlugin
+ */
+export interface MolliePluginOptions {
+    /**
+     * @description
+     * The host of your storefront application, e.g. `'https://my-shop.com'`
+     */
+    vendureHost: string;
+}
+
+/**
+ * @description
+ * Plugin to enable payments through the [Mollie platform](https://docs.mollie.com/).
+ * This plugin uses the Payments API from Mollie, not the Orders API.
+ *
+ * ## Requirements
+ *
+ * 1. You will need to create a Mollie account and get your apiKey in the dashboard.
+ * 2. Install the Payments plugin and the Mollie client:
+ *
+ *     `yarn add \@vendure/payments-plugin \@mollie/api-client`
+ *
+ *     or
+ *
+ *     `npm install \@vendure/payments-plugin \@mollie/api-client`
+ *
+ * ## Setup
+ *
+ * 1. Add the plugin to your VendureConfig `plugins` array:
+ *     ```TypeScript
+ *     import { MolliePlugin } from '\@vendure/payments-plugin/package/mollie';
+ *
+ *     // ...
+ *
+ *     plugins: [
+ *       MolliePlugin.init({ vendureHost: 'https://yourhost.io/' }),
+ *     ]
+ *     ```
+ * 2. Create a new PaymentMethod in the Admin UI, and select "Mollie payments" as the handler.
+ * 3. Set the Redirect URL. This is the url that is used to redirect the end-user, e.g. `https://storefront/order`
+ * 4. Set your Mollie apiKey in the `API Key` field.
+ *
+ * ## Storefront usage
+ *
+ * In your storefront you add a payment to an order using the `addPaymentToOrder` mutation. In this example, our Mollie
+ * PaymentMethod was given the code "mollie-payment-method".
+ *
+ * ```GraphQL
+ * mutation AddPaymentToOrder {
+ *   addPaymentToOrder(input: {
+ *     method: "mollie-payment-method"
+ *     metadata: {}
+ *   }) {
+ *    ...on Order {
+ *      id
+ *      state
+ *      payments {
+ *          id
+ *          metadata
+ *      }
+ *    }
+ *    ...on ErrorResult {
+ *      errorCode
+ *      message
+ *    }
+ *   }
+ * }
+ * ```
+ * The response will have
+ * a `order.payments.metadata.public.redirectLink` in it, which can be used to redirect your customer to the Mollie
+ * platform.
+ *
+ * After completing payment on the Mollie platform,
+ * the user is redirected to the configured redirect url + orderCode: `https://storefront/order/CH234X5`
+ *
+ * ## Local development
+ *
+ * Use something like [localtunnel](https://github.com/localtunnel/localtunnel) to test on localhost.
+ *
+ * ```bash
+ * npx localtunnel --port 3000 --subdomain my-shop-local-dev
+ * > your url is: https://my-shop-local-dev.loca.lt     <- use this as the vendureHost for local dev.
+ * ```
+ *
+ * @docsCategory payments-plugin
+ * @docsPage MolliePlugin
+ * @docsWeight 0
+ */
+@VendurePlugin({
+    imports: [PluginCommonModule],
+    controllers: [MollieController],
+    providers: [{ provide: PLUGIN_INIT_OPTIONS, useFactory: () => MolliePlugin.options }],
+    configuration: (config: RuntimeVendureConfig) => {
+        config.paymentOptions.paymentMethodHandlers.push(molliePaymentHandler);
+        return config;
+    },
+})
+export class MolliePlugin {
+    static options: MolliePluginOptions;
+
+    /**
+     * @description
+     * Initialize the mollie payment plugin
+     * @param vendureHost is needed to pass to mollie for callback
+     */
+    static init(options: MolliePluginOptions): typeof MolliePlugin {
+        this.options = options;
+        return MolliePlugin;
+    }
+}

scripts/changelogs/generate-changelog.ts

@@ -30,6 +30,7 @@ const VALID_SCOPES: string[] = [
     'email-plugin',
     'email',
     'job-queue-plugin',
+    'payments-plugin',
     'testing',
     'ui-devkit',
 ];

scripts/codegen/generate-graphql-types.ts

@@ -161,24 +161,26 @@ Promise.all([
                         maybeValue: 'T',
                     },
                 },
-                [path.join(
-                    __dirname,
-                    '../../packages/payment-plugin/e2e/graphql/generated-admin-types.ts',
-                )]: {
-                    schema: [ADMIN_SCHEMA_OUTPUT_FILE],
-                    documents: path.join( __dirname, '../../packages/payment-plugin/e2e/graphql/admin-queries.ts'),
-                    plugins: clientPlugins,
-                    config: e2eConfig,
-                },
-                [path.join(
-                    __dirname,
-                    '../../packages/payment-plugin/e2e/graphql/generated-shop-types.ts',
-                )]: {
-                    schema: [SHOP_SCHEMA_OUTPUT_FILE],
-                    documents: path.join( __dirname, '../../packages/payment-plugin/e2e/graphql/shop-queries.ts'),
-                    plugins: clientPlugins,
-                    config: e2eConfig,
-                },
+                [path.join(__dirname, '../../packages/payments-plugin/e2e/graphql/generated-admin-types.ts')]:
+                    {
+                        schema: [ADMIN_SCHEMA_OUTPUT_FILE],
+                        documents: path.join(
+                            __dirname,
+                            '../../packages/payments-plugin/e2e/graphql/admin-queries.ts',
+                        ),
+                        plugins: clientPlugins,
+                        config: e2eConfig,
+                    },
+                [path.join(__dirname, '../../packages/payments-plugin/e2e/graphql/generated-shop-types.ts')]:
+                    {
+                        schema: [SHOP_SCHEMA_OUTPUT_FILE],
+                        documents: path.join(
+                            __dirname,
+                            '../../packages/payments-plugin/e2e/graphql/shop-queries.ts',
+                        ),
+                        plugins: clientPlugins,
+                        config: e2eConfig,
+                    },
             },
         });
     })

scripts/docs/generate-typescript-docs.ts

@@ -24,6 +24,7 @@ const sections: DocsSectionConfig[] = [
             'packages/email-plugin/src/',
             'packages/elasticsearch-plugin/src/',
             'packages/job-queue-plugin/src/',
+            'packages/payments-plugin/src/',
             'packages/testing/src/',
         ],
         exclude: [/generated-shop-types/],