fairsure-checkout-sdk 1.0.0

package/src/components/PaystackCheckout.tsx

@@ -0,0 +1,506 @@
+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";
+
+type CheckoutProps = {
+  theme?: "light" | "dark";
+  requestId: string;
+  customerEmail: string;
+  customerName: string;
+  customerPhone: string;
+  amount: number;
+  merchantName?: string;
+  onClose: () => void;
+  onSuccess?: (reference: string) => void;
+};
+
+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,
+}: CheckoutProps) {
+  const checkout = usePaymentCheckout(
+    amount,
+    requestId,
+    customerEmail,
+    customerName,
+    customerPhone,
+    (reference) => {
+      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,
+}: {
+  merchantName: string;
+  amount: number;
+  formatAmount: (value: number) => string;
+  onClose: () => void;
+}) {
+  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
+  },
+});