card-react-native 0.0.7

package/lib/typescript/src/models/enums/sdkEnums.d.ts

@@ -0,0 +1,48 @@
+export declare enum SupportedBrands {
+    AMEX = "AMEX",
+    CARTESBANCAIRES = "CARTESBANCAIRES",
+    DISCOVER = "DISCOVER",
+    EFTPOS = "EFTPOS",
+    ELECTRON = "ELECTRON",
+    IDCREDIT = "IDCREDIT",
+    INTERAC = "INTERAC",
+    JCB = "JCB",
+    MAESTRO = "MAESTRO",
+    MASTERCARD = "MASTERCARD",
+    PRIVATELABEL = "PRIVATELABEL",
+    QUICPAY = "QUICPAY",
+    SUICA = "SUICA",
+    VISA = "VISA",
+    VPAY = "VPAY",
+    MADA = "MADA"
+}
+export declare enum Scope {
+    Token = "Token",
+    Authenticate = "Authenticate"
+}
+export declare enum SdkMode {
+    production = 0,
+    sandbox = 1
+}
+export declare enum Locale {
+    en = "en",
+    ar = "ar"
+}
+export declare enum SupportedCards {
+    All = "All",
+    Debit = "DEBIT",
+    Credit = "CREDIT"
+}
+export declare enum Theme {
+    light = "light",
+    dark = "dark"
+}
+export declare enum Edges {
+    curved = "curved",
+    flat = "flat"
+}
+export declare enum Direction {
+    ltr = "ltr",
+    rtl = "rtl"
+}
+//# sourceMappingURL=sdkEnums.d.ts.map

package/lib/typescript/src/models/enums/sdkEnums.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sdkEnums.d.ts","sourceRoot":"","sources":["../../../../../src/models/enums/sdkEnums.ts"],"names":[],"mappings":"AAAA,oBAAY,eAAe;IACzB,IAAI,SAAS;IACb,eAAe,oBAAoB;IACnC,QAAQ,aAAa;IACrB,MAAM,WAAW;IACjB,QAAQ,aAAa;IACrB,QAAQ,aAAa;IACrB,OAAO,YAAY;IACnB,GAAG,QAAQ;IACX,OAAO,YAAY;IACnB,UAAU,eAAe;IACzB,YAAY,iBAAiB;IAC7B,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,IAAI,SAAS;IACb,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAED,oBAAY,KAAK;IACf,KAAK,UAAU;IACf,YAAY,iBAAiB;CAC9B;AAED,oBAAY,OAAO;IACjB,UAAU,IAAA;IACV,OAAO,IAAA;CACR;AAED,oBAAY,MAAM;IAChB,EAAE,OAAO;IACT,EAAE,OAAO;CACV;AAED,oBAAY,cAAc;IACxB,GAAG,QAAQ;IACX,KAAK,UAAU;IACf,MAAM,WAAW;CAClB;AAED,oBAAY,KAAK;IACf,KAAK,UAAU;IACf,IAAI,SAAS;CACd;AAED,oBAAY,KAAK;IACf,MAAM,WAAW;IACjB,IAAI,SAAS;CACd;AAED,oBAAY,SAAS;IACnB,GAAG,QAAQ;IACX,GAAG,QAAQ;CACZ"}

package/lib/typescript/src/models/index.d.ts

@@ -0,0 +1,4 @@
+export * from './config';
+export * from './enums';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/models/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/models/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/lib/typescript/src/models/types.d.ts

