@reevit/react 0.3.2 → 0.3.4

package/dist/index.js

@@ -113,7 +113,7 @@ var ReevitAPIClient = class {
       "Content-Type": "application/json",
       "X-Reevit-Key": this.publicKey,
       "X-Reevit-Client": "@reevit/react",
-      "X-Reevit-Client-Version": "0.2.5"
+      "X-Reevit-Client-Version": "0.3.2"
     };
     if (method === "POST" || method === "PATCH" || method === "PUT") {
       headers["Idempotency-Key"] = `${Date.now()}-${Math.random().toString(36).substring(2, 15)}`;
@@ -269,6 +269,9 @@ function mapProviderToPsp(provider) {
   if (providerLower.includes("paystack")) return "paystack";
   if (providerLower.includes("hubtel")) return "hubtel";
   if (providerLower.includes("flutterwave")) return "flutterwave";
+  if (providerLower.includes("monnify")) return "monnify";
+  if (providerLower.includes("mpesa") || providerLower.includes("m-pesa")) return "mpesa";
+  if (providerLower.includes("stripe")) return "stripe";
   return "paystack";
 }
 function mapToPaymentIntent(response, config) {
@@ -803,384 +806,102 @@ function PaystackBridge({
     /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Connecting to Paystack..." })
   ] }) });
 }
-var ReevitContext = react.createContext(null);
-function useReevitContext() {
-  const context = react.useContext(ReevitContext);
-  if (!context) {
-    throw new Error("useReevitContext must be used within ReevitCheckout");
-  }
-  return context;
+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 ReevitCheckout({
-  // Config
-  publicKey,
+function HubtelBridge({
+  merchantAccount,
   amount,
-  currency,
-  email = "",
-  phone = "",
+  currency = "GHS",
   reference,
-  metadata,
-  paymentMethods = ["card", "mobile_money"],
-  initialPaymentIntent,
-  // Callbacks
+  email,
+  phone,
+  description = "Payment",
   onSuccess,
   onError,
   onClose,
-  onStateChange,
-  // UI
-  children,
-  autoOpen = false,
-  isOpen: controlledIsOpen,
-  onOpenChange,
-  theme,
-  apiBaseUrl
+  autoStart = true
 }) {
-  const [internalIsOpen, setInternalIsOpen] = react.useState(autoOpen);
-  const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
-  const setIsOpen = react.useCallback(
-    (value) => {
-      if (onOpenChange) {
-        onOpenChange(value);
-      } else {
-        setInternalIsOpen(value);
+  const initialized = react.useRef(false);
+  const startPayment = react.useCallback(async () => {
+    try {
+      await loadHubtelScript();
+      if (!window.HubtelCheckout) {
+        throw new Error("Hubtel checkout not available");
       }
-    },
-    [onOpenChange]
-  );
-  const [showPSPBridge, setShowPSPBridge] = react.useState(false);
-  const [momoData, setMomoData] = react.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,
-      initialPaymentIntent
-    },
-    apiBaseUrl,
-    onSuccess: (result2) => {
-      onSuccess?.(result2);
-      setTimeout(() => {
-        setIsOpen(false);
-      }, 2e3);
-    },
-    onError,
-    onClose: () => {
-      setIsOpen(false);
-      onClose?.();
-    },
-    onStateChange
-  });
-  react.useEffect(() => {
-    if (isOpen && status === "idle" && !initialPaymentIntent) {
-      initialize();
+      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);
     }
-  }, [isOpen, status, initialize, initialPaymentIntent]);
+  }, [merchantAccount, amount, currency, reference, email, phone, description, onSuccess, onError, onClose]);
   react.useEffect(() => {
-    if (isOpen && selectedMethod && paymentIntent && !showPSPBridge) {
-      if (selectedMethod === "card") {
-        setShowPSPBridge(true);
-      } else if (selectedMethod === "mobile_money" && (momoData?.phone || phone)) {
-        setShowPSPBridge(true);
-      }
-    }
-  }, [isOpen, selectedMethod, showPSPBridge, paymentIntent, momoData, phone]);
-  const handleOpen = react.useCallback(() => {
-    if (controlledIsOpen !== void 0) return;
-    setIsOpen(true);
-    setShowPSPBridge(false);
-    setMomoData(null);
-  }, [controlledIsOpen, setIsOpen]);
-  const handleClose = react.useCallback(() => {
-    closeCheckout();
-    setIsOpen(false);
-    setShowPSPBridge(false);
-    setMomoData(null);
-  }, [closeCheckout, setIsOpen]);
-  const handleMethodSelect = react.useCallback(
-    (method) => {
-      selectMethod(method);
-    },
-    [selectMethod]
-  );
-  const handleContinue = react.useCallback(() => {
-    if (!selectedMethod) return;
-    if (selectedMethod === "card") {
-      setShowPSPBridge(true);
-    }
-  }, [selectedMethod]);
-  const handleMomoSubmit = react.useCallback(
-    (data) => {
-      setMomoData(data);
-      setShowPSPBridge(true);
-    },
-    []
-  );
-  const handlePSPSuccess = react.useCallback(
-    (pspResult) => {
-      processPayment({ ...pspResult, momoData });
-    },
-    [processPayment, momoData]
-  );
-  const handlePSPError = react.useCallback(
-    (error2) => {
-      setShowPSPBridge(false);
-      onError?.(error2);
-    },
-    [onError]
-  );
-  const handlePSPClose = react.useCallback(() => {
-    setShowPSPBridge(false);
-  }, []);
-  const handleBack = react.useCallback(() => {
-    reset();
-    setMomoData(null);
-    setShowPSPBridge(false);
-  }, [reset]);
-  const themeStyles = theme ? createThemeVariables(theme) : {};
-  const isControlled = controlledIsOpen !== void 0;
-  const trigger = children ? /* @__PURE__ */ jsxRuntime.jsx("span", { onClick: isControlled ? void 0 : handleOpen, role: isControlled ? void 0 : "button", tabIndex: isControlled ? void 0 : 0, children }) : !isControlled ? /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "reevit-trigger-btn", onClick: handleOpen, children: [
-    "Pay ",
-    formatAmount(amount, currency)
-  ] }) : null;
-  const renderContent = () => {
-    if (status === "loading" || status === "processing") {
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-loading", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-spinner" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { children: status === "loading" ? "Preparing checkout..." : "Processing payment..." })
-      ] });
-    }
-    if (status === "success" && result) {
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-success", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-success__icon", children: "\u2713" }),
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { children: "Payment Successful" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
-          "Reference: ",
-          result.reference
-        ] })
-      ] });
+    if (autoStart && !initialized.current) {
+      initialized.current = true;
+      startPayment();
     }
