fairsure-checkout-sdk 1.0.0

package/dist/components/Checkout.js

@@ -0,0 +1,520 @@
+// components/PaystackCheckout.tsx
+import { Ionicons } from "@expo/vector-icons";
+import * as Clipboard from "expo-clipboard";
+import React, { useEffect, useState } from "react";
+import { Alert, Modal, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View, } from "react-native";
+export default function Checkout({ amount, merchantName = "Merchant", onClose, onSuccess, }) {
+    var _a;
+    const [selectedMethod, setSelectedMethod] = useState("card");
+    const [cardNumber, setCardNumber] = useState("");
+    const [expiryDate, setExpiryDate] = useState("");
+    const [cvv, setCvv] = useState("");
+    const [selectedBank, setSelectedBank] = useState("");
+    const [showBankDropdown, setShowBankDropdown] = useState(false);
+    const [accountNumber] = useState("1234567890");
+    const [copied, setCopied] = useState(false);
+    useEffect(() => {
+        console.log("method", selectedMethod);
+    }, [selectedMethod]);
+    const paymentMethods = [
+        { id: "card", name: "Card", icon: "card-outline" },
+        { id: "transfer", name: "Transfer", icon: "business-outline" },
+        { id: "ussd", name: "USSD", icon: "phone-portrait-outline" },
+    ];
+    const ussdBanks = [
+        { code: "gtb", name: "GTBank", ussdCode: `*737*50*${amount}*159#` },
+        { code: "access", name: "Access Bank", ussdCode: `*901*${amount}*159#` },
+        { code: "zenith", name: "Zenith Bank", ussdCode: `*966*${amount}*159#` },
+        { code: "uba", name: "UBA", ussdCode: `*919*${amount}*159#` },
+        { code: "first", name: "First Bank", ussdCode: `*894*${amount}*159#` },
+        {
+            code: "fidelity",
+            name: "Fidelity Bank",
+            ussdCode: `*770*${amount}*159#`,
+        },
+    ];
+    const formatAmount = (value) => {
+        return value.toLocaleString("en-NG", {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        });
+    };
+    const formatCardNumber = (value) => {
+        const v = value.replace(/\s+/g, "").replace(/[^0-9]/gi, "");
+        const matches = v.match(/\d{4,16}/g);
+        const match = (matches && matches[0]) || "";
+        const parts = [];
+        for (let i = 0; i < match.length; i += 4) {
+            parts.push(match.substring(i, i + 4));
+        }
+        return parts.length ? parts.join(" ") : value;
+    };
+    const formatExpiry = (value) => {
+        const v = value.replace(/\s+/g, "").replace(/[^0-9]/gi, "");
+        if (v.length >= 2) {
+            return v.slice(0, 2) + "/" + v.slice(2, 4);
+        }
+        return v;
+    };
+    const handleCopy = async (text) => {
+        await Clipboard.setStringAsync(text);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    };
+    const handlePay = () => {
+        const reference = `ref_${Date.now()}`;
+        Alert.alert("Payment Successful", `Your payment of ₦${formatAmount(amount)} has been processed successfully.`, [
+            {
+                text: "OK",
+                onPress: () => {
+                    if (onSuccess)
+                        onSuccess(reference);
+                    onClose();
+                },
+            },
+        ]);
+    };
+    const handleClose = () => {
+        setCardNumber("");
+        setExpiryDate("");
+        setCvv("");
+        setSelectedBank("");
+        setSelectedMethod("card");
+        onClose();
+    };
+    return (<Modal visible transparent animationType="slide" onRequestClose={handleClose}>
+      <View style={styles.overlay}>
+        <View style={styles.modalContainer}>
+          {/* Header */}
+          <View style={styles.header}>
+            <View style={styles.headerTop}>
+              <View>
+                <Text style={styles.headerTitle}>Pay {merchantName}</Text>
+                <Text style={styles.headerSubtitle}>Complete your payment</Text>
+              </View>
+              <TouchableOpacity onPress={handleClose} style={styles.closeBtn}>
+                <Ionicons name="close" size={24} color="white"/>
+              </TouchableOpacity>
+            </View>
+
+            <View style={styles.amountBox}>
+              <Text style={styles.amountLabel}>Amount to pay</Text>
+              <Text style={styles.amountText}>₦{formatAmount(amount)}</Text>
+            </View>
+          </View>
+
+          <ScrollView style={styles.scrollContainer}>
+            <View style={styles.body}>
+              {/* Payment Methods */}
+              <View style={styles.paymentMethodsContainer}>
+                {paymentMethods.map((method) => (<TouchableOpacity key={method.id} onPress={() => setSelectedMethod(method.id)} style={[
+                styles.paymentMethod,
+                selectedMethod === method.id &&
+                    styles.paymentMethodSelected,
+            ]}>
+                    <Ionicons name={method.icon} size={20} color={selectedMethod === method.id ? "#4F46E5" : "#6B7280"}/>
+                    <Text style={[
+                styles.paymentMethodText,
+                selectedMethod === method.id &&
+                    styles.paymentMethodTextSelected,
+            ]}>
+                      {method.name}
+                    </Text>
+                  </TouchableOpacity>))}
+              </View>
+
+              {/* Card Payment */}
+              {selectedMethod === "card" && (<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>)}
+
+              {/* Transfer Payment */}
+              {selectedMethod === "transfer" && (<View>
+                  <View style={styles.transferBox}>
+                    <Text style={styles.transferText}>
+                      Transfer ₦{formatAmount(amount)} to the account below
+                    </Text>
+
+                    <View>
+                      <View style={styles.transferDetail}>
+                        <Text style={styles.transferLabel}>Bank Name</Text>
+                        <Text style={styles.transferValue}>Wema Bank</Text>
+                      </View>
+
+                      <View style={styles.transferDetail}>
+                        <Text style={styles.transferLabel}>Account Number</Text>
+                        <View style={styles.row}>
+                          <Text style={styles.accountNumber}>
+                            {accountNumber}
+                          </Text>
+                          <TouchableOpacity onPress={() => handleCopy(accountNumber)}>
+                            <Ionicons name={copied ? "checkmark" : "copy-outline"} size={20} color="#4F46E5"/>
+                          </TouchableOpacity>
+                        </View>
+                      </View>
+
+                      <View style={styles.transferDetail}>
+                        <Text style={styles.transferLabel}>Account Name</Text>
+                        <Text style={styles.transferValue}>
+                          Paystack-John Doe
+                        </Text>
+                      </View>
+                    </View>
+                  </View>
+
+                  <View style={styles.transferNote}>
+                    <Text style={styles.transferNoteText}>
+                      <Text style={{ fontWeight: "bold" }}>Note:</Text> This
+                      account expires in 60 minutes. Payment will be confirmed
+                      automatically.
+                    </Text>
+                  </View>
+                </View>)}
+
+              {/* USSD Payment */}
+              {selectedMethod === "ussd" && (<View>
+                  <View style={styles.inputGroup}>
+                    <Text style={styles.inputLabel}>Select Your Bank</Text>
+                    <TouchableOpacity onPress={() => setShowBankDropdown(!showBankDropdown)} style={styles.dropdown}>
+                      <Text style={selectedBank
+                ? styles.dropdownText
+                : styles.dropdownPlaceholder}>
+                        {selectedBank || "Choose your bank"}
+                      </Text>
+                      <Ionicons name="chevron-down" size={20} color="#9CA3AF"/>
+                    </TouchableOpacity>
+
+                    {showBankDropdown && (<View style={styles.dropdownList}>
+                        <ScrollView style={{ maxHeight: 240 }}>
+                          {ussdBanks.map((bank) => (<TouchableOpacity key={bank.code} onPress={() => {
+                        setSelectedBank(bank.name);
+                        setShowBankDropdown(false);
+                    }} style={styles.dropdownItem}>
+                              <Text style={styles.dropdownItemText}>
+                                {bank.name}
+                              </Text>
+                            </TouchableOpacity>))}
+                        </ScrollView>
+                      </View>)}
+                  </View>
+
+                  {selectedBank && (<View style={styles.ussdContainer}>
+                      <Text style={styles.ussdTitle}>
+                        Dial the code below to complete payment
+                      </Text>
+
+                      <View style={styles.ussdCodeContainer}>
+                        <View style={styles.row}>
+                          <Text style={styles.ussdCodeText}>
+                            {(_a = ussdBanks.find((b) => b.name === selectedBank)) === null || _a === void 0 ? void 0 : _a.ussdCode}
+                          </Text>
+                          <TouchableOpacity onPress={() => {
+                    var _a;
+                    return handleCopy(((_a = ussdBanks.find((b) => b.name === selectedBank)) === null || _a === void 0 ? void 0 : _a.ussdCode) || "");
+                }}>
+                            <Ionicons name={copied ? "checkmark" : "copy-outline"} size={20} color="#4F46E5"/>
+                          </TouchableOpacity>
+                        </View>
+                      </View>
+
+                      <View>
+                        <Text style={styles.ussdCodeText}>Steps:</Text>
+                        <Text style={styles.ussdStepsText}>
+                          1. Dial the USSD code on your phone{"\n"}
+                          2. Follow the prompts on your screen{"\n"}
+                          3. Authorize payment with your bank PIN
+                        </Text>
+                      </View>
+                    </View>)}
+                </View>)}
+
+              {/* Pay Button */}
+              <TouchableOpacity onPress={handlePay} disabled={(selectedMethod === "card" &&
+            (!cardNumber || !expiryDate || !cvv)) ||
+            (selectedMethod === "ussd" && !selectedBank)} style={[
+            styles.payButton,
+            (selectedMethod === "card" &&
+                (!cardNumber || !expiryDate || !cvv)) ||
+                (selectedMethod === "ussd" && !selectedBank)
+                ? styles.payButtonDisabled
+                : styles.payButtonActive,
+        ]}>
+                <Text style={styles.payButtonText}>
+                  {selectedMethod === "transfer"
+            ? "I have sent the money"
+            : `Pay ₦${formatAmount(amount)}`}
+                </Text>
+              </TouchableOpacity>
+
+              {/* Footer */}
+              <View style={styles.footer}>
+                <Ionicons name="lock-closed" size={16} color="#9CA3AF"/>
+                <Text style={styles.footerText}>Secured by Paystack</Text>
+              </View>
+            </View>
+          </ScrollView>
+        </View>
+      </View>
+    </Modal>);
+}
+const styles = StyleSheet.create({
+    overlay: {
+        flex: 1,
+        backgroundColor: "rgba(0,0,0,0.5)",
+        justifyContent: "flex-end",
+    },
+    modalContainer: {
+        width: "90%",
+        alignSelf: "center",
+        borderRadius: 20,
+        height: "85%",
+        backgroundColor: "white",
+    },
+    header: {
+        backgroundColor: "#6B21A8",
+        padding: 16,
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20,
+    },
+    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 },
+    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: 4,
+    },
+    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 },
+    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: {
+        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/dist/components/OTPInput.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+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, onComplete, onChangeOTP, autoFocus, secureTextEntry, disabled, inputStyle, containerStyle, focusedInputStyle, }: OTPInputProps): React.JSX.Element;
+export {};