@@ -0,0 +1,5 @@
+export type CamelToSnakeCase<S extends string> = S extends `${infer T}${infer U}` ? `${T extends Capitalize<T> ? '_' : ''}${Lowercase<T>}${CamelToSnakeCase<U>}` : S;
+export type CamelKeysToSnakeCase<T> = T extends Array<infer U> ? CamelKeysToSnakeCase<U>[] : T extends object ? {
+    [K in keyof T as CamelToSnakeCase<K & string>]: CamelKeysToSnakeCase<T[K]>;
+} : T;
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/models/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/models/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,MAAM,IAC3C,CAAC,SAAS,GAAG,MAAM,CAAC,GAAG,MAAM,CAAC,EAAE,GAC5B,GAAG,CAAC,SAAS,UAAU,CAAC,CAAC,CAAC,GACtB,GAAG,GACH,EAAE,GAAG,SAAS,CAAC,CAAC,CAAC,GAAG,gBAAgB,CAAC,CAAC,CAAC,EAAE,GAC7C,CAAC,CAAC;AAER,MAAM,MAAM,oBAAoB,CAAC,CAAC,IAAI,CAAC,SAAS,KAAK,CAAC,MAAM,CAAC,CAAC,GAC1D,oBAAoB,CAAC,CAAC,CAAC,EAAE,GACzB,CAAC,SAAS,MAAM,GAChB;KACG,CAAC,IAAI,MAAM,CAAC,IAAI,gBAAgB,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,oBAAoB,CAClE,CAAC,CAAC,CAAC,CAAC,CACL;CACF,GACD,CAAC,CAAC"}

package/package.json

@@ -0,0 +1,163 @@
+{
+  "name": "card-react-native",
+  "version": "0.0.7",
+  "description": "Tap Card SDK Wrapper",
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/src/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "!lib/typescript/example",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "test": "jest",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "prepack": "bob build",
+    "release": "release-it",
+    "example": "yarn --cwd example",
+    "build:android": "cd example/android && ./gradlew assembleDebug --no-daemon --console=plain -PreactNativeArchitectures=arm64-v8a",
+    "build:ios": "cd example/ios && xcodebuild -workspace CardSdkReactNativeExample.xcworkspace -scheme CardSdkReactNativeExample -configuration Debug -sdk iphonesimulator CC=clang CPLUSPLUS=clang++ LD=clang LDPLUSPLUS=clang++ GCC_OPTIMIZATION_LEVEL=0 GCC_PRECOMPILE_PREFIX_HEADER=YES ASSETCATALOG_COMPILER_OPTIMIZATION=time DEBUG_INFORMATION_FORMAT=dwarf COMPILER_INDEX_STORE_ENABLE=NO",
+    "bootstrap": "yarn example && yarn install && yarn example pods",
+    "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": "https://github.com/Tap-Payments/Card-React-Native",
+  "author": "mahmoudAllam <m.allam@tap.company> (https://github.com/mAllamTapPayments)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Tap-Payments/Card-React-Native/issues"
+  },
+  "homepage": "https://github.com/Tap-Payments/Card-React-Native#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^17.0.2",
+    "@evilmartians/lefthook": "^1.2.2",
+    "@react-native/eslint-config": "^0.72.2",
+    "@release-it/conventional-changelog": "^5.0.0",
+    "@types/jest": "^28.1.2",
+    "@types/react": "~17.0.21",
+    "@types/react-native": "0.70.0",
+    "commitlint": "^17.0.2",
+    "del-cli": "^5.0.0",
+    "eslint": "^8.4.1",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "jest": "^28.1.1",
+    "pod-install": "^0.1.0",
+    "prettier": "^2.0.5",
+    "react": "18.2.0",
+    "react-native": "0.72.4",
+    "react-native-builder-bob": "^0.20.0",
+    "release-it": "^15.0.0",
+    "turbo": "^1.10.7",
+    "typescript": "^5.0.2"
+  },
+  "resolutions": {
+    "@types/react": "17.0.21"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "engines": {
+    "node": ">= 18.0.0"
+  },
+  "packageManager": "^yarn@1.22.15",
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": "angular"
+      }
+    }
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@react-native",
+      "prettier"
+    ],
+    "rules": {
+      "prettier/prettier": [
+        "error",
+        {
+          "quoteProps": "consistent",
+          "singleQuote": true,
+          "tabWidth": 2,
+          "trailingComma": "es5",
+          "useTabs": false
+        }
+      ]
+    }
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ],
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  }
+}

package/src/index.tsx

