react-native-payengine 1.0.6 → 2.0.4

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

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

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

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

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

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

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

package/src/index.tsx

@@ -1,11 +1,24 @@
-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/PEPaymentRequest';
+import { PEGooglePayButton } from './components/v2/GooglePay/PEGooglePayButton';
+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 +26,39 @@ 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,
+  PEGooglePayButton,
+};

package/src/interfaces/index.ts

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

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

package/android/src/main/java/com/reactnativepayengine/collect/VGSCollectModule.java

@@ -1,153 +0,0 @@
-package com.reactnativepayengine.collect;
-
-import android.app.Activity;
-import android.content.Intent;
-import android.util.Log;
-
-import androidx.annotation.NonNull;
-
-import com.facebook.react.bridge.Promise;
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.bridge.ReactContextBaseJavaModule;
-import com.facebook.react.bridge.ReactMethod;
-import com.facebook.react.modules.core.DeviceEventManagerModule;
-import com.reactnativepayengine.util.JSONObjectUtil;
-import com.verygoodsecurity.vgscollect.VGSCollectLogger;
-import com.verygoodsecurity.vgscollect.core.Environment;
-import com.verygoodsecurity.vgscollect.core.HTTPMethod;
-import com.verygoodsecurity.vgscollect.core.VGSCollect;
-import com.verygoodsecurity.vgscollect.core.model.network.VGSRequest;
-import com.verygoodsecurity.vgscollect.core.model.network.VGSResponse;
-import com.verygoodsecurity.vgscollect.core.model.state.FieldState;
-import com.verygoodsecurity.vgscollect.view.InputFieldView;
-
-import org.json.JSONException;
-import org.json.JSONObject;
-
-import java.util.HashMap;
-import java.util.List;
-import java.util.Optional;
-
-public class VGSCollectModule extends ReactContextBaseJavaModule {
-
-  private static ReactApplicationContext reactContext;
-
-  private VGSCollect collect;
-  private String publicKey;
-
-  public VGSCollectModule(ReactApplicationContext c) {
-    super(c);
-    reactContext = c;
-  }
-
-  @Override
-  public void initialize() {
-    super.initialize();
-    // Activity activity = reactContext.getCurrentActivity();
-    // collect = new VGSCollect.Builder(activity, "")
-    // .create();
-  }
-
-  @NonNull
-  @Override
-  public String getName() {
-    return "VGSCollectManager";
-  }
-
-  @ReactMethod
-  public void setConfiguration(String publicKey, String vaultId, String environment, String cname,
-      double vgsSatellitePort) {
-    Log.e("test", "Create event called with name: " + vaultId + " and location: " + environment + " cname: " + cname);
-
-    this.publicKey = publicKey;
-    VGSCollectLogger.INSTANCE.setLogLevel(VGSCollectLogger.Level.DEBUG);
-
-    Activity activity = reactContext.getCurrentActivity();
-    collect = new VGSCollect.Builder(activity, vaultId)
-        .setEnvironment(environment)
-        // .setHostname(cname)
-        // .setPort((int) Math.round(vgsSatellitePort))
-        .create();
-
-  }
-
-  @ReactMethod
-  public void createCard(String merchantId, Promise promise) {
-    this.submit("/api/cards", merchantId, promise);
-  }
-
-  @ReactMethod
-  public void createBankAccount(String merchantId, Promise promise) {
-    this.submit("/api/bank-accounts", merchantId, promise);
-  }
-
-  private void submit(String path, String merchantId, Promise promise) {
-    HashMap<String, Object> customData = new HashMap<>();
-    customData.put("pci_vault_provider", "vgs");
-    if (merchantId != null && !merchantId.isEmpty()) {
-      customData.put("merchant_id", merchantId);
-    }
-
-    String authHeader = "Signature key=\"" + this.publicKey
-        + "\",algorithm=\"hmac-sha256\",identifier=\"secure-fields\",signature=\"\"";
-    HashMap<String, String> headers = new HashMap<>();
-    headers.put("Authorization", authHeader);
-
-    List<FieldState> states = collect.getAllStates();
-
-    for (int i = 0; i < states.size(); i++) {
-      FieldState state = states.get(i);
-
-      if (!state.isValid()) {
-        String message = new StringBuilder("Field ")
-            .append(state.getFieldName())
-            .append(" is not valid.")
-            .toString();
-        promise.reject("validation_error", message);
-        return;
-      }
-      if (state instanceof FieldState.CardNumberState) {
-        FieldState.CardNumberState cardState = (FieldState.CardNumberState) state;
-        customData.put("last_4", cardState.getNumber());
-        customData.put("bin", cardState.getBin());
-        customData.put("brand", cardState.getCardBrand());
-      }
-    }
-
-    VGSRequest request = new VGSRequest.VGSRequestBuilder()
-        .setMethod(HTTPMethod.POST)
-        .setPath(path)
-        .setCustomHeader(headers)
-        .setCustomData(customData)
-        .build();
-
-    VGSResponse response = collect.submit(request);
-    Log.e("test", "response " + response.getBody());
-    if (response instanceof VGSResponse.SuccessResponse) {
-      VGSResponse.SuccessResponse result = (VGSResponse.SuccessResponse) response;
-      try {
-        JSONObject jsonObj = new JSONObject(result.getBody());
-        promise.resolve(JSONObjectUtil.convertJsonToMap(jsonObj.getJSONObject("data")));
-        return;
-      } catch (JSONException e) {
-        e.printStackTrace();
-        promise.reject("invalid_response", "We got success response but unable to parse it");
-      }
-    } else if (response instanceof VGSResponse.ErrorResponse) {
-      VGSResponse.ErrorResponse error = (VGSResponse.ErrorResponse) response;
-      promise.reject(String.valueOf(error.getErrorCode()), error.getLocalizeMessage());
-    }
-
-  }
-
-  public void onActivityResult(final int requestCode, final int resultCode, final Intent data) {
-    if (collect != null) {
-      collect.onActivityResult(requestCode, resultCode, data);
-    }
-  }
-
-  public void bindView(InputFieldView inputFieldView) {
-    Log.e("test", "collect bindView " + inputFieldView.getFieldName() + " - Collect " + collect.getAllStates());
-    collect.bindView(inputFieldView);
-  }
-}

