@medipass/checkout-sdk 3.0.0-alpha.0 → 3.0.0-alpha.1

package/dist/umd/initialiseWindow.d.ts

@@ -0,0 +1,4 @@
+declare function initialiseWindow({ url }: {
+    url: string;
+}): Window | null | undefined;
+export default initialiseWindow;

package/dist/umd/overlay.d.ts

@@ -0,0 +1,21 @@
+interface Overlay {
+    contentElement: HTMLElement | null;
+    removeOverlay: () => void;
+    createOverlay: ({ window, onClickRelaunch, onClickCancel, }: {
+        window: Window;
+        onClickRelaunch: () => void;
+        onClickCancel: () => void;
+    }) => void;
+    createSubHeading: ({ window, onClickRelaunch, onClickCancel, }: {
+        window: Window;
+        onClickRelaunch: () => void;
+        onClickCancel: () => void;
+    }) => HTMLElement | null;
+    updateSubHeading: ({ window, onClickRelaunch, onClickCancel, }: {
+        window: Window;
+        onClickRelaunch: () => void;
+        onClickCancel: () => void;
+    }) => void;
+}
+declare const overlay: Overlay;
+export default overlay;

package/dist/umd/requestUpdatePaymentDetails.d.ts

@@ -0,0 +1,21 @@
+import { ENVS } from './constants';
+interface UpdatePaymentDetailsBase {
+    patientRefId: string;
+    env: typeof ENVS[keyof typeof ENVS];
+    onSuccess: () => void;
+    onFailure: () => void;
+    onCancel: () => void;
+    onClose: () => void;
+    callbackOrigin: string;
+}
+interface UpdatePaymentDetailsWithApiKey extends UpdatePaymentDetailsBase {
+    apiKey: string;
+    token?: never;
+}
+interface UpdatePaymentDetailsWithToken extends UpdatePaymentDetailsBase {
+    token: string;
+    apiKey?: never;
+}
+export type UpdatePaymentDetails = UpdatePaymentDetailsWithApiKey | UpdatePaymentDetailsWithToken;
+declare const updatePaymentDetails: ({ apiKey, token, patientRefId, env, onSuccess, onFailure, onCancel, onClose, callbackOrigin, }: UpdatePaymentDetails) => Promise<void>;
+export default updatePaymentDetails;

package/dist/umd/updatePaymentOverlay.d.ts

@@ -0,0 +1,21 @@
+interface Overlay {
+    contentElement: HTMLElement | null;
+    removeOverlay: () => void;
+    createOverlay: ({ window, onClickRelaunch, onClickCancel, }: {
+        window: Window;
+        onClickRelaunch: () => void;
+        onClickCancel: () => void;
+    }) => void;
+    createSubHeading: ({ window, onClickRelaunch, onClickCancel, }: {
+        window: Window;
+        onClickRelaunch: () => void;
+        onClickCancel: () => void;
+    }) => HTMLElement | null;
+    updateSubHeading: ({ window, onClickRelaunch, onClickCancel, }: {
+        window: Window;
+        onClickRelaunch: () => void;
+        onClickCancel: () => void;
+    }) => void;
+}
+declare const overlay: Overlay;
+export default overlay;

package/dist/umd/utils/object-to-css.d.ts

@@ -0,0 +1,2 @@
+declare const toCss: (style: Record<string, string>) => string;
+export default toCss;

package/package.json