package/dist/components/OTPInput.js

@@ -0,0 +1,132 @@
+import React, { useEffect, useState } from "react";
+import { StyleSheet, TextInput, View, } from "react-native";
+export default function OTPInput({ length = 6, onComplete, onChangeOTP, autoFocus = true, secureTextEntry = false, disabled = false, inputStyle, containerStyle, focusedInputStyle, }) {
+    const [otp, setOtp] = useState(Array(length).fill(""));
+    const [focusedIndex, setFocusedIndex] = useState(autoFocus ? 0 : null);
+    const ref = React.useRef(null);
+    const inputRefs = React.useRef([]);
+    // 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 === null || onChangeOTP === void 0 ? void 0 : onChangeOTP(otpString);
+        // Call onComplete when all digits are filled
+        if (otpString.length === length && !otpString.includes("")) {
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete(otpString);
+        }
+    }, [otp, length, onComplete, onChangeOTP]);
+    const handleChangeText = (text, index) => {
+        var _a, _b;
+        // 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);
+            (_a = inputRefs.current[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+            return;
+        }
+        // Handle single digit input
+        const newOtp = [...otp];
+        newOtp[index] = sanitizedText;
+        setOtp(newOtp);
+        // Auto-focus next input
+        if (index < length - 1 && sanitizedText !== "") {
+            (_b = inputRefs.current[index + 1]) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    };
+    const handleKeyPress = (e, index) => {
+        var _a;
+        if (e.nativeEvent.key === "Backspace") {
+            if (otp[index] === "") {
+                // If current input is empty, focus previous input
+                if (index > 0) {
+                    (_a = inputRefs.current[index - 1]) === null || _a === void 0 ? void 0 : _a.focus();
+                }
+            }
+            else {
+                // Clear current input
+                const newOtp = [...otp];
+                newOtp[index] = "";
+                setOtp(newOtp);
+            }
+        }
+    };
+    const handleFocus = (index) => {
+        setFocusedIndex(index);
+    };
+    const handleBlur = () => {
+        setFocusedIndex(null);
+    };
+    // Method to clear OTP (can be called from parent component)
+    const clearOTP = () => {
+        var _a;
+        setOtp(Array(length).fill(""));
+        (_a = inputRefs.current[0]) === null || _a === void 0 ? void 0 : _a.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/dist/components/PaymentMethodSelector.d.ts

@@ -0,0 +1,12 @@
+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): import("react").JSX.Element;
+export {};