package/android/src/main/java/com/reactnativepayengine/collect/VGSCollectOnCreateViewInstanceListener.java

@@ -1,6 +0,0 @@
-package com.reactnativepayengine.collect;
-import com.verygoodsecurity.vgscollect.view.InputFieldView;
-
-public interface VGSCollectOnCreateViewInstanceListener {
-  void onCreateViewInstance(InputFieldView inputFieldView);
-}

package/android/src/main/java/com/reactnativepayengine/collect/fields/VGSCVCField.java

@@ -1,67 +0,0 @@
-package com.reactnativepayengine.collect.fields;
-
-import android.graphics.Rect;
-import android.graphics.drawable.Drawable;
-
-import androidx.annotation.NonNull;
-import androidx.annotation.Nullable;
-
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.uimanager.SimpleViewManager;
-import com.facebook.react.uimanager.ThemedReactContext;
-import com.facebook.react.uimanager.annotations.ReactProp;
-import com.reactnativepayengine.collect.VGSCollectOnCreateViewInstanceListener;
-import com.verygoodsecurity.vgscollect.view.card.CardType;
-import com.verygoodsecurity.vgscollect.view.cvc.CVCIconAdapter;
-import com.verygoodsecurity.vgscollect.widget.CardVerificationCodeEditText;
-import com.verygoodsecurity.vgscollect.widget.VGSCardNumberEditText;
-import com.verygoodsecurity.vgscollect.widget.VGSTextInputLayout;
-
-import org.jetbrains.annotations.NotNull;
-
-public class VGSCVCField extends SimpleViewManager<VGSTextInputLayout> {
-  private final VGSCollectOnCreateViewInstanceListener listener;
-
-  private CardVerificationCodeEditText editText;
-  private VGSTextInputLayout vgsTextInputLayout;
-
-  ReactApplicationContext mCallerContext;
-
-  public VGSCVCField(VGSCollectOnCreateViewInstanceListener listener, ReactApplicationContext reactContext) {
-    this.listener = listener;
-    mCallerContext = reactContext;
-  }
-
-  @Override
-  public String getName() {
-    return "VGSCVCField";
-  }
-
-  @NonNull
-  @Override
-  protected VGSTextInputLayout createViewInstance(@NonNull ThemedReactContext reactContext) {
-    vgsTextInputLayout = new VGSTextInputLayout(reactContext);
-    vgsTextInputLayout.setHint("CVC");
-    editText = new CardVerificationCodeEditText(reactContext);
-    editText.setIsRequired(true);
-    editText.setFieldName("card_cvc");
-    CVCIconAdapter adapter = new CVCIconAdapter(reactContext) {
-      @Override
-      protected Drawable getIcon(@NotNull CardType cardType, @Nullable String cardBrand, int cvcLength, @NotNull Rect r) {
-        return super.getIcon(cardType, cardBrand, cvcLength, r);
-      }
-    };
-    editText.setPreviewIconAdapter(adapter);
-    editText.setPadding(10, 0, 10, 0);
-
-    vgsTextInputLayout.addView(editText);
-
-    this.listener.onCreateViewInstance(editText);
-    return vgsTextInputLayout;
-  }
-
-  @ReactProp(name = "placeholder")
-  public void setPlaceholder(VGSTextInputLayout view, @Nullable String placeholder) {
-    vgsTextInputLayout.setHint(placeholder);
-  }
-}