npm - react-native-payengine - Versions diffs - 1.0.6 → 2.0.2 - Mend

react-native-payengine 1.0.6 → 2.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (300) hide show

package/src/components/PayEngine.tsx CHANGED Viewed

@@ -1,121 +1,8 @@
 import React from 'react';
-import { Platform, StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';
-import { WebView } from 'react-native-webview';
-import { getScriptURL, debuggingScript } from '../utils';
-import LoadingIndicator from './LoadingIndicator';
-import type { IPayEngineConfig } from '../interfaces/index';
+import { Text } from 'react-native';
-interface IProps {
-  config: IPayEngineConfig
-  type: string
-  merchantId?: string
-  hash?: string
-  events: {
-    [key: string]: (eventData: any) => void
-  }
-  style?: StyleProp<ViewStyle>
-  [key: string]: any
-}
+const PayEngine = () => {
+  return <Text>Obsolete. Please check out the package readme</Text>;
+};
-const getHtmlTag = (props: IProps) => {
-  const allowedProps = Object.keys(props).filter(x => !['config', 'events', 'style'].includes(x))
-  return `<pay-engine id="component"
-    style="z-index: 100"
-    ${allowedProps.map((propName: string) => `${propName}="${props[propName]}"`).join(' ')}
-  ></pay-engine>`
-}
-const generateHTML = (scriptURL: string, props: IProps) => {
-  return `<!DOCTYPE html>
-    <html>
-    <head>
-      <title>PayEngine Elements</title>
-      <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <script src="${scriptURL}" async defer type="text/javascript"></script>
-    </head>
-    <body>
-      ${getHtmlTag(props)}
-      <script>
-        setInterval(function() {
-          window.ReactNativeWebView.postMessage(JSON.stringify({
-            type: 'PayEngine-height',
-            height: document.body.scrollHeight
-          }))
-        }, 500);
-      </script>
-    </body>
-    </html>`
-}
-const PayEngine = (props: IProps) => {
-  const [scriptURL] = React.useState(getScriptURL(props.config))
-  const [height, setHeight] = React.useState(30)
-  const html = generateHTML(scriptURL, props)
-  const onMessage = (payload: any) => {
-    const isDebug = props.config.logLevel! > 0
-    let dataPayload;
-    try {
-      dataPayload = JSON.parse(payload.nativeEvent.data);
-    } catch (e) { }
-    if (dataPayload) {
-      switch (dataPayload.type) {
-        case 'Console':
-          if (isDebug) {
-            console.info(`[Console] ${JSON.stringify(dataPayload.data)}`);
-          }
-          break;
-        case 'PayEngine':
-          const { type, detail } = dataPayload.event
-          if (props.events?.[type]) {
-            props.events?.[type]?.(detail)
-          }
-          break;
-        case 'PayEngine-height':
-          setHeight(dataPayload.height)
-          break;
-        default:
-          if (isDebug) {
-            console.log(dataPayload)
-          }
-          break;
-      }
-    }
-  };
-  return <View style={[{ flex: 1, height: height }, props.style]}>
-    <View style={styles.yellowBox}>
-      <Text>Script URL: {scriptURL}</Text>
-    </View>
-    <View style={styles.yellowBox}>
-      <Text>{getHtmlTag(props)}</Text>
-    </View>
-    <WebView
-      originWhitelist={['*']}
-      source={{ html: html, baseUrl: '' }}
-      // source={{ uri: 'https://google.com' }}
-      applicationNameForUserAgent={`PayEngine-RN/${Platform.OS}`}
-      injectedJavaScript={debuggingScript}
-      renderLoading={LoadingIndicator}
-      startInLoadingState={true}
-      onMessage={onMessage}
-    />
-  </View>
-}
-const styles = StyleSheet.create({
-  yellowBox: {
-    marginVertical: 5,
-    marginHorizontal: 10,
-    padding: 10,
-    backgroundColor: 'yellow',
-    borderWidth: 1,
-    borderColor: 'yellow'
-  }
-})
-export default PayEngine
+export default PayEngine;

package/src/components/v2/ApplePay/PEApplePayButton.tsx ADDED Viewed

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { requireNativeComponent, ViewProps } from 'react-native';
+import type { PEPaymentRequest } from './PEPaymentRequest';
+const RNPEApplePayButton = requireNativeComponent<NativePECreditCardViewProps>('RNPEApplePayButton');
+type NativePEApplePayEvent = {
+  nativeEvent: {
+    error?: string;
+    token?: string
+  };
+};
+interface NativePECreditCardViewProps extends ViewProps {
+  paymentRequest: string;
+  onPmSheetDidDismiss: (event: NativePEApplePayEvent) => void;
+  onPmTokenDidReturn: (event: NativePEApplePayEvent) => void;
+  onPmError: (event: NativePEApplePayEvent) => void;
+}
+export interface PEApplePayButtonProps extends ViewProps {
+  paymentRequest: PEPaymentRequest;
+  onTokenDidReturn?: (token: string) => void;
+  onPaymentSheetDismissed?: () => void;
+  onPaymentFailed?: (error: Error) => void;
+}
+export interface PEApplePayButtonMethods {
+}
+export const PEApplePayButton = React.forwardRef<
+PEApplePayButtonMethods,
+  PEApplePayButtonProps
+>((props, ref) => {
+  React.useImperativeHandle(ref, () => ({
+  }));
+  const pmError = (event: NativePEApplePayEvent) => {
+    if (props.onPaymentFailed) {
+      props.onPaymentFailed(new Error(event.nativeEvent.error));
+    }
+  };
+  const pmTokenDidReturn = (event: NativePEApplePayEvent) => {
+    if (props.onTokenDidReturn) {
+      props.onTokenDidReturn(event.nativeEvent.token!);
+    }
+  };
+  const pmSheetDidDismiss = () => {
+    if (props.onPaymentSheetDismissed) {
+      props.onPaymentSheetDismissed();
+    }
+  }
+  return (
+    <RNPEApplePayButton
+      style={{ height: 32, width: '100%', ...(props.style as object) }}
+      paymentRequest={JSON.stringify(props.paymentRequest)}
+      onPmError={pmError}
+      onPmTokenDidReturn={pmTokenDidReturn}
+      onPmSheetDidDismiss={pmSheetDidDismiss}
+    />
+  );
+});

package/src/components/v2/ApplePay/PEPaymentRequest.ts ADDED Viewed

@@ -0,0 +1,18 @@
+export class PEPaymentRequest {
+  paymentAmount: number;
+  currencyCode: 'USD' | 'CAD';
+  paymentItems: {
+    amount: number;
+    label: string;
+  }[]
+  constructor(paymentAmount: number, currencyCode: 'USD' | 'CAD' = 'USD', paymentItems: {
+    amount: number;
+    label: string;
+  }[] = []) {
+    this.paymentAmount = paymentAmount;
+    this.currencyCode = currencyCode;
+    this.paymentItems = paymentItems;
+  }
+}

package/src/components/v2/PayEngineNative.tsx ADDED Viewed

@@ -0,0 +1,20 @@
+import { NativeModules, Platform } from "react-native";
+const { RNPayEngineNative } = NativeModules;
+export default class PayEngineNative {
+  static async createFraudMonitorSession(merchantId: string) {
+    return RNPayEngineNative.createFraudMonitorSession(merchantId);
+  }
+  static async getBrowserInfo() {
+    return RNPayEngineNative.getBrowserInfo();
+  }
+  static async isPlatformPaySupported(merchantId: string) {
+    if (Platform.OS === 'ios') {
+      return await RNPayEngineNative.isApplePaySupported(merchantId);
+    }
+    return false;
+  }
+}

package/src/components/v2/PayEngineProvider.tsx ADDED Viewed

@@ -0,0 +1,30 @@
+import React, { createContext } from "react";
+import type { IPayEngineConfig } from "../../interfaces";
+import { ActivityIndicator, NativeModules } from "react-native";
+const { RNPayEngineNative } = NativeModules;
+const PayEngineContext = createContext<IPayEngineConfig | undefined>(undefined);
+const PayEngineProvider = ({ config, children }: { config: IPayEngineConfig, children: React.ReactNode }) => {
+  const [loading, setLoading] = React.useState(true);
+  React.useEffect(() => {
+    setLoading(true);
+    RNPayEngineNative.setConfig(config.publicKey, config.scriptURL)
+    setLoading(false);
+  }, [config]);
+  if (!config) {
+    throw new Error('PayEngineProvider: config is required');
+  }
+  return <PayEngineContext.Provider value={config}>
+    {loading ? <ActivityIndicator /> : children}
+  </PayEngineContext.Provider>
+}
+export {
+  PayEngineContext,
+  PayEngineProvider
+};

package/src/components/v2/SecureFields/BankAccountView.tsx ADDED Viewed

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { requireNativeComponent, NativeModules, NativeEventEmitter, ViewProps, findNodeHandle, UIManager, ActivityIndicator, Platform } from 'react-native';
+import type IPEField from './IPEField';
+import type PEBankAccount from './PEBankAccount';
+const { RNPEEventEmitter } = NativeModules;
+interface NativePEBankAccountViewProps extends ViewProps {
+  additionalFields: string;
+}
+const COMPONENT_NAME = 'RNPEBankAccountView'
+const RNPEBankAccountView = requireNativeComponent<NativePEBankAccountViewProps>(COMPONENT_NAME);
+// @ts-ignore
+const RNPEBankAccountViewManager = UIManager[COMPONENT_NAME]
+const peEventEmitter = new NativeEventEmitter(RNPEEventEmitter);
+export interface PEBankAccountViewProps {
+  additionalFields?: IPEField[];
+}
+export interface PEBankAccountViewMethods {
+  submit: (merchantId: string, additionalData: { [key: string]: string }) => Promise<PEBankAccount>;
+  showKeyboard: () => void;
+  hideKeyboard: () => void;
+}
+export const PEBankAccountView = React.forwardRef<
+  PEBankAccountViewMethods,
+  PEBankAccountViewProps
+>((props, ref) => {
+  const formRef = React.useRef<any>();
+  const [height, setHeight] = React.useState(0);
+  React.useImperativeHandle(ref, () => ({
+    submit: async (merchantId: string, additionalData: any = {}) => {
+      return new Promise((resolve, reject) => {
+        if (height === 0) {
+          return reject(new Error('Form is not ready'))
+        }
+        const listener = peEventEmitter.addListener('onBankAccountRespond', args => {
+          listener.remove()
+          const { error, bankAccount: json } = args;
+          if (error) {
+            reject(new Error(error))
+          } else {
+            const bankAccount = JSON.parse(json) as PEBankAccount;
+            resolve(bankAccount)
+          }
+        });
+        callNativeMethod("submit", [merchantId, additionalData],)
+      });
+    },
+    showKeyboard: () => {
+      callNativeMethod("showKeyboard")
+    },
+    hideKeyboard: () => {
+      callNativeMethod("hideKeyboard")
+    }
+  }));
+  const callNativeMethod = React.useCallback((methodName: string, params: any[] = []) => {
+    const viewId = findNodeHandle(formRef.current);
+    let commandId = RNPEBankAccountViewManager.Commands[methodName].toString()
+    if (Platform.OS === 'ios') {
+      commandId = Number(commandId)
+    }
+    UIManager.dispatchViewManagerCommand(
+      viewId,
+      commandId,
+      params,
+    );
+  }, [formRef.current])
+  React.useEffect(() => {
+    const eventListener = peEventEmitter.addListener('onSizeChanges', args => {
+      const { width: _, height: frameHeight } = args;
+      setHeight(frameHeight);
+    });
+    return () => eventListener.remove();
+  }, []);
+  return (
+    <>
+      {height === 0 && <ActivityIndicator />}
+      <RNPEBankAccountView ref={formRef} additionalFields={JSON.stringify(props.additionalFields ?? [])} style={{ height: height }}  />
+    </>
+  );
+});

package/src/components/v2/SecureFields/CreditCardView.tsx ADDED Viewed

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { requireNativeComponent, NativeModules, NativeEventEmitter, ViewProps, Platform, findNodeHandle, UIManager, ActivityIndicator } from 'react-native';
+import type IPEField from './IPEField';
+import type PECard from './PECard';
+const { RNPEEventEmitter } = NativeModules;
+interface NativePECreditCardViewProps extends ViewProps {
+  additionalFields: string;
+}
+const COMPONENT_NAME = 'RNPECreditCardView'
+const RNPECreditCardView = requireNativeComponent<NativePECreditCardViewProps>(COMPONENT_NAME);
+// @ts-ignore
+const RNPECreditCardViewManager = UIManager[COMPONENT_NAME]
+const peEventEmitter = new NativeEventEmitter(RNPEEventEmitter);
+export interface PECreditCardViewProps {
+  additionalFields?: IPEField[];
+}
+export interface PECreditCardViewMethods {
+  submit: (merchantId: string, additionalData: { [key: string]: string }) => Promise<PECard>;
+  showKeyboard: () => void;
+  hideKeyboard: () => void;
+}
+export const PECreditCardView = React.forwardRef<
+  PECreditCardViewMethods,
+  PECreditCardViewProps
+>((props, ref) => {
+  const formRef = React.useRef<any>();
+  const [height, setHeight] = React.useState(0);
+  React.useImperativeHandle(ref, () => ({
+    submit: async (merchantId: string, additionalData: any = {}) => {
+      return new Promise((resolve, reject) => {
+        if (height === 0) {
+          return reject(new Error('Form is not ready'))
+        }
+        const listener = peEventEmitter.addListener('onCardRespond', args => {
+          listener.remove()
+          const { error, card: json } = args;
+          if (error) {
+            reject(new Error(error))
+          } else {
+            const card = JSON.parse(json) as PECard;
+            resolve(card)
+          }
+        });
+        callNativeMethod("submit", [merchantId, additionalData])
+      });
+    },
+    showKeyboard: () => {
+      callNativeMethod("showKeyboard")
+    },
+    hideKeyboard: () => {
+      callNativeMethod("hideKeyboard")
+    }
+  }));
+  const callNativeMethod = React.useCallback((methodName: string, params: any[] = []) => {
+    console.log("callNativeMethod", methodName, params)
+    const viewId = findNodeHandle(formRef.current);
+    let commandId = RNPECreditCardViewManager.Commands[methodName].toString()
+    if (Platform.OS === 'ios') {
+      commandId = Number(commandId)
+    }
+    UIManager.dispatchViewManagerCommand(
+      viewId,
+      commandId,
+      params,
+    );
+  }, [formRef.current])
+  React.useEffect(() => {
+    const eventListener = peEventEmitter.addListener('onSizeChanges', args => {
+      const { width: _, height: frameHeight } = args;
+      setHeight(frameHeight);
+    });
+    return () => eventListener.remove();
+  }, []);
+  return (
+    <>
+      {height === 0 && <ActivityIndicator />}
+      <RNPECreditCardView ref={formRef} additionalFields={JSON.stringify(props.additionalFields ?? [])} style={{ height: height }} />
+    </>
+  );
+});

package/src/components/v2/SecureFields/IPEField.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import type PEKeyboardType from "./PEKeyboardType";
+interface IPEField {
+  name: string;
+  type: string;
+  placeholder: string;
+  keyboardType: PEKeyboardType;
+  isRequired: boolean;
+  pattern?: string;
+}
+export default IPEField;

package/src/components/v2/SecureFields/PEBankAccount.ts ADDED Viewed

@@ -0,0 +1,12 @@
+interface PEBankAccount {
+  id: string;
+  token: string;
+  account_data: {
+    first_name: string;
+    last_name: string;
+    routing_number: string;
+    last_4: string;
+  };
+}
+export default PEBankAccount;

package/src/components/v2/SecureFields/PECard.ts ADDED Viewed

@@ -0,0 +1,14 @@
+interface PECard {
+  token: string;
+  card_data: {
+    id: string;
+    brand: string;
+    last_4: string;
+    exp_year: string;
+    exp_month: string;
+    name: string;
+    address_zip?: string;
+  };
+}
+export default PECard;

package/src/components/v2/SecureFields/PEKeyboardType.ts ADDED Viewed

@@ -0,0 +1,8 @@
+enum PEKeyboardType {
+  alphabet = 'alphabet',
+  number = 'number',
+  phone = 'phone',
+  normal = 'normal',
+}
+export default PEKeyboardType;

package/src/index.tsx CHANGED Viewed

@@ -1,11 +1,23 @@
-import PayEngine from './components/PayEngine'
+import PayEngine from './components/PayEngine';
 import { NativeModules, Platform } from 'react-native';
-import { SecureFields } from './components/SecureFields/index';
-import { CreditCardForm } from './components/CreditCardForm/index';
-import CreditCardFormLegacy from './components/Legacy/CreditCardFormLegacy';
 import type { IPayEngineConfig } from './interfaces/index';
-import { PayEngineGooglePay } from './components/GooglePay/PayEngineGooglePay';
-import { PayEngineApplePay } from './components/ApplePay/PayEngineApplePay';
+import {
+  PECreditCardView,
+  PECreditCardViewMethods,
+} from './components/v2/SecureFields/CreditCardView';
+import {
+  PEBankAccountView,
+  PEBankAccountViewMethods,
+} from './components/v2/SecureFields/BankAccountView';
+import type IPEField from './components/v2/SecureFields/IPEField';
+import type PECard from './components/v2/SecureFields/PECard';
+import type PEBankAccount from './components/v2/SecureFields/PEBankAccount';
+import { PayEngineProvider } from './components/v2/PayEngineProvider';
+import PayEngineNative from './components/v2/PayEngineNative';
+import { PEApplePayButton } from './components/v2/ApplePay/PEApplePayButton';
+import { PEPaymentRequest } from './components/v2/ApplePay/PEPaymentRequest';
+import * as PayEngineUtils from './utils/index';
+import PEKeyboardType from './components/v2/SecureFields/PEKeyboardType';
 const LINKING_ERROR =
   `The package 'react-native-payengine' doesn't seem to be linked. Make sure: \n\n` +
@@ -13,25 +25,38 @@ const LINKING_ERROR =
   '- You rebuilt the app after installing the package\n' +
   '- You are not using Expo managed workflow\n';
-const PayEngineStatic = NativeModules.Payengine ? NativeModules.Payengine : new Proxy(
-  {},
-  {
-    get() {
-      throw new Error(LINKING_ERROR);
-    },
-  }
-);
+const PayEngineStatic = NativeModules.Payengine
+  ? NativeModules.Payengine
+  : new Proxy(
+      {},
+      {
+        get() {
+          throw new Error(LINKING_ERROR);
+        },
+      }
+    );
 export {
   PayEngineStatic,
   PayEngine,
-  SecureFields,
-  CreditCardForm,
-  CreditCardFormLegacy,
   IPayEngineConfig,
-  PayEngineGooglePay,
-  PayEngineApplePay
-}
+  // v2 starting here
+  PayEngineUtils,
+  PayEngineProvider,
+  PayEngineNative,
+  // securefields
+  PEKeyboardType,
+  IPEField,
+  // credit card
+  PECreditCardView,
+  PECreditCardViewMethods,
+  PECard,
+  // bank account
+  PEBankAccountView,
+  PEBankAccountViewMethods,
+  PEBankAccount,
+  // Apple Pay
+  PEApplePayButton,
+  PEPaymentRequest,
+};

