fairsure-checkout-sdk 1.0.0

package/src/components/CardPayment.tsx

@@ -0,0 +1,386 @@
+import { Ionicons } from "@expo/vector-icons";
+import { StyleSheet, Text, TextInput, View } from "react-native";
+import OTPInput from "./OTPInput";
+
+type CardPaymentProps = {
+  cardNumber: string;
+  setCardNumber: (value: string) => void;
+  expiryDate: string;
+  setExpiryDate: (value: string) => void;
+  cvv: string;
+  message?: string;
+  setCvv: (value: string) => void;
+  cardcontinue: boolean;
+  showOtp: boolean;
+  handleOTPComplete: (otp: string) => void;
+  handleOTPChange: (otp: string) => void;
+  handlePinChange: (pin: string) => void;
+  formatCardNumber: (value: string) => string;
+  formatExpiry: (value: string) => string;
+};
+
+export default function CardPayment({
+  cardNumber,
+  message,
+  setCardNumber,
+  expiryDate,
+  setExpiryDate,
+  cvv,
+  setCvv,
+  cardcontinue,
+  showOtp,
+  handleOTPComplete,
+  handleOTPChange,
+  handlePinChange,
+  formatCardNumber,
+  formatExpiry,
+}: CardPaymentProps) {
+  if (cardcontinue) {
+    return (
+      <View>
+        {showOtp ? (
+          <View style={styles.otpContainer}>
+            {message && <Text style={styles.inputLabel}>{message}</Text>}
+            <Text style={styles.inputLabel}>Enter OTP</Text>
+            <OTPInput
+              length={6}
+              onComplete={handleOTPComplete}
+              onChangeOTP={handleOTPChange}
+              autoFocus={true}
+            />
+          </View>
+        ) : (
+          <View style={styles.otpContainer}>
+            <Text style={styles.inputLabel}>Enter PIN</Text>
+            <OTPInput
+              length={4}
+              onComplete={handleOTPComplete}
+              onChangeOTP={handlePinChange}
+              autoFocus={true}
+              secureTextEntry={true}
+            />
+          </View>
+        )}
+      </View>
+    );
+  }
+
+  return (
+    <View>
+      <View style={styles.inputGroup}>
+        <Text style={styles.inputLabel}>Card Number</Text>
+        <View style={styles.inputWrapper}>
+          <TextInput
+            value={cardNumber}
+            onChangeText={(text) => setCardNumber(formatCardNumber(text))}
+            placeholder="0000 0000 0000 0000"
+            maxLength={19}
+            keyboardType="number-pad"
+            style={styles.input}
+          />
+          <Ionicons
+            name="card-outline"
+            size={20}
+            color="#9CA3AF"
+            style={styles.inputIcon}
+          />
+        </View>
+      </View>
+
+      <View style={styles.row}>
+        <View style={styles.flex1}>
+          <Text style={styles.inputLabel}>Expiry Date</Text>
+          <TextInput
+            value={expiryDate}
+            onChangeText={(text) => setExpiryDate(formatExpiry(text))}
+            placeholder="MM/YY"
+            maxLength={5}
+            keyboardType="number-pad"
+            style={styles.input}
+          />
+        </View>
+        <View style={styles.flex1}>
+          <Text style={styles.inputLabel}>CVV</Text>
+          <TextInput
+            value={cvv}
+            onChangeText={(text) => setCvv(text.replace(/\D/g, "").slice(0, 3))}
+            placeholder="123"
+            maxLength={3}
+            keyboardType="number-pad"
+            secureTextEntry
+            style={styles.input}
+          />
+        </View>
+      </View>
+
+      <View style={styles.secureBox}>
+        <Ionicons name="lock-closed" size={16} color="#6B7280" />
+        <Text style={styles.secureText}>
+          Your payment is secured with 256-bit SSL encryption
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: "rgba(0,0,0,0.5)",
+    justifyContent: "center",
+  },
+  modalContainer: {
+    position: "relative",
+    width: "90%",
+    alignSelf: "center",
+    borderRadius: 20,
+    height: "80%",
+    backgroundColor: "white",
+  },
+
+  otpContainer: {
+    width: "100%",
+    marginHorizontal: "auto",
+    marginTop: 20,
+    marginBottom: 40,
+  },
+  header: {
+    backgroundColor: "#6B21A8",
+    padding: 16,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+  },
+  pinWrapper: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  eyeButton: {
+    paddingHorizontal: 10,
+  },
+  eyeText: {
+    color: "#007AFF",
+  },
+
+  headerTop: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "flex-start",
+    marginBottom: 16,
+  },
+  headerTitle: { color: "white", fontSize: 24, fontWeight: "bold" },
+  headerSubtitle: { color: "#E0E7FF", fontSize: 14, marginTop: 4 },
+  closeBtn: {
+    backgroundColor: "rgba(255,255,255,0.2)",
+    borderRadius: 999,
+    padding: 8,
+  },
+  amountBox: {
+    backgroundColor: "rgba(255,255,255,0.2)",
+    borderRadius: 12,
+    padding: 8,
+  },
+  amountLabel: { color: "#E0E7FF", fontSize: 12, marginBottom: 4 },
+  amountText: { color: "white", fontSize: 20, fontWeight: "bold" },
+  scrollContainer: { flex: 1, marginBottom: 16 },
+  body: {
+    padding: 24,
+    backgroundColor: "white",
+    borderBottomLeftRadius: 20,
+    borderBottomRightRadius: 20,
+  },
+  paymentMethodsContainer: {
+    flexDirection: "row",
+    marginBottom: 24,
+    backgroundColor: "#F3F4F6",
+    padding: 4,
+    borderRadius: 12,
+  },
+  paymentMethod: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 12,
+    borderRadius: 12,
+    marginHorizontal: 4,
+  },
+  paymentMethodSelected: { backgroundColor: "white" },
+  paymentMethodText: { fontSize: 14, color: "#4B5563", marginLeft: 8 },
+  paymentMethodTextSelected: { color: "#4F46E5", fontWeight: "600" },
+  inputGroup: { marginBottom: 16 },
+  inputLabel: {
+    fontSize: 14,
+    fontWeight: "500",
+    color: "#374151",
+    marginBottom: 6,
+  },
+  inputWrapper: { position: "relative" },
+  input: {
+    width: "100%",
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderWidth: 1,
+    borderColor: "#D1D5DB",
+    borderRadius: 12,
+    backgroundColor: "white",
+  },
+  inputIcon: { position: "absolute", right: 16, top: 14 },
+  row: { flexDirection: "row", gap: 16, marginBottom: 12 },
+  flex1: { flex: 1 },
+  secureBox: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "#F9FAFB",
+    padding: 12,
+    borderRadius: 12,
+    gap: 8,
+    marginBottom: 16,
+  },
+  secureText: { fontSize: 12, color: "#4B5563", flex: 1 },
+  transferBox: {
+    backgroundColor: "#EFF6FF",
+    borderWidth: 1,
+    borderColor: "#BFDBFE",
+    borderRadius: 12,
+    padding: 8,
+    marginBottom: 8,
+  },
+  transferText: {
+    fontSize: 14,
+    color: "#1E3A8A",
+    fontWeight: "500",
+    marginBottom: 12,
+  },
+  transferDetail: {
+    backgroundColor: "white",
+    borderRadius: 12,
+    padding: 8,
+    marginBottom: 12,
+  },
+  transferLabel: { fontSize: 10, color: "#4B5563", marginBottom: 4 },
+  transferValue: { fontWeight: "600", color: "#111827" },
+  accountNumber: {
+    fontWeight: "600",
+    color: "#111827",
+    fontSize: 16,
+    letterSpacing: 2,
+    flex: 1,
+  },
+  transferNote: {
+    backgroundColor: "#FEF3C7",
+    borderWidth: 1,
+    borderColor: "#FDE68A",
+    borderRadius: 12,
+    padding: 8,
+  },
+  transferNoteText: { fontSize: 14, color: "#78350F" },
+  dropdown: {
+    width: "100%",
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderWidth: 1,
+    borderColor: "#D1D5DB",
+    borderRadius: 12,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  dropdownText: { color: "#111827" },
+  dropdownPlaceholder: { color: "#9CA3AF" },
+  dropdownList: {
+    marginTop: 8,
+    backgroundColor: "white",
+    borderWidth: 1,
+    borderColor: "#E5E7EB",
+    borderRadius: 12,
+    overflow: "hidden",
+    maxHeight: 240,
+  },
+  dropdownItem: {
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: "#F3F4F6",
+  },
+  dropdownItemText: { color: "#111827" },
+
+  ussdContainer: {
+    backgroundColor: "#E0E7FF", // bg-indigo-50
+    borderWidth: 1,
+    borderColor: "#C7D2FE", // border-indigo-200
+    borderRadius: 12, // rounded-xl
+    padding: 16, // p-4
+    marginBottom: 16,
+  },
+  ussdTitle: {
+    fontSize: 14, // text-sm
+    color: "#1E3A8A", // text-indigo-900
+    fontWeight: "500", // font-medium
+    marginBottom: 12, // mb-3
+  },
+  ussdCodeContainer: {
+    backgroundColor: "white", // bg-white
+    borderRadius: 12, // rounded-xl
+    padding: 16, // p-4
+    marginBottom: 12, // mb-3
+  },
+  ussdCodeRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  ussdCodeText: {
+    fontFamily: "monospace", // font-mono
+    fontSize: 16, // text-base
+    fontWeight: "700", // font-bold
+    color: "#111827", // text-gray-900
+    flex: 1,
+  },
+  ussdCopyBtn: {
+    padding: 8, // p-2
+  },
+  ussdStepsLabel: {
+    fontSize: 14, // text-sm
+    color: "#1E3A8A", // text-indigo-900
+    fontWeight: "600", // font-semibold
+    marginBottom: 8, // mb-2
+  },
+  ussdStepsText: {
+    fontSize: 14, // text-sm
+    color: "#1E40AF", // text-indigo-800
+  },
+  payButton: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "center",
+    gap: 8,
+    width: "100%",
+    paddingVertical: 16, // py-4
+    borderRadius: 12, // rounded-xl
+    marginTop: 8, // mt-2
+    alignItems: "center",
+  },
+  payButtonActive: {
+    backgroundColor: "#4F46E5", // bg-indigo-600
+  },
+  payButtonDisabled: {
+    backgroundColor: "#D1D5DB", // bg-gray-300
+  },
+  payButtonText: {
+    color: "white",
+    fontWeight: "600",
+    fontSize: 18, // text-lg
+    textAlign: "center",
+  },
+  footer: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    marginTop: 8, // mt-2
+    gap: 8, // supported in RN 0.71+, acts like Tailwind gap-2
+  },
+  footerText: {
+    fontSize: 14, // text-sm
+    color: "#6B7280", // text-gray-500
+  },
+});

