Update change handler to support paste

src/Frames.tsx

@@ -13,9 +13,9 @@ import { tokenize, formatDataForTokenization } from "./utils/http";
 export const FramesContext = React.createContext({} as FramesContextType);
 
 const Frames = (props: FramesProps) => {
-  // @ts-ignore
   const [state, dispatch]: [FramesState, FramesDispatch] = React.useReducer(
     framesReducer,
+    // @ts-ignore
     {
       cardNumber: null,
       cardBin: {
@@ -28,10 +28,10 @@ const Frames = (props: FramesProps) => {
       cvv: null,
       cvvLength: 3,
       validation: {
-        cardNumber: false,
-        expiryDate: false,
-        cvv: false,
-        card: false,
+        cardNumber: true,
+        expiryDate: true,
+        cvv: true,
+        card: true,
       },
     }
   );
@@ -57,11 +57,13 @@ const Frames = (props: FramesProps) => {
     } catch (error) {
       if (props.config.debug)
         console.info(`Emitting "cardTokenizationFailed"`, error);
+      // @ts-ignore
       if (props.cardTokenizationFailed) props.cardTokenizationFailed(error);
       log(
         "error",
         "com.checkout.frames-mobile-sdk.exception",
         props.config,
+        // @ts-ignore
         error
       );
     }
@@ -77,6 +79,7 @@ const Frames = (props: FramesProps) => {
 
   useEffect(() => {
     if (state.cardNumber !== null) {
+      console.log("TRIGGERS use effect");
       let payload = {
         element: "card-number",
         isValid: state.validation.cardNumber,

src/components/CardNumber.tsx

@@ -16,23 +16,23 @@ const CardNumber: React.FC<FramesCardFieldProps> = (props) => {
         return (
           <View style={styles.wrapper}>
             <TextInput
-              autoCompleteType="cc-number"
+              autoComplete="cc-number"
               keyboardType="number-pad"
               returnKeyType="done"
               placeholder={DEFAULT_CARD_NUMBER_PLACEHOLDER}
               {...props}
               value={state.cardNumber}
               style={[styles.cardNumber, props.style]}
-              onChangeText={(val: string) => {
-                dispatch({ type: CARD_CHANGE, payload: val });
+              onChange={({ nativeEvent: { eventCount, target, text } }) => {
+                dispatch({ type: CARD_CHANGE, payload: text });
                 if (
-                  val.replace(/[^0-9]/g, "").length >= 8 &&
-                  val.replace(/[^0-9]/g, "").substring(0, 8) !==
+                  text.replace(/[^0-9]/g, "").length >= 8 &&
+                  text.replace(/[^0-9]/g, "").substring(0, 8) !==
                     state.cardBin.bin
                 ) {
                   dispatch({
                     type: BIN_CHANGE,
-                    payload: val.replace(/[^0-9]/g, "").substring(0, 8),
+                    payload: text.replace(/[^0-9]/g, "").substring(0, 8),
                   });
                 }
               }}

src/components/Cvv.tsx

@@ -6,6 +6,7 @@ import { DEFAULT_CVV_PLACEHOLDER } from "../utils/constants";
 import { CVV_CHANGE } from "../utils/actions";
 import { FramesFieldProps } from "../types/types";
 
+//@ts-ignore
 const Cvv: React.SFC<FramesFieldProps> = (props) => {
   return (
     <FramesConsumer>
@@ -15,7 +16,7 @@ const Cvv: React.SFC<FramesFieldProps> = (props) => {
         }
         return (
           <TextInput
-            autoCompleteType="cc-csc"
+            autoComplete="cc-csc"
             keyboardType="number-pad"
             returnKeyType="done"
             secureTextEntry={true}
@@ -24,9 +25,9 @@ const Cvv: React.SFC<FramesFieldProps> = (props) => {
             style={[styles.cvv, props.style]}
             value={state.cvv}
             maxLength={state.cvvLength}
-            onChangeText={(val: string) =>
-              dispatch({ type: CVV_CHANGE, payload: val })
-            }
+            onChange={({ nativeEvent: { eventCount, target, text } }) => {
+              dispatch({ type: CVV_CHANGE, payload: text });
+            }}
           />
         );
       }}

src/components/ExpiryDate.tsx

@@ -5,7 +5,7 @@ import { FramesConsumer } from "../Frames";
 import { DEFAULT_CARD_EXPIRY_DATE_PLACEHOLDER } from "../utils/constants";
 import { DATE_CHANGE } from "../utils/actions";
 import { FramesFieldProps } from "../types/types";
-
+//@ts-ignore
 const ExpiryDate: React.SFC<FramesFieldProps> = (props) => {
   return (
     <FramesConsumer>
@@ -15,17 +15,17 @@ const ExpiryDate: React.SFC<FramesFieldProps> = (props) => {
         }
         return (
           <TextInput
-            autoCompleteType="cc-exp"
+            autoComplete="cc-exp"
             keyboardType="number-pad"
             maxLength={5}
             returnKeyType="done"
             placeholder={DEFAULT_CARD_EXPIRY_DATE_PLACEHOLDER}
             {...props}
             style={[styles.expiryDate, props.style]}
             value={state.expiryDate}
-            onChangeText={(val: string) =>
-              dispatch({ type: DATE_CHANGE, payload: val })
-            }
+            onChange={({ nativeEvent: { eventCount, target, text } }) => {
+              dispatch({ type: DATE_CHANGE, payload: text });
+            }}
           />
         );
       }}

src/utils/card.tsx

@@ -11,7 +11,13 @@ const types = [mada, ...creditcardsTypes];
 const cards = new Card(types);
 const cvc = new Cvc(types);
 
-const extendedCardTypeMapWhitelist = { 6011111111111117: "Discover" };
+interface CardTypeMap {
+  [key: string]: string;
+}
+
+const extendedCardTypeMapWhitelist: CardTypeMap = {
+  "6011111111111117": "Discover",
+};
 
 export const Icons = {
   Visa: require("../icons/visa.png"),
@@ -31,7 +37,7 @@ export const formatCard = (text: string): string => {
 export const getCardType = (text: string) => {
   const sanitizedValue = cards.parse(text);
   const cardType: IconKey =
-    extendedCardTypeMapWhitelist[sanitizedValue] ||
+    extendedCardTypeMapWhitelist[String(sanitizedValue)] ||
     cards.type(sanitizedValue, true);
   return cardType;
 };

tsconfig.json

@@ -1,35 +1,28 @@
 {
-    "compilerOptions": {
-      "target": "es5",
-      "lib": [
-        "esnext"
-      ],
-      "jsx": "react-native",
-      "types": ["react", "jest"],
-      "allowJs": true,
-      "esModuleInterop": true,
-      "allowSyntheticDefaultImports": true,
-      "strict": true,
-      "forceConsistentCasingInFileNames": true,
-      "module": "esnext",
-      "moduleResolution": "node",
-      "resolveJsonModule": true,
-      "isolatedModules": true,
-      "noEmit": false,
-      "outDir": "./dist",
-      "sourceMap": true,
-      "noImplicitReturns": true,
-      "suppressImplicitAnyIndexErrors": true,
-      "noUnusedLocals": true,
-      "declaration": true,
-      "noFallthroughCasesInSwitch": true
-    },
-    "include": [
-      "src/*"
-    ],
-    "exclude": [
-      "node_modules",
-      "**/__tests__/*"
-    ]
-  }
-
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["esnext"],
+    "jsx": "react-native",
+    "types": ["react", "jest"],
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": false,
+    "outDir": "./dist",
+    "sourceMap": true,
+    "noImplicitReturns": true,
+    "ignoreDeprecations": "5.0",
+    "noUnusedLocals": true,
+    "declaration": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/*"],
+  "exclude": ["node_modules", "**/__tests__/*"]
+}