-    if (status === "failed" && error && !error.recoverable) {
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-error", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-error__icon", children: "\u2715" }),
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { children: "Payment Failed" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { children: error.message }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "reevit-btn reevit-btn--primary", onClick: handleBack, children: "Try Again" })
-      ] });
-    }
-    if (showPSPBridge) {
-      const pspKey = paymentIntent?.pspPublicKey || publicKey;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        PaystackBridge,
-        {
-          publicKey: pspKey,
-          email,
-          phone: momoData?.phone || phone,
-          amount: paymentIntent?.amount ?? amount,
-          currency: paymentIntent?.currency ?? currency,
-          reference,
-          accessCode: paymentIntent?.clientSecret,
-          metadata: {
-            ...metadata,
-            // Override with correct payment intent ID for webhook routing
-            // This ensures Paystack webhook includes the correct ID to find the payment
-            payment_id: paymentIntent?.id,
-            connection_id: paymentIntent?.connectionId ?? metadata?.connection_id,
-            customer_phone: momoData?.phone || phone
-          },
-          channels: selectedMethod === "mobile_money" ? ["mobile_money"] : ["card"],
-          onSuccess: handlePSPSuccess,
-          onError: handlePSPError,
-          onClose: handlePSPClose
-        }
-      );
-    }
-    if (selectedMethod === "mobile_money" && !showPSPBridge) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        MobileMoneyForm,
-        {
-          onSubmit: handleMomoSubmit,
-          onCancel: handleBack,
-          isLoading,
-          initialPhone: phone
-        }
-      );
-    }
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-method-step", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        PaymentMethodSelector,
-        {
-          methods: paymentMethods,
-          selectedMethod,
-          onSelect: handleMethodSelect,
-          disabled: isLoading
-        }
-      ),
-      selectedMethod && selectedMethod !== "mobile_money" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-method-step__actions", children: /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          className: "reevit-btn reevit-btn--primary",
-          onClick: handleContinue,
-          disabled: isLoading,
-          children: "Continue"
-        }
-      ) })
-    ] });
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(ReevitContext.Provider, { value: { publicKey, amount, currency }, children: [
-    trigger,
-    isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-overlay", onClick: handleClose, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: cn("reevit-modal", isComplete && "reevit-modal--success"),
-        style: themeStyles,
-        onClick: (e) => e.stopPropagation(),
-        role: "dialog",
-        "aria-modal": "true",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-modal__header", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-modal__branding", children: /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
-              {
-                src: "https://i.imgur.com/bzUR5Lm.png",
-                alt: "Reevit",
-                className: "reevit-modal__logo"
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                className: "reevit-modal__close",
-                onClick: handleClose,
-                "aria-label": "Close",
-                children: "\u2715"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-modal__amount", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "reevit-modal__amount-label", children: "Amount" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "reevit-modal__amount-value", children: formatAmount(amount, currency) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-modal__content", children: renderContent() }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-modal__footer", children: /* @__PURE__ */ jsxRuntime.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 = react.useRef(false);
-  const startPayment = react.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]);
-  react.useEffect(() => {
-    if (autoStart && !initialized.current) {
-      initialized.current = true;
-      startPayment();
-    }
-  }, [autoStart, startPayment]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-psp-bridge reevit-psp-bridge--hubtel", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-psp-bridge__loading", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-spinner" }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Connecting to Hubtel..." })
-  ] }) });
-}
-function loadFlutterwaveScript() {
-  return new Promise((resolve, reject) => {
-    if (window.FlutterwaveCheckout) {
-      resolve();
-      return;
+  }, [autoStart, startPayment]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-psp-bridge reevit-psp-bridge--hubtel", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-psp-bridge__loading", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-spinner" }),
+    /* @__PURE__ */ jsxRuntime.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";
@@ -1301,202 +1022,41 @@ function FlutterwaveBridge({
     /* @__PURE__ */ jsxRuntime.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;
+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;
   }
-  stripeScriptPromise = new Promise((resolve, reject) => {
+  monnifyScriptPromise = new Promise((resolve, reject) => {
     const script = document.createElement("script");
-    script.id = "stripe-js-script";
-    script.src = STRIPE_SCRIPT_URL;
+    script.id = "monnify-sdk-script";
+    script.src = MONNIFY_SCRIPT_URL;
     script.async = true;
     script.onload = () => resolve();
-    script.onerror = () => reject(new Error("Failed to load Stripe.js"));
+    script.onerror = () => reject(new Error("Failed to load Monnify SDK"));
     document.head.appendChild(script);
   });
-  return stripeScriptPromise;
+  return monnifyScriptPromise;
 }
-function StripeBridge({
-  publishableKey,
-  clientSecret,
+function MonnifyBridge({
+  apiKey,
+  contractCode,
   amount,
   currency,
-  appearance,
+  reference,
+  customerName,
+  customerEmail,
+  customerPhone,
+  paymentDescription,
+  isTestMode = false,
+  metadata,
+  autoOpen = true,
   onSuccess,
   onError,
-  onReady,
-  onCancel
-}) {
-  const [isLoading, setIsLoading] = react.useState(true);
-  const [isSubmitting, setIsSubmitting] = react.useState(false);
-  const [error, setError] = react.useState(null);
-  const stripeRef = react.useRef(null);
-  const elementsRef = react.useRef(null);
-  const paymentElementRef = react.useRef(null);
-  const containerRef = react.useRef(null);
-  react.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 = react.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__ */ jsxRuntime.jsxs("div", { className: "reevit-stripe-bridge", children: [
-    isLoading && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-stripe-loading", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-spinner" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Loading secure payment form..." })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref: containerRef,
-        className: "reevit-stripe-element",
-        style: { display: isLoading ? "none" : "block", minHeight: "200px" }
-      }
-    ),
-    error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-stripe-error", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: error }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-stripe-actions", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          className: "reevit-submit-btn",
-          onClick: handleSubmit,
-          disabled: isLoading || isSubmitting,
-          children: isSubmitting ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "reevit-spinner" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            "Pay ",
-            currency,
-            " ",
-            (amount / 100).toFixed(2)
-          ] })
-        }
-      ),
-      onCancel && /* @__PURE__ */ jsxRuntime.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
+  onClose
 }) {
   const [isLoading, setIsLoading] = react.useState(true);
   const [isReady, setIsReady] = react.useState(false);
@@ -1753,6 +1313,582 @@ function useMPesaStatusPolling(statusEndpoint, checkoutRequestId, options) {
   }, [checkoutRequestId, statusEndpoint, interval, maxAttempts, headers, onSuccess, onFailed, onTimeout]);
   return { startPolling };
 }
+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] = react.useState(true);
+  const [isSubmitting, setIsSubmitting] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const stripeRef = react.useRef(null);
+  const elementsRef = react.useRef(null);
+  const paymentElementRef = react.useRef(null);
+  const containerRef = react.useRef(null);
+  react.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 = react.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__ */ jsxRuntime.jsxs("div", { className: "reevit-stripe-bridge", children: [
+    isLoading && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-stripe-loading", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-spinner" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Loading secure payment form..." })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: containerRef,
+        className: "reevit-stripe-element",
+        style: { display: isLoading ? "none" : "block", minHeight: "200px" }
+      }
+    ),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-stripe-error", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: error }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-stripe-actions", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "reevit-submit-btn",
+          onClick: handleSubmit,
+          disabled: isLoading || isSubmitting,
+          children: isSubmitting ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "reevit-spinner" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            "Pay ",
+            currency,
+            " ",
+            (amount / 100).toFixed(2)
+          ] })
+        }
+      ),
+      onCancel && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "reevit-cancel-btn",
+          onClick: onCancel,
+          disabled: isSubmitting,
+          children: "Cancel"
+        }
+      )
+    ] })
+  ] });
+}
+var ReevitContext = react.createContext(null);
+function useReevitContext() {
+  const context = react.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"],
+  initialPaymentIntent,
+  // Callbacks
+  onSuccess,
+  onError,
+  onClose,
+  onStateChange,
+  // UI
+  children,
+  autoOpen = false,
+  isOpen: controlledIsOpen,
+  onOpenChange,
+  theme,
+  apiBaseUrl
+}) {
+  const [internalIsOpen, setInternalIsOpen] = react.useState(autoOpen);
+  const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
+  const setIsOpen = react.useCallback(
+    (value) => {
+      if (onOpenChange) {
+        onOpenChange(value);
+      } else {
+        setInternalIsOpen(value);
+      }
+    },
+    [onOpenChange]
+  );
+  const [showPSPBridge, setShowPSPBridge] = react.useState(false);
+  const [momoData, setMomoData] = react.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,
+      initialPaymentIntent
+    },
+    apiBaseUrl,
+    onSuccess: (result2) => {
+      onSuccess?.(result2);
+      setTimeout(() => {
+        setIsOpen(false);
+      }, 2e3);
+    },
+    onError,
+    onClose: () => {
+      setIsOpen(false);
+      onClose?.();
+    },
+    onStateChange
+  });
+  react.useEffect(() => {
+    if (isOpen && status === "idle" && !initialPaymentIntent) {
+      initialize();
+    }
+  }, [isOpen, status, initialize, initialPaymentIntent]);
+  react.useEffect(() => {
+    if (isOpen && selectedMethod && paymentIntent && !showPSPBridge) {
+      if (selectedMethod === "card") {
+        setShowPSPBridge(true);
+      } else if (selectedMethod === "mobile_money" && (momoData?.phone || phone)) {
+        setShowPSPBridge(true);
+      }
+    }
+  }, [isOpen, selectedMethod, showPSPBridge, paymentIntent, momoData, phone]);
+  const handleOpen = react.useCallback(() => {
+    if (controlledIsOpen !== void 0) return;
+    setIsOpen(true);
+    setShowPSPBridge(false);
+    setMomoData(null);
+  }, [controlledIsOpen, setIsOpen]);
+  const handleClose = react.useCallback(() => {
+    closeCheckout();
+    setIsOpen(false);
+    setShowPSPBridge(false);
+    setMomoData(null);
+  }, [closeCheckout, setIsOpen]);
+  const handleMethodSelect = react.useCallback(
+    (method) => {
+      selectMethod(method);
+    },
+    [selectMethod]
+  );
+  const handleContinue = react.useCallback(() => {
+    if (!selectedMethod) return;
+    if (selectedMethod === "card") {
+      setShowPSPBridge(true);
+    }
+  }, [selectedMethod]);
+  const handleMomoSubmit = react.useCallback(
+    (data) => {
+      setMomoData(data);
+      setShowPSPBridge(true);
+    },
+    []
+  );
+  const handlePSPSuccess = react.useCallback(
+    (pspResult) => {
+      processPayment({ ...pspResult, momoData });
+    },
+    [processPayment, momoData]
+  );
+  const handlePSPError = react.useCallback(
+    (error2) => {
+      setShowPSPBridge(false);
+      onError?.(error2);
+    },
+    [onError]
+  );
+  const handlePSPClose = react.useCallback(() => {
+    setShowPSPBridge(false);
+  }, []);
+  const handleBack = react.useCallback(() => {
+    reset();
+    setMomoData(null);
+    setShowPSPBridge(false);
+  }, [reset]);
+  const themeStyles = theme ? createThemeVariables(theme) : {};
+  const isControlled = controlledIsOpen !== void 0;
+  const trigger = children ? /* @__PURE__ */ jsxRuntime.jsx("span", { onClick: isControlled ? void 0 : handleOpen, role: isControlled ? void 0 : "button", tabIndex: isControlled ? void 0 : 0, children }) : !isControlled ? /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "reevit-trigger-btn", onClick: handleOpen, children: [
+    "Pay ",
+    formatAmount(amount, currency)
+  ] }) : null;
+  const renderContent = () => {
+    if (status === "loading" || status === "processing") {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-loading", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-spinner" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { children: status === "loading" ? "Preparing checkout..." : "Processing payment..." })
+      ] });
+    }
+    if (status === "success" && result) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-success", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-success__icon", children: "\u2713" }),
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { children: "Payment Successful" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+          "Reference: ",
+          result.reference
+        ] })
+      ] });
+    }
+    if (status === "failed" && error && !error.recoverable) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-error", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-error__icon", children: "\u2715" }),
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { children: "Payment Failed" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { children: error.message }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "reevit-btn reevit-btn--primary", onClick: handleBack, children: "Try Again" })
+      ] });
+    }
+    if (showPSPBridge) {
+      const pspKey = paymentIntent?.pspPublicKey || publicKey;
+      const psp = paymentIntent?.recommendedPsp || "paystack";
+      const bridgeMetadata = {
+        ...metadata,
+        // Override with correct payment intent ID for webhook routing
+        // This ensures webhook includes the correct ID to find the payment
+        payment_id: paymentIntent?.id,
+        connection_id: paymentIntent?.connectionId ?? metadata?.connection_id,
+        customer_phone: momoData?.phone || phone
+      };
+      switch (psp) {
+        case "paystack":
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            PaystackBridge,
+            {
+              publicKey: pspKey,
+              email,
+              phone: momoData?.phone || phone,
+              amount: paymentIntent?.amount ?? amount,
+              currency: paymentIntent?.currency ?? currency,
+              reference,
+              accessCode: paymentIntent?.clientSecret,
+              metadata: bridgeMetadata,
+              channels: selectedMethod === "mobile_money" ? ["mobile_money"] : ["card"],
+              onSuccess: handlePSPSuccess,
+              onError: handlePSPError,
+              onClose: handlePSPClose
+            }
+          );
+        case "hubtel":
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            HubtelBridge,
+            {
+              merchantAccount: pspKey,
+              amount: paymentIntent?.amount ?? amount,
+              currency: paymentIntent?.currency ?? currency,
+              reference: paymentIntent?.reference || reference,
+              email,
+              phone: momoData?.phone || phone,
+              description: `Payment ${paymentIntent?.reference || reference || ""}`,
+              onSuccess: handlePSPSuccess,
+              onError: (err) => handlePSPError(err),
+              onClose: handlePSPClose
+            }
+          );
+        case "flutterwave":
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            FlutterwaveBridge,
+            {
+              publicKey: pspKey,
+              amount: paymentIntent?.amount ?? amount,
+              currency: paymentIntent?.currency ?? currency,
+              reference: paymentIntent?.reference || reference,
+              email,
+              phone: momoData?.phone || phone,
+              metadata: bridgeMetadata,
+              onSuccess: handlePSPSuccess,
+              onError: (err) => handlePSPError(err),
+              onClose: handlePSPClose
+            }
+          );
+        case "monnify":
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            MonnifyBridge,
+            {
+              apiKey: pspKey,
+              contractCode: metadata?.contract_code || pspKey,
+              amount: paymentIntent?.amount ?? amount,
+              currency: paymentIntent?.currency ?? currency,
+              reference: paymentIntent?.reference || reference || `monnify_${Date.now()}`,
+              customerName: metadata?.customer_name || email,
+              customerEmail: email,
+              customerPhone: momoData?.phone || phone,
+              metadata: bridgeMetadata,
+              onSuccess: (result2) => handlePSPSuccess({
+                paymentId: result2.transactionReference,
+                reference: result2.paymentReference,
+                amount: result2.amount,
+                currency: paymentIntent?.currency ?? currency,
+                paymentMethod: selectedMethod || "card",
+                psp: "monnify",
+                pspReference: result2.transactionReference,
+                status: "success"
+              }),
+              onError: (err) => handlePSPError({
+                code: err.code,
+                message: err.message,
+                recoverable: true
+              }),
+              onClose: handlePSPClose
+            }
+          );
+        case "mpesa":
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            MPesaBridge,
+            {
+              apiEndpoint: `${apiBaseUrl || "https://api.reevit.io"}/v1/payments/${paymentIntent?.id}/mpesa`,
+              phoneNumber: momoData?.phone || phone || "",
+              amount: paymentIntent?.amount ?? amount,
+              currency: paymentIntent?.currency ?? currency,
+              reference: paymentIntent?.reference || reference || `mpesa_${Date.now()}`,
+              description: `Payment ${paymentIntent?.reference || reference || ""}`,
+              headers: { "x-reevit-public-key": publicKey },
+              onSuccess: (result2) => handlePSPSuccess({
+                paymentId: result2.transactionId,
+                reference: result2.reference,
+                amount: paymentIntent?.amount ?? amount,
+                currency: paymentIntent?.currency ?? currency,
+                paymentMethod: "mobile_money",
+                psp: "mpesa",
+                pspReference: result2.transactionId,
+                status: "success"
+              }),
+              onError: (err) => handlePSPError({
+                code: err.code,
+                message: err.message,
+                recoverable: true
+              })
+            }
+          );
+        case "stripe":
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            StripeBridge,
+            {
+              publishableKey: pspKey,
+              clientSecret: paymentIntent?.clientSecret || "",
+              amount: paymentIntent?.amount ?? amount,
+              currency: paymentIntent?.currency ?? currency,
+              onSuccess: (result2) => handlePSPSuccess({
+                paymentId: result2.paymentIntentId,
+                reference: paymentIntent?.reference || reference || result2.paymentIntentId,
+                amount: paymentIntent?.amount ?? amount,
+                currency: paymentIntent?.currency ?? currency,
+                paymentMethod: selectedMethod || "card",
+                psp: "stripe",
+                pspReference: result2.paymentIntentId,
+                status: result2.status === "succeeded" ? "success" : "pending"
+              }),
+              onError: (err) => handlePSPError({
+                code: err.code,
+                message: err.message,
+                recoverable: true
+              }),
+              onCancel: handlePSPClose
+            }
+          );
+        default:
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-error", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-error__icon", children: "\u26A0\uFE0F" }),
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { children: "Payment Provider Not Supported" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+              "The selected payment provider (",
+              psp,
+              ") is not currently supported in this checkout."
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { className: "reevit-btn reevit-btn--primary", onClick: handleBack, children: "Go Back" })
+          ] });
+      }
+    }
+    if (selectedMethod === "mobile_money" && !showPSPBridge) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        MobileMoneyForm,
+        {
+          onSubmit: handleMomoSubmit,
+          onCancel: handleBack,
+          isLoading,
+          initialPhone: phone
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-method-step", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        PaymentMethodSelector,
+        {
+          methods: paymentMethods,
+          selectedMethod,
+          onSelect: handleMethodSelect,
+          disabled: isLoading
+        }
+      ),
+      selectedMethod && selectedMethod !== "mobile_money" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-method-step__actions", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          className: "reevit-btn reevit-btn--primary",
+          onClick: handleContinue,
+          disabled: isLoading,
+          children: "Continue"
+        }
+      ) })
+    ] });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(ReevitContext.Provider, { value: { publicKey, amount, currency }, children: [
+    trigger,
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-overlay", onClick: handleClose, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn("reevit-modal", isComplete && "reevit-modal--success"),
+        style: themeStyles,
+        onClick: (e) => e.stopPropagation(),
+        role: "dialog",
+        "aria-modal": "true",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-modal__header", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-modal__branding", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: "https://i.imgur.com/bzUR5Lm.png",
+                alt: "Reevit",
+                className: "reevit-modal__logo"
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: "reevit-modal__close",
+                onClick: handleClose,
+                "aria-label": "Close",
+                children: "\u2715"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-modal__amount", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "reevit-modal__amount-label", children: "Amount" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "reevit-modal__amount-value", children: formatAmount(amount, currency) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-modal__content", children: renderContent() }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-modal__footer", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "reevit-modal__secured", children: "\u{1F512} Secured by Reevit" }) })
+        ]
+      }
+    ) })
+  ] });
+}
 
 exports.FlutterwaveBridge = FlutterwaveBridge;
 exports.HubtelBridge = HubtelBridge;