@reevit/react 0.3.5 → 0.3.6

package/dist/index.mjs

@@ -1,5 +1,6 @@
 import { createContext, useReducer, useRef, useEffect, useCallback, useState, useContext } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import CheckoutSdk from '@hubteljs/checkout';
 
 // src/components/ReevitCheckout.tsx
 
@@ -804,74 +805,69 @@ function PaystackBridge({
     /* @__PURE__ */ 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 = useRef(false);
+  const checkoutRef = useRef(null);
   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 checkout = new CheckoutSdk();
+      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) {
@@ -883,7 +879,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]);
   useEffect(() => {
     if (autoStart && !initialized.current) {
       initialized.current = true;
@@ -895,6 +891,37 @@ function HubtelBridge({
     /* @__PURE__ */ jsx("p", { children: "Connecting to Hubtel..." })
   ] }) });
 }
+function openHubtelPopup(config) {
+  const checkout = new CheckoutSdk();
+  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) {
@@ -1888,6 +1915,6 @@ function ReevitCheckout({
   ] });
 }
 
-export { FlutterwaveBridge, HubtelBridge, MPesaBridge, MobileMoneyForm, MonnifyBridge, PaymentMethodSelector, PaystackBridge, ReevitAPIClient, ReevitCheckout, StripeBridge, createReevitClient, detectNetwork, formatAmount, formatPhone, loadFlutterwaveScript, loadHubtelScript, loadMonnifyScript, loadPaystackScript, loadStripeScript, useMPesaStatusPolling, useReevit, useReevitContext, validatePhone };
+export { FlutterwaveBridge, HubtelBridge, MPesaBridge, MobileMoneyForm, MonnifyBridge, PaymentMethodSelector, PaystackBridge, ReevitAPIClient, ReevitCheckout, StripeBridge, createReevitClient, detectNetwork, formatAmount, formatPhone, loadFlutterwaveScript, loadMonnifyScript, loadPaystackScript, loadStripeScript, openHubtelPopup, useMPesaStatusPolling, useReevit, useReevitContext, validatePhone };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map