@reevit/react 0.3.8 → 0.4.1

package/dist/index.d.mts

@@ -258,6 +258,8 @@ 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;
 
 interface HubtelBridgeProps {
+    paymentId: string;
+    publicKey: string;
     merchantAccount: string | number;
     amount: number;
     currency?: string;
@@ -266,13 +268,16 @@ interface HubtelBridgeProps {
     phone?: string;
     description?: string;
     callbackUrl?: string;
+    /** Session token from server (recommended - credentials never exposed to client) */
+    hubtelSessionToken?: string;
+    /** Basic auth credential (legacy - credentials exposed to client, deprecated) */
     basicAuth?: string;
     onSuccess: (result: PaymentResult) => void;
     onError: (error: PaymentError) => void;
     onClose: () => void;
     autoStart?: boolean;
 }
-declare function HubtelBridge({ merchantAccount, amount, reference, phone, description, callbackUrl, basicAuth, onSuccess, onError, onClose, autoStart, }: HubtelBridgeProps): react_jsx_runtime.JSX.Element;
+declare function HubtelBridge({ paymentId, publicKey, merchantAccount, amount, reference, phone, description, callbackUrl, hubtelSessionToken, basicAuth, onSuccess, onError, onClose, autoStart, }: HubtelBridgeProps): react_jsx_runtime.JSX.Element;
 /**
  * Opens Hubtel checkout modal directly
  * Uses the @hubteljs/checkout npm package
@@ -553,6 +558,20 @@ interface PaymentIntentResponse {
     net_amount: number;
     reference?: string;
 }
+/**
+ * Response from creating a Hubtel session token.
+ * The token provides secure, short-lived access to Hubtel checkout without exposing credentials.
+ */
+interface HubtelSessionResponse {
+    /** Short-lived session token for Hubtel checkout */
+    token: string;
+    /** Hubtel merchant account number */
+    merchantAccount: string;
+    /** Token expiry time in seconds */
+    expiresInSeconds: number;
+    /** Unix timestamp when the token expires */
+    expiresAt: number;
+}
 interface PaymentDetailResponse {
     id: string;
     connection_id: string;
@@ -632,6 +651,18 @@ declare class ReevitAPIClient {
         data?: PaymentDetailResponse;
         error?: PaymentError;
     }>;
+    /**
+     * Creates a Hubtel session token for secure checkout.
+     * This endpoint generates a short-lived token that maps to Hubtel credentials server-side,
+     * avoiding exposure of sensitive credentials to the client.
+     *
+     * @param paymentId - The payment intent ID for Hubtel checkout
+     * @returns Hubtel session with token, merchant account, and expiry information
+     */
+    createHubtelSession(paymentId: string): Promise<{
+        data?: HubtelSessionResponse;
+        error?: PaymentError;
+    }>;
     /**
      * Maps SDK payment method to backend format
      */

package/dist/index.d.ts

@@ -258,6 +258,8 @@ 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;
 
 interface HubtelBridgeProps {
+    paymentId: string;
+    publicKey: string;
     merchantAccount: string | number;
     amount: number;
     currency?: string;
@@ -266,13 +268,16 @@ interface HubtelBridgeProps {
     phone?: string;
     description?: string;
     callbackUrl?: string;
+    /** Session token from server (recommended - credentials never exposed to client) */
+    hubtelSessionToken?: string;
+    /** Basic auth credential (legacy - credentials exposed to client, deprecated) */
     basicAuth?: string;
     onSuccess: (result: PaymentResult) => void;
     onError: (error: PaymentError) => void;
     onClose: () => void;
     autoStart?: boolean;
 }
-declare function HubtelBridge({ merchantAccount, amount, reference, phone, description, callbackUrl, basicAuth, onSuccess, onError, onClose, autoStart, }: HubtelBridgeProps): react_jsx_runtime.JSX.Element;
+declare function HubtelBridge({ paymentId, publicKey, merchantAccount, amount, reference, phone, description, callbackUrl, hubtelSessionToken, basicAuth, onSuccess, onError, onClose, autoStart, }: HubtelBridgeProps): react_jsx_runtime.JSX.Element;
 /**
  * Opens Hubtel checkout modal directly
  * Uses the @hubteljs/checkout npm package
@@ -553,6 +558,20 @@ interface PaymentIntentResponse {
     net_amount: number;
     reference?: string;
 }
+/**
+ * Response from creating a Hubtel session token.
+ * The token provides secure, short-lived access to Hubtel checkout without exposing credentials.
+ */
+interface HubtelSessionResponse {
+    /** Short-lived session token for Hubtel checkout */
+    token: string;
+    /** Hubtel merchant account number */
+    merchantAccount: string;
+    /** Token expiry time in seconds */
+    expiresInSeconds: number;
+    /** Unix timestamp when the token expires */
+    expiresAt: number;
+}
 interface PaymentDetailResponse {
     id: string;
     connection_id: string;
@@ -632,6 +651,18 @@ declare class ReevitAPIClient {
         data?: PaymentDetailResponse;
         error?: PaymentError;
     }>;
+    /**
+     * Creates a Hubtel session token for secure checkout.
+     * This endpoint generates a short-lived token that maps to Hubtel credentials server-side,
+     * avoiding exposure of sensitive credentials to the client.
+     *
+     * @param paymentId - The payment intent ID for Hubtel checkout
+     * @returns Hubtel session with token, merchant account, and expiry information
+     */
+    createHubtelSession(paymentId: string): Promise<{
+        data?: HubtelSessionResponse;
+        error?: PaymentError;
+    }>;
     /**
      * Maps SDK payment method to backend format
      */

package/dist/index.js

@@ -212,6 +212,17 @@ var ReevitAPIClient = class {
   async cancelPaymentIntent(paymentId) {
     return this.request("POST", `/v1/payments/${paymentId}/cancel`);
   }
+  /**
+   * Creates a Hubtel session token for secure checkout.
+   * This endpoint generates a short-lived token that maps to Hubtel credentials server-side,
+   * avoiding exposure of sensitive credentials to the client.
+   *
+   * @param paymentId - The payment intent ID for Hubtel checkout
+   * @returns Hubtel session with token, merchant account, and expiry information
+   */
+  async createHubtelSession(paymentId) {
+    return this.request("POST", `/v1/payments/hubtel/sessions/${paymentId}`);
+  }
   /**
    * Maps SDK payment method to backend format
    */
@@ -837,12 +848,15 @@ function PaystackBridge({
   ] }) });
 }
 function HubtelBridge({
+  paymentId,
+  publicKey,
   merchantAccount,
   amount,
   reference,
   phone,
   description = "Payment",
   callbackUrl,
+  hubtelSessionToken,
   basicAuth,
   onSuccess,
   onError,
@@ -851,7 +865,46 @@ function HubtelBridge({
 }) {
   const initialized = react.useRef(false);
   const checkoutRef = react.useRef(null);
+  const [authValue, setAuthValue] = react.useState("");
+  const [isLoading, setIsLoading] = react.useState(false);
+  react.useEffect(() => {
+    const fetchAuth = async () => {
+      if (hubtelSessionToken) {
+        setIsLoading(true);
+        try {
+          const client = createReevitClient({ publicKey });
+          const { data, error } = await client.createHubtelSession(paymentId);
+          if (error) {
+            onError({
+              code: "SESSION_ERROR",
+              message: error.message || "Failed to create Hubtel session",
+              recoverable: true
+            });
+            return;
+          }
+          if (data) {
+            setAuthValue(data.token);
+          }
+        } catch (err) {
+          onError({
+            code: "SESSION_ERROR",
+            message: "Failed to create Hubtel session",
+            recoverable: true,
+            originalError: err
+          });
+        } finally {
+          setIsLoading(false);
+        }
+      } else if (basicAuth) {
+        setAuthValue(basicAuth);
+      }
+    };
+    fetchAuth();
+  }, [paymentId, publicKey, hubtelSessionToken, basicAuth, onError]);
   const startPayment = react.useCallback(async () => {
+    if (isLoading || !authValue) {
+      return;
+    }
     try {
       const checkout = new CheckoutSdk__default.default();
       checkoutRef.current = checkout;
@@ -866,7 +919,9 @@ function HubtelBridge({
         branding: "enabled",
         callbackUrl: callbackUrl || window.location.href,
         merchantAccount: typeof merchantAccount === "string" ? parseInt(merchantAccount, 10) : merchantAccount,
-        basicAuth: basicAuth || ""
+        // Use session token or basicAuth for authentication
+        // Session tokens are base64-encoded credentials fetched securely from the server
+        basicAuth: authValue || ""
       };
       checkout.openModal({
         purchaseInfo,
@@ -910,13 +965,13 @@ function HubtelBridge({
       };
       onError(error);
     }
-  }, [merchantAccount, amount, reference, phone, description, callbackUrl, basicAuth, onSuccess, onError, onClose]);
+  }, [merchantAccount, amount, reference, phone, description, callbackUrl, authValue, isLoading, onSuccess, onError, onClose]);
   react.useEffect(() => {
-    if (autoStart && !initialized.current) {
+    if (autoStart && !initialized.current && !isLoading && authValue) {
       initialized.current = true;
       startPayment();
     }
-  }, [autoStart, startPayment]);
+  }, [autoStart, startPayment, isLoading, authValue]);
   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..." })
@@ -1388,6 +1443,87 @@ function loadStripeScript() {
   });
   return stripeScriptPromise;
 }
+var getReevitStripeAppearance = () => {
+  const isDarkMode = typeof window !== "undefined" && window.matchMedia?.("(prefers-color-scheme: dark)").matches;
+  return {
+    theme: isDarkMode ? "night" : "stripe",
+    variables: {
+      colorPrimary: isDarkMode ? "#fafafa" : "#171717",
+      colorBackground: isDarkMode ? "#171717" : "#ffffff",
+      colorText: isDarkMode ? "#fafafa" : "#171717",
+      colorTextSecondary: isDarkMode ? "#a3a3a3" : "#737373",
+      colorTextPlaceholder: isDarkMode ? "#737373" : "#a3a3a3",
+      colorDanger: "#dc2626",
+      fontFamily: '"Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+      fontSizeBase: "14px",
+      fontSizeSm: "12px",
+      fontSizeLg: "16px",
+      fontWeightNormal: "400",
+      fontWeightMedium: "500",
+      fontWeightBold: "600",
+      borderRadius: "10px",
+      spacingUnit: "4px",
+      spacingGridRow: "16px",
+      spacingGridColumn: "16px"
+    },
+    rules: {
+      ".Input": {
+        border: isDarkMode ? "1px solid rgba(255, 255, 255, 0.1)" : "1px solid #e5e5e5",
+        boxShadow: "none",
+        padding: "12px 14px",
+        fontSize: "14px",
+        backgroundColor: isDarkMode ? "#262626" : "#ffffff"
+      },
+      ".Input:focus": {
+        border: isDarkMode ? "1px solid #a3a3a3" : "1px solid #737373",
+        boxShadow: "none",
+        backgroundColor: isDarkMode ? "#262626" : "#fafafa"
+      },
+      ".Input--invalid": {
+        border: "1px solid #dc2626",
+        boxShadow: "none"
+      },
+      ".Label": {
+        fontSize: "12px",
+        fontWeight: "500",
+        marginBottom: "6px",
+        color: isDarkMode ? "#a3a3a3" : "#737373",
+        textTransform: "none",
+        letterSpacing: "0.02em"
+      },
+      ".Tab": {
+        border: isDarkMode ? "1px solid rgba(255, 255, 255, 0.1)" : "1px solid #e5e5e5",
+        backgroundColor: "transparent",
+        borderRadius: "10px",
+        padding: "12px 14px"
+      },
+      ".Tab:hover": {
+        border: isDarkMode ? "1px solid #a3a3a3" : "1px solid #737373",
+        backgroundColor: isDarkMode ? "#262626" : "#fafafa"
+      },
+      ".Tab--selected": {
+        border: isDarkMode ? "1px solid #fafafa" : "1px solid #171717",
+        backgroundColor: isDarkMode ? "#262626" : "#fafafa"
+      },
+      ".TabIcon": {
+        marginRight: "8px"
+      },
+      ".Block": {
+        border: isDarkMode ? "1px solid rgba(255, 255, 255, 0.1)" : "1px solid #e5e5e5",
+        borderRadius: "10px",
+        backgroundColor: isDarkMode ? "#262626" : "#ffffff",
+        padding: "12px 14px"
+      },
+      ".CheckboxInput": {
+        border: isDarkMode ? "1px solid rgba(255, 255, 255, 0.1)" : "1px solid #e5e5e5"
+      },
+      ".CheckboxInput--checked": {
+        backgroundColor: isDarkMode ? "#fafafa" : "#171717",
+        borderColor: isDarkMode ? "#fafafa" : "#171717"
+      }
+    }
+  };
+};
 function StripeBridge({
   publishableKey,
   clientSecret,
@@ -1415,9 +1551,10 @@ function StripeBridge({
           throw new Error("Stripe not available");
         }
         stripeRef.current = window.Stripe(publishableKey);
+        const stripeAppearance = appearance || getReevitStripeAppearance();
         elementsRef.current = stripeRef.current.elements({
           clientSecret,
-          appearance: appearance || { theme: "stripe" }
+          appearance: stripeAppearance
         });
         paymentElementRef.current = elementsRef.current.create("payment");
         if (containerRef.current) {
@@ -1487,6 +1624,12 @@ function StripeBridge({
       setIsSubmitting(false);
     }
   }, [onSuccess, onError]);
+  const formattedAmount = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: currency.toUpperCase(),
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }).format(amount / 100);
   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" }),
@@ -1500,8 +1643,8 @@ function StripeBridge({
         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: [
+    error && !isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-stripe-error", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: error }) }),
+    !isLoading && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-stripe-actions", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
@@ -1509,11 +1652,12 @@ function StripeBridge({
           className: "reevit-submit-btn",
           onClick: handleSubmit,
           disabled: isLoading || isSubmitting,
-          children: isSubmitting ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "reevit-spinner" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          children: isSubmitting ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "reevit-spinner", style: { width: "16px", height: "16px" } }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Processing..." })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             "Pay ",
-            currency,
-            " ",
-            (amount / 100).toFixed(2)
+            formattedAmount
           ] })
         }
       ),
@@ -1746,14 +1890,16 @@ function ReevitCheckout({
           return /* @__PURE__ */ jsxRuntime.jsx(
             HubtelBridge,
             {
-              merchantAccount: paymentIntent?.pspCredentials?.merchantAccount || pspKey,
+              paymentId: paymentIntent?.id || "",
+              publicKey,
+              merchantAccount: pspKey,
               amount: paymentIntent?.amount ?? amount,
               currency: paymentIntent?.currency ?? currency,
               reference: paymentIntent?.reference || reference,
               email,
               phone: momoData?.phone || phone,
               description: `Payment ${paymentIntent?.reference || reference || ""}`,
-              basicAuth: paymentIntent?.pspCredentials?.basicAuth,
+              hubtelSessionToken: paymentIntent?.id ? paymentIntent.id : void 0,
               onSuccess: handlePSPSuccess,
               onError: (err) => handlePSPError(err),
               onClose: handlePSPClose