@primer-io/react-native 0.15.8 → 0.16.0

package/lib/typescript/headless_checkout/PrimerHeadlessUniversalCheckout.d.ts

@@ -0,0 +1,13 @@
+import type { PrimerSettings } from 'src/models/primer-settings';
+import type { PrimerHeadlessUniversalCheckoutStartResponse, PrimerHeadlessUniversalCheckoutCallbacks } from './types';
+declare class PrimerHeadlessUniversalCheckoutClass {
+    constructor();
+    private configureListeners;
+    startWithClientToken(clientToken: string, settings: PrimerSettings & PrimerHeadlessUniversalCheckoutCallbacks): Promise<PrimerHeadlessUniversalCheckoutStartResponse>;
+    showPaymentMethod(paymentMethod: string): Promise<void>;
+    resumeWithClientToken(resumeToken: string): void;
+    getAssetForPaymentMethod(paymentMethodType: string, assetType: 'logo' | 'icon'): Promise<string>;
+    getAssetForCardNetwork(cardNetwork: string, assetType: 'logo' | 'icon'): Promise<string>;
+}
+declare const PrimerHeadlessUniversalCheckout: PrimerHeadlessUniversalCheckoutClass;
+export default PrimerHeadlessUniversalCheckout;

package/lib/typescript/headless_checkout/types.d.ts

@@ -0,0 +1,16 @@
+export interface PrimerHeadlessUniversalCheckoutStartResponse {
+    paymentMethodTypes: string[];
+}
+export interface PrimerError {
+    errorId: string;
+    description: string;
+    recoverySuggestion?: string;
+}
+export interface PrimerHeadlessUniversalCheckoutCallbacks {
+    onPreparationStarted?: () => void;
+    onPaymentMethodPresented?: () => void;
+    onTokenizeStart?: () => void;
+    onTokenizeSuccess?: (paymentMethod: any) => void;
+    onResumeSuccess?: (resumeToken: string) => void;
+    onFailure?: (error: PrimerError) => void;
+}

package/lib/typescript/index.d.ts

@@ -1,3 +1,5 @@
+import PrimerHeadlessUniversalCheckout from './headless_checkout/PrimerHeadlessUniversalCheckout';
 import type { IPrimer } from './models/primer';
+export * from './PrimerInput';
 declare const Primer: IPrimer;
-export { Primer };
+export { Primer, PrimerHeadlessUniversalCheckout as HeadlessUniversalCheckout };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer-io/react-native",
-  "version": "0.15.8",
+  "version": "0.16.0",
   "description": "Primer SDK for RN",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/primer-io-react-native.podspec

@@ -17,5 +17,5 @@ Pod::Spec.new do |s|
   s.source_files = "ios/**/*.{h,m,mm,swift}"
 
   s.dependency "React-Core"
-  s.dependency "PrimerSDK", "1.35.0"
+  s.dependency "PrimerSDK", "1.36.0"
 end

package/src/PrimerInput.tsx

