react-native-payengine 1.0.5 → 1.0.6

package/src/components/GooglePay/PayEngineGooglePay.ts

@@ -0,0 +1,48 @@
+import GooglePay from '.';
+import type { IPayEngineConfig, MobilePaymentConfig, PaymentRequest } from '../../interfaces';
+import { createHttpClient } from '../../utils';
+import type { GooglePayRequestData, IGooglePay } from './interfaces';
+
+export class PayEngineGooglePay implements IGooglePay {
+
+  private googlePay: GooglePay;
+  private payEngineConfig: IPayEngineConfig;
+  private config?: MobilePaymentConfig;
+
+  constructor(payEngineConfig: IPayEngineConfig) {
+    this.payEngineConfig = payEngineConfig;
+    this.googlePay = new GooglePay()
+  }
+
+  public async canMakePayments(merchantId: string) {
+    const client = createHttpClient(this.payEngineConfig);
+    const { data } = await client.get(`/api/mobile-payment/config?merchant_id=${merchantId}`)
+    this.config = data.data
+    await this.googlePay.setProduction(Boolean(this.config!.google_pay.production))
+    return await this.googlePay.canMakePayments(this.config!.google_pay.cardPaymentMethod.allowedCardNetworks, this.config!.google_pay.cardPaymentMethod.allowedCardAuthMethods)
+  }
+
+  public async start(paymentConfig: PaymentRequest) {
+    if (!this.config) {
+      throw new Error('You must call `canMakePayments` first')
+    }
+
+    const payload: GooglePayRequestData = {
+      cardPaymentMethod: this.config!.google_pay.cardPaymentMethod,
+      transaction: {
+        totalPrice: String(paymentConfig.amount),
+        totalPriceStatus: 'FINAL',
+        currencyCode: paymentConfig.currencyCode ?? this.config!.currency,
+        countryCode: paymentConfig.countryCode ?? this.config!.country
+      },
+      merchantName: this.config!.google_pay.merchantName
+    }
+
+    const result = await this.googlePay.start(payload);
+    try {
+      return JSON.parse(result)
+    } catch {
+      return result;
+    }
+  }
+}

package/src/components/GooglePay/index.ts

@@ -0,0 +1,39 @@
+import { NativeModules, Platform } from 'react-native';
+import type {
+  GooglePayAllowedCardAuthMethods,
+  GooglePayAllowedCardNetworks,
+  GooglePayRequestData,
+  IGooglePay,
+} from './interfaces';
+
+const { GooglePay: RNGooglePay } = NativeModules;
+
+export default class GooglePay implements IGooglePay {
+  constructor() {
+    if (Platform.OS === 'android') {
+      if (!RNGooglePay) {
+        throw new Error('GooglePay is not defined');
+      }
+    } else {
+      throw new Error('Google Pay is not supported (Android only)');
+    }
+  }
+
+  public async setProduction(isProduction: boolean) {
+    return RNGooglePay.setEnvironment(isProduction ? 1 : 3);
+  }
+
+  public async canMakePayments(
+    allowedCardNetworks: GooglePayAllowedCardNetworks,
+    allowedCardAuthMethods: GooglePayAllowedCardAuthMethods
+  ) {
+    return await RNGooglePay.isReadyToPay(
+      allowedCardNetworks,
+      allowedCardAuthMethods
+    );
+  }
+
+  public async start(requestData: GooglePayRequestData) {
+    return await RNGooglePay.requestPayment(requestData);
+  }
+}

package/src/components/GooglePay/interfaces.ts

@@ -0,0 +1,42 @@
+export interface IGooglePay {
+  canMakePayments: (...args: any) => Promise<boolean>
+  start: (...args: any) => Promise<any>
+}
+
+type NetworkType = 'AMEX' | 'DISCOVER' | 'JCB' | 'MASTERCARD' | 'VISA';
+type MethodType = 'PAN_ONLY' | 'CRYPTOGRAM_3DS';
+
+export type GooglePayAllowedCardNetworks = NetworkType[];
+
+export type GooglePayAllowedCardAuthMethods = MethodType[];
+
+export type TokenizationSpecificationType = 'PAYMENT_GATEWAY' | 'DIRECT';
+
+export interface GooglePayRequestData {
+  production?: boolean,
+  cardPaymentMethod: {
+    tokenizationSpecification: {
+      type: TokenizationSpecificationType;
+      /** only with type: PAYMENT_GATEWAY */
+      gateway?: string;
+      /** only with type: PAYMENT_GATEWAY */
+      gatewayMerchantId?: string;
+      /** only with gateway: stripe */
+      stripe?: {
+        publishableKey: string;
+        version: string;
+      };
+      /** only with type: DIRECT */
+      publicKey?: string;
+    };
+    allowedCardNetworks: GooglePayAllowedCardNetworks;
+    allowedCardAuthMethods: GooglePayAllowedCardAuthMethods;
+  };
+  transaction: {
+    totalPrice: string;
+    totalPriceStatus: string;
+    currencyCode: string;
+    countryCode: string;
+  };
+  merchantName: string;
+}

