react-native-payengine 1.0.5 → 2.0.2

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

@@ -0,0 +1,62 @@
+import PayEngine from './components/PayEngine';
+import { NativeModules, Platform } from 'react-native';
+import type { IPayEngineConfig } from './interfaces/index';
+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/ApplePay/PEPaymentRequest';
+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` +
+  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,
+  IPayEngineConfig,
+
+  // v2 starting here
+  PayEngineUtils,
+  PayEngineProvider,
+  PayEngineNative,
+  // securefields
+  PEKeyboardType,
+  IPEField,
+  // credit card
+  PECreditCardView,
+  PECreditCardViewMethods,
+  PECard,
+  // bank account
+  PEBankAccountView,
+  PEBankAccountViewMethods,
+  PEBankAccount,
+  // Apple Pay
+  PEApplePayButton,
+  PEPaymentRequest,
+};

package/src/interfaces/index.ts

@@ -0,0 +1,6 @@
+export interface IPayEngineConfig {
+  publicKey: string;
+  version?: string;
+  scriptURL?: string;
+  logLevel?: number;
+}

package/src/utils/index.ts

@@ -0,0 +1,79 @@
+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=""`,
+  };
+};
+
+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;
+}
+
+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;
+`;

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

@@ -1,148 +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;
-
-  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 vaultId, String environment, String cname, double vgsSatellitePort) {
-    Log.e("test", "Create event called with name: " + vaultId + " and location: " + environment + " cname: " + cname);
-
-    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);
-    }
-
-    HashMap<String, String> headers = new HashMap<>();
-    headers.put("CUSTOM-HEADER", "custom-header");
-
-    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);
-  }
-}

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

@@ -1,53 +0,0 @@
-package com.reactnativepayengine.collect.fields;
-
-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.widget.ExpirationDateEditText;
-import com.verygoodsecurity.vgscollect.widget.PersonNameEditText;
-import com.verygoodsecurity.vgscollect.widget.VGSTextInputLayout;
-
-public class VGSCardHolderNameField extends SimpleViewManager<VGSTextInputLayout> {
-  private final VGSCollectOnCreateViewInstanceListener listener;
-
-  private PersonNameEditText editText;
-  private VGSTextInputLayout vgsTextInputLayout;
-
-  ReactApplicationContext mCallerContext;
-
-  public VGSCardHolderNameField(VGSCollectOnCreateViewInstanceListener listener, ReactApplicationContext reactContext) {
-    this.listener = listener;
-    mCallerContext = reactContext;
-  }
-
-  @Override
-  public String getName() {
-    return "VGSCardHolderNameField";
-  }
-
-  @NonNull
-  @Override
-  protected VGSTextInputLayout createViewInstance(@NonNull ThemedReactContext reactContext) {
-    vgsTextInputLayout = new VGSTextInputLayout(reactContext);
-    vgsTextInputLayout.setHint("Card holder name");
-    editText = new PersonNameEditText(reactContext);
-    editText.setIsRequired(true);
-    editText.setFieldName("card_holder");
-    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);
-  }
-}