@reevit/react 0.3.6 → 0.3.8

package/dist/index.d.mts

@@ -115,6 +115,15 @@ interface PaymentIntent {
     clientSecret: string;
     /** PSP's public key for client-side SDK initialization */
     pspPublicKey?: string;
+    /** PSP-specific credentials for client-side checkout (e.g., Hubtel's merchantAccount, basicAuth) */
+    pspCredentials?: {
+        /** Hubtel merchant account number */
+        merchantAccount?: string | number;
+        /** Hubtel basic auth header value */
+        basicAuth?: string;
+        /** Any other PSP-specific credential fields */
+        [key: string]: unknown;
+    };
     /** Amount in smallest currency unit */
     amount: number;
     /** Currency code */
@@ -154,8 +163,9 @@ interface PaymentMethodSelectorProps {
     selectedMethod: PaymentMethod | null;
     onSelect: (method: PaymentMethod) => void;
     disabled?: boolean;
+    provider?: string;
 }
-declare function PaymentMethodSelector({ methods, selectedMethod, onSelect, disabled, }: PaymentMethodSelectorProps): react_jsx_runtime.JSX.Element;
+declare function PaymentMethodSelector({ methods, selectedMethod, onSelect, disabled, provider, }: PaymentMethodSelectorProps): react_jsx_runtime.JSX.Element;
 
 interface MobileMoneyFormProps {
     onSubmit: (data: MobileMoneyFormData) => void;

package/dist/index.d.ts

@@ -115,6 +115,15 @@ interface PaymentIntent {
     clientSecret: string;
     /** PSP's public key for client-side SDK initialization */
     pspPublicKey?: string;
+    /** PSP-specific credentials for client-side checkout (e.g., Hubtel's merchantAccount, basicAuth) */
+    pspCredentials?: {
+        /** Hubtel merchant account number */
+        merchantAccount?: string | number;
+        /** Hubtel basic auth header value */
+        basicAuth?: string;
+        /** Any other PSP-specific credential fields */
+        [key: string]: unknown;
+    };
     /** Amount in smallest currency unit */
     amount: number;
     /** Currency code */
@@ -154,8 +163,9 @@ interface PaymentMethodSelectorProps {
     selectedMethod: PaymentMethod | null;
     onSelect: (method: PaymentMethod) => void;
     disabled?: boolean;
+    provider?: string;
 }
-declare function PaymentMethodSelector({ methods, selectedMethod, onSelect, disabled, }: PaymentMethodSelectorProps): react_jsx_runtime.JSX.Element;
+declare function PaymentMethodSelector({ methods, selectedMethod, onSelect, disabled, provider, }: PaymentMethodSelectorProps): react_jsx_runtime.JSX.Element;
 
 interface MobileMoneyFormProps {
     onSubmit: (data: MobileMoneyFormData) => void;

package/dist/index.js

@@ -512,6 +512,14 @@ function detectCountryFromCurrency(currency) {
   };
   return currencyToCountry[currency.toUpperCase()] || "GH";
 }
+var pspNames = {
+  hubtel: "Hubtel",
+  paystack: "Paystack",
+  flutterwave: "Flutterwave",
+  monnify: "Monnify",
+  mpesa: "M-Pesa",
+  stripe: "Stripe"
+};
 var methodConfig = {
   card: {
     label: "Card",
@@ -533,13 +541,30 @@ function PaymentMethodSelector({
   methods,
   selectedMethod,
   onSelect,
-  disabled = false
+  disabled = false,
+  provider
 }) {
+  const getMethodLabel = (method, psp) => {
+    const config = methodConfig[method];
+    if (psp?.toLowerCase().includes("hubtel") && method === "mobile_money") {
+      return `Pay with ${pspNames[psp.toLowerCase()] || "Hubtel"}`;
+    }
+    return config.label;
+  };
+  const getMethodDescription = (method, psp) => {
+    const config = methodConfig[method];
+    if (psp?.toLowerCase().includes("hubtel")) {
+      return "Card, Mobile Money, and Bank Transfer";
+    }
+    return config.description;
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-method-selector", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-method-selector__label", children: "Select payment method" }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-method-selector__options", children: methods.map((method) => {
       const config = methodConfig[method];
       const isSelected = selectedMethod === method;
+      const methodLabel = getMethodLabel(method, provider);
+      const methodDescription = getMethodDescription(method, provider);
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
@@ -555,8 +580,8 @@ function PaymentMethodSelector({
           children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "reevit-method-option__icon", children: config.icon }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-method-option__content", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "reevit-method-option__label", children: config.label }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "reevit-method-option__description", children: config.description })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "reevit-method-option__label", children: methodLabel }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "reevit-method-option__description", children: methodDescription })
             ] }),
             isSelected && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "reevit-method-option__check", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
               "path",
@@ -1687,9 +1712,9 @@ function ReevitCheckout({
         /* @__PURE__ */ jsxRuntime.jsx("button", { className: "reevit-btn reevit-btn--primary", onClick: handleBack, children: "Try Again" })
       ] });
     }
+    const psp = paymentIntent?.recommendedPsp || "paystack";
     if (showPSPBridge) {
       const pspKey = paymentIntent?.pspPublicKey || publicKey;
-      const psp = paymentIntent?.recommendedPsp || "paystack";
       const bridgeMetadata = {
         ...metadata,
         // Override with correct payment intent ID for webhook routing
@@ -1721,13 +1746,14 @@ function ReevitCheckout({
           return /* @__PURE__ */ jsxRuntime.jsx(
             HubtelBridge,
             {
-              merchantAccount: pspKey,
+              merchantAccount: paymentIntent?.pspCredentials?.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,
               onSuccess: handlePSPSuccess,
               onError: (err) => handlePSPError(err),
               onClose: handlePSPClose
@@ -1865,7 +1891,8 @@ function ReevitCheckout({
           methods: paymentMethods,
           selectedMethod,
           onSelect: handleMethodSelect,
-          disabled: isLoading
+          disabled: isLoading,
+          provider: psp
         }
       ),
       selectedMethod && selectedMethod !== "mobile_money" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-method-step__actions", children: /* @__PURE__ */ jsxRuntime.jsx(