@@ -0,0 +1,73 @@
+import { PrimerHeadlessUniversalCheckoutCardFormUIManager } from './RNTPrimerHeadlessUniversalCheckoutCardFormUIManager';
+import React, { useEffect, useRef } from 'react';
+import { NativeModules, requireNativeComponent, ViewProps } from 'react-native';
+
+
+// PrimerCardNumberEditText
+export const PrimerCardNumberEditTextRaw = requireNativeComponent<{}>(
+  'PrimerCardNumberEditText'
+);
+
+type PrimerCardNumberEditTextProps = ViewProps;
+
+const { PrimerRN } = NativeModules;
+
+export const PrimerCardNumberEditText: React.FC<PrimerCardNumberEditTextProps> = (props) => {
+  const ref = useRef(React.createRef<any>());
+
+  useEffect(() => {
+    const tag = ref.current.current._nativeTag;
+    PrimerHeadlessUniversalCheckoutCardFormUIManager.addInput(tag);
+    return () => PrimerRN.removeInput(tag);
+  }, []);
+
+  const rawComponent = (
+    <PrimerCardNumberEditTextRaw ref={ref.current} {...props} />
+  );
+
+  return rawComponent;
+};
+
+// PrimerCardholderNameEditText
+export const PrimerCardholderNameEditTextRaw = requireNativeComponent<{}>(
+  'PrimerCardholderNameEditText'
+);
+
+type PrimerCardholderNameEditTextProps = ViewProps;
+
+export const PrimerCardholderNameEditText: React.FC<PrimerCardholderNameEditTextProps> = (
+  props
+) => {
+  const ref = useRef(React.createRef<any>());
+
+  useEffect(() => {
+    const tag = ref.current.current._nativeTag;
+    PrimerRN.addInput(tag);
+    return () => PrimerRN.removeInput(tag);
+  }, []);
+  return <PrimerCardholderNameEditTextRaw ref={ref.current} {...props} />;
+};
+
+// PrimerExpiryEditText
+export const PrimerExpiryEditTextRaw = requireNativeComponent<{}>(
+  'PrimerExpiryEditText'
+);
+
+type PrimerExpiryEditTextProps = ViewProps;
+
+export const PrimerExpiryEditText: React.FC<PrimerExpiryEditTextProps> = (
+  props
+) => {
+  return <PrimerExpiryEditTextRaw {...props} />;
+};
+
+// cvv
+export const PrimerCvvEditTextRaw = requireNativeComponent<{}>(
+  'PrimerCvvEditText'
+);
+
+type PrimerCvvEditTextProps = ViewProps;
+
+export const PrimerCvvEditText: React.FC<PrimerCvvEditTextProps> = (props) => {
+  return <PrimerCvvEditTextRaw {...props} />;
+};

package/src/RNTPrimerHeadlessUniversalCheckoutCardFormUIManager.tsx

@@ -0,0 +1,2 @@
+import { NativeModules } from 'react-native';
+export const { PrimerHeadlessUniversalCheckoutCardFormUIManager } = NativeModules;

package/src/headless_checkout/NativePrimerHeadlessUniversalCheckout.ts