package/src/interfaces/index.ts CHANGED Viewed

@@ -1,38 +1,6 @@
-import type { StyleProp, ViewStyle } from 'react-native';
-import type { GooglePayRequestData } from '../components/GooglePay/interfaces';
 export interface IPayEngineConfig {
   publicKey: string;
   version?: string;
   scriptURL?: string;
   logLevel?: number;
 }
-export interface CreditCardFormProps {
-  style?: StyleProp<ViewStyle>;
-  merchantId?: string;
-  showZipCode?: boolean;
-  config: IPayEngineConfig;
-}
-export interface CreditCardFormMethods {
-  createCard: (merchantId?: string) => Promise<any>;
-}
-export interface MobilePaymentConfig {
-  base_url: string;
-  country: string;
-  currency: string;
-  gateway: string; // nmi | converge
-  google_pay: GooglePayRequestData;
-  apple_pay: {
-    merchantName: string;
-    supportedCardNetworks: string[];
-  };
-}
-export interface PaymentRequest {
-  amount: number;
-  currencyCode?: string;
-  countryCode?: string;
-}

package/src/utils/index.ts CHANGED Viewed

@@ -1,6 +1,14 @@
 import axios from 'axios';
 import type { IPayEngineConfig } from '../interfaces/index';
+export class PEDeprecationError extends Error {
+  constructor() {
+    super(
+      'This method is obsolete and can not be used anymore. Please check out the package README'
+    );
+  }
+}
 export const getHttpHeaders = (config: IPayEngineConfig) => {
   return {
     Authorization: `Signature key="${config.publicKey}",algorithm="hmac-sha256",identifier="secure-fields",signature=""`,
@@ -44,42 +52,6 @@ export function getScriptURL(config: IPayEngineConfig) {
   return scriptURL;
 }
-/**
- * <script>
-      console.log("AAAAAAAA")
-        var component = document.getElementById("component");
-        var onEvent = function(event) {
-          console.log({ event })
-        }
-        console.log('component')
-        component.addEventListener('stepChange', function(e) {
-          console.log('step change')
-        })
-        function addEventListenerAll(target, listener, ...otherArguments) {
-          // install listeners for all natively triggered events
-          for (const key in target) {
-              if (/^on/.test(key)) {
-                  const eventType = key.substr(2);
-                  target.addEventListener(eventType, listener, ...otherArguments);
-              }
-          }
-          // dynamically install listeners for all manually triggered events, just-in-time before they're dispatched ;D
-          const dispatchEvent_original = EventTarget.prototype.dispatchEvent;
-          function dispatchEvent(event) {
-            console.log('event test', event.type)
-              target.addEventListener(event.type, listener, ...otherArguments);  // multiple identical listeners are automatically discarded
-              dispatchEvent_original.apply(this, arguments);
-          }
-          EventTarget.prototype.dispatchEvent = dispatchEvent;
-          if (EventTarget.prototype.dispatchEvent !== dispatchEvent) throw new Error('Browser is smarter than you think');
-        }
-        // addEventListenerAll(component, onEvent);
-      </script>
- */
 export const debuggingScript = `
 const consoleLog = (type, ...log) => window.ReactNativeWebView.postMessage(JSON.stringify({'type': 'Console', 'data': {'type': type, 'log': log}}));
 console = {