@test-glide/payment-react-native 0.1.0

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

@@ -0,0 +1,17 @@
+import React from "react";
+import type { ViewStyle, TextStyle } from "react-native";
+import type { BivoCollect } from "../core/Collector";
+interface Props {
+    collector: BivoCollect;
+    fieldName: string;
+    placeholder?: string;
+    onStateChange?: (state: any) => void;
+    required?: boolean;
+    regex?: RegExp;
+    errorMsg?: string;
+    containerStyle?: ViewStyle;
+    textStyle?: TextStyle;
+}
+export declare const BivoTextInput: React.FC<Props>;
+export {};
+//# sourceMappingURL=BivoTextInput.d.ts.map

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

@@ -0,0 +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"}

package/lib/typescript/src/core/Collector.d.ts

@@ -0,0 +1,22 @@
+type FieldState = {
+    value: string;
+    error?: string;
+};
+export declare class BivoCollect {
+    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");
+    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<any>;
+}
+export {};
+//# sourceMappingURL=Collector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Collector.d.ts","sourceRoot":"","sources":["../../../../src/core/Collector.ts"],"names":[],"mappings":"AAGA,KAAK,UAAU,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEpD,qBAAa,WAAW;IACtB,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,CAAC,MAAM,EAAE;QAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAM;gBAEhF,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,SAAS,GAAG,MAAM;IAK5D,QAAQ,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,EAAE,QAAQ,GAAE,OAAe,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM;IAUpJ,aAAa,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM;IAoErG,gBAAgB,CAAC,UAAU,EAAE,MAAM,EAAE;IAQ/B,MAAM,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;CAoB7C"}

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

@@ -0,0 +1,5 @@
+export { BivoCollect } from "./core/Collector";
+export { BivoTextInput } from "./components/BivoTextInput";
+export { BivoCardInput } from "./components/BivoCardInput";
+export { BivoCVCInput } from "./components/BivoCVCInput";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,6 @@
+export declare const formatCardNumber: (number: string) => string;
+export declare const formatExpiry: (value: string) => string;
+export declare const formatCVV: (value: string, cardType: string) => string;
+export declare const formatCardYear: (year: string) => number;
+export declare const formatString: (value: string) => string;
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/utils/utils.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,gBAAgB,GAAI,QAAQ,MAAM,WAQ9C,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,WAIzC,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,OAAO,MAAM,EAAE,UAAU,MAAM,WAGxD,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,MAAM,MAAM,WAG1C,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,WAA6B,CAAC"}

package/package.json

@@ -0,0 +1,154 @@
+{
+  "name": "@test-glide/payment-react-native",
+  "version": "0.1.0",
+  "description": "bivo payment",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "example": "yarn workspace @bivo/payment-react-native-example",
+    "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "test": "jest",
+    "release": "release-it --only-version",
+    "web": "vite",
+    "build:web": "vite build"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vikrant-glide/bivo-payment-react-native.git"
+  },
+  "author": "Bivo <maulik@theglidetech.com> (https://github.com/vikrant-glide)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/vikrant-glide/bivo-payment-react-native/issues"
+  },
+  "homepage": "https://github.com/vikrant-glide/bivo-payment-react-native#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^20.5.0",
+    "@eslint/compat": "^2.0.3",
+    "@eslint/eslintrc": "^3.3.5",
+    "@eslint/js": "^10.0.1",
+    "@jest/globals": "^30.0.0",
+    "@react-native/babel-preset": "0.85.0",
+    "@react-native/eslint-config": "0.85.0",
+    "@react-native/jest-preset": "0.85.0",
+    "@release-it/conventional-changelog": "^10.0.6",
+    "@types/react": "^19.2.0",
+    "commitlint": "^20.5.0",
+    "del-cli": "^7.0.0",
+    "eslint": "^9.39.4",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-ft-flow": "^3.0.11",
+    "eslint-plugin-prettier": "^5.5.5",
+    "jest": "^30.3.0",
+    "lefthook": "^2.1.4",
+    "prettier": "^3.8.1",
+    "react": "19.2.3",
+    "react-native": "0.85.0",
+    "react-native-builder-bob": "^0.41.0",
+    "react-native-web": "~0.21.1",
+    "release-it": "^19.2.4",
+    "turbo": "^2.8.21",
+    "typescript": "^6.0.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "jest": {
+    "preset": "@react-native/jest-preset",
+    "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": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "create-react-native-library": {
+    "type": "library",
+    "languages": "typescript",
+    "tools": [
+      "eslint",
+      "jest",
+      "lefthook",
+      "release-it",
+      "vite"
+    ],
+    "version": "0.61.0"
+  }
+}

package/src/assets/index.ts

@@ -0,0 +1,11 @@
+export const Icons = {
+  visa: require("../assets/icons/visa.png"),
+  mastercard: require("../assets/icons/mastercard.png"),
+  amex: require("../assets/icons/amex.png"),
+  discover: require("../assets/icons/discover.png"),
+  card: require("../assets/icons/card.png"),
+
+  lock: require("../assets/icons/Lock.png"),
+  info: require("../assets/icons/InfoCircle.png"),
+  alert: require("../assets/icons/AlertCircle.png"),
+};

package/src/components/BivoCVCInput.tsx