package/src/components/Legacy/CreditCardFormLegacy.tsx

@@ -0,0 +1,292 @@
+import * as React from 'react';
+import { Text, View, StyleSheet, ActivityIndicator } from 'react-native';
+import eventEmitter from 'events';
+import { WebView } from 'react-native-webview';
+import { createHttpClient, getHttpHeaders } from '../../utils/index';
+import type { CreditCardFormMethods, CreditCardFormProps } from '../../interfaces/index';
+import LoadingIndicator from '../LoadingIndicator';
+
+const emitter = new eventEmitter();
+
+class CardError extends Error {
+  public data: any = null;
+
+  constructor(data: any) {
+    super('Failed to create card')
+    this.data = data
+  }
+}
+
+const CreditCardFormLegacy = React.forwardRef<CreditCardFormMethods, CreditCardFormProps>((props, ref) => {
+  const webviewRef = React.createRef<WebView>()
+
+  const [loading, setLoading] = React.useState(true)
+  const [error, setError] = React.useState("")
+  const [html, setHtml] = React.useState("")
+  const [webviewResponse, setWebviewResponse] = React.useState<any>()
+
+  React.useImperativeHandle(ref, () => ({
+    createCard: async (merchantId?: string) => {
+      setWebviewResponse(null)
+      const headers = getHttpHeaders(props.config)
+      const script = `
+        submit(${merchantId ? '"' + merchantId + '"' : 'null'}, '${headers.Authorization}');
+      `
+      return new Promise((resolve, reject) => {
+        console.log({ emitter })
+        emitter.once('pe.card_response', (data, isError) => {
+          if (isError) {
+            reject(new CardError(data))
+          } else {
+            resolve(data)
+          }
+        })
+        webviewRef.current?.injectJavaScript(script)
+      })
+
+    },
+  }), [props.config, webviewRef, webviewResponse]);
+
+
+
+  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
+
+        setHtml(createVGSCollectFormHTML(Boolean(props.showZipCode), vault, environment, cname, vgs_satellite_port))
+      } catch (e: any) {
+        console.log({ error: e })
+        setError(e.message)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    configure()
+  }, [])
+
+  const onMessage = (payload: any) => {
+    let dataPayload;
+    try {
+      dataPayload = JSON.parse(payload.nativeEvent.data);
+    } catch (e) { }
+
+    if (dataPayload) {
+      console.log({ dataPayload })
+      switch (dataPayload.type) {
+        case 'PayEngineCardResponse':
+          emitter.emit('pe.card_response', dataPayload.data, dataPayload.isError)
+          break
+        default:
+          break
+      }
+    }
+  };
+
+  if (loading || !html) {
+    return <ActivityIndicator />
+  }
+
+  return (
+    <>
+      <View style={[styles.container, { height: props.showZipCode ? 270 : 215 }]}>
+        <WebView
+          ref={webviewRef}
+          originWhitelist={['*']}
+          source={{
+            html: html,
+          }}
+          scalesPageToFit={false}
+          style={{ backgroundColor: 'transparent' }}
+          bounces={false}
+          scrollEnabled={false}
+          renderLoading={LoadingIndicator}
+          startInLoadingState={true}
+          onMessage={onMessage}
+        />
+      </View>
+      {error.length ? <Text>{error}</Text> : <></>}
+    </>
+  );
+});
+
+export default CreditCardFormLegacy;
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    padding: 20,
+  }
+});
+
+const createVGSCollectFormHTML = (showZipCode: boolean, vault: string, environment: string, cname: string, vgs_satellite_port: string) => `
+  <!DOCTYPE html>
+  <html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <title>Credit Card Form</title>
+    <script type="text/javascript" src="https://js.verygoodvault.com/vgs-collect/2.16.0/vgs-collect.js"></script>
+
+    <style>
+      html, body {
+        margin: 0;
+        padding: 0;
+        background: transparent;
+      }
+      .row {
+        display: flex;
+        gap: 10px;
+      }
+      .col {
+        flex: 1;
+      }
+      .form-group {
+        margin-bottom: 10px;
+      }
+      .form-field {
+        display: block;
+        width: 100%;
+        height: 50px;
+      }
+
+      .form-field iframe {
+        border: 0 none transparent;
+        height: 100%;
+        vertical-align: middle;
+        width: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <form id="cc-form">
+      <div class="form-group">
+        <span id="card_holder" class="form-field">
+        </span>
+      </div>
+      <div class="form-group">
+        <span id="card_number" class="form-field"></span>
+      </div>
+      <div class="row">
+        <div class="form-group">
+          <span id="card_exp" class="form-field"></span>
+        </div>
+        <div class="form-group">
+          <span id="card_cvc" class="form-field"></span>
+        </div>
+      </div>
+      ${showZipCode ? `<div class="form-group">
+          <span id="address_zip" class="form-field"></span>
+        </div>` : ''}
+    </form>
+
+    <script>
+      const css = {
+        color: '#000',
+        border: '#CCC 1px solid',
+        'border-radius': '5px',
+        'text-transform': 'uppercase',
+        padding: '5px 10px',
+        'box-sizing': 'border-box',
+        'font-size': '1em',
+        'caret-color': 'transparent',
+        '&:focus': {
+          'border-color': '#999',
+        },
+        '&.invalid.touched': {
+          'border-color': 'red',
+        },
+        '&.valid': {
+          'border-color': '#CCC',
+        },
+      }
+      const form = VGSCollect.create('${vault}', '${environment}', function(state) {});
+      alert('${cname}')
+      form.useCname('${cname}')
+      // form.connectSatellite(parseInt(${vgs_satellite_port}) ?? 9098)
+      form.field('#card_holder', {
+        type: 'text',
+        name: 'card_holder',
+        placeholder: 'Card holder name',
+        validations: ['required'],
+        css
+      });
+
+      const cardElement = form.field('#card_number', {
+        type: 'card-number',
+        name: 'card_number',
+        placeholder: 'Card number',
+        validations: ['required', 'validCardNumber'],
+        showCardIcon: true,
+        css
+      });
+
+      const cvcElement = form.field('#card_cvc', {
+        type: 'card-security-code',
+        name: 'card_cvc',
+        placeholder: 'CVC',
+        validations: ['required', 'validCardSecurityCode'],
+        showCardIcon: true,
+        css
+      });
+
+      cardElement.setCVCDependency(cvcElement);
+
+      form.field('#card_exp', {
+        type: 'card-expiration-date',
+        name: 'card_exp',
+        placeholder: 'Exp date',
+        validations: ['required', 'validCardExpirationDate'],
+        css
+      });
+
+      ${showZipCode ? `
+        form.field('#address_zip', {
+          type: 'text',
+          name: 'address_zip',
+          placeholder: 'Zip code',
+          maxLength: 7,
+          validations: ['required', 'postal_code/us,ca'],
+          css
+        });
+      ` : ''}
+
+      const sendNative = (data, isError) => {
+        window.ReactNativeWebView.postMessage(JSON.stringify({
+          type: 'PayEngineCardResponse',
+          data: data,
+          isError: isError
+        }))
+      }
+
+      function submit(merchantId, authHeader) {
+        form.submit('/api/cards', {
+          method: 'POST',
+          data: {
+            brand: form.state.card_number.cardType,
+            last_4: form.state.card_number.last4,
+            bin: form.state.card_number.bin,
+            pci_vault_provider: 'vgs',
+            merchant_id: merchantId,
+          },
+          headers: {
+            Authorization: authHeader
+          }
+        }, (status, data) => {
+          if (status === 200) {
+            sendNative(data, false)
+          } else {
+            sendNative({ data, status }, true)
+          }
+        }, error => {
+          sendNative(error, true)
+        })
+        return true
+      }
+    </script>
+  </body>
+  </html>`;

package/src/components/LoadingIndicator.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { StyleSheet, ActivityIndicator, View } from 'react-native';
+
+const LoadingIndicator = () => {
+  return (
+    <View style={styles.container}>
+      <ActivityIndicator size="small" color="#0000ff" />
+    </View>
+  );
+};
+
+export default LoadingIndicator;
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    height: '100%',
+    width: '100%'
+  },
+  activityIndicatorStyle: {
+    // flex: 1,
+    // justifyContent: "center",
+  },
+});

package/src/components/PayEngine.tsx

@@ -0,0 +1,121 @@
+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';
+
+interface IProps {
+  config: IPayEngineConfig
+  type: string
+  merchantId?: string
+  hash?: string
+  events: {
+    [key: string]: (eventData: any) => void
+  }
+  style?: StyleProp<ViewStyle>
+  [key: string]: any
+}
+
+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

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

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

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

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

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

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