react-native-payengine 1.0.5 → 1.0.6

package/src/components/SecureFields/VGS/CollectManager.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { Text, NativeModules } from 'react-native';
+import { createHttpClient } from '../../../utils';
+import type { IPayEngineConfig } from '../../../interfaces/index';
+
+const NativeVGSCollectManager = NativeModules.VGSCollectManager;
+
+export interface CollectManagerProps {
+  config: IPayEngineConfig;
+  children: JSX.Element | JSX.Element[];
+}
+
+export interface VGSCollectManagerMethods {
+  createCard: (merchantId?: string) => void;
+  cardBankAccount: (merchantId?: string) => void;
+}
+
+const CollectManager = React.forwardRef<
+  VGSCollectManagerMethods,
+  CollectManagerProps
+>((props, ref) => {
+  React.useImperativeHandle(ref, () => ({
+    createCard: (merchantId?: string) => {
+      return NativeVGSCollectManager.createCard(merchantId);
+    },
+    cardBankAccount: (merchantId?: string) => {
+      return NativeVGSCollectManager.createBankAccount(merchantId);
+    },
+  }));
+
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState('');
+
+  React.useEffect(() => {
+    const configure = async () => {
+      setLoading(true);
+      try {
+        const http = createHttpClient(props.config);
+        const resp = await http.get('/api/setting/secure-fields');
+        const { vault, environment, cname, vgs_satellite_port } =
+          resp.data.data;
+
+        NativeVGSCollectManager.setConfiguration(
+          props.config.publicKey,
+          vault,
+          environment,
+          cname.replace(/[^a-zA-Z\.]/g, ''),
+          Number(vgs_satellite_port)
+        );
+      } catch (e: any) {
+        console.log({ error: e });
+        setError(e.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    configure();
+  }, []);
+
+  return (
+    <React.Fragment>
+      {loading ? (
+        <Text>Loading</Text>
+      ) : error.length ? (
+        <Text>{error}</Text>
+      ) : (
+        props.children
+      )}
+    </React.Fragment>
+  );
+});
+
+export default CollectManager;

package/src/components/SecureFields/VGS/ExpDateField.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { PureComponent } from 'react';
+import { requireNativeComponent, StyleProp, ViewStyle } from 'react-native';
+
+
+
+interface ExpDateFieldProps {
+  placeholder?: string
+  style?: StyleProp<ViewStyle>
+}
+
+class ExpDateField extends PureComponent<ExpDateFieldProps> {
+
+  render() {
+    return <RTCExpDateField {...this.props} />
+  }
+}
+
+const RTCExpDateField = requireNativeComponent('VGSExpDateField');
+
+export default ExpDateField;

package/src/components/SecureFields/VGS/TextField.tsx

@@ -0,0 +1,27 @@
+import React, { PureComponent } from 'react';
+import { requireNativeComponent, StyleProp, ViewStyle } from 'react-native';
+
+
+
+interface TextFieldProps {
+  name?: string
+  placeholder?: string
+  maxLength?: number
+  pattern?: string
+  style?: StyleProp<ViewStyle>
+}
+
+class TextField extends PureComponent<TextFieldProps> {
+
+  constructor(props: TextFieldProps) {
+    super(props)
+  }
+
+  render() {
+    return <RTCTextField {...this.props} />
+  }
+}
+
+const RTCTextField = requireNativeComponent('VGSTextField');
+
+export default TextField;

package/src/components/SecureFields/VGS/ZipCodeField.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { PureComponent } from 'react';
+import { requireNativeComponent, StyleProp, ViewStyle } from 'react-native';
+
+
+
+interface ZipCodeFieldProps {
+  placeholder?: string
+  style?: StyleProp<ViewStyle>
+}
+
+class ZipCodeField extends PureComponent<ZipCodeFieldProps> {
+
+  render() {
+    return <RTCZipCodeField {...this.props} />
+  }
+}
+
+const RTCZipCodeField = requireNativeComponent('VGSZipCodeField');
+
+export default ZipCodeField;

package/src/components/SecureFields/index.ts

@@ -0,0 +1,17 @@
+import CardNumberField from "./VGS/CardNumberField";
+import CVCField from "./VGS/CVCField";
+import ExpDateTextField from "./VGS/ExpDateField";
+import CollectManager from "./VGS/CollectManager";
+import TextField from './VGS/TextField';
+import CardHolderNameField from './VGS/CardHolderNameField';
+import ZipCodeField from './VGS/ZipCodeField';
+
+export const SecureFields = {
+  CollectManager,
+  ExpDateTextField,
+  CardNumberField,
+  CVCField,
+  CardHolderNameField,
+  ZipCodeField,
+  TextField
+}

package/src/index.tsx

@@ -0,0 +1,37 @@
+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';
+
+const LINKING_ERROR =
+  `The package 'react-native-payengine' doesn't seem to be linked. Make sure: \n\n` +
+  Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
+  '- 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);
+    },
+  }
+);
+
+
+export {
+  PayEngineStatic,
+  PayEngine,
+  SecureFields,
+  CreditCardForm,
+  CreditCardFormLegacy,
+  IPayEngineConfig,
+  PayEngineGooglePay,
+  PayEngineApplePay
+}
+
+