@@ -0,0 +1,194 @@
+import {
+  requireNativeComponent,
+  UIManager,
+  Platform,
+  type ViewStyle,
+  findNodeHandle,
+  type NativeSyntheticEvent,
+  LayoutAnimation,
+  View,
+} from 'react-native';
+import type { Config } from './models';
+import React, {
+  useImperativeHandle,
+  type Ref,
+  forwardRef,
+  useRef,
+  useCallback,
+  type MutableRefObject,
+  useState,
+} from 'react';
+
+export * from './models';
+
+const LINKING_ERROR =
+  `The package 'card-react-native' 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 Go\n';
+
+const ComponentName = 'CardSdkReactNativeView';
+
+export const CardSdkReactNativeView =
+  UIManager.getViewManagerConfig(ComponentName) != null
+    ? requireNativeComponent<ITapCardViewNativeProps>(ComponentName)
+    : () => {
+        throw new Error(LINKING_ERROR);
+      };
+
+export interface ITapCardViewInputRef {
+  generateToken: () => void;
+}
+
+export type TapCardViewInputRef = Ref<ITapCardViewInputRef>;
+export interface ITapCardViewProps {
+  style: ViewStyle;
+  config: Config;
+  ref: TapCardViewInputRef;
+  onSuccess: (token: Object) => void;
+  onReady: () => void;
+  onFocus: () => void;
+  onHeightChange: (height: number) => void;
+  onBinIdentification: (binIdentification: Object) => void;
+  onInvalidInput: (invalid: boolean) => void;
+  onError: (error: object) => void;
+}
+
+export interface ITapCardViewNativeProps {
+  style: ViewStyle;
+  config: Config;
+  ref: TapCardViewInputRef;
+  onSuccess: ({
+    nativeEvent: { data },
+  }: NativeSyntheticEvent<{ data: Object }>) => void;
+  onReadyCallback: () => void;
+  onFocusCallback: () => void;
+  onHeightChange: ({
+    nativeEvent: { data },
+  }: NativeSyntheticEvent<{ data: number }>) => void;
+  onBinIdentification: ({
+    nativeEvent: { data },
+  }: NativeSyntheticEvent<{ data: Object }>) => void;
+  onInvalidInput: ({
+    nativeEvent: { data },
+  }: NativeSyntheticEvent<{ data: boolean }>) => void;
+  onError: ({
+    nativeEvent: { data },
+  }: NativeSyntheticEvent<{ data: Object }>) => void;
+}
+
+// UIManager.setLayoutAnimationEnabledExperimental &&
+//   UIManager.setLayoutAnimationEnabledExperimental(true);
+
+function TapCardView(
+  {
+    style,
+    config,
+    onSuccess,
+    onReady,
+    onFocus,
+    onHeightChange,
+    onBinIdentification,
+    onInvalidInput,
+    onError,
+  }: ITapCardViewProps,
+  ref: TapCardViewInputRef
+) {
+  const viewRef =
+    useRef<ITapCardViewInputRef>() as MutableRefObject<ITapCardViewInputRef>;
+  const [height, setHeight] = useState(style.height ?? 95);
+  const [addFlex, setAddFlex] = useState(false);
+
+  const generateToken = useCallback(() => {
+    return UIManager.dispatchViewManagerCommand(
+      // @ts-ignore
+      findNodeHandle(viewRef.current),
+      // @ts-ignore
+      UIManager.CardSdkReactNativeView.Commands.generateToken,
+      []
+    );
+  }, []);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      generateToken: () => {
+        generateToken();
+      },
+    }),
+    [generateToken]
+  );
+
+  const handleOnSuccess = ({
+    nativeEvent: { data },
+  }: NativeSyntheticEvent<{ data: Object }>) => {
+    onSuccess(data);
+  };
+
+  const handleOnHeightChange = ({
+    nativeEvent: { data },
+  }: NativeSyntheticEvent<{ data: number }>) => {
+    LayoutAnimation.spring();
+    setHeight(data);
+    onHeightChange(data);
+  };
+
+  const handleOnReady = () => {
+    onReady();
+    setAddFlex(true);
+    setTimeout(() => {
+      setAddFlex(false);
+    }, 1);
+  };
+
+  const handleOnFocus = () => {
+    onFocus();
+  };
+
+  const handleOnBinIdentification = ({
+    nativeEvent: { data },
+  }: NativeSyntheticEvent<{ data: Object }>) => {
+    onBinIdentification(data);
+  };
+  const handleOnInvalidInput = ({
+    nativeEvent: { data },
+  }: NativeSyntheticEvent<{ data: boolean }>) => {
+    onInvalidInput(data);
+  };
+  const handleOnError = ({
+    nativeEvent: { data },
+  }: NativeSyntheticEvent<{ data: object }>) => {
+    onError(data);
+  };
+
+  return (
+    <View
+      style={{
+        ...style,
+        height: height,
+        flex: addFlex ? 0.1 : 0,
+      }}
+    >
+      <CardSdkReactNativeView
+        style={{ ...style, flex: 1, height: height }}
+        config={{
+          ...config,
+          features: {
+            ...config.features,
+            nfc: Platform.OS === 'ios' ? false : config.features.nfc,
+          },
+        }}
+        ref={viewRef}
+        onSuccess={handleOnSuccess}
+        onReadyCallback={handleOnReady}
+        onFocusCallback={handleOnFocus}
+        onHeightChange={handleOnHeightChange}
+        onBinIdentification={handleOnBinIdentification}
+        onInvalidInput={handleOnInvalidInput}
+        onError={handleOnError}
+      />
+    </View>
+  );
+}
+
+export default forwardRef(TapCardView);

package/src/models/config.ts

@@ -0,0 +1,124 @@
+import type {
+  Direction,
+  Edges,
+  Locale,
+  Scope,
+  SupportedBrands,
+  SupportedCards,
+  TapCurrencyCode,
+  Theme,
+} from './enums';
+
+export type Merchant = { id: String };
+export type PaymentAgreement = {
+  id: String;
+  contract: Contract;
+};
+export type Contract = {
+  id: String;
+};
+export type Transaction = {
+  metadata: Object;
+  reference: String;
+  paymentAgreement: PaymentAgreement;
+};
+
+export type Phone = { countryCode: String; number: String };
+export type Fields = {
+  card: { cardHolder: boolean; cvv: boolean };
+};
+export type InterfaceConfig = {
+  locale: Locale;
+  theme: Theme;
+  edges: Edges;
+  cardDirection: Direction;
+  colorStyle: 'monochrome' | 'colored';
+  powered: true;
+};
+export type Addons = {
+  loader: boolean;
+};
+export type Acceptance = {
+  supportedSchemes: SupportedBrands[];
+  supportedFundSource: SupportedCards[];
+  supportedPaymentAuthentications: ['3DS'] | [];
+};
+export type Contact = {
+  email: String;
+  phone: Phone;
+};
+export type Name = {
+  lang: Locale;
+  first: String;
+  last: String;
+  middle: String;
+};
+export type Customer = {
+  id: String;
+  name: Name[];
+  nameOnCard: String;
+  editable: boolean;
+  contact: Contact;
+};
+export type AuthenticationTransactionInvoice = {
+  id: string;
+};
+
+export type AuthenticationPost = {
+  url: String;
+};
+
+export type AuthenticationTransaction = {
+  transaction: String;
+  order: String;
+};
+
+export type Order = {
+  id: String;
+  amount: number;
+  currency: TapCurrencyCode;
+  description: String;
+};
+
+export type Invoice = {
+  id: String;
+};
+
+export type Post = {
+  url: String;
+};
+export type Redirect = {
+  url: String;
+};
+export type Features = {
+  scanner: boolean;
+  acceptanceBadge: boolean;
+  nfc: boolean;
+  customerCards: {
+    saveCard: boolean;
+    autoSaveCard: boolean;
+  };
+};
+export type Config = {
+  publicKey: String;
+  merchant: Merchant;
+  transaction: Transaction;
+  order: Order;
+  invoice: Invoice;
+  post: Post;
+  operator: { publicKey: String };
+  purpose:
+    | 'PAYMENT_TRANSACTION'
+    | 'RECURRING_TRANSACTION'
+    | 'INSTALLMENT_TRANSACTION'
+    | 'ADD_CARD'
+    | 'CARDHOLDER_VERIFICATION';
+  fields: Fields;
+  acceptance: Acceptance;
+  addons: Addons;
+  interface: InterfaceConfig;
+  scope: Scope;
+  customer: Customer;
+  redirect: Redirect;
+  features: Features;
+};