@reevit/react 0.3.5 → 0.3.6

package/dist/index.d.mts

@@ -247,49 +247,38 @@ interface PaystackBridgeProps {
 declare function loadPaystackScript(): Promise<void>;
 declare function PaystackBridge({ publicKey, email, phone, amount, currency, reference, accessCode, metadata, channels, onSuccess, onError, onClose, autoStart, }: PaystackBridgeProps): react_jsx_runtime.JSX.Element;
 
-declare global {
-    interface Window {
-        HubtelCheckout?: HubtelCheckoutInterface;
-    }
-}
-interface HubtelCheckoutInterface {
-    initPayment: (config: HubtelConfig) => void;
-}
-interface HubtelConfig {
-    merchantAccount: string;
-    basicDescription: string;
-    totalAmount: number;
-    currency: string;
-    clientReference: string;
-    customerEmail?: string;
-    customerMsisdn?: string;
-    callbackUrl?: string;
-    onComplete?: (response: HubtelResponse) => void;
-    onCancel?: () => void;
-}
-interface HubtelResponse {
-    status: 'Success' | 'Failed' | 'Cancelled';
-    transactionId: string;
-    clientReference: string;
-    amount: number;
-    currency: string;
-    message?: string;
-}
 interface HubtelBridgeProps {
-    merchantAccount: string;
+    merchantAccount: string | number;
     amount: number;
     currency?: string;
     reference?: string;
     email?: string;
     phone?: string;
     description?: string;
+    callbackUrl?: string;
+    basicAuth?: string;
     onSuccess: (result: PaymentResult) => void;
     onError: (error: PaymentError) => void;
     onClose: () => void;
     autoStart?: boolean;
 }
-declare function loadHubtelScript(): Promise<void>;
-declare function HubtelBridge({ merchantAccount, amount, currency, reference, email, phone, description, onSuccess, onError, onClose, autoStart, }: HubtelBridgeProps): react_jsx_runtime.JSX.Element;
+declare function HubtelBridge({ merchantAccount, amount, reference, phone, description, callbackUrl, basicAuth, onSuccess, onError, onClose, autoStart, }: HubtelBridgeProps): react_jsx_runtime.JSX.Element;
+/**
+ * Opens Hubtel checkout modal directly
+ * Uses the @hubteljs/checkout npm package
+ */
+declare function openHubtelPopup(config: {
+    merchantAccount: string | number;
+    description: string;
+    amount: number;
+    clientReference?: string;
+    callbackUrl?: string;
+    customerPhoneNumber?: string;
+    basicAuth?: string;
+    onSuccess?: (data: Record<string, unknown>) => void;
+    onError?: (data: Record<string, unknown>) => void;
+    onClose?: () => void;
+}): void;
 
 declare global {
     interface Window {
@@ -663,4 +652,4 @@ declare function formatPhone(phone: string): string;
  */
 declare function detectNetwork(phone: string): string | null;
 
-export { type CheckoutState, FlutterwaveBridge, HubtelBridge, MPesaBridge, type MPesaBridgeProps, MobileMoneyForm, type MobileMoneyFormData, type MobileMoneyNetwork, MonnifyBridge, type MonnifyBridgeProps, type PaymentDetailResponse, type PaymentError, type PaymentIntent, type PaymentIntentResponse, type PaymentMethod, PaymentMethodSelector, type PaymentResult, type PaymentSource, PaystackBridge, ReevitAPIClient, type ReevitAPIClientConfig, ReevitCheckout, type ReevitCheckoutCallbacks, type ReevitCheckoutConfig, type ReevitCheckoutProps, type ReevitTheme, StripeBridge, type StripeBridgeProps, createReevitClient, detectNetwork, formatAmount, formatPhone, loadFlutterwaveScript, loadHubtelScript, loadMonnifyScript, loadPaystackScript, loadStripeScript, useMPesaStatusPolling, useReevit, useReevitContext, validatePhone };
+export { type CheckoutState, FlutterwaveBridge, HubtelBridge, MPesaBridge, type MPesaBridgeProps, MobileMoneyForm, type MobileMoneyFormData, type MobileMoneyNetwork, MonnifyBridge, type MonnifyBridgeProps, type PaymentDetailResponse, type PaymentError, type PaymentIntent, type PaymentIntentResponse, type PaymentMethod, PaymentMethodSelector, type PaymentResult, type PaymentSource, PaystackBridge, ReevitAPIClient, type ReevitAPIClientConfig, ReevitCheckout, type ReevitCheckoutCallbacks, type ReevitCheckoutConfig, type ReevitCheckoutProps, type ReevitTheme, StripeBridge, type StripeBridgeProps, createReevitClient, detectNetwork, formatAmount, formatPhone, loadFlutterwaveScript, loadMonnifyScript, loadPaystackScript, loadStripeScript, openHubtelPopup, useMPesaStatusPolling, useReevit, useReevitContext, validatePhone };

package/dist/index.d.ts

@@ -247,49 +247,38 @@ interface PaystackBridgeProps {
 declare function loadPaystackScript(): Promise<void>;
 declare function PaystackBridge({ publicKey, email, phone, amount, currency, reference, accessCode, metadata, channels, onSuccess, onError, onClose, autoStart, }: PaystackBridgeProps): react_jsx_runtime.JSX.Element;
 
-declare global {
-    interface Window {
-        HubtelCheckout?: HubtelCheckoutInterface;
-    }
-}
-interface HubtelCheckoutInterface {
-    initPayment: (config: HubtelConfig) => void;
-}
-interface HubtelConfig {
-    merchantAccount: string;
-    basicDescription: string;
-    totalAmount: number;
-    currency: string;
-    clientReference: string;
-    customerEmail?: string;
-    customerMsisdn?: string;
-    callbackUrl?: string;
-    onComplete?: (response: HubtelResponse) => void;
-    onCancel?: () => void;
-}
-interface HubtelResponse {
-    status: 'Success' | 'Failed' | 'Cancelled';
-    transactionId: string;
-    clientReference: string;
-    amount: number;
-    currency: string;
-    message?: string;
-}
 interface HubtelBridgeProps {
-    merchantAccount: string;
+    merchantAccount: string | number;
     amount: number;
     currency?: string;
     reference?: string;
     email?: string;
     phone?: string;
     description?: string;
+    callbackUrl?: string;
+    basicAuth?: string;
     onSuccess: (result: PaymentResult) => void;
     onError: (error: PaymentError) => void;
     onClose: () => void;
     autoStart?: boolean;
 }
-declare function loadHubtelScript(): Promise<void>;
-declare function HubtelBridge({ merchantAccount, amount, currency, reference, email, phone, description, onSuccess, onError, onClose, autoStart, }: HubtelBridgeProps): react_jsx_runtime.JSX.Element;
+declare function HubtelBridge({ merchantAccount, amount, reference, phone, description, callbackUrl, basicAuth, onSuccess, onError, onClose, autoStart, }: HubtelBridgeProps): react_jsx_runtime.JSX.Element;
+/**
+ * Opens Hubtel checkout modal directly
+ * Uses the @hubteljs/checkout npm package
+ */
+declare function openHubtelPopup(config: {
+    merchantAccount: string | number;
+    description: string;
+    amount: number;
+    clientReference?: string;
+    callbackUrl?: string;
+    customerPhoneNumber?: string;
+    basicAuth?: string;
+    onSuccess?: (data: Record<string, unknown>) => void;
+    onError?: (data: Record<string, unknown>) => void;
+    onClose?: () => void;
+}): void;
 
 declare global {
     interface Window {
@@ -663,4 +652,4 @@ declare function formatPhone(phone: string): string;
  */
 declare function detectNetwork(phone: string): string | null;
 
-export { type CheckoutState, FlutterwaveBridge, HubtelBridge, MPesaBridge, type MPesaBridgeProps, MobileMoneyForm, type MobileMoneyFormData, type MobileMoneyNetwork, MonnifyBridge, type MonnifyBridgeProps, type PaymentDetailResponse, type PaymentError, type PaymentIntent, type PaymentIntentResponse, type PaymentMethod, PaymentMethodSelector, type PaymentResult, type PaymentSource, PaystackBridge, ReevitAPIClient, type ReevitAPIClientConfig, ReevitCheckout, type ReevitCheckoutCallbacks, type ReevitCheckoutConfig, type ReevitCheckoutProps, type ReevitTheme, StripeBridge, type StripeBridgeProps, createReevitClient, detectNetwork, formatAmount, formatPhone, loadFlutterwaveScript, loadHubtelScript, loadMonnifyScript, loadPaystackScript, loadStripeScript, useMPesaStatusPolling, useReevit, useReevitContext, validatePhone };
+export { type CheckoutState, FlutterwaveBridge, HubtelBridge, MPesaBridge, type MPesaBridgeProps, MobileMoneyForm, type MobileMoneyFormData, type MobileMoneyNetwork, MonnifyBridge, type MonnifyBridgeProps, type PaymentDetailResponse, type PaymentError, type PaymentIntent, type PaymentIntentResponse, type PaymentMethod, PaymentMethodSelector, type PaymentResult, type PaymentSource, PaystackBridge, ReevitAPIClient, type ReevitAPIClientConfig, ReevitCheckout, type ReevitCheckoutCallbacks, type ReevitCheckoutConfig, type ReevitCheckoutProps, type ReevitTheme, StripeBridge, type StripeBridgeProps, createReevitClient, detectNetwork, formatAmount, formatPhone, loadFlutterwaveScript, loadMonnifyScript, loadPaystackScript, loadStripeScript, openHubtelPopup, useMPesaStatusPolling, useReevit, useReevitContext, validatePhone };

package/dist/index.js

@@ -2,6 +2,11 @@
 
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
+var CheckoutSdk = require('@hubteljs/checkout');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var CheckoutSdk__default = /*#__PURE__*/_interopDefault(CheckoutSdk);
 
 // src/components/ReevitCheckout.tsx
 
@@ -806,74 +811,69 @@ function PaystackBridge({
     /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Connecting to Paystack..." })
   ] }) });
 }
-function loadHubtelScript() {
-  return new Promise((resolve, reject) => {
-    if (window.HubtelCheckout) {
-      resolve();
-      return;
-    }
-    const script = document.createElement("script");
-    script.src = "https://checkout-v3.hubtel.com/js/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",
+  callbackUrl,
+  basicAuth,
   onSuccess,
   onError,
   onClose,
   autoStart = true
 }) {
   const initialized = react.useRef(false);
+  const checkoutRef = react.useRef(null);
   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 checkout = new CheckoutSdk__default.default();
+      checkoutRef.current = checkout;
+      const purchaseInfo = {
+        amount: amount / 100,
+        // Convert from minor to major units
+        purchaseDescription: description,
+        customerPhoneNumber: phone || "",
+        clientReference: reference || `hubtel_${Date.now()}`
+      };
+      const config = {
+        branding: "enabled",
+        callbackUrl: callbackUrl || window.location.href,
+        merchantAccount: typeof merchantAccount === "string" ? parseInt(merchantAccount, 10) : merchantAccount,
+        basicAuth: basicAuth || ""
+      };
+      checkout.openModal({
+        purchaseInfo,
+        config,
+        callBacks: {
+          onInit: () => console.log("Hubtel checkout initialized"),
+          onPaymentSuccess: (data) => {
             const result = {
-              paymentId: response.transactionId,
-              reference: response.clientReference,
-              amount: Math.round(response.amount * 100),
-              // Convert back to pesewas
-              currency: response.currency,
+              paymentId: data.transactionId || reference || "",
+              reference: data.clientReference || reference || "",
+              amount,
+              currency: "GHS",
               paymentMethod: "mobile_money",
               psp: "hubtel",
-              pspReference: response.transactionId,
+              pspReference: data.transactionId || "",
               status: "success"
             };
             onSuccess(result);
-          } else {
+            checkout.closePopUp();
+          },
+          onPaymentFailure: (data) => {
             const error = {
               code: "PAYMENT_FAILED",
-              message: response.message || "Payment failed",
+              message: data.message || "Payment failed",
               recoverable: true
             };
             onError(error);
+          },
+          onLoad: () => console.log("Hubtel checkout loaded"),
+          onClose: () => {
+            onClose();
           }
-        },
-        onCancel: () => {
-          onClose();
         }
       });
     } catch (err) {
@@ -885,7 +885,7 @@ function HubtelBridge({
       };
       onError(error);
     }
-  }, [merchantAccount, amount, currency, reference, email, phone, description, onSuccess, onError, onClose]);
+  }, [merchantAccount, amount, reference, phone, description, callbackUrl, basicAuth, onSuccess, onError, onClose]);
   react.useEffect(() => {
     if (autoStart && !initialized.current) {
       initialized.current = true;
@@ -897,6 +897,37 @@ function HubtelBridge({
     /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Connecting to Hubtel..." })
   ] }) });
 }