package/src/interfaces/index.ts

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,107 @@
+import axios from 'axios';
+import type { IPayEngineConfig } from '../interfaces/index';
+
+export const getHttpHeaders = (config: IPayEngineConfig) => {
+  return {
+    Authorization: `Signature key="${config.publicKey}",algorithm="hmac-sha256",identifier="secure-fields",signature=""`,
+  };
+};
+
+export const getBaseURL = (config: IPayEngineConfig) => {
+  let baseUrl = config.publicKey.includes('_prod_')
+    ? 'https://console.payengine.co'
+    : 'https://console.payengine.dev';
+
+  if (config.scriptURL) {
+    baseUrl = config.scriptURL.replace(/^((\w+:)?\/\/[^\/]+\/?).*$/, '$1');
+  }
+  return baseUrl;
+};
+
+export const createHttpClient = (config: IPayEngineConfig) => {
+  return axios.create({
+    baseURL: getBaseURL(config),
+    headers: getHttpHeaders(config),
+  });
+};
+
+export function getScriptURL(config: IPayEngineConfig) {
+  if (!config.publicKey) {
+    throw new Error('PayEngine Public Key is missing');
+  }
+  let scriptURL = '';
+  const logLevelStr = config.logLevel ? `&loglevel=${config.logLevel}` : '';
+  if (config.scriptURL) {
+    scriptURL = `${config.scriptURL}?key=${config.publicKey}${logLevelStr}`;
+  } else {
+    const baseURL = config.publicKey.includes('_prod_')
+      ? 'https://console.payengine.co'
+      : 'https://console.payengine.dev';
+    const version = config.version ?? '1.0.0';
+    scriptURL = `${baseURL}/js/${version}/embed.js?key=${config.publicKey}${logLevelStr}`;
+  }
+
+  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 = {
+    log: (...log) => consoleLog('log', ...log),
+    debug: (...log) => consoleLog('debug', ...log),
+    info: (...log) => consoleLog('info', ...log),
+    warn: (...log) => consoleLog('warn', ...log),
+    error: (...log) => consoleLog('error', ...log),
+    verbose: (...log) => consoleLog('verbose', ...log),
+};
+
+const dispatchEvent_original = EventTarget.prototype.dispatchEvent;
+function dispatchEvent(event) {
+    if (event.type && !event.type.startsWith('react')) {
+      ReactNativeWebView.postMessage(JSON.stringify({
+        type: 'PayEngine',
+        event: {
+          type: event.type,
+          detail: event.detail
+        }
+      }))
+    }
+}
+EventTarget.prototype.dispatchEvent = dispatchEvent;
+`;