@@ -0,0 +1,74 @@
+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";
+
+interface Props {
+  collector: BivoCollect;
+  fieldName: string;
+  placeholder?: string;
+  onStateChange?: (state: any) => void;
+  required?: boolean;
+  regex?: RegExp;
+  errorMsg?: string;
+  containerStyle?: ViewStyle;
+  textStyle?: TextStyle;
+}
+
+export const BivoCVCInput: React.FC<Props> = ({
+  collector,
+  fieldName,
+  placeholder,
+  onStateChange,
+  required,
+  regex,
+  errorMsg,
+  containerStyle,
+  textStyle,
+}) => {
+  const [value, setValue] = useState("");
+
+  const handleChange = (text: string) => {
+    setValue(text);
+    collector.setField(fieldName, text, onStateChange, required, regex, errorMsg);
+  };
+
+  const handleBlur = () => {
+    collector.setField(fieldName, value, onStateChange, required, regex, errorMsg);
+  };
+
+  const error = collector.errors[fieldName];
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      <TextInput
+        value={value}
+        onChangeText={handleChange}
+        onBlur={handleBlur}
+        placeholder={placeholder}
+        secureTextEntry
+        keyboardType="number-pad"
+        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>
+    </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 },
+});

package/src/components/BivoCardInput.tsx

@@ -0,0 +1,96 @@
+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";
+
+interface Props {
+  collector: BivoCollect;
+  fieldName: string;
+  placeholder?: string;
+  onStateChange?: (state: any) => void;
+  required?: boolean;
+  regex?: RegExp;
+  errorMsg?: string;
+  containerStyle?: ViewStyle;
+  textStyle?: TextStyle;
+}
+
+const cardIcons:any = {
+  visa:Icons.visa,
+  mastercard: Icons.mastercard,
+  amex: Icons.amex,
+  discover: Icons.discover,
+  unknown: Icons.card,
+};
+
+export const BivoCardInput: React.FC<Props> = ({
+  collector,
+  fieldName,
+  placeholder,
+  onStateChange,
+  required,
+  regex,
+  errorMsg,
+  containerStyle,
+  textStyle,
+}) => {
+  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");
+
+    collector.setField(fieldName, text, onStateChange, required, regex, errorMsg);
+  };
+
+  const handleBlur = () => {
+    collector.setField(fieldName, value, onStateChange, required, regex, errorMsg);
+  };
+
+  const error = collector.errors[fieldName];
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      <View style={styles.row}>
+        <Image source={cardIcons[cardType]} style={styles.icon} />
+        <TextInput
+          value={value}
+          onChangeText={handleChange}
+          onBlur={handleBlur}
+          placeholder={placeholder}
+          keyboardType="number-pad"
+          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>
+    </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 },
+  errorIcon: { width: 12, height: 12, marginRight: 4 },
+  error: { color: "red", fontSize: 12 },
+});

package/src/components/BivoTextInput.tsx

@@ -0,0 +1,80 @@
+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";
+
+
+interface Props {
+    collector: BivoCollect;
+    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,
+}) => {
+    const [value, setValue] = useState("");
+
+    const handleChange = (text: string) => {
+        let updatedValue;
+        if (fieldName === "expiryDate") {
+            updatedValue = formatExpiry(text);
+        } else {
+            updatedValue = text;
+        }
+        setValue(updatedValue);
+        collector.setField(fieldName, updatedValue, onStateChange, required, regex, errorMsg);
+    };
+
+    const handleBlur = () => {
+        collector.setField(fieldName, value, onStateChange, required, regex, errorMsg);
+    };
+
+    const error = collector.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>
+        </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 },
+});

package/src/core/Collector.ts

@@ -0,0 +1,124 @@
+import { formatCardYear, formatString } from "../utils/utils";
+
+
+type FieldState = { value: string; error?: string };
+
+export class BivoCollect {
+  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;
+    this.fieldConfig[fieldName] = { required, regex, errorMsg };
+    const error = this.validateField(fieldName, value, required, regex, 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 "cardNumber": {
+        const digits = trimmedValue.replace(/\D/g, "");
+        if (digits.length < 12) return "Invalid card number";
+        break;
+      }
+
+      case "cvc": {
+        if (!/^\d{3,4}$/.test(trimmedValue)) {
+          return "Invalid CVC";
+        }
+        break;
+      }
+
+      case "expiryDate": {
+        // 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) {
+    console.log("Submitting form:", this.form, this.errors);
+    const expiry = this.form.expiryDate?.split("/") || [];
+    const payload = {
+      token,
+      pan: formatString(this.form.cardNumber || ""),
+      expiry_month: Number(expiry[0] || 0),
+      expiry_year: formatCardYear(expiry[1] || ""),
+      cvv: this.form.cvc ? formatString(this.form.cvc) : null,
+      name: this.form.cardHolderName || null,
+    };
+
+    // Replace fetchData with your API call
+    const response = await fetch(endpoint, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(payload),
+    });
+    return response.json();
+  }
+}

package/src/index.ts

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

package/src/utils/utils.ts

@@ -0,0 +1,28 @@
+// sdk/utils.ts
+export const formatCardNumber = (number: string) => {
+  const cleaned = number.replace(/\D/g, "");
+  if (/^3[47]/.test(cleaned)) {
+    return cleaned.replace(/(\d{4})(\d{0,6})(\d{0,5})/, (_, a, b, c) =>
+      [a, b, c].filter(Boolean).join(" ")
+    ).trim();
+  }
+  return cleaned.replace(/(\d{4})/g, "$1 ").trim();
+};
+
+export const formatExpiry = (value: string) => {
+  const cleaned = value.replace(/\D/g, "").slice(0, 4);
+  if (cleaned.length >= 3) return `${cleaned.slice(0, 2)}/${cleaned.slice(2)}`;
+  return cleaned;
+};
+
+export const formatCVV = (value: string, cardType: string) => {
+  const cleaned = value.replace(/\D/g, "");
+  return cardType === "amex" ? cleaned.slice(0, 4) : cleaned.slice(0, 3);
+};
+
+export const formatCardYear = (year: string) => {
+  if (year.length === 2) return Number("20" + year);
+  return Number(year);
+};
+
+export const formatString = (value: string) => value.replace(/\s/g, "");