+function openHubtelPopup(config) {
+  const checkout = new CheckoutSdk__default.default();
+  const purchaseInfo = {
+    amount: config.amount,
+    purchaseDescription: config.description,
+    customerPhoneNumber: config.customerPhoneNumber || "",
+    clientReference: config.clientReference || `hubtel_${Date.now()}`
+  };
+  const checkoutConfig = {
+    branding: "enabled",
+    callbackUrl: config.callbackUrl || window.location.href,
+    merchantAccount: typeof config.merchantAccount === "string" ? parseInt(config.merchantAccount, 10) : config.merchantAccount,
+    basicAuth: config.basicAuth || ""
+  };
+  checkout.openModal({
+    purchaseInfo,
+    config: checkoutConfig,
+    callBacks: {
+      onPaymentSuccess: (data) => {
+        config.onSuccess?.(data);
+        checkout.closePopUp();
+      },
+      onPaymentFailure: (data) => {
+        config.onError?.(data);
+      },
+      onClose: () => {
+        config.onClose?.();
+      }
+    }
+  });
+}
 function loadFlutterwaveScript() {
   return new Promise((resolve, reject) => {
     if (window.FlutterwaveCheckout) {
@@ -1905,10 +1936,10 @@ exports.detectNetwork = detectNetwork;
 exports.formatAmount = formatAmount;
 exports.formatPhone = formatPhone;
 exports.loadFlutterwaveScript = loadFlutterwaveScript;
-exports.loadHubtelScript = loadHubtelScript;
 exports.loadMonnifyScript = loadMonnifyScript;
 exports.loadPaystackScript = loadPaystackScript;
 exports.loadStripeScript = loadStripeScript;
+exports.openHubtelPopup = openHubtelPopup;
 exports.useMPesaStatusPolling = useMPesaStatusPolling;
 exports.useReevit = useReevit;
 exports.useReevitContext = useReevitContext;