@@ -0,0 +1,132 @@
+import { NativeEventEmitter, NativeModules } from 'react-native';
+import type { PrimerSettings } from 'src/models/primer-settings';
+import RNPrimer from '../RNPrimer';
+import type { PrimerHeadlessUniversalCheckoutCallbacks } from './types';
+
+const { PrimerHeadlessUniversalCheckout } = NativeModules;
+
+const eventEmitter = new NativeEventEmitter(PrimerHeadlessUniversalCheckout);
+
+type EventType =
+  | 'preparationStarted'
+  | 'paymentMethodPresented'
+  | 'tokenizationStarted'
+  | 'tokenizationSucceeded'
+  | 'resume'
+  | 'error';
+
+let primerSettings: (PrimerSettings & PrimerHeadlessUniversalCheckoutCallbacks) | null = null;
+
+const NativePrimerHeadlessUniversalCheckout = {
+  ///////////////////////////////////////////
+  // 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('preparationStarted');
+    eventEmitter.removeAllListeners('paymentMethodPresented');
+    eventEmitter.removeAllListeners('tokenizationStarted');
+    eventEmitter.removeAllListeners('tokenizationSucceeded');
+    eventEmitter.removeAllListeners('resume');
+    eventEmitter.removeAllListeners('error');
+  },
+
+  ///////////////////////////////////////////
+  // Native API
+  ///////////////////////////////////////////
+  getAssetForPaymentMethod: (
+    paymentMethodType: string,
+    assetType: 'logo' | 'icon'
+  ): Promise<string> => {
+    return new Promise((resolve, reject) => {
+      try {
+        PrimerHeadlessUniversalCheckout.getAssetForPaymentMethodType(
+          paymentMethodType,
+          assetType,
+          (err: Error) => {
+            reject(err);
+          },
+          (url: string) => {
+            resolve(url);
+          }
+        );
+      } catch (e) {
+        reject(e);
+      }
+    });
+  },
+
+  getAssetForCardNetwork: (
+    cardNetwork: string,
+    assetType: 'logo' | 'icon'
+  ): Promise<string> => {
+    return new Promise((resolve, reject) => {
+      try {
+        PrimerHeadlessUniversalCheckout.getAssetForPaymentMethodType(
+          cardNetwork,
+          assetType,
+          (err: Error) => {
+            reject(err);
+          },
+          (url: string) => {
+            resolve(url);
+          }
+        );
+      } catch (e) {
+        reject(e);
+      }
+    });
+  },
+
+  startWithClientToken(clientToken: string, settings: any): Promise<any> {
+    primerSettings = settings;
+
+    return new Promise((resolve, reject) => {
+      PrimerHeadlessUniversalCheckout.startWithClientToken(
+        clientToken,
+        JSON.stringify(settings),
+        (err: Error) => {
+          console.error(err);
+          reject(err);
+        },
+        (paymentMethodTypes: string[]) => {
+          resolve({ paymentMethodTypes });
+        }
+      );
+    });
+  },
+
+  showPaymentMethod: async (paymentMethod: string) => {
+    if (primerSettings) {
+      let implementedRNCallbacks: any = {
+        isTokenAddedToVaultImplemented: false,
+        isOnResumeSuccessImplemented: (primerSettings.onResumeSuccess !== undefined),
+        isOnResumeErrorImplemented: (primerSettings.onFailure !== undefined),
+        isOnCheckoutDismissedImplemented: false,
+        isCheckoutFailedImplemented: (primerSettings.onFailure !== undefined),
+        isClientSessionActionsImplemented: false
+      };
+  
+      await RNPrimer.setImplementedRNCallbacks(implementedRNCallbacks);
+    }
+    
+    PrimerHeadlessUniversalCheckout.showPaymentMethod(paymentMethod);
+  },
+
+  resumeWithClientToken(resumeToken: string) {
+    PrimerHeadlessUniversalCheckout.resumeWithClientToken(resumeToken);
+  }
+};
+
+export default NativePrimerHeadlessUniversalCheckout;

package/src/headless_checkout/PrimerHeadlessUniversalCheckout.ts

