fairsure-checkout-sdk 1.0.0

package/src/components/usePaymentCheckout.ts

@@ -0,0 +1,441 @@
+import axios from "axios";
+import * as Clipboard from "expo-clipboard";
+import { useEffect, useState } from "react";
+import { Dimensions, Platform } from "react-native";
+
+const { width, height } = Dimensions.get("window");
+
+export function usePaymentCheckout(
+  amount: number,
+  requestId: string,
+  customerEmail: string,
+  customerName: string,
+  customerPhone: string,
+  onSuccess?: (reference: string) => void,
+) {
+  const [selectedMethod, setSelectedMethod] = useState("card");
+  const [cardNumber, setCardNumber] = useState("");
+  const [expiryDate, setExpiryDate] = useState("");
+  const [cvv, setCvv] = useState("");
+  const [selectedBank, setSelectedBank] = useState<{
+    name: string;
+    code: string;
+  } | null>(null);
+
+  const [showBankDropdown, setShowBankDropdown] = useState(false);
+  const [pin, setPin] = useState("");
+  const [otp, setOtp] = useState("");
+  const [message, setMessage] = useState("");
+  const [copied, setCopied] = useState(false);
+  const [showPin, setShowPin] = useState(false);
+  const [showOtp, setShowOtp] = useState(false);
+  const [cardcontinue, setcardcontinue] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [ussdBanks, setUssdBanks] = useState([]);
+  const [ussdBankResponse, setUssdBankResponse] = useState({
+    ussdString: "",
+    codeRef: "",
+    amount: "",
+  });
+  const [transferDetail, setTransferDetail] = useState({
+    accountName: "",
+    accountNumber: "",
+    bankName: "",
+    amount: 0,
+    validityPeriodMins: 0,
+    transactionReference: "",
+  });
+  const [cardDetails, setCardDetails] = useState({
+    transactionRef: "",
+    paymentId: "",
+  });
+  const [timeLeft, setTimeLeft] = useState(0);
+
+  // Timer logic
+  useEffect(() => {
+    if (transferDetail.validityPeriodMins > 0) {
+      setTimeLeft(transferDetail.validityPeriodMins * 60);
+    }
+  }, [transferDetail.validityPeriodMins]);
+
+  useEffect(() => {
+    if (timeLeft <= 0) return;
+
+    const timer = setInterval(() => {
+      setTimeLeft((prev) => {
+        if (prev <= 1) {
+          clearInterval(timer);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [timeLeft]);
+
+  // Fetch transfer details or USSD banks based on selected method
+  useEffect(() => {
+    if (selectedMethod === "transfer" || selectedMethod === "card") {
+      fetchTransferDetails();
+    } else if (selectedMethod === "ussd") {
+      getBanks();
+    }
+  }, [selectedMethod]);
+
+  const fetchTransferDetails = async () => {
+    setLoading(true);
+    try {
+      const payload = {
+        amount,
+        accountName: "Fairsure",
+        isBill: true,
+        requestId,
+      };
+
+      const res = await axios.post(
+        "https://api.fairsurepayment.com.ng/api/pub/generate-account",
+        payload,
+        {
+          headers: {
+            Accept: "application/json",
+            "Content-Type": "application/json",
+            publickey: "LIVE_7AXSCCY8R3HABAN14QP7",
+            "User-Agent": "PostmanRuntime/7.51.0",
+          },
+        },
+      );
+      setTransferDetail(res?.data?.data);
+    } catch (error) {
+      console.log("FETCH ERROR:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const generateUssdCode = async () => {
+    setLoading(true);
+    const payload = {
+      amount,
+      requestId,
+      bankCode: selectedBank?.code,
+    };
+
+    try {
+      const res = await axios.post(
+        "https://api.fairsurepayment.com.ng/api/pub/generate-ussd",
+        payload,
+        {
+          headers: {
+            Accept: "application/json",
+            "Content-Type": "application/json",
+            publickey: "LIVE_7AXSCCY8R3HABAN14QP7",
+            "User-Agent": "PostmanRuntime/7.51.0",
+          },
+        },
+      );
+      setUssdBankResponse(res?.data?.data);
+    } catch (error) {
+      console.log("FETCH ERROR:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const verifyUssd = async () => {
+    try {
+      setLoading(true);
+      const payload = {
+        codeReference: ussdBankResponse?.codeRef,
+        amount: ussdBankResponse?.amount,
+      };
+      const res = await axios.post(
+        "https://api.fairsurepayment.com.ng/api/pub/ussd-status",
+        payload,
+        {
+          headers: {
+            Accept: "application/json",
+            "Content-Type": "application/json",
+            publickey: "LIVE_7AXSCCY8R3HABAN14QP7",
+            "User-Agent": "PostmanRuntime/7.51.0",
+          },
+        },
+      );
+      onSuccess?.(cardDetails.transactionRef);
+      setLoading(false);
+    } catch (error) {
+      console.log("FETCH ERROR:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (selectedBank) {
+      generateUssdCode();
+    }
+  }, [selectedBank]);
+
+  const getBanks = async () => {
+    setLoading(true);
+    try {
+      setLoading(true);
+      const res = await axios.get(
+        "https://api.fairsurepayment.com.ng/api/pub/list-ussd-banks",
+        {
+          timeout: 15000,
+          headers: {
+            Accept: "application/json",
+            "Content-Type": "application/json",
+            publickey: "LIVE_7AXSCCY8R3HABAN14QP7",
+            "User-Agent": "PostmanRuntime/7.36.0",
+          },
+        },
+      );
+
+      const banks = res.data.data.map((bank: any) => ({
+        name: bank.BankName,
+        code: bank.BankCode,
+      }));
+      setLoading(false);
+      setUssdBanks(banks);
+    } catch (error: any) {
+      console.log("Failed to fetch banks", error.response?.data);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCopy = async (text: string) => {
+    await Clipboard.setStringAsync(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const formatTime = (seconds: number) => {
+    const m = Math.floor(seconds / 60);
+    const s = seconds % 60;
+    return `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
+  };
+
+  const formatAmount = (value: number) => {
+    return value.toLocaleString("en-NG", {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    });
+  };
+
+  const formatCardNumber = (value: string) => {
+    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: string) => {
+    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 completeCard = async (data: string) => {
+    setLoading(true);
+    try {
+      const payload = {
+        customerId: customerEmail,
+        amount: String(amount),
+        transactionRef: requestId,
+        currency: "NGN",
+        callbackUrl: "https://yourcallbackurl.com",
+        isBill: "true",
+        data: data,
+        deviceInformation: {
+          deviceChannel: "MOBILE",
+          userAgentBrowserValue: `ReactNative/${Platform.OS}`,
+          httpBrowserLanguage: "en-NG",
+          httpBrowserJavaEnabled: false,
+          httpBrowserJavaScriptEnabled: true,
+          httpBrowserColorDepth: 32,
+          httpBrowserScreenHeight: Math.round(height),
+          httpBrowserScreenWidth: Math.round(width),
+          httpBrowserTimeDifference: `${-new Date().getTimezoneOffset()}`,
+        },
+      };
+      const res = await axios.post(
+        "https://api.fairsurepayment.com.ng/api/pub/card-payment",
+        payload,
+        {
+          headers: {
+            Accept: "application/json",
+            "Content-Type": "application/json",
+            publickey: "LIVE_7AXSCCY8R3HABAN14QP7",
+            "User-Agent": "PostmanRuntime/7.51.0",
+          },
+        },
+      );
+      setLoading(false);
+      return res.data;
+    } catch (error: any) {
+      setLoading(false);
+      if (axios.isAxiosError(error)) {
+        console.log("STATUS:", error.response?.status);
+        console.log("DATA:", error.response?.data);
+        console.log("HEADERS:", error.response?.headers);
+      } else {
+        console.log("UNKNOWN ERROR:", error);
+      }
+    }
+  };
+  const handleCardPayment = async () => {
+    setLoading(true);
+    try {
+      const payload = {
+        pan: cardNumber.replace(/\s/g, ""),
+        expiryDate: expiryDate.replace("/", ""),
+        cvv,
+        pin,
+      };
+
+      const res = await axios.post(
+        "https://api.fairsurepayment.com.ng/api/pub/encrypt-test",
+        payload,
+        {
+          timeout: 15000,
+          headers: {
+            Accept: "application/json",
+            "Content-Type": "application/json",
+            publickey: "LIVE_7AXSCCY8R3HABAN14QP7",
+            "User-Agent": "PostmanRuntime/7.51.0",
+          },
+        },
+      );
+      const data = await completeCard(res?.data?.data);
+      setMessage(data?.data?.message);
+      setCardDetails(data?.data);
+      setOtp("");
+      setPin("");
+      setShowOtp(true);
+      return data;
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const verifyCardPayment = async () => {
+    setLoading(true);
+    try {
+      const payload = {
+        transactionId: cardDetails?.transactionRef,
+        paymentId: cardDetails?.paymentId,
+        // eciFlag: "07",
+        otp: otp,
+        customerName,
+        customerPhone,
+        customerEmail,
+      };
+      const res = await axios.post(
+        "https://api.fairsurepayment.com.ng/api/pub/submit-otp",
+        payload,
+        {
+          headers: {
+            Accept: "application/json",
+            "Content-Type": "application/json",
+            publickey: "LIVE_7AXSCCY8R3HABAN14QP7",
+            "User-Agent": "PostmanRuntime/7.36.0",
+          },
+        },
+      );
+      onSuccess?.(transferDetail.transactionReference);
+      setLoading(false);
+      return res?.data;
+    } catch (error) {
+      setLoading(false);
+      console.log("ERROR", error);
+    }
+  };
+  const verifyTransfer = async () => {
+    setLoading(true);
+    try {
+      const res = await axios.get(
+        `https://api.fairsurepayment.com.ng/api/pub/transfer-status?transactionReference=${transferDetail?.transactionReference}`,
+        {
+          timeout: 15000,
+          headers: {
+            Accept: "application/json",
+            "Content-Type": "application/json",
+            publickey: "LIVE_7AXSCCY8R3HABAN14QP7",
+            "User-Agent": "PostmanRuntime/7.36.0",
+          },
+        },
+      );
+      onSuccess?.(transferDetail.transactionReference);
+      return res?.data;
+    } catch (error: any) {
+      console.log("Failed to Verify transfer", error.response?.data);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const resetForm = () => {
+    setCardNumber("");
+    setExpiryDate("");
+    setCvv("");
+    setSelectedBank(null);
+    setcardcontinue(false);
+    setSelectedMethod("card");
+  };
+
+  return {
+    // State
+    selectedMethod,
+    cardNumber,
+    expiryDate,
+    cvv,
+    selectedBank,
+    showBankDropdown,
+    pin,
+    message,
+    otp,
+    copied,
+    showPin,
+    showOtp,
+    cardcontinue,
+    loading,
+    ussdBanks,
+    transferDetail,
+    cardDetails,
+    timeLeft,
+    ussdBankResponse,
+
+    // Setters
+    setSelectedMethod,
+    setCardNumber,
+    setExpiryDate,
+    setCvv,
+    setSelectedBank,
+    setShowBankDropdown,
+    setPin,
+    setOtp,
+    setcardcontinue,
+    setShowOtp,
+
+    // Utilities
+    formatTime,
+    formatAmount,
+    formatCardNumber,
+    formatExpiry,
+    handleCopy,
+    handleCardPayment,
+    verifyTransfer,
+    verifyCardPayment,
+    resetForm,
+    verifyUssd,
+  };
+}

package/src/context/CheckoutProvider.tsx

@@ -0,0 +1,37 @@
+import React, { createContext, useContext, useState } from "react";
+
+import { CheckoutConfig } from "../types";
+import Checkout from "../components/PaystackCheckout";
+
+const CheckoutContext = createContext<any>(null);
+
+export function CheckoutProvider({ children }: { children: React.ReactNode }) {
+  const [config, setConfig] = useState<CheckoutConfig | null>(null);
+
+  const openCheckout = (options: CheckoutConfig) => {
+    setConfig(options);
+  };
+
+  const closeCheckout = () => setConfig(null);
+
+  return (
+    <CheckoutContext.Provider value={{ openCheckout }}>
+      {children}
+
+      {config && (
+        <Checkout
+          amount={config.amount}
+          merchantName={config.merchantName}
+          onSuccess={config.onSuccess}
+          onClose={closeCheckout}
+          requestId={config.requestId}
+          customerEmail={config.customerEmail}
+          customerName={config.customerName}
+          customerPhone={config.customerPhone}
+        />
+      )}
+    </CheckoutContext.Provider>
+  );
+}
+
+export const useCheckoutContext = () => useContext(CheckoutContext);

package/src/hooks/useCheckout.ts

@@ -0,0 +1,11 @@
+import { useCheckoutContext } from "../context/CheckoutProvider";
+
+export function useCheckout() {
+  const ctx = useCheckoutContext();
+
+  if (!ctx) {
+    throw new Error("usePaystackCheckout must be used inside CheckoutProvider");
+  }
+
+  return ctx;
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { CheckoutProvider } from "./context/CheckoutProvider";
+export { useCheckout } from "./hooks/useCheckout";

package/src/types.ts

@@ -0,0 +1,9 @@
+export interface CheckoutConfig {
+  amount: number;
+  merchantName?: string;
+  onSuccess?: (reference: string) => void;
+  requestId: string;
+  customerEmail: string;
+  customerName: string;
+  customerPhone: string;
+}

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "module": "ESNext",
+    "jsx": "react-native",
+
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+
+    "strict": true,
+    "skipLibCheck": true,
+
+    "declaration": true,
+    "emitDeclarationOnly": false,
+    "outDir": "dist",
+
+    "types": ["react", "react-native"]
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}