@@ -1,14 +1,9 @@
 {
   "name": "@medipass/checkout-sdk",
-  "version": "3.0.0-alpha.0",
+  "version": "3.0.0-alpha.1",
   "description": "Describe medipass-checkout-sdk here",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
-  "files": [
-    "es",
-    "lib",
-    "umd"
-  ],
   "scripts": {
     "build": "yarn rollup -c",
     "build:types": "tsc --project tsconfig.build.json --module esnext --declarationDir ./dist/types --emitDeclarationOnly --declaration --declarationMap",

package/rollup.config.mjs

@@ -0,0 +1,35 @@
+import json from '@rollup/plugin-json';
+import terser from '@rollup/plugin-terser';
+import typescript from '@rollup/plugin-typescript';
+import commonjs from '@rollup/plugin-commonjs';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import nodePolyfills from 'rollup-plugin-polyfill-node';
+import css from 'rollup-plugin-import-css';
+
+export default {
+  input: './src/index.ts',
+  output: [
+    {
+      file: 'dist/cjs/index.js',
+      format: 'cjs',
+    },
+    {
+      file: 'dist/esm/index.js',
+      format: 'es',
+    },
+    {
+      file: 'dist/umd/index.min.js',
+      format: 'umd',
+      name: 'MedipassCheckoutSDK',
+    },
+  ],
+  plugins: [
+    json(),
+    terser(),
+    typescript(),
+    commonjs({ include: /node_modules/ }),
+    nodeResolve(),
+    nodePolyfills(),
+    css(),
+  ],
+};

package/src/constants.ts

@@ -0,0 +1,31 @@
+export const ENVS = {
+  LOCAL: 'local',
+  DEV: 'dev',
+  STG: 'stg',
+  PROD_BLUE: 'prod-blue',
+  PROD: 'prod',
+} as const;
+
+export const ORIGINS = {
+  [ENVS.LOCAL]: 'http://localhost:3001',
+  [ENVS.DEV]: 'https://dev-my.medipass.io',
+  [ENVS.STG]: 'https://stg-my.medipass.io',
+  [ENVS.PROD_BLUE]: 'https://my-blue.medipass.io',
+  [ENVS.PROD]: 'https://my.medipass.io',
+} as const;
+
+export const EVENTS = {
+  SUCCESS: 'success',
+  fAILURE: 'failure',
+  CANCEL: 'cancel',
+} as const;
+
+export const ERROR_MESSAGES = {
+  NO_API_KEY_OR_NO_TOKEN: 'apiKey or token is not provided',
+  NO_PATIENT_REF_ID: 'patientRefId is not provided',
+  NO_ENVIROMENT_SET: 'environment must be set',
+  NO_CALLBACK_ORIGIN: 'callbackOrigin must be set',
+  GENERAL_ERROR: 'Please ensure that all required values are passed',
+} as const;
+
+export const ROOT_ELEMENT_ID = 'medipass-checkout-sdk-root' as const;

package/src/index.ts

@@ -0,0 +1,244 @@
+import _get from 'lodash/get';
+import overlay from './overlay';
+import { ORIGINS, ENVS, EVENTS } from './constants';
+import './style.css';
+import initialiseWindow from './initialiseWindow';
+import updatePaymentDetails, { UpdatePaymentDetails } from './requestUpdatePaymentDetails';
+
+////////////////////////////////////////////////////////////
+
+let _windowReferenceObject: Window | null | undefined = null;
+
+////////////////////////////////////////////////////////////
+
+interface CheckoutSdk {
+  ENVS: typeof ENVS;
+  isCheckoutInitiated: boolean;
+  isCheckoutComplete: boolean | null;
+  env: typeof ENVS[keyof typeof ENVS] | null;
+  onSuccess: ((args: { transactionId: string }) => void) | null;
+  onFailure: ((args: { transactionId: string }) => void) | null;
+  onCancel: ((args: { transactionId: string }) => void) | null;
+  onClose: (() => void) | null;
+  init: (args: {
+    env: typeof ENVS[keyof typeof ENVS];
+    onSuccess: () => void;
+    onFailure: () => void;
+    onCancel: () => void;
+    onClose: () => void;
+  }) => void;
+  createCheckout: (args: { paymentRequestUrl: string }) => void;
+  requestUpdatePaymentDetails: (args: UpdatePaymentDetails) => void;
+}
+
+const checkoutSDK: CheckoutSdk = {
+  ENVS,
+  isCheckoutInitiated: false,
+  isCheckoutComplete: null,
+  env: null,
+  onSuccess: null,
+  onFailure: null,
+  onCancel: null,
+  onClose: null,
+
+  init({ env, onSuccess, onFailure, onCancel, onClose }) {
+    if (!env) return;
+
+    this.env = env;
+    this.onSuccess = onSuccess;
+    this.onFailure = onFailure;
+    this.onCancel = onCancel;
+    this.onClose = onClose;
+
+    // Open a blank window
+    _windowReferenceObject = initialiseWindow({ url: '' });
+
+    const handleClose = () => {
+      overlay.removeOverlay();
+      onClose && onClose();
+      if (!_windowReferenceObject) return;
+      _windowReferenceObject.close();
+    };
+
+    const onClickRelaunch = () => {
+      if (!_windowReferenceObject) {
+        _windowReferenceObject = initialiseWindow({ url: '' });
+        return;
+      }
+      _windowReferenceObject.focus();
+    };
+
+    const checkWindowClosed = () => {
+      if (this.isCheckoutInitiated) {
+        clearInterval(timer);
+        return;
+      }
+      if (_get(_windowReferenceObject, 'closed')) {
+        clearInterval(timer);
+        handleClose();
+      }
+    };
+
+    const onClickCancel = () => {
+      overlay.removeOverlay();
+      if (_windowReferenceObject) {
+        _windowReferenceObject.close();
+      }
+      clearInterval(timer);
+      onClose && onClose();
+    };
+
+    // This creates the gray overlay covering the client's screen while payment is in progress.
+    overlay.createOverlay({ window, onClickRelaunch, onClickCancel });
+
+    // Check the window every 0.5 seconds to see if it has been closed.
+    const timer = setInterval(checkWindowClosed, 500);
+  },
+
+  createCheckout({ paymentRequestUrl }: { paymentRequestUrl: string }) {
+    if (!paymentRequestUrl || !window) return;
+
+    const env = this.env;
+    const onSuccess = this.onSuccess;
+    const onFailure = this.onFailure;
+    const onCancel = this.onCancel;
+    const onClose = this.onClose;
+
+    ////////////////////////////////////////////////////////////
+
+    const checkWindowClosed = () => {
+      if (_get(_windowReferenceObject, 'closed')) {
+        clearInterval(timer);
+        handleClose();
+      }
+    };
+
+    // Check the window every 0.5 seconds to see if it has been closed.
+    const timer = setInterval(checkWindowClosed, 500);
+    this.isCheckoutInitiated = true;
+
+    ////////////////////////////////////////////////////////////
+
+    const openWindow = () => {
+      // windowReferenceObject may not be defined if browser blocks the pop-up.
+      if (!_windowReferenceObject) {
+        _windowReferenceObject = initialiseWindow({ url: paymentRequestUrl });
+      } else {
+        _windowReferenceObject.location.replace(paymentRequestUrl);
+      }
+
+      if (!_windowReferenceObject) {
+        return;
+      }
+
+      // Start listening for incoming messages
+      window.addEventListener('message', e => onReceiveMessage(e));
+
+      const onReceiveMessage = (e: MessageEvent<any>) => {
+        if (!e) return;
+        const transactionId = getMessage(e);
+        if (transactionId) {
+          this.isCheckoutComplete = true;
+        }
+      };
+
+      const getMessage = (e: MessageEvent<any>) => {
+        if (!env) return;
+
+        const origin = ORIGINS?.[env];
+
+        if (!e || !origin) return;
+
+        // Ensure the message is coming from the correct origin.
+        if (_get(e, 'origin') !== origin) return;
+
+        const event = _get(e, 'data.event');
+        const transactionId = _get(e, 'data.transactionId');
+        const receiptAutoSent = _get(e, 'data.receiptAutoSent');
+
+        if (!event || !transactionId) return;
+
+        if (event === EVENTS.SUCCESS) {
+          if (receiptAutoSent) {
+            // Give 1.5 seconds for the user to see the success page before auto-closing the pop-up.
+            setTimeout(() => {
+              onSuccess && onSuccess({ transactionId });
+              if (_windowReferenceObject) {
+                _windowReferenceObject.close();
+              }
+            }, 1500);
+          } else {
+            onSuccess && onSuccess({ transactionId });
+          }
+          return transactionId;
+        }
+        if (event === EVENTS.fAILURE) {
+          onFailure && onFailure({ transactionId });
+          return transactionId;
+        }
+        if (event === EVENTS.CANCEL) {
+          // Give 1.5 seconds for the user to see the reject page before auto-closing the pop-up.
+          setTimeout(() => {
+            onCancel && onCancel({ transactionId });
+            if (_windowReferenceObject) {
+              _windowReferenceObject.close();
+            }
+          }, 1500);
+          return transactionId;
+        }
+      };
+
+      return _windowReferenceObject;
+    };
+
+    ////////////////////////////////////////////////////////////
+
+    // open the pop-up
+    openWindow();
+
+    ////////////////////////////////////////////////////////////
+
+    const handleClose = () => {
+      // We need to remove the gray overlay covering the client's screen.
+      overlay.removeOverlay();
+      // If the pop-up has been closed before a payment action has been taken out, then we
+      // need to invoke the onClose callback.
+      if (!this.isCheckoutComplete) {
+        onClose && onClose();
+      }
+      if (!_windowReferenceObject) return;
+      _windowReferenceObject.close();
+    };
+
+    ////////////////////////////////////////////////////////////
+
+    const onClickRelaunch = () => {
+      if (!_windowReferenceObject) {
+        _windowReferenceObject = openWindow();
+        return;
+      }
+      _windowReferenceObject.focus();
+    };
+
+    const onClickCancel = () => {
+      if (_windowReferenceObject) {
+        _windowReferenceObject.close();
+      } else {
+        clearInterval(timer);
+      }
+
+      overlay.removeOverlay();
+      onClose && onClose();
+    };
+
+    // Reset the relaunch and cancel functions on the subheading
+    overlay.updateSubHeading({ window, onClickRelaunch, onClickCancel });
+
+    ////////////////////////////////////////////////////////////
+  },
+  requestUpdatePaymentDetails(args) {
+    updatePaymentDetails(args);
+  },
+};
+
+export default checkoutSDK;

package/src/initialiseWindow.ts

@@ -0,0 +1,46 @@
+import _get from 'lodash/get';
+
+const POPUP_WIDTH = 450;
+
+const getWindowFeatures = ({
+  height,
+  width,
+  left,
+  top,
+}: {
+  height: number;
+  width: number;
+  left: number;
+  top: number;
+}) =>
+  `menubar=no, location=no, resizable=no, scrollbars=yes, status=no, height=${height}, width=${width}, left=${left}, top=${top}`;
+
+function initialiseWindow({ url }: { url: string }) {
+  if (!window) return;
+
+  // The target window could either be in an iframe, or just a normal standalone window.
+  // We need to grab the correct window height and width for calculating dimensions.
+  const windowHeight = _get(window, 'outerHeight') || _get(window, 'innerHeight');
+  const windowWidth = _get(window, 'outerWidth') || _get(window, 'innerWidth');
+
+  const popupHeight = windowHeight * 0.8;
+  const popupWidth = windowWidth > POPUP_WIDTH ? POPUP_WIDTH : windowWidth * 0.25;
+
+  const xPosition = windowWidth / 2 - popupWidth / 2;
+  const yPosition = windowHeight / 2 - popupHeight / 2;
+
+  const windowRef = window.open(
+    url,
+    'Medipass Checkout',
+    getWindowFeatures({
+      height: popupHeight,
+      width: popupWidth,
+      left: xPosition,
+      top: yPosition,
+    }),
+  );
+
+  return windowRef;
+}
+
+export default initialiseWindow;