package/src/components/OTPInput.tsx

@@ -0,0 +1,204 @@
+import React, { useEffect, useState } from "react";
+import {
+  NativeSyntheticEvent,
+  StyleSheet,
+  TextInput,
+  TextInputKeyPressEventData,
+  View,
+} from "react-native";
+
+type OTPInputProps = {
+  length?: number;
+  onComplete?: (otp: string) => void;
+  onChangeOTP?: (otp: string) => void;
+  autoFocus?: boolean;
+  secureTextEntry?: boolean;
+  disabled?: boolean;
+  inputStyle?: object;
+  containerStyle?: object;
+  focusedInputStyle?: object;
+};
+
+export type OTPInputRef = {
+  clear: () => void;
+};
+
+export default function OTPInput({
+  length = 6,
+  onComplete,
+  onChangeOTP,
+  autoFocus = true,
+  secureTextEntry = false,
+  disabled = false,
+  inputStyle,
+  containerStyle,
+  focusedInputStyle,
+}: OTPInputProps) {
+  const [otp, setOtp] = useState<string[]>(Array(length).fill(""));
+  const [focusedIndex, setFocusedIndex] = useState<number | null>(
+    autoFocus ? 0 : null,
+  );
+  const ref = React.useRef<{ clear: () => void } | null>(null);
+  const inputRefs = React.useRef<Array<TextInput | null>>([]);
+
+  // Focus first input on mount if autoFocus is true
+  useEffect(() => {
+    if (autoFocus && inputRefs.current[0]) {
+      inputRefs.current[0].focus();
+    }
+  }, [autoFocus]);
+
+  // Notify parent of OTP changes
+  useEffect(() => {
+    const otpString = otp.join("");
+    onChangeOTP?.(otpString);
+
+    // Call onComplete when all digits are filled
+    if (otpString.length === length && !otpString.includes("")) {
+      onComplete?.(otpString);
+    }
+  }, [otp, length, onComplete, onChangeOTP]);
+
+  const handleChangeText = (text: string, index: number) => {
+    // Only allow numbers
+    const sanitizedText = text.replace(/[^0-9]/g, "");
+
+    if (sanitizedText === "") {
+      // Handle delete
+      const newOtp = [...otp];
+      newOtp[index] = "";
+      setOtp(newOtp);
+      return;
+    }
+
+    // Handle paste (multiple characters)
+    if (sanitizedText.length > 1) {
+      const pastedDigits = sanitizedText.slice(0, length).split("");
+      const newOtp = [...otp];
+
+      pastedDigits.forEach((digit, i) => {
+        if (index + i < length) {
+          newOtp[index + i] = digit;
+        }
+      });
+
+      setOtp(newOtp);
+
+      // Focus the next empty input or the last input
+      const nextIndex = Math.min(index + pastedDigits.length, length - 1);
+      inputRefs.current[nextIndex]?.focus();
+      return;
+    }
+
+    // Handle single digit input
+    const newOtp = [...otp];
+    newOtp[index] = sanitizedText;
+    setOtp(newOtp);
+
+    // Auto-focus next input
+    if (index < length - 1 && sanitizedText !== "") {
+      inputRefs.current[index + 1]?.focus();
+    }
+  };
+
+  const handleKeyPress = (
+    e: NativeSyntheticEvent<TextInputKeyPressEventData>,
+    index: number,
+  ) => {
+    if (e.nativeEvent.key === "Backspace") {
+      if (otp[index] === "") {
+        // If current input is empty, focus previous input
+        if (index > 0) {
+          inputRefs.current[index - 1]?.focus();
+        }
+      } else {
+        // Clear current input
+        const newOtp = [...otp];
+        newOtp[index] = "";
+        setOtp(newOtp);
+      }
+    }
+  };
+
+  const handleFocus = (index: number) => {
+    setFocusedIndex(index);
+  };
+
+  const handleBlur = () => {
+    setFocusedIndex(null);
+  };
+
+  // Method to clear OTP (can be called from parent component)
+  const clearOTP = () => {
+    setOtp(Array(length).fill(""));
+    inputRefs.current[0]?.focus();
+  };
+
+  // Expose clearOTP method
+  React.useImperativeHandle(ref, () => ({
+    clear: clearOTP,
+  }));
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      {Array(length)
+        .fill(0)
+        .map((_, index) => (
+          <TextInput
+            key={index}
+            ref={(ref) => {
+              inputRefs.current[index] = ref;
+            }}
+            style={[
+              styles.input,
+              inputStyle,
+              focusedIndex === index && styles.focusedInput,
+              focusedIndex === index && focusedInputStyle,
+              disabled && styles.disabledInput,
+            ]}
+            value={otp[index]}
+            onChangeText={(text) => handleChangeText(text, index)}
+            onKeyPress={(e) => handleKeyPress(e, index)}
+            onFocus={() => handleFocus(index)}
+            onBlur={handleBlur}
+            keyboardType="number-pad"
+            maxLength={1}
+            selectTextOnFocus
+            editable={!disabled}
+            secureTextEntry={secureTextEntry}
+            textContentType="oneTimeCode"
+            autoComplete="sms-otp"
+          />
+        ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: 2,
+  },
+  input: {
+    width: 40,
+    height: 50,
+    borderWidth: 1,
+    borderColor: "#D1D5DB",
+    borderRadius: 10,
+    textAlign: "center",
+    fontSize: 24,
+    fontWeight: "400",
+    backgroundColor: "#FFFFFF",
+    color: "#111827",
+  },
+  focusedInput: {
+    borderColor: "#3B82F6",
+    borderWidth: 2,
+  },
+  disabledInput: {
+    backgroundColor: "#F3F4F6",
+    color: "#9CA3AF",
+  },
+});

package/src/components/PaymentMethodSelector.tsx

@@ -0,0 +1,99 @@
+import { Ionicons } from "@expo/vector-icons";
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+
+type PaymentMethod = {
+  id: string;
+  name: string;
+  icon: any;
+};
+
+type PaymentMethodSelectorProps = {
+  methods: PaymentMethod[];
+  selectedMethod: string;
+  onSelectMethod: (methodId: string) => void;
+};
+
+export default function PaymentMethodSelector({
+  methods,
+  selectedMethod,
+  onSelectMethod,
+}: PaymentMethodSelectorProps) {
+  return (
+    <View style={styles.container}>
+      {methods.map((method) => (
+        <TouchableOpacity
+          key={method.id}
+          onPress={() => onSelectMethod(method.id)}
+          style={[
+            styles.method,
+            selectedMethod === method.id && styles.methodSelected,
+          ]}
+        >
+          <Ionicons
+            name={method.icon}
+            size={20}
+            color={selectedMethod === method.id ? "#4F46E5" : "#6B7280"}
+          />
+          <Text
+            style={[
+              styles.methodText,
+              selectedMethod === method.id && styles.methodTextSelected,
+            ]}
+          >
+            {method.name}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    gap: 10,
+    marginBottom: 24,
+  },
+  method: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    paddingVertical: 16,
+    paddingHorizontal: 10,
+    borderWidth: 2,
+    borderColor: "#E5E7EB",
+    borderRadius: 14,
+    backgroundColor: "#FFFFFF",
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 1,
+  },
+  methodSelected: {
+    borderColor: "#4F46E5",
+    backgroundColor: "#EEF2FF",
+    shadowColor: "#4F46E5",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  methodText: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#6B7280",
+  },
+  methodTextSelected: {
+    color: "#4F46E5",
+    fontWeight: "700",
+  },
+});