determine the card and show the relevent card

example/babel.config.js

@@ -1,9 +1,10 @@
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
-  plugins: ['react-native-reanimated/plugin',
+  plugins: [
     ['module:react-native-dotenv', {
       envName: 'APP_ENV',
       moduleName: '@env',
       path: '.env',
-    },]],
-};
+    }],
+  ],
+};

example/package.json

@@ -12,9 +12,7 @@
   "dependencies": {
     "react": "18.2.0",
     "react-native": "0.74.1",
-    "react-native-gesture-handler": "^2.16.2",
     "react-native-komoju": "../payment_sdk",
-    "react-native-reanimated": "^3.11.0",
     "react-native-webview": "^13.10.2"
   },
   "devDependencies": {

payment_sdk/src/__tests__/util.test.ts

@@ -1,4 +1,4 @@
-import { formatCreditCardNumber, formatExpiry } from "../util/helpers";
+import { determineCardType, formatCreditCardNumber, formatExpiry } from "../util/helpers";
 import { isCardNumberValid, validateCardExpiry } from "../util/validator";
 
 describe("Credit Card number validation", () => {
@@ -29,3 +29,15 @@ describe("Expiry validation", () => {
     expect(isCardNumberValid("0204")).toBeFalsy();
   });
 });
+
+describe("determineCardType", () => {
+  it("returns 'visa' for a visa card number", () => {
+    expect(determineCardType("4111111111111111")).toBe("visa");
+  });
+  it("returns 'master' for a master card number", () => {
+    expect(determineCardType("5555555555554444")).toBe("master");
+  });
+  it("returns null for an unknown card number", () => {
+    expect(determineCardType("1234567890123456")).toBeNull();
+  });
+});

payment_sdk/src/components/CardInputGroup.tsx

@@ -1,11 +1,11 @@
-import { StyleSheet, Text, View } from "react-native";
-import React, { memo, useContext, useEffect, useRef } from "react";
+import { Image, StyleSheet, Text, View } from "react-native";
+import React, { memo, useContext, useEffect, useRef, useState } from "react";
 
 import Input from "./Input";
 import ScanCardButton from "./ScanCardButton";
 import { Actions, DispatchContext, StateContext } from "../state";
 import { isCardNumberValid, validateCardExpiry } from "../util/validator";
-import { formatCreditCardNumber, formatExpiry } from "../util/helpers";
+import { determineCardType, formatCreditCardNumber, formatExpiry } from "../util/helpers";
 
 type Props = {
   inputErrors: {
@@ -18,6 +18,7 @@ type Props = {
 
 const CardInputGroup = memo(({ inputErrors, resetError }: Props) => {
   const dispatch = useContext(DispatchContext);
+  const [cardType, setCardType] = useState<string | null>(null);
   const { cardCVV, cardNumber, cardExpiredDate } = useContext(StateContext);
 
   return (
@@ -40,11 +41,28 @@ const CardInputGroup = memo(({ inputErrors, resetError }: Props) => {
                   type: Actions.SET_CARD_NUMBER,
                   payload: derivedText,
                 });
+                // Determine card type and set it
+                const type = determineCardType(text);
+                setCardType(type);
               }
             }}
             inputStyle={styles.numberInputStyle}
             error={inputErrors.number}
           />
+          <View style={styles.cardContainer}>
+            <Image
+              source={require('../assets/images/visa.png')}
+              style={{
+                ...styles.cardImage,
+                opacity: cardType === 'visa' ? 1 : 0.4
+              }} />
+            <Image
+              source={require('../assets/images/master.png')}
+              style={{
+                ...styles.cardImage,
+                opacity: cardType === 'master' ? 1 : 0.4
+              }} />
+          </View>
         </View>
         <View style={styles.splitRow}>
           <View style={styles.itemRow}>
@@ -135,5 +153,18 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     alignItems: 'center',
     marginBottom: 8,
-  }
+  },
+  cardContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    position: 'absolute',
+    top: 15,
+    right: 0,
+    marginRight: 8,
+  },
+  cardImage: {
+    width: 26,
+    marginRight: 8,
+  },
 });

payment_sdk/src/util/helpers.ts

@@ -91,3 +91,23 @@ export const formatCurrency = ({
 
   return `${sign}${amount}`;
 };
+
+// Determine the card type based on the card number
+export const determineCardType = (cardNumber: string): string | null => {
+  const firstDigit = cardNumber[0];
+  const firstTwoDigits = parseInt(cardNumber.substring(0, 2));
+  const firstFourDigits = parseInt(cardNumber.substring(0, 4));
+
+  // Check if the card number is a visa card
+  if (firstDigit === '4') {
+    return 'visa';
+    // Check if the card number is a master card
+  } else if ((firstTwoDigits >= 51 && firstTwoDigits <= 55) || 
+             (firstFourDigits >= 2221 && firstFourDigits <= 2720)) {
+    return 'master';
+  }
+
+  // Return null if the card type is not on both visa and master
+  return null;
+}
+