react-native-payengine 1.0.6 → 2.0.2

package/src/components/GooglePay/index.ts

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

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

@@ -1,292 +0,0 @@
-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/SecureFields/VGS/CVCField.tsx

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

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

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

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

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

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

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

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

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