@@ -0,0 +1,140 @@
+import type { PaymentInstrumentToken } from 'src/models/payment-instrument-token';
+import type { PrimerError } from 'src/models/primer-error';
+import type { PrimerSettings } from 'src/models/primer-settings';
+import NativePrimerHeadlessUniversalCheckout from './NativePrimerHeadlessUniversalCheckout';
+import type {
+  PrimerHeadlessUniversalCheckoutStartResponse,
+  PrimerHeadlessUniversalCheckoutCallbacks,
+} from './types';
+
+let callbacks: PrimerHeadlessUniversalCheckoutCallbacks | undefined;
+
+class PrimerHeadlessUniversalCheckoutClass {
+
+  ///////////////////////////////////////////
+  // Init
+  ///////////////////////////////////////////
+  constructor() {
+
+  }
+
+  private configureListeners() {
+    NativePrimerHeadlessUniversalCheckout.removeAllListeners();
+
+    NativePrimerHeadlessUniversalCheckout.addListener(
+      'preparationStarted',
+      () => {
+        console.log('preparationStarted');
+        callbacks?.onPreparationStarted?.();
+      }
+    );
+
+    NativePrimerHeadlessUniversalCheckout.addListener(
+      'paymentMethodPresented',
+      () => {
+        console.log('paymentMethodPresented');
+        callbacks?.onPaymentMethodPresented?.();
+      }
+    );
+
+    NativePrimerHeadlessUniversalCheckout.addListener(
+      'tokenizationStarted',
+      () => {
+        console.log('tokenizationStarted');
+        callbacks?.onTokenizeStart?.();
+      }
+    );
+
+    NativePrimerHeadlessUniversalCheckout.addListener(
+      'tokenizationSucceeded',
+      (data) => {
+        console.log('tokenizationSucceeded', data);
+
+        if (data.paymentMethodToken) {
+          const paymentMethodTokenObj: PaymentInstrumentToken = JSON.parse(
+            data.paymentMethodToken
+          );
+          callbacks?.onTokenizeSuccess?.(paymentMethodTokenObj);
+        } else {
+          const err: PrimerError = {
+            name: 'ParseJsonFailed',
+            description: 'Failed to parse payment method token',
+          };
+          //@ts-ignore
+          callbacks?.onFailure?.(err);
+        }
+      }
+    );
+
+    NativePrimerHeadlessUniversalCheckout.addListener('resume', (data) => {
+      console.log('resume', data);
+      callbacks?.onResumeSuccess?.(data.resumeToken);
+    });
+
+    NativePrimerHeadlessUniversalCheckout.addListener('error', (data) => {
+      console.log('error', data);
+      callbacks?.onFailure?.(data.error);
+    });
+  }
+
+  ///////////////////////////////////////////
+  // API
+  ///////////////////////////////////////////
+  startWithClientToken(
+    clientToken: string,
+    settings: PrimerSettings & PrimerHeadlessUniversalCheckoutCallbacks
+  ): Promise<PrimerHeadlessUniversalCheckoutStartResponse> {
+    // Copy callback
+    callbacks = {
+      onPreparationStarted: settings.onPreparationStarted,
+      onPaymentMethodPresented: settings.onPaymentMethodPresented,
+      onTokenizeStart: settings.onTokenizeStart,
+      onTokenizeSuccess: settings.onTokenizeSuccess,
+      onResumeSuccess: settings.onResumeSuccess,
+      onFailure: settings.onFailure,
+    };
+
+    return NativePrimerHeadlessUniversalCheckout.startWithClientToken(
+      clientToken,
+      settings
+    );
+  }
+
+  showPaymentMethod(paymentMethod: string) {
+    this.configureListeners();
+
+    return NativePrimerHeadlessUniversalCheckout.showPaymentMethod(
+      paymentMethod
+    );
+  }
+
+  resumeWithClientToken(resumeToken: string) {
+    return NativePrimerHeadlessUniversalCheckout.resumeWithClientToken(
+      resumeToken
+    );
+  }
+
+  getAssetForPaymentMethod(
+    paymentMethodType: string,
+    assetType: 'logo' | 'icon'
+  ): Promise<string> {
+    return NativePrimerHeadlessUniversalCheckout.getAssetForPaymentMethod(
+      paymentMethodType,
+      assetType
+    );
+  }
+
+  getAssetForCardNetwork(
+    cardNetwork: string,
+    assetType: 'logo' | 'icon'
+  ): Promise<string> {
+    return NativePrimerHeadlessUniversalCheckout.getAssetForCardNetwork(
+      cardNetwork,
+      assetType
+    );
+  }
+}
+
+const PrimerHeadlessUniversalCheckout = new PrimerHeadlessUniversalCheckoutClass();
+
+export default PrimerHeadlessUniversalCheckout;

package/src/headless_checkout/types.ts

@@ -0,0 +1,18 @@
+export interface PrimerHeadlessUniversalCheckoutStartResponse {
+  paymentMethodTypes: string[];
+}
+
+export interface PrimerError {
+  errorId: string;
+  description: string;
+  recoverySuggestion?: string;
+}
+
+export interface PrimerHeadlessUniversalCheckoutCallbacks {
+  onPreparationStarted?: () => void;
+  onPaymentMethodPresented?: () => void;
+  onTokenizeStart?: () => void;
+  onTokenizeSuccess?: (paymentMethod: any) => void;
+  onResumeSuccess?: (resumeToken: string) => void;
+  onFailure?: (error: PrimerError) => void;
+}

package/src/index.tsx

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