@reevit/react 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1612 @@
+import { createContext, useReducer, useRef, useEffect, useCallback, useState, useContext } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/components/ReevitCheckout.tsx
+
+// src/utils/index.ts
+function formatAmount(amount, currency) {
+  const formatter = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency,
+    minimumFractionDigits: 2
+  });
+  return formatter.format(amount / 100);
+}
+function generateReference() {
+  const timestamp = Date.now().toString(36);
+  const random = Math.random().toString(36).substring(2, 8);
+  return `reevit_${timestamp}_${random}`;
+}
+function validatePhone(phone, network) {
+  const cleaned = phone.replace(/[\s-]/g, "");
+  const patterns = {
+    mtn: /^(0|233|\+233)?(24|54|55|59)\d{7}$/,
+    vodafone: /^(0|233|\+233)?(20|50)\d{7}$/,
+    airteltigo: /^(0|233|\+233)?(26|27|56|57)\d{7}$/
+  };
+  if (network && patterns[network]) {
+    return patterns[network].test(cleaned);
+  }
+  return Object.values(patterns).some((pattern) => pattern.test(cleaned));
+}
+function formatPhone(phone) {
+  const cleaned = phone.replace(/[\s-]/g, "");
+  if (cleaned.startsWith("0") && cleaned.length === 10) {
+    return `${cleaned.slice(0, 3)} ${cleaned.slice(3, 6)} ${cleaned.slice(6)}`;
+  }
+  if (cleaned.startsWith("+233") && cleaned.length === 13) {
+    return `${cleaned.slice(0, 4)} ${cleaned.slice(4, 6)} ${cleaned.slice(6, 9)} ${cleaned.slice(9)}`;
+  }
+  return phone;
+}
+function detectNetwork(phone) {
+  const cleaned = phone.replace(/[\s-]/g, "");
+  const prefixes = {
+    mtn: ["024", "054", "055", "059", "23324", "23354", "23355", "23359"],
+    vodafone: ["020", "050", "23320", "23350"],
+    airteltigo: ["026", "027", "056", "057", "23326", "23327", "23356", "23357"]
+  };
+  for (const [network, networkPrefixes] of Object.entries(prefixes)) {
+    for (const prefix of networkPrefixes) {
+      if (cleaned.startsWith(prefix) || cleaned.startsWith("0" + prefix.slice(3))) {
+        return network;
+      }
+    }
+  }
+  return null;
+}
+function createThemeVariables(theme) {
+  const variables = {};
+  if (theme.primaryColor) {
+    variables["--reevit-primary"] = theme.primaryColor;
+  }
+  if (theme.backgroundColor) {
+    variables["--reevit-background"] = theme.backgroundColor;
+  }
+  if (theme.textColor) {
+    variables["--reevit-text"] = theme.textColor;
+  }
+  if (theme.borderRadius) {
+    variables["--reevit-radius"] = theme.borderRadius;
+  }
+  if (theme.fontFamily) {
+    variables["--reevit-font"] = theme.fontFamily;
+  }
+  return variables;
+}
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+// src/api/client.ts
+var API_BASE_URL_PRODUCTION = "https://api.reevit.io";
+var API_BASE_URL_SANDBOX = "https://sandbox-api.reevit.io";
+var DEFAULT_TIMEOUT = 3e4;
+function isSandboxKey(publicKey) {
+  return publicKey.startsWith("pk_test_") || publicKey.startsWith("pk_sandbox_");
+}
+function createPaymentError(response, errorData) {
+  return {
+    code: errorData.code || "api_error",
+    message: errorData.message || "An unexpected error occurred",
+    details: {
+      httpStatus: response.status,
+      ...errorData.details
+    }
+  };
+}
+var ReevitAPIClient = class {
+  constructor(config) {
+    this.publicKey = config.publicKey;
+    this.baseUrl = config.baseUrl || (isSandboxKey(config.publicKey) ? API_BASE_URL_SANDBOX : API_BASE_URL_PRODUCTION);
+    this.timeout = config.timeout || DEFAULT_TIMEOUT;
+  }
+  /**
+   * Makes an authenticated API request
+   */
+  async request(method, path, body) {
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), this.timeout);
+    try {
+      const response = await fetch(`${this.baseUrl}${path}`, {
+        method,
+        headers: {
+          "Content-Type": "application/json",
+          "Authorization": `Bearer ${this.publicKey}`,
+          "X-Reevit-Client": "@reevit/react",
+          "X-Reevit-Client-Version": "1.0.0"
+        },
+        body: body ? JSON.stringify(body) : void 0,
+        signal: controller.signal
+      });
+      clearTimeout(timeoutId);
+      const responseData = await response.json().catch(() => ({}));
+      if (!response.ok) {
+        return {
+          error: createPaymentError(response, responseData)
+        };
+      }
+      return { data: responseData };
+    } catch (err) {
+      clearTimeout(timeoutId);
+      if (err instanceof Error) {
+        if (err.name === "AbortError") {
+          return {
+            error: {
+              code: "request_timeout",
+              message: "The request timed out. Please try again."
+            }
+          };
+        }
+        if (err.message.includes("Failed to fetch") || err.message.includes("NetworkError")) {
+          return {
+            error: {
+              code: "network_error",
+              message: "Unable to connect to Reevit. Please check your internet connection."
+            }
+          };
+        }
+      }
+      return {
+        error: {
+          code: "unknown_error",
+          message: "An unexpected error occurred. Please try again."
+        }
+      };
+    }
+  }
+  /**
+   * Creates a payment intent
+   */
+  async createPaymentIntent(config, method, country = "GH") {
+    const request = {
+      amount: config.amount,
+      currency: config.currency,
+      method: this.mapPaymentMethod(method),
+      country,
+      customer_id: config.metadata?.customerId,
+      metadata: config.metadata
+    };
+    return this.request("POST", "/v1/payments/intents", request);
+  }
+  /**
+   * Retrieves a payment intent by ID
+   */
+  async getPaymentIntent(paymentId) {
+    return this.request("GET", `/v1/payments/${paymentId}`);
+  }
+  /**
+   * Confirms a payment after PSP callback
+   */
+  async confirmPayment(paymentId) {
+    return this.request("POST", `/v1/payments/${paymentId}/confirm`);
+  }
+  /**
+   * Cancels a payment intent
+   */
+  async cancelPaymentIntent(paymentId) {
+    return this.request("POST", `/v1/payments/${paymentId}/cancel`);
+  }
+  /**
+   * Maps SDK payment method to backend format
+   */
+  mapPaymentMethod(method) {
+    switch (method) {
+      case "card":
+        return "card";
+      case "mobile_money":
+        return "mobile_money";
+      case "bank_transfer":
+        return "bank_transfer";
+      default:
+        return method;
+    }
+  }
+};
+function createReevitClient(config) {
+  return new ReevitAPIClient(config);
+}
+
+// src/hooks/useReevit.ts
+var initialState = {
+  status: "idle",
+  paymentIntent: null,
+  selectedMethod: null,
+  error: null,
+  result: null
+};
+function reevitReducer(state, action) {
+  switch (action.type) {
+    case "INIT_START":
+      return { ...state, status: "loading", error: null };
+    case "INIT_SUCCESS":
+      return { ...state, status: "ready", paymentIntent: action.payload };
+    case "INIT_ERROR":
+      return { ...state, status: "failed", error: action.payload };
+    case "SELECT_METHOD":
+      return { ...state, status: "method_selected", selectedMethod: action.payload };
+    case "PROCESS_START":
+      return { ...state, status: "processing", error: null };
+    case "PROCESS_SUCCESS":
+      return { ...state, status: "success", result: action.payload };
+    case "PROCESS_ERROR":
+      return { ...state, status: "failed", error: action.payload };
+    case "RESET":
+      return { ...initialState, status: "ready", paymentIntent: state.paymentIntent };
+    case "CLOSE":
+      return { ...state, status: "closed" };
+    default:
+      return state;
+  }
+}
+function mapProviderToPsp(provider) {
+  const providerLower = provider.toLowerCase();
+  if (providerLower.includes("paystack")) return "paystack";
+  if (providerLower.includes("hubtel")) return "hubtel";
+  if (providerLower.includes("flutterwave")) return "flutterwave";
+  return "paystack";
+}
+function mapToPaymentIntent(response, config) {
+  return {
+    id: response.id,
+    clientSecret: response.client_secret,
+    amount: response.amount,
+    currency: response.currency,
+    status: response.status,
+    recommendedPsp: mapProviderToPsp(response.provider),
+    availableMethods: config.paymentMethods || ["card", "mobile_money"],
+    connectionId: response.connection_id,
+    provider: response.provider,
+    feeAmount: response.fee_amount,
+    feeCurrency: response.fee_currency,
+    netAmount: response.net_amount,
+    metadata: config.metadata
+  };
+}
+function useReevit(options) {
+  const { config, onSuccess, onError, onClose, onStateChange, apiBaseUrl } = options;
+  const [state, dispatch] = useReducer(reevitReducer, initialState);
+  const apiClientRef = useRef(null);
+  if (!apiClientRef.current) {
+    apiClientRef.current = new ReevitAPIClient({
+      publicKey: config.publicKey,
+      baseUrl: apiBaseUrl
+    });
+  }
+  useEffect(() => {
+    onStateChange?.(state.status);
+  }, [state.status, onStateChange]);
+  const initialize = useCallback(
+    async (method) => {
+      dispatch({ type: "INIT_START" });
+      try {
+        const apiClient = apiClientRef.current;
+        if (!apiClient) {
+          throw new Error("API client not initialized");
+        }
+        const reference = config.reference || generateReference();
+        const country = detectCountryFromCurrency(config.currency);
+        const paymentMethod = method || config.paymentMethods?.[0] || "card";
+        const { data, error } = await apiClient.createPaymentIntent(
+          { ...config, reference },
+          paymentMethod,
+          country
+        );
+        if (error) {
+          dispatch({ type: "INIT_ERROR", payload: error });
+          onError?.(error);
+          return;
+        }
+        if (!data) {
+          const noDataError = {
+            code: "INIT_FAILED",
+            message: "No data received from API",
+            recoverable: true
+          };
+          dispatch({ type: "INIT_ERROR", payload: noDataError });
+          onError?.(noDataError);
+          return;
+        }
+        const paymentIntent = mapToPaymentIntent(data, { ...config, reference });
+        dispatch({ type: "INIT_SUCCESS", payload: paymentIntent });
+      } catch (err) {
+        const error = {
+          code: "INIT_FAILED",
+          message: err instanceof Error ? err.message : "Failed to initialize checkout",
+          recoverable: true,
+          originalError: err
+        };
+        dispatch({ type: "INIT_ERROR", payload: error });
+        onError?.(error);
+      }
+    },
+    [config, onError, apiBaseUrl]
+  );
+  const selectMethod = useCallback((method) => {
+    dispatch({ type: "SELECT_METHOD", payload: method });
+  }, []);
+  const processPayment = useCallback(
+    async (paymentData) => {
+      if (!state.paymentIntent || !state.selectedMethod) {
+        return;
+      }
+      dispatch({ type: "PROCESS_START" });
+      try {
+        const apiClient = apiClientRef.current;
+        if (!apiClient) {
+          throw new Error("API client not initialized");
+        }
+        const { data, error } = await apiClient.confirmPayment(state.paymentIntent.id);
+        if (error) {
+          dispatch({ type: "PROCESS_ERROR", payload: error });
+          onError?.(error);
+          return;
+        }
+        const result = {
+          paymentId: state.paymentIntent.id,
+          reference: paymentData.reference || state.paymentIntent.metadata?.reference || "",
+          amount: state.paymentIntent.amount,
+          currency: state.paymentIntent.currency,
+          paymentMethod: state.selectedMethod,
+          psp: state.paymentIntent.recommendedPsp,
+          pspReference: paymentData.pspReference || data?.provider_ref_id || "",
+          status: "success",
+          metadata: paymentData
+        };
+        dispatch({ type: "PROCESS_SUCCESS", payload: result });
+        onSuccess?.(result);
+      } catch (err) {
+        const error = {
+          code: "PAYMENT_FAILED",
+          message: err instanceof Error ? err.message : "Payment failed. Please try again.",
+          recoverable: true,
+          originalError: err
+        };
+        dispatch({ type: "PROCESS_ERROR", payload: error });
+        onError?.(error);
+      }
+    },
+    [state.paymentIntent, state.selectedMethod, onSuccess, onError]
+  );
+  const handlePspSuccess = useCallback(
+    async (pspData) => {
+      await processPayment(pspData);
+    },
+    [processPayment]
+  );
+  const handlePspError = useCallback(
+    (error) => {
+      dispatch({ type: "PROCESS_ERROR", payload: error });
+      onError?.(error);
+    },
+    [onError]
+  );
+  const reset = useCallback(() => {
+    dispatch({ type: "RESET" });
+  }, []);
+  const close = useCallback(async () => {
+    if (state.paymentIntent && state.status !== "success") {
+      try {
+        const apiClient = apiClientRef.current;
+        if (apiClient) {
+          await apiClient.cancelPaymentIntent(state.paymentIntent.id);
+        }
+      } catch {
+      }
+    }
+    dispatch({ type: "CLOSE" });
+    onClose?.();
+  }, [onClose, state.paymentIntent, state.status]);
+  return {
+    // State
+    status: state.status,
+    paymentIntent: state.paymentIntent,
+    selectedMethod: state.selectedMethod,
+    error: state.error,
+    result: state.result,
+    // Actions
+    initialize,
+    selectMethod,
+    processPayment,
+    handlePspSuccess,
+    handlePspError,
+    reset,
+    close,
+    // Computed
+    isLoading: state.status === "loading" || state.status === "processing",
+    isReady: state.status === "ready" || state.status === "method_selected",
+    isComplete: state.status === "success",
+    canRetry: state.error?.recoverable ?? false
+  };
+}
+function detectCountryFromCurrency(currency) {
+  const currencyToCountry = {
+    GHS: "GH",
+    // Ghana
+    NGN: "NG",
+    // Nigeria
+    KES: "KE",
+    // Kenya
+    UGX: "UG",
+    // Uganda
+    TZS: "TZ",
+    // Tanzania
+    ZAR: "ZA",
+    // South Africa
+    XOF: "CI",
+    // Côte d'Ivoire (CFA)
+    XAF: "CM",
+    // Cameroon (CFA)
+    USD: "US",
+    // United States
+    EUR: "DE",
+    // Europe (default to Germany)
+    GBP: "GB"
+    // United Kingdom
+  };
+  return currencyToCountry[currency.toUpperCase()] || "GH";
+}
+var methodConfig = {
+  card: {
+    label: "Card",
+    icon: "\u{1F4B3}",
+    description: "Pay with Visa, Mastercard, or other cards"
+  },
+  mobile_money: {
+    label: "Mobile Money",
+    icon: "\u{1F4F1}",
+    description: "MTN, Vodafone Cash, AirtelTigo Money"
+  },
+  bank_transfer: {
+    label: "Bank Transfer",
+    icon: "\u{1F3E6}",
+    description: "Pay directly from your bank account"
+  }
+};
+function PaymentMethodSelector({
+  methods,
+  selectedMethod,
+  onSelect,
+  disabled = false
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "reevit-method-selector", children: [
+    /* @__PURE__ */ jsx("div", { className: "reevit-method-selector__label", children: "Select payment method" }),
+    /* @__PURE__ */ jsx("div", { className: "reevit-method-selector__options", children: methods.map((method) => {
+      const config = methodConfig[method];
+      const isSelected = selectedMethod === method;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: cn(
+            "reevit-method-option",
+            isSelected && "reevit-method-option--selected",
+            disabled && "reevit-method-option--disabled"
+          ),
+          onClick: () => onSelect(method),
+          disabled,
+          "aria-pressed": isSelected,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "reevit-method-option__icon", children: config.icon }),
+            /* @__PURE__ */ jsxs("div", { className: "reevit-method-option__content", children: [
+              /* @__PURE__ */ jsx("span", { className: "reevit-method-option__label", children: config.label }),
+              /* @__PURE__ */ jsx("span", { className: "reevit-method-option__description", children: config.description })
+            ] }),
+            isSelected && /* @__PURE__ */ jsx("span", { className: "reevit-method-option__check", children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M16.667 5L7.5 14.167 3.333 10",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            ) }) })
+          ]
+        },
+        method
+      );
+    }) })
+  ] });
+}
+var networks = [
+  { id: "mtn", name: "MTN", color: "#FFCC00" },
+  { id: "vodafone", name: "Vodafone", color: "#E60000" },
+  { id: "airteltigo", name: "AirtelTigo", color: "#E4002B" }
+];
+function MobileMoneyForm({
+  onSubmit,
+  onCancel,
+  isLoading = false,
+  initialPhone = ""
+}) {
+  const [phone, setPhone] = useState(initialPhone);
+  const [network, setNetwork] = useState(null);
+  const [error, setError] = useState(null);
+  const [touched, setTouched] = useState(false);
+  useEffect(() => {
+    if (phone.length >= 3) {
+      const detected = detectNetwork(phone);
+      if (detected) {
+        setNetwork(detected);
+      }
+    }
+  }, [phone]);
+  useEffect(() => {
+    if (touched && phone) {
+      if (!validatePhone(phone)) {
+        setError("Please enter a valid Ghana phone number");
+      } else if (network && !validatePhone(phone, network)) {
+        setError(`This number doesn't match the selected network`);
+      } else {
+        setError(null);
+      }
+    }
+  }, [phone, network, touched]);
+  const handlePhoneChange = useCallback((e) => {
+    const value = e.target.value.replace(/[^0-9+]/g, "");
+    setPhone(value);
+  }, []);
+  const handleSubmit = useCallback(
+    (e) => {
+      e.preventDefault();
+      setTouched(true);
+      if (!phone || !network) {
+        setError("Please enter your phone number and select a network");
+        return;
+      }
+      if (!validatePhone(phone, network)) {
+        setError("Invalid phone number for selected network");
+        return;
+      }
+      onSubmit({ phone, network });
+    },
+    [phone, network, onSubmit]
+  );
+  const isValid = phone && network && validatePhone(phone, network);
+  return /* @__PURE__ */ jsxs("form", { className: "reevit-momo-form", onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsxs("div", { className: "reevit-momo-form__field", children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: "reevit-phone", className: "reevit-momo-form__label", children: "Phone Number" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: "reevit-phone",
+          type: "tel",
+          className: cn("reevit-momo-form__input", !!error && "reevit-momo-form__input--error"),
+          placeholder: "024 XXX XXXX",
+          value: phone,
+          onChange: handlePhoneChange,
+          onBlur: () => setTouched(true),
+          disabled: isLoading,
+          autoComplete: "tel"
+        }
+      ),
+      phone && !error && /* @__PURE__ */ jsx("div", { className: "reevit-momo-form__formatted", children: formatPhone(phone) }),
+      error && /* @__PURE__ */ jsx("div", { className: "reevit-momo-form__error", children: error })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "reevit-momo-form__field", children: [
+      /* @__PURE__ */ jsx("label", { className: "reevit-momo-form__label", children: "Select Network" }),
+      /* @__PURE__ */ jsx("div", { className: "reevit-momo-form__networks", children: networks.map((n) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: cn(
+            "reevit-network-btn",
+            network === n.id && "reevit-network-btn--selected"
+          ),
+          style: { "--network-color": n.color },
+          onClick: () => setNetwork(n.id),
+          disabled: isLoading,
+          children: n.name
+        },
+        n.id
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "reevit-momo-form__actions", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "reevit-btn reevit-btn--secondary",
+          onClick: onCancel,
+          disabled: isLoading,
+          children: "Back"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "submit",
+          className: "reevit-btn reevit-btn--primary",
+          disabled: !isValid || isLoading,
+          children: isLoading ? /* @__PURE__ */ jsx("span", { className: "reevit-spinner" }) : "Continue"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "reevit-momo-form__hint", children: "You will receive a USSD prompt on your phone to authorize the payment." })
+  ] });
+}
+function loadPaystackScript() {
+  return new Promise((resolve, reject) => {
+    if (window.PaystackPop) {
+      resolve();
+      return;
+    }
+    const script = document.createElement("script");
+    script.src = "https://js.paystack.co/v2/inline.js";
+    script.async = true;
+    script.onload = () => resolve();
+    script.onerror = () => reject(new Error("Failed to load Paystack script"));
+    document.head.appendChild(script);
+  });
+}
+function PaystackBridge({
+  publicKey,
+  email,
+  amount,
+  currency = "GHS",
+  reference,
+  metadata,
+  channels = ["card", "mobile_money"],
+  onSuccess,
+  onError,
+  onClose,
+  autoStart = true
+}) {
+  const initialized = useRef(false);
+  const startPayment = useCallback(async () => {
+    try {
+      await loadPaystackScript();
+      if (!window.PaystackPop) {
+        throw new Error("Paystack not available");
+      }
+      const handler = window.PaystackPop.setup({
+        key: publicKey,
+        email,
+        amount,
+        // Paystack expects amount in kobo/pesewas (smallest unit)
+        currency,
+        ref: reference,
+        metadata,
+        channels,
+        callback: (response) => {
+          const result = {
+            paymentId: response.transaction,
+            reference: response.reference,
+            amount,
+            currency,
+            paymentMethod: "card",
+            // Paystack handles this internally
+            psp: "paystack",
+            pspReference: response.trans,
+            status: response.status === "success" ? "success" : "pending",
+            metadata: { trxref: response.trxref }
+          };
+          onSuccess(result);
+        },
+        onClose: () => {
+          onClose();
+        }
+      });
+      handler.openIframe();
+    } catch (err) {
+      const error = {
+        code: "PSP_ERROR",
+        message: "Failed to initialize Paystack",
+        recoverable: true,
+        originalError: err
+      };
+      onError(error);
+    }
+  }, [publicKey, email, amount, currency, reference, metadata, channels, onSuccess, onError, onClose]);
+  useEffect(() => {
+    if (autoStart && !initialized.current) {
+      initialized.current = true;
+      startPayment();
+    }
+  }, [autoStart, startPayment]);
+  return /* @__PURE__ */ jsx("div", { className: "reevit-psp-bridge reevit-psp-bridge--paystack", children: /* @__PURE__ */ jsxs("div", { className: "reevit-psp-bridge__loading", children: [
+    /* @__PURE__ */ jsx("div", { className: "reevit-spinner" }),
+    /* @__PURE__ */ jsx("p", { children: "Connecting to Paystack..." })
+  ] }) });
+}
+var ReevitContext = createContext(null);
+function useReevitContext() {
+  const context = useContext(ReevitContext);
+  if (!context) {
+    throw new Error("useReevitContext must be used within ReevitCheckout");
+  }
+  return context;
+}
+function ReevitCheckout({
+  // Config
+  publicKey,
+  amount,
+  currency,
+  email = "",
+  phone = "",
+  reference,
+  metadata,
+  paymentMethods = ["card", "mobile_money"],
+  // Callbacks
+  onSuccess,
+  onError,
+  onClose,
+  onStateChange,
+  // UI
+  children,
+  autoOpen = false,
+  theme
+}) {
+  const [isOpen, setIsOpen] = useState(autoOpen);
+  const [showPSPBridge, setShowPSPBridge] = useState(false);
+  const [momoData, setMomoData] = useState(null);
+  const {
+    status,
+    paymentIntent,
+    selectedMethod,
+    error,
+    result,
+    initialize,
+    selectMethod,
+    processPayment,
+    reset,
+    close: closeCheckout,
+    isLoading,
+    isComplete
+  } = useReevit({
+    config: { publicKey, amount, currency, email, phone, reference, metadata, paymentMethods },
+    onSuccess: (result2) => {
+      onSuccess?.(result2);
+      setTimeout(() => {
+        setIsOpen(false);
+      }, 2e3);
+    },
+    onError,
+    onClose: () => {
+      setIsOpen(false);
+      onClose?.();
+    },
+    onStateChange
+  });
+  useEffect(() => {
+    if (isOpen && status === "idle") {
+      initialize();
+    }
+  }, [isOpen, status, initialize]);
+  const handleOpen = useCallback(() => {
+    setIsOpen(true);
+    setShowPSPBridge(false);
+    setMomoData(null);
+  }, []);
+  const handleClose = useCallback(() => {
+    closeCheckout();
+    setIsOpen(false);
+    setShowPSPBridge(false);
+    setMomoData(null);
+  }, [closeCheckout]);
+  const handleMethodSelect = useCallback(
+    (method) => {
+      selectMethod(method);
+    },
+    [selectMethod]
+  );
+  const handleContinue = useCallback(() => {
+    if (!selectedMethod) return;
+    if (selectedMethod === "card") {
+      setShowPSPBridge(true);
+    }
+  }, [selectedMethod]);
+  const handleMomoSubmit = useCallback(
+    (data) => {
+      setMomoData(data);
+      setShowPSPBridge(true);
+    },
+    []
+  );
+  const handlePSPSuccess = useCallback(
+    (pspResult) => {
+      processPayment({ ...pspResult, momoData });
+    },
+    [processPayment, momoData]
+  );
+  const handlePSPError = useCallback(
+    (error2) => {
+      setShowPSPBridge(false);
+      onError?.(error2);
+    },
+    [onError]
+  );
+  const handlePSPClose = useCallback(() => {
+    setShowPSPBridge(false);
+  }, []);
+  const handleBack = useCallback(() => {
+    reset();
+    setMomoData(null);
+    setShowPSPBridge(false);
+  }, [reset]);
+  const themeStyles = theme ? createThemeVariables(theme) : {};
+  const trigger = children ? /* @__PURE__ */ jsx("span", { onClick: handleOpen, role: "button", tabIndex: 0, children }) : /* @__PURE__ */ jsxs("button", { className: "reevit-trigger-btn", onClick: handleOpen, children: [
+    "Pay ",
+    formatAmount(amount, currency)
+  ] });
+  const renderContent = () => {
+    if (status === "loading") {
+      return /* @__PURE__ */ jsxs("div", { className: "reevit-loading", children: [
+        /* @__PURE__ */ jsx("div", { className: "reevit-spinner" }),
+        /* @__PURE__ */ jsx("p", { children: "Preparing checkout..." })
+      ] });
+    }
+    if (status === "success" && result) {
+      return /* @__PURE__ */ jsxs("div", { className: "reevit-success", children: [
+        /* @__PURE__ */ jsx("div", { className: "reevit-success__icon", children: "\u2713" }),
+        /* @__PURE__ */ jsx("h3", { children: "Payment Successful" }),
+        /* @__PURE__ */ jsxs("p", { children: [
+          "Reference: ",
+          result.reference
+        ] })
+      ] });
+    }
+    if (status === "failed" && error && !error.recoverable) {
+      return /* @__PURE__ */ jsxs("div", { className: "reevit-error", children: [
+        /* @__PURE__ */ jsx("div", { className: "reevit-error__icon", children: "\u2715" }),
+        /* @__PURE__ */ jsx("h3", { children: "Payment Failed" }),
+        /* @__PURE__ */ jsx("p", { children: error.message }),
+        /* @__PURE__ */ jsx("button", { className: "reevit-btn reevit-btn--primary", onClick: handleBack, children: "Try Again" })
+      ] });
+    }
+    if (showPSPBridge) {
+      return /* @__PURE__ */ jsx(
+        PaystackBridge,
+        {
+          publicKey,
+          email,
+          amount,
+          currency,
+          reference,
+          metadata,
+          channels: selectedMethod === "mobile_money" ? ["mobile_money"] : ["card"],
+          onSuccess: handlePSPSuccess,
+          onError: handlePSPError,
+          onClose: handlePSPClose
+        }
+      );
+    }
+    if (selectedMethod === "mobile_money" && !showPSPBridge) {
+      return /* @__PURE__ */ jsx(
+        MobileMoneyForm,
+        {
+          onSubmit: handleMomoSubmit,
+          onCancel: handleBack,
+          isLoading,
+          initialPhone: phone
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs("div", { className: "reevit-method-step", children: [
+      /* @__PURE__ */ jsx(
+        PaymentMethodSelector,
+        {
+          methods: paymentMethods,
+          selectedMethod,
+          onSelect: handleMethodSelect,
+          disabled: isLoading
+        }
+      ),
+      selectedMethod && selectedMethod !== "mobile_money" && /* @__PURE__ */ jsx("div", { className: "reevit-method-step__actions", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "reevit-btn reevit-btn--primary",
+          onClick: handleContinue,
+          disabled: isLoading,
+          children: "Continue"
+        }
+      ) })
+    ] });
+  };
+  return /* @__PURE__ */ jsxs(ReevitContext.Provider, { value: { publicKey, amount, currency }, children: [
+    trigger,
+    isOpen && /* @__PURE__ */ jsx("div", { className: "reevit-overlay", onClick: handleClose, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("reevit-modal", isComplete && "reevit-modal--success"),
+        style: themeStyles,
+        onClick: (e) => e.stopPropagation(),
+        role: "dialog",
+        "aria-modal": "true",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "reevit-modal__header", children: [
+            /* @__PURE__ */ jsx("div", { className: "reevit-modal__branding", children: /* @__PURE__ */ jsx("span", { className: "reevit-modal__logo", children: "Reevit" }) }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "reevit-modal__close",
+                onClick: handleClose,
+                "aria-label": "Close",
+                children: "\u2715"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "reevit-modal__amount", children: [
+            /* @__PURE__ */ jsx("span", { className: "reevit-modal__amount-label", children: "Amount" }),
+            /* @__PURE__ */ jsx("span", { className: "reevit-modal__amount-value", children: formatAmount(amount, currency) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "reevit-modal__content", children: renderContent() }),
+          /* @__PURE__ */ jsx("div", { className: "reevit-modal__footer", children: /* @__PURE__ */ jsx("span", { className: "reevit-modal__secured", children: "\u{1F512} Secured by Reevit" }) })
+        ]
+      }
+    ) })
+  ] });
+}
+function loadHubtelScript() {
+  return new Promise((resolve, reject) => {
+    if (window.HubtelCheckout) {
+      resolve();
+      return;
+    }
+    const script = document.createElement("script");
+    script.src = "https://checkout.hubtel.com/checkout.js";
+    script.async = true;
+    script.onload = () => resolve();
+    script.onerror = () => reject(new Error("Failed to load Hubtel script"));
+    document.head.appendChild(script);
+  });
+}
+function HubtelBridge({
+  merchantAccount,
+  amount,
+  currency = "GHS",
+  reference,
+  email,
+  phone,
+  description = "Payment",
+  onSuccess,
+  onError,
+  onClose,
+  autoStart = true
+}) {
+  const initialized = useRef(false);
+  const startPayment = useCallback(async () => {
+    try {
+      await loadHubtelScript();
+      if (!window.HubtelCheckout) {
+        throw new Error("Hubtel checkout not available");
+      }
+      window.HubtelCheckout.initPayment({
+        merchantAccount,
+        basicDescription: description,
+        totalAmount: amount / 100,
+        // Hubtel expects amount in major units (GHS, not pesewas)
+        currency,
+        clientReference: reference || `hubtel_${Date.now()}`,
+        customerEmail: email,
+        customerMsisdn: phone,
+        onComplete: (response) => {
+          if (response.status === "Success") {
+            const result = {
+              paymentId: response.transactionId,
+              reference: response.clientReference,
+              amount: Math.round(response.amount * 100),
+              // Convert back to pesewas
+              currency: response.currency,
+              paymentMethod: "mobile_money",
+              psp: "hubtel",
+              pspReference: response.transactionId,
+              status: "success"
+            };
+            onSuccess(result);
+          } else {
+            const error = {
+              code: "PAYMENT_FAILED",
+              message: response.message || "Payment failed",
+              recoverable: true
+            };
+            onError(error);
+          }
+        },
+        onCancel: () => {
+          onClose();
+        }
+      });
+    } catch (err) {
+      const error = {
+        code: "PSP_ERROR",
+        message: "Failed to initialize Hubtel",
+        recoverable: true,
+        originalError: err
+      };
+      onError(error);
+    }
+  }, [merchantAccount, amount, currency, reference, email, phone, description, onSuccess, onError, onClose]);
+  useEffect(() => {
+    if (autoStart && !initialized.current) {
+      initialized.current = true;
+      startPayment();
+    }
+  }, [autoStart, startPayment]);
+  return /* @__PURE__ */ jsx("div", { className: "reevit-psp-bridge reevit-psp-bridge--hubtel", children: /* @__PURE__ */ jsxs("div", { className: "reevit-psp-bridge__loading", children: [
+    /* @__PURE__ */ jsx("div", { className: "reevit-spinner" }),
+    /* @__PURE__ */ jsx("p", { children: "Connecting to Hubtel..." })
+  ] }) });
+}
+function loadFlutterwaveScript() {
+  return new Promise((resolve, reject) => {
+    if (window.FlutterwaveCheckout) {
+      resolve();
+      return;
+    }
+    const script = document.createElement("script");
+    script.src = "https://checkout.flutterwave.com/v3.js";
+    script.async = true;
+    script.onload = () => resolve();
+    script.onerror = () => reject(new Error("Failed to load Flutterwave script"));
+    document.head.appendChild(script);
+  });
+}
+function FlutterwaveBridge({
+  publicKey,
+  amount,
+  currency = "GHS",
+  reference,
+  email,
+  phone,
+  name,
+  paymentOptions = "card,mobilemoney,ussd",
+  title,
+  description,
+  logo,
+  metadata,
+  onSuccess,
+  onError,
+  onClose,
+  autoStart = true
+}) {
+  const initialized = useRef(false);
+  const startPayment = useCallback(async () => {
+    try {
+      await loadFlutterwaveScript();
+      if (!window.FlutterwaveCheckout) {
+        throw new Error("Flutterwave checkout not available");
+      }
+      const txRef = reference || `flw_${Date.now()}_${Math.random().toString(36).slice(2)}`;
+      window.FlutterwaveCheckout({
+        public_key: publicKey,
+        tx_ref: txRef,
+        amount: amount / 100,
+        // Flutterwave expects amount in major units
+        currency,
+        payment_options: paymentOptions,
+        customer: {
+          email,
+          phone_number: phone,
+          name
+        },
+        customizations: {
+          title,
+          description,
+          logo
+        },
+        meta: metadata,
+        callback: (response) => {
+          if (response.status === "successful") {
+            const result = {
+              paymentId: response.transaction_id.toString(),
+              reference: response.tx_ref,
+              amount: Math.round(response.amount * 100),
+              currency: response.currency,
+              paymentMethod: response.payment_type === "mobilemoney" ? "mobile_money" : "card",
+              psp: "flutterwave",
+              pspReference: response.flw_ref,
+              status: "success",
+              metadata: {
+                charged_amount: response.charged_amount,
+                payment_type: response.payment_type
+              }
+            };
+            onSuccess(result);
+          } else {
+            const error = {
+              code: response.status === "cancelled" ? "CANCELLED" : "PAYMENT_FAILED",
+              message: response.status === "cancelled" ? "Payment was cancelled" : "Payment failed",
+              recoverable: true
+            };
+            onError(error);
+          }
+        },
+        onclose: () => {
+          onClose();
+        }
+      });
+    } catch (err) {
+      const error = {
+        code: "PSP_ERROR",
+        message: "Failed to initialize Flutterwave",
+        recoverable: true,
+        originalError: err
+      };
+      onError(error);
+    }
+  }, [
+    publicKey,
+    amount,
+    currency,
+    reference,
+    email,
+    phone,
+    name,
+    paymentOptions,
+    title,
+    description,
+    logo,
+    metadata,
+    onSuccess,
+    onError,
+    onClose
+  ]);
+  useEffect(() => {
+    if (autoStart && !initialized.current) {
+      initialized.current = true;
+      startPayment();
+    }
+  }, [autoStart, startPayment]);
+  return /* @__PURE__ */ jsx("div", { className: "reevit-psp-bridge reevit-psp-bridge--flutterwave", children: /* @__PURE__ */ jsxs("div", { className: "reevit-psp-bridge__loading", children: [
+    /* @__PURE__ */ jsx("div", { className: "reevit-spinner" }),
+    /* @__PURE__ */ jsx("p", { children: "Connecting to Flutterwave..." })
+  ] }) });
+}
+var STRIPE_SCRIPT_URL = "https://js.stripe.com/v3/";
+var stripeScriptPromise = null;
+function loadStripeScript() {
+  if (stripeScriptPromise) return stripeScriptPromise;
+  if (document.getElementById("stripe-js-script")) {
+    stripeScriptPromise = Promise.resolve();
+    return stripeScriptPromise;
+  }
+  stripeScriptPromise = new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.id = "stripe-js-script";
+    script.src = STRIPE_SCRIPT_URL;
+    script.async = true;
+    script.onload = () => resolve();
+    script.onerror = () => reject(new Error("Failed to load Stripe.js"));
+    document.head.appendChild(script);
+  });
+  return stripeScriptPromise;
+}
+function StripeBridge({
+  publishableKey,
+  clientSecret,
+  amount,
+  currency,
+  appearance,
+  onSuccess,
+  onError,
+  onReady,
+  onCancel
+}) {
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState(null);
+  const stripeRef = useRef(null);
+  const elementsRef = useRef(null);
+  const paymentElementRef = useRef(null);
+  const containerRef = useRef(null);
+  useEffect(() => {
+    let mounted = true;
+    const initStripe = async () => {
+      try {
+        await loadStripeScript();
+        if (!mounted || !window.Stripe) {
+          throw new Error("Stripe not available");
+        }
+        stripeRef.current = window.Stripe(publishableKey);
+        elementsRef.current = stripeRef.current.elements({
+          clientSecret,
+          appearance: appearance || { theme: "stripe" }
+        });
+        paymentElementRef.current = elementsRef.current.create("payment");
+        if (containerRef.current) {
+          paymentElementRef.current.mount(containerRef.current);
+        }
+        paymentElementRef.current.on("ready", () => {
+          if (mounted) {
+            setIsLoading(false);
+            onReady?.();
+          }
+        });
+        paymentElementRef.current.on("change", (event) => {
+          if (event.error) {
+            setError(event.error.message);
+          } else {
+            setError(null);
+          }
+        });
+      } catch (err) {
+        if (mounted) {
+          const message = err instanceof Error ? err.message : "Failed to initialize Stripe";
+          setError(message);
+          setIsLoading(false);
+          onError({ code: "STRIPE_INIT_ERROR", message });
+        }
+      }
+    };
+    initStripe();
+    return () => {
+      mounted = false;
+      paymentElementRef.current?.destroy();
+    };
+  }, [publishableKey, clientSecret, appearance, onReady, onError]);
+  const handleSubmit = useCallback(async () => {
+    if (!stripeRef.current || !elementsRef.current) {
+      onError({ code: "NOT_INITIALIZED", message: "Stripe not initialized" });
+      return;
+    }
+    setIsSubmitting(true);
+    setError(null);
+    try {
+      const { error: submitError } = await elementsRef.current.submit();
+      if (submitError) {
+        setError(submitError.message);
+        onError({ code: submitError.code || "VALIDATION_ERROR", message: submitError.message });
+        setIsSubmitting(false);
+        return;
+      }
+      const { error: confirmError, paymentIntent } = await stripeRef.current.confirmPayment({
+        elements: elementsRef.current,
+        redirect: "if_required"
+      });
+      if (confirmError) {
+        setError(confirmError.message);
+        onError({ code: confirmError.code || "PAYMENT_ERROR", message: confirmError.message });
+      } else if (paymentIntent) {
+        onSuccess({
+          paymentIntentId: paymentIntent.id,
+          status: paymentIntent.status
+        });
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Payment failed";
+      setError(message);
+      onError({ code: "UNKNOWN_ERROR", message });
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [onSuccess, onError]);
+  return /* @__PURE__ */ jsxs("div", { className: "reevit-stripe-bridge", children: [
+    isLoading && /* @__PURE__ */ jsxs("div", { className: "reevit-stripe-loading", children: [
+      /* @__PURE__ */ jsx("div", { className: "reevit-spinner" }),
+      /* @__PURE__ */ jsx("p", { children: "Loading secure payment form..." })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: containerRef,
+        className: "reevit-stripe-element",
+        style: { display: isLoading ? "none" : "block", minHeight: "200px" }
+      }
+    ),
+    error && /* @__PURE__ */ jsx("div", { className: "reevit-stripe-error", children: /* @__PURE__ */ jsx("p", { children: error }) }),
+    /* @__PURE__ */ jsxs("div", { className: "reevit-stripe-actions", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "reevit-submit-btn",
+          onClick: handleSubmit,
+          disabled: isLoading || isSubmitting,
+          children: isSubmitting ? /* @__PURE__ */ jsx("span", { className: "reevit-spinner" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            "Pay ",
+            currency,
+            " ",
+            (amount / 100).toFixed(2)
+          ] })
+        }
+      ),
+      onCancel && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "reevit-cancel-btn",
+          onClick: onCancel,
+          disabled: isSubmitting,
+          children: "Cancel"
+        }
+      )
+    ] })
+  ] });
+}
+var MONNIFY_SCRIPT_URL = "https://sdk.monnify.com/plugin/monnify.js";
+var monnifyScriptPromise = null;
+function loadMonnifyScript() {
+  if (monnifyScriptPromise) return monnifyScriptPromise;
+  if (document.getElementById("monnify-sdk-script")) {
+    monnifyScriptPromise = Promise.resolve();
+    return monnifyScriptPromise;
+  }
+  monnifyScriptPromise = new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.id = "monnify-sdk-script";
+    script.src = MONNIFY_SCRIPT_URL;
+    script.async = true;
+    script.onload = () => resolve();
+    script.onerror = () => reject(new Error("Failed to load Monnify SDK"));
+    document.head.appendChild(script);
+  });
+  return monnifyScriptPromise;
+}
+function MonnifyBridge({
+  apiKey,
+  contractCode,
+  amount,
+  currency,
+  reference,
+  customerName,
+  customerEmail,
+  customerPhone,
+  paymentDescription,
+  isTestMode = false,
+  metadata,
+  autoOpen = true,
+  onSuccess,
+  onError,
+  onClose
+}) {
+  const [isLoading, setIsLoading] = useState(true);
+  const [isReady, setIsReady] = useState(false);
+  const openMonnify = useCallback(async () => {
+    try {
+      await loadMonnifyScript();
+      if (!window.MonnifySDK) {
+        throw new Error("Monnify SDK not available");
+      }
+      window.MonnifySDK.initialize({
+        amount,
+        currency: currency || "NGN",
+        reference,
+        customerName,
+        customerEmail,
+        customerMobileNumber: customerPhone,
+        apiKey,
+        contractCode,
+        paymentDescription: paymentDescription || "Payment",
+        isTestMode,
+        metadata,
+        onComplete: (response) => {
+          if (response.status === "SUCCESS") {
+            onSuccess({
+              transactionReference: response.transactionReference,
+              paymentReference: response.paymentReference,
+              amount: response.authorizedAmount || amount
+            });
+          } else {
+            onError({
+              code: "MONNIFY_PAYMENT_FAILED",
+              message: response.message || "Payment was not successful"
+            });
+          }
+        },
+        onClose: () => {
+          onClose?.();
+        }
+      });
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Failed to open Monnify";
+      onError({ code: "MONNIFY_INIT_ERROR", message });
+    }
+  }, [
+    amount,
+    currency,
+    reference,
+    customerName,
+    customerEmail,
+    customerPhone,
+    apiKey,
+    contractCode,
+    paymentDescription,
+    isTestMode,
+    metadata,
+    onSuccess,
+    onError,
+    onClose
+  ]);
+  useEffect(() => {
+    const init = async () => {
+      try {
+        await loadMonnifyScript();
+        setIsReady(true);
+        setIsLoading(false);
+        if (autoOpen) {
+          openMonnify();
+        }
+      } catch (err) {
+        setIsLoading(false);
+        const message = err instanceof Error ? err.message : "Failed to load Monnify";
+        onError({ code: "MONNIFY_LOAD_ERROR", message });
+      }
+    };
+    init();
+  }, [autoOpen, openMonnify, onError]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", { className: "reevit-monnify-bridge", children: /* @__PURE__ */ jsxs("div", { className: "reevit-monnify-loading", children: [
+      /* @__PURE__ */ jsx("div", { className: "reevit-spinner" }),
+      /* @__PURE__ */ jsx("p", { children: "Loading Monnify checkout..." })
+    ] }) });
+  }
+  if (!autoOpen && isReady) {
+    return /* @__PURE__ */ jsx("div", { className: "reevit-monnify-bridge", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "reevit-submit-btn",
+        onClick: openMonnify,
+        children: "Pay with Monnify"
+      }
+    ) });
+  }
+  return null;
+}
+function MPesaBridge({
+  apiEndpoint,
+  phoneNumber,
+  amount,
+  currency,
+  reference,
+  description,
+  onInitiated,
+  onSuccess,
+  onError,
+  headers = {}
+}) {
+  const [state, setState] = useState("idle");
+  const [error, setError] = useState(null);
+  const [checkoutRequestId, setCheckoutRequestId] = useState(null);
+  const initiateSTKPush = useCallback(async () => {
+    setState("initiating");
+    setError(null);
+    try {
+      const response = await fetch(apiEndpoint, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...headers
+        },
+        body: JSON.stringify({
+          phone_number: phoneNumber,
+          amount,
+          currency,
+          reference,
+          description: description || `Payment ${reference}`
+        })
+      });
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(errorData.message || `Request failed: ${response.status}`);
+      }
+      const data = await response.json();
+      const requestId = data.checkout_request_id || data.checkoutRequestId || data.transaction_id;
+      setCheckoutRequestId(requestId);
+      setState("waiting");
+      onInitiated?.(requestId);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Failed to initiate M-Pesa payment";
+      setError(message);
+      setState("failed");
+      onError({ code: "MPESA_INIT_ERROR", message });
+    }
+  }, [apiEndpoint, phoneNumber, amount, currency, reference, description, headers, onInitiated, onError]);
+  const handleRetry = useCallback(() => {
+    setState("idle");
+    setError(null);
+    initiateSTKPush();
+  }, [initiateSTKPush]);
+  if (state === "idle") {
+    return /* @__PURE__ */ jsxs("div", { className: "reevit-mpesa-bridge", children: [
+      /* @__PURE__ */ jsxs("div", { className: "reevit-mpesa-info", children: [
+        /* @__PURE__ */ jsx("div", { className: "reevit-mpesa-icon", children: "\u{1F4F1}" }),
+        /* @__PURE__ */ jsx("h3", { children: "Pay with M-Pesa" }),
+        /* @__PURE__ */ jsx("p", { children: "You will receive a prompt on your phone to complete the payment." }),
+        /* @__PURE__ */ jsxs("p", { className: "reevit-mpesa-phone", children: [
+          "Phone: ",
+          phoneNumber
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "reevit-submit-btn reevit-mpesa-btn",
+          onClick: initiateSTKPush,
+          children: "Send Payment Request"
+        }
+      )
+    ] });
+  }
+  if (state === "initiating") {
+    return /* @__PURE__ */ jsx("div", { className: "reevit-mpesa-bridge", children: /* @__PURE__ */ jsxs("div", { className: "reevit-mpesa-loading", children: [
+      /* @__PURE__ */ jsx("div", { className: "reevit-spinner reevit-spinner--large" }),
+      /* @__PURE__ */ jsx("p", { children: "Sending payment request to your phone..." })
+    ] }) });
+  }
+  if (state === "waiting") {
+    return /* @__PURE__ */ jsx("div", { className: "reevit-mpesa-bridge", children: /* @__PURE__ */ jsxs("div", { className: "reevit-mpesa-waiting", children: [
+      /* @__PURE__ */ jsx("div", { className: "reevit-mpesa-phone-icon", children: "\u{1F4F2}" }),
+      /* @__PURE__ */ jsx("h3", { children: "Check Your Phone" }),
+      /* @__PURE__ */ jsxs("p", { children: [
+        "An M-Pesa payment request has been sent to ",
+        /* @__PURE__ */ jsx("strong", { children: phoneNumber }),
+        "."
+      ] }),
+      /* @__PURE__ */ jsxs("ol", { className: "reevit-mpesa-steps", children: [
+        /* @__PURE__ */ jsx("li", { children: "Check for the M-Pesa prompt on your phone" }),
+        /* @__PURE__ */ jsx("li", { children: "Enter your M-Pesa PIN to authorize" }),
+        /* @__PURE__ */ jsx("li", { children: "Wait for confirmation" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "reevit-mpesa-waiting-indicator", children: [
+        /* @__PURE__ */ jsx("div", { className: "reevit-spinner" }),
+        /* @__PURE__ */ jsx("span", { children: "Waiting for payment confirmation..." })
+      ] }),
+      checkoutRequestId && /* @__PURE__ */ jsxs("p", { className: "reevit-mpesa-ref", children: [
+        "Request ID: ",
+        checkoutRequestId
+      ] })
+    ] }) });
+  }
+  if (state === "failed") {
+    return /* @__PURE__ */ jsx("div", { className: "reevit-mpesa-bridge", children: /* @__PURE__ */ jsxs("div", { className: "reevit-mpesa-error", children: [
+      /* @__PURE__ */ jsx("div", { className: "reevit-error-icon", children: "\u26A0\uFE0F" }),
+      /* @__PURE__ */ jsx("h3", { children: "Payment Request Failed" }),
+      /* @__PURE__ */ jsx("p", { children: error || "Something went wrong. Please try again." }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "reevit-retry-btn",
+          onClick: handleRetry,
+          children: "Try Again"
+        }
+      )
+    ] }) });
+  }
+  return null;
+}
+function useMPesaStatusPolling(statusEndpoint, checkoutRequestId, options) {
+  const { interval = 5e3, maxAttempts = 24, headers = {}, onSuccess, onFailed, onTimeout } = options;
+  const startPolling = useCallback(async () => {
+    if (!checkoutRequestId) return;
+    let attempts = 0;
+    const poll = async () => {
+      if (attempts >= maxAttempts) {
+        onTimeout();
+        return;
+      }
+      try {
+        const response = await fetch(`${statusEndpoint}?checkout_request_id=${checkoutRequestId}`, {
+          headers
+        });
+        if (!response.ok) {
+          attempts++;
+          setTimeout(poll, interval);
+          return;
+        }
+        const data = await response.json();
+        if (data.status === "success" || data.status === "completed") {
+          onSuccess({ transactionId: data.transaction_id || data.mpesa_receipt });
+        } else if (data.status === "failed" || data.status === "cancelled") {
+          onFailed({ message: data.message || "Payment failed or was cancelled" });
+        } else {
+          attempts++;
+          setTimeout(poll, interval);
+        }
+      } catch {
+        attempts++;
+        setTimeout(poll, interval);
+      }
+    };
+    poll();
+  }, [checkoutRequestId, statusEndpoint, interval, maxAttempts, headers, onSuccess, onFailed, onTimeout]);
+  return { startPolling };
+}
+
+export { FlutterwaveBridge, HubtelBridge, MPesaBridge, MobileMoneyForm, MonnifyBridge, PaymentMethodSelector, PaystackBridge, ReevitAPIClient, ReevitCheckout, StripeBridge, createReevitClient, detectNetwork, formatAmount, formatPhone, loadFlutterwaveScript, loadHubtelScript, loadMonnifyScript, loadPaystackScript, loadStripeScript, useMPesaStatusPolling, useReevit, useReevitContext, validatePhone };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map