CardInput stores the brand detected by the internal regEx

packages/lib/src/components/Card/components/CardInput/CardInput.tsx

@@ -24,7 +24,7 @@ import useImage from '../../../../core/Context/useImage';
 import { getArrayDifferences } from '../../../../utils/arrayUtils';
 import FormInstruction from '../../../internal/FormInstruction';
 import { AddressData } from '../../../../types/global-types';
-import { CbObjOnFocus } from '../../../internal/SecuredFields/lib/types';
+import { CbObjOnBrand, CbObjOnFocus } from '../../../internal/SecuredFields/lib/types';
 import { FieldErrorAnalyticsObject } from '../../../../core/Analytics/types';
 import { PREFIX } from '../../../internal/Icon/constants';
 import useSRPanelForCardInputErrors from './useSRPanelForCardInputErrors';
@@ -92,6 +92,15 @@ const CardInput = (props: CardInputProps) => {
     // or else the name of an internal, Adyen-web, element (like 'holderName')
     const [iOSFocusedField, setIOSFocusedField] = useState(null);
 
+    /**
+     * This stores the brand as detected by the internal regEx.
+     * It eventually gets overwritten by the brand as detected by the /binLookup, but will revert back to the regEx detection
+     * if the PAN length drops below the /binLookup digit threshold.
+     * Default value, 'card', indicates no brand detected
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [internallyDetectedBrand, setInternallyDetectedBrand] = useState('card');
+
     /**
      * LOCAL VARS
      */
@@ -134,6 +143,11 @@ const CardInput = (props: CardInputProps) => {
         props.onBlur({ fieldType: who, event: e });
     };
 
+    const onBrand = useCallback((obj: CbObjOnBrand) => {
+        setInternallyDetectedBrand(obj.brand);
+        props.onBrand(obj);
+    }, []);
+
     // Make SecuredFields aware of the focus & blur handlers
     const handleFocus = getFocusHandler(setFocusedElement, onFieldFocusAnalytics, onFieldBlurAnalytics);
 
@@ -399,7 +413,7 @@ const CardInput = (props: CardInputProps) => {
                 koreanAuthenticationRequired={props.configuration.koreanAuthenticationRequired}
                 hasKoreanFields={!!(props.configuration.koreanAuthenticationRequired && props.countryCode === 'kr')}
                 onChange={handleSecuredFieldsChange}
-                onBrand={props.onBrand}
+                onBrand={onBrand}
                 onFocus={handleFocus}
                 type={props.brand}
                 disableIOSArrowKeys={props.disableIOSArrowKeys ? handleTouchstartIOS : null}

packages/lib/src/components/Card/components/CardInput/types.ts

@@ -2,7 +2,17 @@ import Language from '../../../../language/Language';
 import { BinLookupResponse, BrandConfiguration, CardBrandsConfiguration, CardBackendConfiguration, DualBrandSelectElement } from '../../types';
 import { InstallmentOptions } from './components/types';
 import { ValidationResult } from '../../../internal/PersonalDetails/types';
-import { CVCPolicyType, DatePolicyType } from '../../../internal/SecuredFields/lib/types';
+import {
+    CbObjOnAllValid,
+    CbObjOnAutoComplete,
+    CbObjOnBinValue,
+    CbObjOnBrand,
+    CbObjOnConfigSuccess,
+    CbObjOnFieldValid,
+    CbObjOnLoad,
+    CVCPolicyType,
+    DatePolicyType
+} from '../../../internal/SecuredFields/lib/types';
 import Specifications from '../../../internal/Address/Specifications';
 import { AddressSchema } from '../../../internal/Address/types';
 import { CbObjOnError, StylesObject } from '../../../internal/SecuredFields/lib/types';
@@ -104,17 +114,17 @@ export interface CardInputProps {
     };
     onAdditionalSFConfig?: () => {};
     onAdditionalSFRemoved?: () => {};
-    onAllValid?: () => {};
-    onAutoComplete?: () => {};
-    onBinValue?: () => {};
+    onAllValid?: (o: CbObjOnAllValid) => {};
+    onAutoComplete?: (o: CbObjOnAutoComplete) => {};
+    onBinValue?: (o: CbObjOnBinValue) => {};
     onBlur?: (e) => {};
-    onBrand?: () => {};
-    onConfigSuccess?: () => {};
+    onBrand?: (o: CbObjOnBrand) => {};
+    onConfigSuccess?: (O: CbObjOnConfigSuccess) => {};
     onChange?: (state) => {};
     onError?: () => {};
-    onFieldValid?: () => {};
+    onFieldValid?: (o: CbObjOnFieldValid) => {};
     onFocus?: (e) => {};
-    onLoad?: () => {};
+    onLoad?: (o: CbObjOnLoad) => {};
     handleKeyPress?: (obj: KeyboardEvent) => void;
     onAddressLookup?: OnAddressLookupType;
     onAddressSelected?: OnAddressSelectedType;