@primer-io/react-native 0.13.0-beta.1 → 0.15.0

package/src/Primer.ts

@@ -1,203 +1,252 @@
-import { NativeModules } from 'react-native';
-import type { ClientSessionActionsRequest } from './models/client-session-actions-request';
 import type { PaymentInstrumentToken } from './models/payment-instrument-token';
 import type { IPrimer } from './models/primer';
-import type {
-  OnClientSessionActionsCallback,
-  OnDismissCallback,
-  OnPrimerErrorCallback,
-  OnTokenAddedToVaultCallback,
-  OnTokenizeSuccessCallback,
-} from './models/primer-callbacks';
-import type { PrimerConfig } from './models/primer-config';
-import type { PrimerError } from './models/primer-error';
-import type {
-  PrimerIntent,
-  PrimerPaymentMethodIntent,
-} from './models/primer-intent';
-import type { PrimerSettings } from './models/primer-settings';
-import type { PrimerTheme } from './models/primer-theme';
-import { parseCallback } from './utils';
-
-const { PrimerRN: NativeModule } = NativeModules;
+import type { IPrimerConfig } from './models/primer-config';
+import type { PrimerPaymentMethodIntent } from './models/primer-intent';
+import type { PrimerResumeHandler } from './models/primer-request';
+import RNPrimer, { IPrimerError } from './RNPrimer';
 
