@test-glide/payment-react-native 0.1.2 → 0.1.4

package/lib/typescript/src/components/BivoTextInput.d.ts

@@ -1,8 +1,8 @@
-import React from "react";
-import type { ViewStyle, TextStyle } from "react-native";
-import type { BivoCollect } from "../core/Collector";
+import React from 'react';
+import type { ViewStyle, TextStyle } from 'react-native';
+import type { BivoSecureStore } from '../core/BivoSecureStore';
 interface Props {
-    collector: BivoCollect;
+    bivoStore: BivoSecureStore;
     fieldName: string;
     placeholder?: string;
     onStateChange?: (state: any) => void;

package/lib/typescript/src/components/BivoTextInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BivoTextInput.d.ts","sourceRoot":"","sources":["../../../../src/components/BivoTextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAKrD,UAAU,KAAK;IACX,SAAS,EAAE,WAAW,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAmDzC,CAAC"}
+{"version":3,"file":"BivoTextInput.d.ts","sourceRoot":"","sources":["../../../../src/components/BivoTextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAI/D,UAAU,KAAK;IACb,SAAS,EAAE,eAAe,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA6DzC,CAAC"}

package/lib/typescript/src/core/{Collector.d.ts → BivoSecureStore.d.ts}

@@ -2,9 +2,9 @@ type FieldState = {
     value: string;
     error?: string;
 };
-export declare class BivoCollect {
+export declare class BivoSecureStore {
     vaultId: string;
-    environment: "sandbox" | "live";
+    environment: 'sandbox' | 'live';
     form: Record<string, string>;
     errors: Record<string, string>;
     fieldConfig: Record<string, {
@@ -12,19 +12,11 @@ export declare class BivoCollect {
         regex?: RegExp;
         errorMsg?: string;
     }>;
-    constructor(vaultId: string, environment: "sandbox" | "live");
+    constructor(vaultId: string, environment: 'sandbox' | 'live');
     setField(fieldName: string, value: string, onStateChange?: (state: FieldState) => void, required?: boolean, regex?: RegExp, errorMsg?: string): void;
     validateField(fieldName: string, value: string, required?: boolean, regex?: RegExp, errorMsg?: string): string;
     isSubmitDisabled(fieldNames: string[]): boolean;
-    submit(endpoint: string, token: string): Promise<{
-        success: boolean;
-        error: string;
-        data?: undefined;
-    } | {
-        success: boolean;
-        data: unknown;
-        error?: undefined;
-    }>;
+    submit(endpoint: string, token: string): Promise<any>;
 }
 export {};
-//# sourceMappingURL=Collector.d.ts.map
+//# sourceMappingURL=BivoSecureStore.d.ts.map

package/lib/typescript/src/core/BivoSecureStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BivoSecureStore.d.ts","sourceRoot":"","sources":["../../../../src/core/BivoSecureStore.ts"],"names":[],"mappings":"AAGA,KAAK,UAAU,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEpD,qBAAa,eAAe;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,SAAS,GAAG,MAAM,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAM;IAClC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAM;IACpC,WAAW,EAAE,MAAM,CACjB,MAAM,EACN;QAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAC1D,CAAM;gBAEK,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,SAAS,GAAG,MAAM;IAK5D,QAAQ,CACN,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,MAAM,EACb,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,EAC3C,QAAQ,GAAE,OAAe,EACzB,KAAK,CAAC,EAAE,MAAM,EACd,QAAQ,CAAC,EAAE,MAAM;IA2BnB,aAAa,CACX,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,MAAM,EACb,QAAQ,CAAC,EAAE,OAAO,EAClB,KAAK,CAAC,EAAE,MAAM,EACd,QAAQ,CAAC,EAAE,MAAM;IAqEnB,gBAAgB,CAAC,UAAU,EAAE,MAAM,EAAE;IAQ/B,MAAM,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAE,OAAO,CAAC,GAAG,CAAC;CA4B3D"}

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

@@ -1,4 +1,4 @@
-export { BivoCollect } from "./core/Collector";
+export { BivoSecureStore } from "./core/BivoSecureStore";
 export { BivoTextInput } from "./components/BivoTextInput";
 export { BivoCardInput } from "./components/BivoCardInput";
 export { BivoCVCInput } from "./components/BivoCVCInput";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEzD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@test-glide/payment-react-native",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "bivo payment",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/components/BivoCVCInput.tsx

@@ -1,11 +1,11 @@
-import React, { useState } from "react";
-import { View, TextInput, Text, StyleSheet, Image } from "react-native";
-import type { ViewStyle, TextStyle } from "react-native";
-import { BivoCollect } from "../core/Collector";
-import { Icons } from "../assets";
+import React, { useState } from 'react';
+import { View, TextInput, Text, StyleSheet, Image } from 'react-native';
+import type { ViewStyle, TextStyle } from 'react-native';
+import { BivoSecureStore } from '../core/BivoSecureStore';
+import { Icons } from '../assets';
 
 interface Props {
-  collector: BivoCollect;
+  bivoStore: BivoSecureStore;
   fieldName: string;
   placeholder?: string;
   onStateChange?: (state: any) => void;
@@ -17,7 +17,7 @@ interface Props {
 }
 
 export const BivoCVCInput: React.FC<Props> = ({
-  collector,
+  bivoStore,
   fieldName,
   placeholder,
   onStateChange,
@@ -27,18 +27,32 @@ export const BivoCVCInput: React.FC<Props> = ({
   containerStyle,
   textStyle,
 }) => {
-  const [value, setValue] = useState("");
+  const [value, setValue] = useState('');
 
   const handleChange = (text: string) => {
     setValue(text);
-    collector.setField(fieldName, text, onStateChange, required, regex, errorMsg);
+    bivoStore.setField(
+      fieldName,
+      text,
+      onStateChange,
+      required,
+      regex,
+      errorMsg
+    );
   };
 
   const handleBlur = () => {
-    collector.setField(fieldName, value, onStateChange, required, regex, errorMsg);
+    bivoStore.setField(
+      fieldName,
+      value,
+      onStateChange,
+      required,
+      regex,
+      errorMsg
+    );
   };
 
-  const error = collector.errors[fieldName];
+  const error = bivoStore.errors[fieldName];
 
   return (
     <View style={[styles.container, containerStyle]}>
@@ -49,26 +63,27 @@ export const BivoCVCInput: React.FC<Props> = ({
         placeholder={placeholder}
         secureTextEntry
         keyboardType="number-pad"
-        style={[styles.input, textStyle, error ? { borderColor: "red" } : {}]}
+        style={[styles.input, textStyle, error ? { borderColor: 'red' } : {}]}
       />
-      <View style={styles.errorContainer}>
-        {error ? (
-          <>
-            <Image source={Icons.alert} style={styles.errorIcon} />
-            <Text style={styles.error}>{error}</Text>
-          </>
-        ) : (
-          <Text style={[styles.error, { opacity: 0 }]}>placeholder</Text>
-        )}
-      </View>
+      {error && (
+        <View style={styles.errorContainer}>
+          <Image source={Icons.alert} style={styles.errorIcon} />
+          <Text style={styles.error}>{error}</Text>
+        </View>
+      )}
     </View>
   );
 };
 
 const styles = StyleSheet.create({
   container: { marginVertical: 8 },
-  input: { borderWidth: 1, borderColor: "#ccc", borderRadius: 6, padding: 10 },
-  errorContainer: { flexDirection: "row", alignItems: "center", marginTop: 4, minHeight: 12 },
+  input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 6, padding: 10 },
+  errorContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 4,
+    minHeight: 12,
+  },
   errorIcon: { width: 12, height: 12, marginRight: 4 },
-  error: { color: "red", fontSize: 12 },
-});
+  error: { color: 'red', fontSize: 12 },
+});

package/src/components/BivoCardInput.tsx

@@ -1,12 +1,12 @@
-import React, { useState } from "react";
-import { View, TextInput, Image, Text, StyleSheet} from "react-native";
-import type { ViewStyle, TextStyle } from "react-native";
-import { BivoCollect } from "../core/Collector";
-import { Icons } from "../assets";
-import { formatCardNumber } from "../utils/utils";
+import React, { useState } from 'react';
+import { View, TextInput, Image, Text, StyleSheet } from 'react-native';
+import type { ViewStyle, TextStyle } from 'react-native';
+import { BivoSecureStore } from '../core/BivoSecureStore';
+import { Icons } from '../assets';
+import { formatCardNumber } from '../utils/utils';
 
 interface Props {
-  collector: BivoCollect;
+  bivoStore: BivoSecureStore;
   fieldName: string;
   placeholder?: string;
   onStateChange?: (state: any) => void;
@@ -17,8 +17,8 @@ interface Props {
   textStyle?: TextStyle;
 }
 
-const cardIcons:any = {
-  visa:Icons.visa,
+const cardIcons: any = {
+  visa: Icons.visa,
   mastercard: Icons.mastercard,
   amex: Icons.amex,
   discover: Icons.discover,
@@ -26,7 +26,7 @@ const cardIcons:any = {
 };
 
 export const BivoCardInput: React.FC<Props> = ({
-  collector,
+  bivoStore,
   fieldName,
   placeholder,
   onStateChange,
@@ -36,27 +36,41 @@ export const BivoCardInput: React.FC<Props> = ({
   containerStyle,
   textStyle,
 }) => {
-  const [value, setValue] = useState("");
-  const [cardType, setCardType] = useState("unknown"); //cardType
+  const [value, setValue] = useState('');
+  const [cardType, setCardType] = useState('unknown'); //cardType
 
   const handleChange = (text: string) => {
     const formatted = formatCardNumber(text);
     setValue(formatted);
-    const cleaned = text.replace(/\D/g, "");
-    if (/^4/.test(cleaned)) setCardType("visa");
-    else if (/^5[1-5]/.test(cleaned)) setCardType("mastercard");
-    else if (/^3[47]/.test(cleaned)) setCardType("amex");
-    else if (/^6(?:011|5)/.test(cleaned)) setCardType("discover");
-    else setCardType("unknown");
+    const cleaned = text.replace(/\D/g, '');
+    if (/^4/.test(cleaned)) setCardType('visa');
+    else if (/^5[1-5]/.test(cleaned)) setCardType('mastercard');
+    else if (/^3[47]/.test(cleaned)) setCardType('amex');
+    else if (/^6(?:011|5)/.test(cleaned)) setCardType('discover');
+    else setCardType('unknown');
 
-    collector.setField(fieldName, text, onStateChange, required, regex, errorMsg);
+    bivoStore.setField(
+      fieldName,
+      text,
+      onStateChange,
+      required,
+      regex,
+      errorMsg
+    );
   };
 
   const handleBlur = () => {
-    collector.setField(fieldName, value, onStateChange, required, regex, errorMsg);
+    bivoStore.setField(
+      fieldName,
+      value,
+      onStateChange,
+      required,
+      regex,
+      errorMsg
+    );
   };
 
-  const error = collector.errors[fieldName];
+  const error = bivoStore.errors[fieldName];
 
   return (
     <View style={[styles.container, containerStyle]}>
@@ -68,29 +82,37 @@ export const BivoCardInput: React.FC<Props> = ({
           onBlur={handleBlur}
           placeholder={placeholder}
           keyboardType="number-pad"
-          style={[styles.input, textStyle, error ? { borderColor: "red" } : {}]}
+          style={[styles.input, textStyle, error ? { borderColor: 'red' } : {}]}
         />
       </View>
-      <View style={styles.errorContainer}>
-        {error ? (
-          <>
-            <Image source={Icons.alert} style={styles.errorIcon} />
-            <Text style={styles.error}>{error}</Text>
-          </>
-        ) : (
-          <Text style={[styles.error, { opacity: 0 }]}>placeholder</Text>
-        )}
-      </View>
+      {error && (
+        <View style={styles.errorContainer}>
+          <Image source={Icons.alert} style={styles.errorIcon} />
+          <Text style={styles.error}>{error}</Text>
+        </View>
+      )}
     </View>
   );
 };
 
 const styles = StyleSheet.create({
   container: { marginVertical: 8 },
-  row: { flexDirection: "row", alignItems: "center" },
-  input: { flex: 1, borderWidth: 1, borderColor: "#ccc", borderRadius: 6, padding: 10 },
-  icon: { width: 40, height: 25, resizeMode: "contain", marginRight: 8 },
-  errorContainer: { flexDirection: "row", alignItems: "center",marginLeft:40, marginTop: 4, minHeight: 12 },
+  row: { flexDirection: 'row', alignItems: 'center' },
+  input: {
+    flex: 1,
+    borderWidth: 1,
+    borderColor: '#ccc',
+    borderRadius: 6,
+    padding: 10,
+  },
+  icon: { width: 40, height: 25, resizeMode: 'contain', marginRight: 8 },
+  errorContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginLeft: 40,
+    marginTop: 4,
+    minHeight: 12,
+  },
   errorIcon: { width: 12, height: 12, marginRight: 4 },
-  error: { color: "red", fontSize: 12 },
-});
+  error: { color: 'red', fontSize: 12 },
+});

package/src/components/BivoTextInput.tsx

@@ -1,80 +1,94 @@
-import React, { useState } from "react";
-import { View, TextInput, Text, StyleSheet, Image } from "react-native";
-import type { ViewStyle, TextStyle } from "react-native";
-import type { BivoCollect } from "../core/Collector";
-import { Icons } from "../assets";
-import { formatExpiry } from "../utils/utils";
-
+import React, { useState } from 'react';
+import { View, TextInput, Text, StyleSheet, Image } from 'react-native';
+import type { ViewStyle, TextStyle } from 'react-native';
+import type { BivoSecureStore } from '../core/BivoSecureStore';
+import { Icons } from '../assets';
+import { formatExpiry } from '../utils/utils';
 
 interface Props {
-    collector: BivoCollect;
-    fieldName: string;
-    placeholder?: string;
-    onStateChange?: (state: any) => void;
-    required?: boolean;
-    regex?: RegExp;
-    errorMsg?: string;
-    containerStyle?: ViewStyle;
-    textStyle?: TextStyle;
+  bivoStore: BivoSecureStore;
+  fieldName: string;
+  placeholder?: string;
+  onStateChange?: (state: any) => void;
+  required?: boolean;
+  regex?: RegExp;
+  errorMsg?: string;
+  containerStyle?: ViewStyle;
+  textStyle?: TextStyle;
 }
 
 export const BivoTextInput: React.FC<Props> = ({
-    collector,
-    fieldName,
-    placeholder,
-    onStateChange,
-    required,
-    regex,
-    errorMsg,
-    containerStyle,
-    textStyle,
+  bivoStore,
+  fieldName,
+  placeholder,
+  onStateChange,
+  required,
+  regex,
+  errorMsg,
+  containerStyle,
+  textStyle,
 }) => {
-    const [value, setValue] = useState("");
+  const [value, setValue] = useState('');
 
-    const handleChange = (text: string) => {
-        let updatedValue;
-        if (fieldName === "exp") {
-            updatedValue = formatExpiry(text);
-        } else {
-            updatedValue = text;
-        }
-        setValue(updatedValue);
-        collector.setField(fieldName, updatedValue, onStateChange, required, regex, errorMsg);
-    };
+  const handleChange = (text: string) => {
+    let updatedValue;
+    if (fieldName === 'exp') {
+      updatedValue = formatExpiry(text);
+    } else {
+      updatedValue = text;
+    }
+    setValue(updatedValue);
+    bivoStore.setField(
+      fieldName,
+      updatedValue,
+      onStateChange,
+      required,
+      regex,
+      errorMsg
+    );
+  };
 
-    const handleBlur = () => {
-        collector.setField(fieldName, value, onStateChange, required, regex, errorMsg);
-    };
+  const handleBlur = () => {
+    bivoStore.setField(
+      fieldName,
+      value,
+      onStateChange,
+      required,
+      regex,
+      errorMsg
+    );
+  };
 
-    const error = collector.errors[fieldName];
+  const error = bivoStore.errors[fieldName];
 
-    return (
-        <View style={[styles.container, containerStyle]}>
-            <TextInput
-                value={value}
-                onChangeText={handleChange}
-                onBlur={handleBlur}
-                placeholder={placeholder}
-                style={[styles.input, textStyle, error ? { borderColor: "red" } : {}]}
-            />
-            <View style={styles.errorContainer}>
-                {error ? (
-                    <>
-                        <Image source={Icons.alert} style={styles.errorIcon} />
-                        <Text style={styles.error}>{error}</Text>
-                    </>
-                ) : (
-                    <Text style={[styles.error, { opacity: 0 }]}>placeholder</Text>
-                )}
-            </View>
+  return (
+    <View style={[styles.container, containerStyle]}>
+      <TextInput
+        value={value}
+        onChangeText={handleChange}
+        onBlur={handleBlur}
+        placeholder={placeholder}
+        style={[styles.input, textStyle, error ? { borderColor: 'red' } : {}]}
+      />
+      {error && (
+        <View style={styles.errorContainer}>
+          <Image source={Icons.alert} style={styles.errorIcon} />
+          <Text style={styles.error}>{error}</Text>
         </View>
-    );
+      )}
+    </View>
+  );
 };
 
 const styles = StyleSheet.create({
-    container: { marginVertical: 8 },
-    input: { borderWidth: 1, borderColor: "#ccc", borderRadius: 6, padding: 10 },
-    errorContainer: { flexDirection: "row", alignItems: "center", marginTop: 4, minHeight: 12 },
-    errorIcon: { width: 12, height: 12, marginRight: 4 },
-    error: { color: "red", fontSize: 12 },
-});
+  container: { marginVertical: 8 },
+  input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 6, padding: 10 },
+  errorContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 4,
+    minHeight: 12,
+  },
+  errorIcon: { width: 12, height: 12, marginRight: 4 },
+  error: { color: 'red', fontSize: 12 },
+});

package/src/core/BivoSecureStore.ts

@@ -0,0 +1,164 @@
+import { fetchData } from '../utils/fetch';
+import { formatCardYear, formatString } from '../utils/utils';
+
+type FieldState = { value: string; error?: string };
+
+export class BivoSecureStore {
+  vaultId: string;
+  environment: 'sandbox' | 'live';
+  form: Record<string, string> = {};
+  errors: Record<string, string> = {};
+  fieldConfig: Record<
+    string,
+    { required?: boolean; regex?: RegExp; errorMsg?: string }
+  > = {};
+
+  constructor(vaultId: string, environment: 'sandbox' | 'live') {
+    this.vaultId = vaultId;
+    this.environment = environment;
+  }
+
+  setField(
+    fieldName: string,
+    value: string,
+    onStateChange?: (state: FieldState) => void,
+    required: boolean = false,
+    regex?: RegExp,
+    errorMsg?: string
+  ) {
+    this.form[fieldName] = value;
+    // convert string regex to RegExp
+    let parsedRegex: RegExp | undefined = undefined;
+
+    if (typeof regex === 'string') {
+      try {
+        parsedRegex = new RegExp(regex);
+      } catch (e) {
+        console.error('Invalid regex:', regex, e);
+      }
+    } else {
+      parsedRegex = regex;
+    }
+    this.fieldConfig[fieldName] = { required, regex: parsedRegex, errorMsg };
+    const error = this.validateField(
+      fieldName,
+      value,
+      required,
+      parsedRegex,
+      errorMsg
+    );
+    this.errors[fieldName] = error || '';
+    onStateChange?.({ value, error });
+  }
+
+  validateField(
+    fieldName: string,
+    value: string,
+    required?: boolean,
+    regex?: RegExp,
+    errorMsg?: string
+  ) {
+    const trimmedValue = value?.trim();
+
+    // Required check
+    if (!trimmedValue && required) return 'Required';
+
+    // If custom regex is provided → use it first
+    if (regex && trimmedValue) {
+      if (!regex.test(trimmedValue)) {
+        return errorMsg || 'Invalid value';
+      }
+      return '';
+    }
+
+    // Default validations
+    switch (fieldName) {
+      case 'card': {
+        const digits = trimmedValue.replace(/\D/g, '');
+        if (digits.length < 12) return 'Invalid card number';
+        break;
+      }
+
+      case 'cvv': {
+        if (!/^\d{3,4}$/.test(trimmedValue)) {
+          return 'Invalid CVV';
+        }
+        break;
+      }
+
+      case 'exp': {
+        // Format check MM/YY
+        if (!/^\d{2}\/\d{2}$/.test(trimmedValue)) {
+          return 'Invalid expiry';
+        }
+
+        const [monthStr, yearStr] = trimmedValue.split('/');
+        if (!monthStr || !yearStr) {
+          return 'Invalid expiry';
+        }
+        const month = parseInt(monthStr, 10);
+        const year = parseInt(yearStr, 10);
+
+        if (month < 1 || month > 12) {
+          return 'Invalid month';
+        }
+
+        // Convert YY → YYYY (assume 2000-2099)
+        const fullYear = 2000 + year;
+
+        const now = new Date();
+        const currentMonth = now.getMonth() + 1;
+        const currentYear = now.getFullYear();
+
+        // Expiry check
+        if (
+          fullYear < currentYear ||
+          (fullYear === currentYear && month < currentMonth)
+        ) {
+          return 'Card expired';
+        }
+
+        break;
+      }
+    }
+
+    return '';
+  }
+
+  isSubmitDisabled(fieldNames: string[]) {
+    return fieldNames.some((fieldName) => {
+      const value = this.form[fieldName]?.trim() ?? '';
+      const error = this.errors[fieldName];
+      return !value || !!error;
+    });
+  }
+
+  async submit(endpoint: string, token: string):Promise<any> {
+    // console.log("Submitting form:", this.form, this.errors);
+    const expiry = this.form.expiryDate?.split('/') || [];
+
+    // Replace fetchData with your API call
+    const response = await fetchData(endpoint, {
+      method: 'POST',
+      body: {
+        token,
+        pan: formatString(this.form.cardNumber || ''),
+        expiry_month: Number(expiry[0] || 0) || null,
+        expiry_year: formatCardYear(expiry[1] || '') || null,
+        cvv: this.form.cvc ? formatString(this.form.cvc) : null,
+        address: {
+          postal_code: this.form.zipCode
+            ? formatString(this.form.zipCode)
+            : null,
+        },
+      },
+    });
+
+    if (response.error) {
+      return { success: false, error: response.error, data:response };
+    } else {
+      return { success: true, data: response.data, info:response };
+    }
+    // return response.json();
+  }
+}

package/src/index.ts

@@ -1,4 +1,4 @@
-export { BivoCollect } from "./core/Collector";
+export { BivoSecureStore } from "./core/BivoSecureStore";
 
 export { BivoTextInput } from "./components/BivoTextInput";
 export { BivoCardInput } from "./components/BivoCardInput";