react-native-payengine 1.0.6 → 2.0.4

package/lib/typescript/components/v2/SecureFields/BankAccountView.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type IPEField from './IPEField';
+import type PEBankAccount from './PEBankAccount';
+export interface PEBankAccountViewProps {
+    additionalFields?: IPEField[];
+}
+export interface PEBankAccountViewMethods {
+    submit: (merchantId: string, additionalData: {
+        [key: string]: string;
+    }) => Promise<PEBankAccount>;
+    showKeyboard: () => void;
+    hideKeyboard: () => void;
+}
+export declare const PEBankAccountView: React.ForwardRefExoticComponent<PEBankAccountViewProps & React.RefAttributes<PEBankAccountViewMethods>>;

package/lib/typescript/components/v2/SecureFields/CreditCardView.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type IPEField from './IPEField';
+import type PECard from './PECard';
+export interface PECreditCardViewProps {
+    additionalFields?: IPEField[];
+}
+export interface PECreditCardViewMethods {
+    submit: (merchantId: string, additionalData: {
+        [key: string]: string;
+    }) => Promise<PECard>;
+    showKeyboard: () => void;
+    hideKeyboard: () => void;
+}
+export declare const PECreditCardView: React.ForwardRefExoticComponent<PECreditCardViewProps & React.RefAttributes<PECreditCardViewMethods>>;

package/lib/typescript/components/v2/SecureFields/IPEField.d.ts

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

package/lib/typescript/components/v2/SecureFields/PEBankAccount.d.ts

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

package/lib/typescript/components/v2/SecureFields/PECard.d.ts

@@ -0,0 +1,13 @@
+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/lib/typescript/components/v2/SecureFields/PEKeyboardType.d.ts

@@ -0,0 +1,7 @@
+declare enum PEKeyboardType {
+    alphabet = "alphabet",
+    number = "number",
+    phone = "phone",
+    normal = "normal"
+}
+export default PEKeyboardType;

package/lib/typescript/index.d.ts

@@ -1,9 +1,16 @@
 import PayEngine from './components/PayEngine';
-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/PEPaymentRequest';
+import { PEGooglePayButton } from './components/v2/GooglePay/PEGooglePayButton';
+import * as PayEngineUtils from './utils/index';
+import PEKeyboardType from './components/v2/SecureFields/PEKeyboardType';
 declare const PayEngineStatic: any;
-export { PayEngineStatic, PayEngine, SecureFields, CreditCardForm, CreditCardFormLegacy, IPayEngineConfig, PayEngineGooglePay, PayEngineApplePay };
+export { PayEngineStatic, PayEngine, IPayEngineConfig, PayEngineUtils, PayEngineProvider, PayEngineNative, PEKeyboardType, IPEField, PECreditCardView, PECreditCardViewMethods, PECard, PEBankAccountView, PEBankAccountViewMethods, PEBankAccount, PEApplePayButton, PEPaymentRequest, PEGooglePayButton, };

package/lib/typescript/interfaces/index.d.ts

@@ -1,33 +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;
-    google_pay: GooglePayRequestData;
-    apple_pay: {
-        merchantName: string;
-        supportedCardNetworks: string[];
-    };
-}
-export interface PaymentRequest {
-    amount: number;
-    currencyCode?: string;
-    countryCode?: string;
-}

package/lib/typescript/utils/index.d.ts

@@ -1,44 +1,11 @@
 import type { IPayEngineConfig } from '../interfaces/index';
+export declare class PEDeprecationError extends Error {
+    constructor();
+}
 export declare const getHttpHeaders: (config: IPayEngineConfig) => {
     Authorization: string;
 };
 export declare const getBaseURL: (config: IPayEngineConfig) => string;
 export declare const createHttpClient: (config: IPayEngineConfig) => import("axios").AxiosInstance;
 export declare function getScriptURL(config: IPayEngineConfig): string;