-export const PrimerNativeMapping: IPrimer = {
-  showUniversalCheckout(token: String, config: PrimerConfig): void {
-    configureIntent({ vault: false, paymentMethod: 'Any' });
-    configure(config);
-    NativeModule.initialize(token);
-  },
-
-  showVaultManager(token: String, config: PrimerConfig): void {
-    configureIntent({ vault: true, paymentMethod: 'Any' });
-    configure(config);
-    NativeModule.initialize(token);
-  },
-
-  showPaymentMethod(
-    token: String,
-    intent: PrimerPaymentMethodIntent,
-    config: PrimerConfig
-  ): void {
-    configureIntent(intent);
-    configure(config);
-    NativeModule.initialize(token);
+const resumeHandler: PrimerResumeHandler = {
+  handleNewClientToken: async (clientToken) => {
+    try {
+      await RNPrimer.handleNewClientToken(clientToken);
+    } catch (err) {
+      let primerError: IPrimerError;
+      if (err instanceof Error) {
+        primerError = {
+          errorId: "react-native-bridge",
+          errorDescription: err.message
+        }
+      } else {
+        primerError = {
+          errorId: "react-native-bridge",
+          errorDescription: "unknown error"
+        }
+      }
+      await RNPrimer.handleError(primerError);
+    }
   },
-
-  // todo: refactor
-  // fetchSavedPaymentInstruments(token: String, config: PrimerConfig): void {
-  //   configure(config);
-  //   NativeModule.fetchSavedPaymentInstruments(token);
-  // },
-
-  dispose(): void {
-    NativeModule.dispose();
+  handleError: async (err) => {
+    try {
+      const primerError: IPrimerError = {
+        errorId: "react-native",
+        errorDescription: err.message
+      }
+      await RNPrimer.handleError(primerError);
+    } catch (err) {
+      let primerError: IPrimerError;
+      if (err instanceof Error) {
+        primerError = {
+          errorId: "react-native-bridge",
+          errorDescription: err.message
+        }
+      } else {
+        primerError = {
+          errorId: "react-native-bridge",
+          errorDescription: "unknown error"
+        }
+      }
+      await RNPrimer.handleError(primerError);
+    }
   },
-};
-
-//
-
-function configure(config: PrimerConfig): void {
-  configureTheme(config.theme);
-  configureSettings(config.settings);
-  configureOnVaultSuccess(config.onTokenAddedToVault);
-  configureOnDismiss(config.onDismiss);
-  configureOnError(config.onError);
-  configureOnTokenizeSuccess(config.onTokenizeSuccess);
-  configureOnClientSessionActions(config.onClientSessionActions);
-  configureOnResumeSuccess(config.onResumeSuccess);
+  handleSuccess: async () => {
+    try {
+      await RNPrimer.handleSuccess();
+    } catch (err) {
+      let primerError: IPrimerError;
+      if (err instanceof Error) {
+        primerError = {
+          errorId: "react-native-bridge",
+          errorDescription: err.message
+        }
+      } else {
+        primerError = {
+          errorId: "react-native-bridge",
+          errorDescription: "unknown error"
+        }
+      }
+      await RNPrimer.handleError(primerError);
+    }
+  }
 }
 
-function configureSettings(settings: PrimerSettings = {}): void {
-  const data = JSON.stringify(settings);
-  NativeModule.configureSettings(data);
+export interface IClientSessionAction {
+  type:
+  | 'SELECT_PAYMENT_METHOD'
+  | 'UNSELECT_PAYMENT_METHOD'
+  | 'SET_BILLING_ADDRESS';
+  params?: IActionParams;
 }
 
-function configureTheme(theme: PrimerTheme = {}): void {
-  const data = JSON.stringify(theme);
-  NativeModule.configureTheme(data);
+interface IActionParams {
+  billingAddress: Record<string, string | null>;
+  paymentMethodType?: string;
+  binData?: IBinData;
 }
 
-function configureIntent(
-  intent: PrimerIntent = { vault: false, paymentMethod: 'Any' }
-): void {
-  const data = JSON.stringify(intent);
-  NativeModule.configureIntent(data);
+interface IBinData {
+  network: string;
 }
 
-function resume(request: ResumeRequest) {
-  const data = JSON.stringify(request);
-  NativeModule.resume(data);
-}
+export const PrimerNativeMapping: IPrimer = {
 
-function configureOnTokenizeSuccess(
-  callback: OnTokenizeSuccessCallback = (_, __) => {}
-) {
-  NativeModule.configureOnTokenizeSuccess((data: any) => {
-    try {
-      const parsedData = JSON.parse(data) as PaymentInstrumentToken;
-      callback(parsedData, {
-        handleError: (error) => resume({ error, token: null }),
-        handleSuccess: () => resume({ error: null, token: null }),
-        handleNewClientToken: (token) => resume({ error: null, token }),
-        // deprecated
-        resumeWithError: (error) => resume({ error, token: null }),
-        resumeWithSuccess: (token) => resume({ error: null, token }),
-      });
-    } catch (e) {
-      console.log('failed to parse json', e);
+  showUniversalCheckout(clientToken: string, config: IPrimerConfig): void {
+    RNPrimer.removeAllListeners();
+
+    if (config.settings || config.theme) {
+      RNPrimer.configure(config.settings || null, config.theme || null);
+
+      let implementedRNCallbacks: any = {
+        // isClientTokenCallbackImplemented: (config.onClientTokenCallback !== undefined),
+        isTokenAddedToVaultImplemented: (config.onTokenAddedToVault !== undefined),
+        isOnResumeSuccessImplemented: (config.onResumeSuccess !== undefined),
+        isOnResumeErrorImplemented: (config.onError !== undefined),
+        isOnCheckoutDismissedImplemented: (config.onDismiss !== undefined),
+        isCheckoutFailedImplemented: (config.onError !== undefined),
+        isClientSessionActionsImplemented: (config.onClientSessionActions !== undefined)
+      };
+
+      RNPrimer.setImplementedRNCallbacks(implementedRNCallbacks)
+        .then(() => {
+          RNPrimer.addListener('onClientSessionActions', data => {
+            const clientSessionActions: IClientSessionAction[] = data;
+            if (config.onClientSessionActions) {
+              config.onClientSessionActions(clientSessionActions, resumeHandler);
+            }
+          });
+
+          RNPrimer.addListener('onTokenizeSuccessCallback', data => {
+            const paymentInstrumentToken: PaymentInstrumentToken = data;
+            if (config.onTokenizeSuccess) {
+              config.onTokenizeSuccess(paymentInstrumentToken, resumeHandler);
+            }
+          });
+
+          RNPrimer.addListener('onResumeSuccess', data => {
+            const resumeToken: string = data.resumeToken;
+            if (config.onResumeSuccess) {
+              config.onResumeSuccess(resumeToken, resumeHandler);
+            }
+          });
+
+          RNPrimer.addListener('onCheckoutDismissed', _ => {
+            if (config.onDismiss) {
+              config.onDismiss();
+            }
+          });
+
+          RNPrimer.addListener('onError', data => {
+            const err: IPrimerError = data.error;
+            if (config.onError) {
+              config.onError(err, resumeHandler);
+            }
+          });
+
+          RNPrimer.showUniversalCheckout(clientToken);
+        })
+        .catch( err => {
+          console.error(err);
+        })
+      }
+
+    // RNPrimer.addListener('onClientTokenCallback', _ => {
+    //   if (config.onClientTokenCallback) {
+    //     config.onClientTokenCallback(resumeHandler);
+    //   }
+    // });
+  },
+
+  showVaultManager(clientToken: string, config: IPrimerConfig): void {
+    RNPrimer.removeAllListeners();
+
+    if (config.settings || config.theme) {
+      RNPrimer.configure(config.settings || null, config.theme || null);
+
+      let implementedRNCallbacks: any = {
+        // isClientTokenCallbackImplemented: (config.onClientTokenCallback !== undefined),
+        isTokenAddedToVaultImplemented: (config.onTokenAddedToVault !== undefined),
+        isOnResumeSuccessImplemented: (config.onResumeSuccess !== undefined),
+        isOnResumeErrorImplemented: (config.onError !== undefined),
+        isOnCheckoutDismissedImplemented: (config.onDismiss !== undefined),
+        isCheckoutFailedImplemented: (config.onError !== undefined),
+        isClientSessionActionsImplemented: (config.onClientSessionActions !== undefined)
+      };
+
+      RNPrimer.setImplementedRNCallbacks(implementedRNCallbacks);
     }
-  });
-}
 
-function actionResume(request: ResumeRequest) {
-  const data = JSON.stringify(request);
-  NativeModule.actionResume(data);
-}
+    // RNPrimer.addListener('onClientTokenCallback', _ => {
+    //   if (config.onClientTokenCallback) {
+    //     config.onClientTokenCallback(resumeHandler);
+    //   }
+    // });
 
-/**
- * Call @method configureOnClientSessionActions on the native bridge, passing
- * in a callback that the native side will call every time a client session
- * action is triggered.
- */
-function configureOnClientSessionActions(
-  callback?: OnClientSessionActionsCallback // defined by integrating developer.
-) {
-  NativeModule.configureOnClientSessionActions((data: any) => {
-    try {
-      // parse the client session action JSON string.
-      const parsedData = JSON.parse(data) as ClientSessionActionsRequest;
-
-      if (!callback) {
-        /**
-         * if @param callback is undefined immediately call the native bridge
-         * and resume with null values. This will resume the SDK flow without
-         * triggering extra configuration API fetch calls.
-         */
-        actionResume({ error: null, token: null });
+    RNPrimer.addListener('onClientSessionActions', data => {
+      const clientSessionActions: IClientSessionAction[] = data;
+      if (config.onClientSessionActions) {
+        config.onClientSessionActions(clientSessionActions, resumeHandler);
       } else {
-        /**
-         * send the parsed data back to the developer through the defined callback.
-         * The developer will determine how to resume the flow using one of the provided
-         * resume handlers.
-         */
-        callback(parsedData, {
-          handleError: (error) => actionResume({ error, token: null }),
-          handleSuccess: () => actionResume({ error: null, token: null }),
-          handleNewClientToken: (token) => actionResume({ error: null, token }),
-          // deprecated, remove in next major version update.
-          resumeWithError: (error) => actionResume({ error, token: null }),
-          resumeWithSuccess: (token) => actionResume({ error: null, token }),
-        });
+        RNPrimer.handleSuccess();
       }
+    });
 
-      // reset the client session action callback (native bridge callbacks are disposed once they're invoked).
-      configureOnClientSessionActions(callback);
-    } catch (e) {
-      // log error if the client session action JSON string cannot be parsed (this should never happen!).
-      console.error('[OnClientSessionActions]', 'failed to parse json', e);
-    }
-  });
-}
+    RNPrimer.addListener('onTokenizeSuccessCallback', data => {
+      const paymentInstrumentToken: PaymentInstrumentToken = data;
+      if (config.onTokenizeSuccess) {
+        config.onTokenizeSuccess(paymentInstrumentToken, resumeHandler);
+      }
+    });
 
-function configureOnResumeSuccess(
-  callback: OnTokenizeSuccessCallback = (_, __) => {}
-) {
-  NativeModule.configureOnResumeSuccess((paymentMethodToken: any) => {
-    try {
-      callback(paymentMethodToken, {
-        handleError: (error) => resume({ error, token: null }),
-        handleSuccess: () => resume({ error: null, token: null }),
-        handleNewClientToken: (token) => resume({ error: null, token }),
-        // deprecated
-        resumeWithError: (error) => resume({ error, token: null }),
-        resumeWithSuccess: (token) => resume({ error: null, token }),
-      });
-    } catch (e) {
-      console.log('failed to parse json', e);
-    }
-  });
-}
+    RNPrimer.addListener('onResumeSuccess', data => {
+      const resumeToken: string = data.resumeToken;
+      if (config.onResumeSuccess) {
+        config.onResumeSuccess(resumeToken, resumeHandler);
+      }
+    });
 
-function configureOnVaultSuccess(
-  callback: OnTokenAddedToVaultCallback = (_) => {}
-) {
-  NativeModule.configureOnVaultSuccess((data: any) => {
-    parseCallback<PaymentInstrumentToken>(data, callback);
-  });
-}
+    RNPrimer.addListener('onCheckoutDismissed', () => {
+      if (config.onDismiss) {
+        config.onDismiss();
+      }
+    });
 
-function configureOnDismiss(callback: OnDismissCallback = () => {}) {
-  NativeModule.configureOnDismiss((_: any) => callback());
-}
+    RNPrimer.addListener('onError', data => {
+      const err: IPrimerError = data.error;
+      if (config.onError) {
+        config.onError(err, resumeHandler);
+      }
+    });
 
-function configureOnError(callback: OnPrimerErrorCallback = (_) => {}) {
-  NativeModule.configureOnPrimerError((data: any) => {
-    parseCallback<PrimerError>(data, callback);
-  });
-}
+    RNPrimer.showVaultManager(clientToken);
+  },
 
-interface ResumeRequest {
-  error: string | null;
-  token: string | null;
-}
+  showPaymentMethod(
+    clientToken: string,
+    intent: PrimerPaymentMethodIntent,
+    config: IPrimerConfig
+  ): void {
+    RNPrimer.removeAllListeners();
+
+    if (config.settings || config.theme) {
+      RNPrimer.configure(config.settings || null, config.theme || null);
+    }
+
+    let implementedRNCallbacks: any = {
+      // isClientTokenCallbackImplemented: (config.onClientTokenCallback !== undefined),
+      isTokenAddedToVaultImplemented: (config.onTokenAddedToVault !== undefined),
+      isOnResumeSuccessImplemented: (config.onResumeSuccess !== undefined),
+      isOnResumeErrorImplemented: (config.onError !== undefined),
+      isOnCheckoutDismissedImplemented: (config.onDismiss !== undefined),
+      isCheckoutFailedImplemented: (config.onError !== undefined),
+      isClientSessionActionsImplemented: (config.onClientSessionActions !== undefined)
+    };
+
+    RNPrimer.setImplementedRNCallbacks(implementedRNCallbacks);
+    RNPrimer.showPaymentMethod(clientToken, intent.paymentMethod, intent.vault === true ? "vault" : "checkout");
+  },
+
+  dispose(): void {
+    RNPrimer.removeAllListeners();
+    RNPrimer.dispose();
+  },
+
+};

package/src/RNPrimer.ts

@@ -0,0 +1,170 @@
+import { NativeEventEmitter, NativeModules } from 'react-native';
+import type { PrimerSettings } from './models/primer-settings';
+import type { PrimerTheme } from './models/primer-theme';
+
+const { NativePrimer } = NativeModules;
+const eventEmitter = new NativeEventEmitter(NativePrimer);
+
+type EventType =
+  | 'onClientTokenCallback'
+  | 'onClientSessionActions'
+  | 'onTokenizeSuccessCallback'
+  | 'onVaultSuccess'
+  | 'onResumeSuccess'
+  | 'onCheckoutDismissed'
+  | 'onError'
+  | 'detectImplementedRNCallbacks';
+
+export interface IPrimerError {
+  errorId: string
+  errorDescription?: string
+  recoverySuggestion?: string
+}
+
+const RNPrimer = {
+  ///////////////////////////////////////////
+  // Event Emitter
+  ///////////////////////////////////////////
+  addListener: (eventType: EventType, listener: (...args: any[]) => any) => {
+    eventEmitter.addListener(eventType, listener);
+  },
+
+  removeListener: (eventType: EventType, listener: (...args: any[]) => any) => {
+    eventEmitter.removeListener(eventType, listener);
+  },
+
+  removeAllListenersForEvent(eventType: EventType) {
+    eventEmitter.removeAllListeners(eventType);
+  },
+
+  removeAllListeners() {
+    eventEmitter.removeAllListeners('onClientTokenCallback');
+    eventEmitter.removeAllListeners('onClientSessionActions');
+    eventEmitter.removeAllListeners('onTokenizeSuccessCallback');
+    eventEmitter.removeAllListeners('onResumeSuccess');
+    eventEmitter.removeAllListeners('onCheckoutDismissed');
+    eventEmitter.removeAllListeners('onError');
+    eventEmitter.removeAllListeners('detectImplementedRNCallbacks');
+  },
+
+  ///////////////////////////////////////////
+  // Native API
+  ///////////////////////////////////////////
+  configure: (
+    settings: PrimerSettings | null,
+    theme: PrimerTheme | null
+  ): Promise<void> => {
+    return new Promise(async (resolve, reject) => {
+      try {
+        if (settings === null && theme === null) {
+          // Do nothing, SDK will use default settings and theme.
+        } else if (settings && theme === null) {
+          await NativePrimer.configureWithSettings(JSON.stringify(settings));
+        } else if (settings === null && theme) {
+          await NativePrimer.configureWithTheme(JSON.stringify(theme));
+        } else {
+          await NativePrimer.configureWithSettings(JSON.stringify(settings));
+          await NativePrimer.configureWithTheme(JSON.stringify(theme));
+        }
+        resolve();
+      } catch (err) {
+        reject(err);
+      }
+    });
+  },
+
+  showUniversalCheckout: (clientToken: string | undefined): Promise<void> => {
+    return new Promise(async (resolve, reject) => {
+      try {
+        if (clientToken) {
+          await NativePrimer.showUniversalCheckoutWithClientToken(clientToken);
+        } else {
+          await NativePrimer.showUniversalCheckout();
+        }
+        resolve();
+      } catch (err) {
+        reject(err);
+      }
+    });
+  },
+
+  showVaultManager: (clientToken: string | undefined): Promise<void> => {
+    return new Promise(async (resolve, reject) => {
+      try {
+        if (clientToken) {
+          await NativePrimer.showVaultManager(clientToken);
+        } else {
+          await NativePrimer.showVaultManager();
+        }
+        resolve();
+      } catch (err) {
+        reject(err);
+      }
+    });
+  },
+
+  showPaymentMethod: (
+    clientToken: string,
+    paymentMethodType: string,
+    intent: "checkout" | "vault"
+  ): Promise<void> => {
+    return new Promise(async (resolve, reject) => {
+      try {
+        await NativePrimer.showPaymentMethod(clientToken, paymentMethodType, intent);
+        resolve();
+      } catch (err) {
+        reject(err);
+      }
+    });
+  },
+
+  handleNewClientToken: (clientToken: string | undefined): Promise<void> => {
+    return new Promise(async (resolve, reject) => {
+      try {
+        await NativePrimer.handleNewClientToken(clientToken);
+        resolve();
+      } catch (err) {
+        reject(err);
+      }
+    });
+  },
+
+  handleError: (err: IPrimerError): Promise<void> => {
+    return new Promise(async (resolve, reject) => {
+      try {
+        await NativePrimer.handleError(JSON.stringify(err));
+        resolve();
+      } catch (err) {
+        reject(err);
+      }
+    });
+  },
+
+  handleSuccess: (): Promise<void> => {
+    return new Promise(async (resolve, reject) => {
+      try {
+        await NativePrimer.handleSuccess();
+        resolve();
+      } catch (err) {
+        reject(err);
+      }
+    });
+  },
+
+  setImplementedRNCallbacks: (implementedRNCallbacks: any): Promise<void> => {
+    return new Promise(async (resolve, reject) => {
+      try {
+        await NativePrimer.setImplementedRNCallbacks(JSON.stringify(implementedRNCallbacks));
+        resolve();
+      } catch (err) {
+        reject(err);
+      }
+    });
+  },
+
+  dispose: (): void => {
+
+  }
+};
+
+export default RNPrimer;

package/src/index.tsx

@@ -1,8 +1,7 @@
-import PrimerHeadlessUniversalCheckout from './headless_checkout/PrimerHeadlessUniversalCheckout';
 import type { IPrimer } from './models/primer';
 import { PrimerNativeMapping } from './Primer';
-export * from './PrimerInput';
+// import type { IPrimerConfig as PrimerConfig } from './models/primer-config';
 
 const Primer: IPrimer = PrimerNativeMapping;
 
-export { Primer, PrimerHeadlessUniversalCheckout as HeadlessUniversalCheckout };
+export { Primer };

package/src/models/primer-callbacks.ts

@@ -1,32 +1,14 @@
-import type { ActionRequest } from './action-request';
-import type { ClientSessionActionsRequest } from './client-session-actions-request';
+import type { IPrimerError } from 'src/RNPrimer';
+import type { IClientSessionAction } from 'src/Primer';
 import type { PaymentInstrumentToken } from './payment-instrument-token';
-import type { PrimerError } from './primer-error';
 import type { PrimerResumeHandler } from './primer-request';
 
-export type OnTokenizeSuccessCallback = (
-  req: PaymentInstrumentToken,
-  completion: PrimerResumeHandler
-) => void;
-
-export type OnClientSessionActionsCallback = (
-  req: ClientSessionActionsRequest,
-  completion: PrimerResumeHandler
-) => void;
-
-export type OnDataChangeCallback = (
-  req: ActionRequest,
-  completion: PrimerResumeHandler
-) => void;
-
-export type OnTokenAddedToVaultCallback = (
-  data: PaymentInstrumentToken
-) => void;
+// Not implemented
+// export type OnClientTokenCallback = (resumeHandler: PrimerResumeHandler) => void;
 
+export type OnClientSessionActionsCallback = (clientSessionActions: IClientSessionAction[], resumeHandler: PrimerResumeHandler | null) => void;
+export type OnTokenizeSuccessCallback = (paymentInstrument: PaymentInstrumentToken, resumeHandler: PrimerResumeHandler) => void;
+export type OnTokenAddedToVaultCallback = (paymentInstrument: PaymentInstrumentToken) => void;
+export type OnResumeCallback = (resumeToken: string, resumeHandler: PrimerResumeHandler | null) => void;
+export type OnPrimerErrorCallback = (err: IPrimerError, resumeHandler: PrimerResumeHandler) => void;
 export type OnDismissCallback = () => void;
-
-export type OnPrimerErrorCallback = (data: PrimerError) => void;
-
-export type OnSavedPaymentInstrumentsFetchedCallback = (
-  data: PaymentInstrumentToken[]
-) => void;