fairsure-checkout-sdk 1.0.0

package/dist/components/CardPayment.d.ts

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

package/dist/components/CardPayment.js

@@ -0,0 +1,302 @@
+import { Ionicons } from "@expo/vector-icons";
+import { StyleSheet, Text, TextInput, View } from "react-native";
+import OTPInput from "./OTPInput";
+export default function CardPayment({ cardNumber, message, setCardNumber, expiryDate, setExpiryDate, cvv, setCvv, cardcontinue, showOtp, handleOTPComplete, handleOTPChange, handlePinChange, formatCardNumber, formatExpiry, }) {
+    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/dist/components/Checkout.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface PaystackCheckoutProps {
+    amount: number;
+    merchantName?: string;
+    onClose: () => void;
+    onSuccess?: (reference: string) => void;
+}
+export default function Checkout({ amount, merchantName, onClose, onSuccess, }: PaystackCheckoutProps): React.JSX.Element;
+export {};