-/**
- * <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 declare const debuggingScript = "\nconst consoleLog = (type, ...log) => window.ReactNativeWebView.postMessage(JSON.stringify({'type': 'Console', 'data': {'type': type, 'log': log}}));\nconsole = {\n    log: (...log) => consoleLog('log', ...log),\n    debug: (...log) => consoleLog('debug', ...log),\n    info: (...log) => consoleLog('info', ...log),\n    warn: (...log) => consoleLog('warn', ...log),\n    error: (...log) => consoleLog('error', ...log),\n    verbose: (...log) => consoleLog('verbose', ...log),\n};\n\nconst dispatchEvent_original = EventTarget.prototype.dispatchEvent;\nfunction dispatchEvent(event) {\n    if (event.type && !event.type.startsWith('react')) {\n      ReactNativeWebView.postMessage(JSON.stringify({\n        type: 'PayEngine',\n        event: {\n          type: event.type,\n          detail: event.detail\n        }\n      }))\n    }\n}\nEventTarget.prototype.dispatchEvent = dispatchEvent;\n";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-payengine",
-  "version": "1.0.6",
+  "version": "2.0.4",
   "description": "PayEngine SDK for React Native",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -29,6 +29,8 @@
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "prepare": "bob build",
     "release": "release-it",
+    "update-release": "release-it --no-increment",
+    "beta": "release-it major --preRelease=beta",
     "example": "yarn --cwd example",
     "bootstrap": "yarn example && yarn && yarn example pods"
   },
@@ -62,7 +64,6 @@
     "react": "17.0.2",
     "react-native": "0.68.2",
     "react-native-builder-bob": "^0.18.3",
-    "react-native-webview": "^11.23.0",
     "release-it": "^15.0.0",
     "typescript": "^4.5.2"
   },
@@ -71,8 +72,7 @@
   },
   "peerDependencies": {
     "react": "*",
-    "react-native": "*",
-    "react-native-webview": "^11.23.0"
+    "react-native": "*"
   },
   "jest": {
     "preset": "react-native",
@@ -89,13 +89,17 @@
   "release-it": {
     "git": {
       "commitMessage": "chore: release ${version}",
-      "tagName": "v${version}"
+      "tagName": "v${version}",
+      "commit": true,
+      "tag": true,
+      "push": true,
+      "requireCleanWorkingDir": false
     },
     "npm": {
       "publish": true
     },
     "github": {
-      "release": true
+      "release": false
     },
     "plugins": {
       "@release-it/conventional-changelog": {
@@ -150,6 +154,7 @@
   },
   "dependencies": {
     "axios": "^0.27.2",
+    "caniuse-lite": "^1.0.30001658",
     "events": "^3.3.0"
   }
 }

package/react-native-payengine.podspec

@@ -14,12 +14,12 @@ Pod::Spec.new do |s|
   s.platforms    = { :ios => "12.0" }
   s.source       = { :git => "https://bitbucket.org/payfac0/pf-react-native-payengine", :tag => "#{s.version}" }
 
-  s.source_files = "ios/**/*.{h,m,mm,swift}"
+  s.source_files = "ios/Sources/**/*.{h,m,mm,swift}"
 
   s.dependency "React-Core"
 
   # VGS collect
-  s.dependency 'VGSCollectSDK', "~> 1.9.8"
+  s.vendored_frameworks = 'ios/PayEngineSDK.xcframework'
 
   # Don't install the dependencies when we run `pod install` in the old architecture.
   if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then

package/src/components/PayEngine.tsx

@@ -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

@@ -0,0 +1,74 @@
+
+import * as React from 'react';
+import { Platform, requireNativeComponent, Text, ViewProps } from 'react-native';
+import type { PEPaymentRequest } from '../PEPaymentRequest';
+
+
+const RNPEApplePayButton = requireNativeComponent<NativePEApplePayViewProps>('RNPEApplePayButton');
+
+type NativePEApplePayEvent = {
+  nativeEvent: {
+    error?: string;
+    token?: string
+  };
+};
+
+interface NativePEApplePayViewProps 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();
+    }
+  }
+
+  if (Platform.OS !== 'ios') {
+    return <Text>Apple Pay is not supported on this platform</Text>
+  }
+  
+  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/GooglePay/PEGooglePayButton.tsx

@@ -0,0 +1,73 @@
+
+import * as React from 'react';
+import { NativeEventEmitter, NativeModules, Platform, requireNativeComponent, Text, ViewProps } from 'react-native';
+import type { PEPaymentRequest } from '../PEPaymentRequest';
+
+const { RNPEEventEmitter } = NativeModules;
+
+const RNPEGooglePayButton = requireNativeComponent<NativePEGooglePayViewProps>('RNPEGooglePayButton');
+
+interface NativePEGooglePayViewProps extends ViewProps {
+  amount: number;
+  merchantId: string;
+}
+
+const peEventEmitter = new NativeEventEmitter(RNPEEventEmitter);
+
+export interface PEGooglePayButtonProps extends ViewProps {
+  paymentRequest: PEPaymentRequest;
+  onTokenDidReturn?: (token: string) => void;
+  onPaymentSheetDismissed?: () => void;
+  onPaymentFailed?: (error: Error) => void;
+}
+
+export interface PEGooglePayButtonMethods {
+  
+}
+
+
+export const PEGooglePayButton = React.forwardRef<
+  PEGooglePayButtonMethods,
+  PEGooglePayButtonProps
+>((props, ref) => {
+
+  React.useImperativeHandle(ref, () => ({
+  }));
+
+  React.useEffect(() => {
+    const listener1 = peEventEmitter.addListener('onGooglePayRespond', args => {
+      const { token } = args;
+      console.log('ON token', token)
+      props.onTokenDidReturn?.(token)
+    });
+
+    const listener2 = peEventEmitter.addListener('onGooglePayError', args => {
+      const { error } = args;
+      console.log('ON error', error)
+      props.onPaymentFailed?.(new Error(error))
+    });
+
+    const listener3 = peEventEmitter.addListener('onGooglePayDismiss', () => {
+      console.log('ON dismiss')
+      props.onPaymentSheetDismissed?.()
+    });
+
+    return () => {
+      listener1.remove();
+      listener2.remove();
+      listener3.remove();
+    }
+  }, []);
+
+  if (Platform.OS !== 'android') {
+    return <Text>Google Pay is not supported on this platform</Text>
+  }
+  
+  return (
+    <RNPEGooglePayButton 
+      style={{ height: 32, width: '100%', ...(props.style as object) }} 
+      amount={props.paymentRequest.paymentAmount}
+      merchantId={props.paymentRequest.merchantId} 
+    />
+  );
+});

package/src/components/v2/PEPaymentRequest.ts

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

package/src/components/v2/PayEngineNative.tsx

@@ -0,0 +1,22 @@
+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);
+    } else if (Platform.OS === 'android') {
+      return true
+    }
+    return false;
+  }
+}

package/src/components/v2/PayEngineProvider.tsx

@@ -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
+};