fairsure-checkout-sdk 1.0.0

package/dist/components/PaymentMethodSelector.js

@@ -0,0 +1,67 @@
+import { Ionicons } from "@expo/vector-icons";
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+export default function PaymentMethodSelector({ methods, selectedMethod, onSelectMethod, }) {
+    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",
+    },
+});

package/dist/components/PaystackCheckout.d.ts

@@ -0,0 +1,13 @@
+type CheckoutProps = {
+    theme?: "light" | "dark";
+    requestId: string;
+    customerEmail: string;
+    customerName: string;
+    customerPhone: string;
+    amount: number;
+    merchantName?: string;
+    onClose: () => void;
+    onSuccess?: (reference: string) => void;
+};
+export default function Checkout({ requestId, customerEmail, customerName, customerPhone, amount, merchantName, onClose, onSuccess, }: CheckoutProps): import("react").JSX.Element;
+export {};

package/dist/components/PaystackCheckout.js

@@ -0,0 +1,385 @@
+import { Ionicons } from "@expo/vector-icons";
+import { ActivityIndicator, Modal, ScrollView, StyleSheet, Text, TouchableOpacity, View, } from "react-native";
+import CardPayment from "./CardPayment";
+import PaymentMethodSelector from "./PaymentMethodSelector";
+import TransferPayment from "./TransferPayment";
+import USSDPayment from "./USSDPayment";
+import { usePaymentCheckout } from "./usePaymentCheckout";
+const paymentMethods = [
+    { id: "card", name: "Card", icon: "card-outline" },
+    { id: "transfer", name: "Transfer", icon: "business-outline" },
+    { id: "ussd", name: "USSD", icon: "phone-portrait-outline" },
+];
+export default function Checkout({ requestId, customerEmail, customerName, customerPhone, amount, merchantName = "Merchant", onClose, onSuccess, }) {
+    const checkout = usePaymentCheckout(amount, requestId, customerEmail, customerName, customerPhone, (reference) => {
+        onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(reference);
+        handleClose();
+    });
+    const handleClose = () => {
+        checkout.resetForm();
+        checkout.setPin("");
+        checkout.setOtp("");
+        checkout.setcardcontinue(false);
+        checkout.setSelectedBank(null);
+        checkout.setShowOtp(false);
+        onClose();
+    };
+    const getButtonText = () => {
+        if (checkout.selectedMethod === "transfer") {
+            return "I have sent the money";
+        }
+        else if (checkout.selectedMethod === "ussd") {
+            return "Confirm payment";
+        }
+        return `Pay ₦${checkout.formatAmount(amount)}`;
+    };
+    const isButtonDisabled = () => {
+        if (checkout.selectedMethod === "card") {
+            return !checkout.cardNumber || !checkout.expiryDate || !checkout.cvv;
+        }
+        if (checkout.selectedMethod === "ussd") {
+            return !checkout.selectedBank;
+        }
+        if (checkout.selectedMethod === "transfer") {
+            return checkout.timeLeft <= 0;
+        }
+        return false;
+    };
+    const handlePayment = () => {
+        if (checkout.selectedMethod === "transfer") {
+            checkout.verifyTransfer();
+        }
+        else if (checkout.selectedMethod === "card" &&
+            checkout.cardcontinue &&
+            checkout.showOtp) {
+            checkout.verifyCardPayment();
+        }
+        else if (checkout.selectedMethod === "card" && checkout.cardcontinue) {
+            checkout.handleCardPayment();
+        }
+        else if (checkout.selectedMethod === "card") {
+            checkout.setcardcontinue(true);
+        }
+        else if (checkout.selectedMethod === "ussd") {
+            checkout.verifyUssd();
+        }
+    };
+    return (<Modal visible transparent animationType="slide" onRequestClose={handleClose}>
+      <View style={styles.overlay}>
+        <View style={styles.modalContainer}>
+          {/* Header */}
+          <CheckoutHeader merchantName={merchantName} amount={amount} formatAmount={checkout.formatAmount} onClose={handleClose}/>
+
+          <ScrollView style={styles.scrollContainer}>
+            <View style={styles.body}>
+              {/* Payment Method Selector */}
+              <PaymentMethodSelector methods={paymentMethods} selectedMethod={checkout.selectedMethod} onSelectMethod={checkout.setSelectedMethod}/>
+
+              {/* Payment Forms */}
+              {checkout.selectedMethod === "card" && (<CardPayment cardNumber={checkout.cardNumber} setCardNumber={checkout.setCardNumber} expiryDate={checkout.expiryDate} setExpiryDate={checkout.setExpiryDate} cvv={checkout.cvv} message={checkout.message} setCvv={checkout.setCvv} cardcontinue={checkout.cardcontinue} showOtp={checkout.showOtp} handleOTPComplete={(otp) => console.log(otp)} handleOTPChange={checkout.setOtp} handlePinChange={checkout.setPin} formatCardNumber={checkout.formatCardNumber} formatExpiry={checkout.formatExpiry}/>)}
+
+              {checkout.selectedMethod === "transfer" && (<TransferPayment loading={checkout.loading} amount={amount} transferDetail={checkout.transferDetail} timeLeft={checkout.timeLeft} copied={checkout.copied} handleCopy={checkout.handleCopy} formatAmount={checkout.formatAmount} formatTime={checkout.formatTime}/>)}
+
+              {checkout.selectedMethod === "ussd" && (<USSDPayment selectedBank={checkout.selectedBank} setSelectedBank={checkout.setSelectedBank} showBankDropdown={checkout.showBankDropdown} setShowBankDropdown={checkout.setShowBankDropdown} ussdBanks={checkout.ussdBanks} loading={checkout.loading} ussString={checkout.ussdBankResponse} copied={checkout.copied} handleCopy={checkout.handleCopy}/>)}
+
+              {/* Payment Button */}
+              <TouchableOpacity onPress={handlePayment} disabled={isButtonDisabled()} style={[
+            styles.payButton,
+            isButtonDisabled()
+                ? styles.payButtonDisabled
+                : styles.payButtonActive,
+        ]}>
+                <Text style={styles.payButtonText}>{getButtonText()}</Text>
+                {checkout.loading && (<ActivityIndicator size="small" color="white"/>)}
+              </TouchableOpacity>
+              {!checkout.loading && checkout.timeLeft <= 0 && (<TouchableOpacity>
+                  <Text>Resend</Text>
+                </TouchableOpacity>)}
+
+              {/* Footer */}
+              <View style={styles.footer}>
+                <Ionicons name="lock-closed" size={16} color="#9CA3AF"/>
+                <Text style={styles.footerText}>Secured</Text>
+              </View>
+            </View>
+          </ScrollView>
+        </View>
+      </View>
+    </Modal>);
+}
+function CheckoutHeader({ merchantName, amount, formatAmount, onClose, }) {
+    return (<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={onClose} 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>);
+}
+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: "#01448bff",
+        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(114, 38, 38, 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: 18,
+        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: "#302aa3ff", 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, 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/PurchaseModal.d.ts

@@ -0,0 +1,17 @@
+import React, { ReactElement } from "react";
+interface FilterItem {
+    key: string;
+    render: () => ReactElement | null;
+}
+interface PurchaseModalProps {
+    visible: boolean;
+    loading?: boolean;
+    title?: string;
+    description?: string;
+    filters: FilterItem[];
+    onClose: () => void;
+    onApply?: () => void;
+    onReset?: () => void;
+}
+declare const PurchaseModal: React.FC<PurchaseModalProps>;
+export default PurchaseModal;