@reevit/react 0.6.0 → 0.8.0

package/README.md

@@ -293,6 +293,20 @@ function MpesaPayment() {
 | Monnify | NG | Card, Bank Transfer, USSD |
 | M-Pesa | KE, TZ | Mobile Money (STK Push) |
 
+## Release Notes
+
+### v0.7.0
+
+- Redesigned checkout UI with premium visual polish
+- New typography system: Grato Classic for body, ABC Repro Mono for amounts
+- Layered shadow system for natural depth
+- Replaced emoji icons with inline SVG icons (consistent cross-platform rendering)
+- New loading animation (three-dot pulse), success glow effect, and countdown bar
+- Improved dark mode contrast and surfaces
+- Mobile bottom-sheet pattern with touch-friendly targets (44px+)
+- Smoother animations with cubic-bezier easing curves
+- Removed external Google Fonts dependency (zero network requests for fonts)
+
 ## License
 
 MIT © [Reevit](https://reevit.io)

package/dist/index.d.mts

@@ -183,6 +183,8 @@ interface PaymentIntent {
     recommendedPsp: 'paystack' | 'hubtel' | 'flutterwave' | 'monnify' | 'mpesa' | 'stripe';
     /** Available payment methods for this intent */
     availableMethods: PaymentMethod[];
+    /** Provider transaction reference returned by Reevit */
+    providerRefId?: string;
     /** Reference provided or generated */
     reference?: string;
     /** Organization ID (from Reevit backend, required for webhook routing) */
@@ -361,6 +363,7 @@ declare function openHubtelPopup(config: {
     amount: number;
     clientReference?: string;
     callbackUrl?: string;
+    apiBaseUrl?: string;
     customerPhoneNumber?: string;
     basicAuth?: string;
     preferredMethod?: PaymentMethod;
@@ -623,6 +626,7 @@ interface PaymentIntentResponse {
     org_id?: string;
     connection_id: string;
     provider: string;
+    provider_ref_id?: string;
     status: string;
     client_secret: string;
     psp_public_key?: string;

package/dist/index.d.ts

@@ -183,6 +183,8 @@ interface PaymentIntent {
     recommendedPsp: 'paystack' | 'hubtel' | 'flutterwave' | 'monnify' | 'mpesa' | 'stripe';
     /** Available payment methods for this intent */
     availableMethods: PaymentMethod[];
+    /** Provider transaction reference returned by Reevit */
+    providerRefId?: string;
     /** Reference provided or generated */
     reference?: string;
     /** Organization ID (from Reevit backend, required for webhook routing) */
@@ -361,6 +363,7 @@ declare function openHubtelPopup(config: {
     amount: number;
     clientReference?: string;
     callbackUrl?: string;
+    apiBaseUrl?: string;
     customerPhoneNumber?: string;
     basicAuth?: string;
     preferredMethod?: PaymentMethod;
@@ -623,6 +626,7 @@ interface PaymentIntentResponse {
     org_id?: string;
     connection_id: string;
     provider: string;
+    provider_ref_id?: string;
     status: string;
     client_secret: string;
     psp_public_key?: string;

package/dist/index.js

@@ -515,8 +515,9 @@ function mapToPaymentIntent(response, config) {
     status: response.status,
     recommendedPsp: mapProviderToPsp(response.provider),
     availableMethods: config.paymentMethods || ["card", "mobile_money"],
-    reference: response.reference || response.id,
-    // Use backend reference or fallback to ID
+    providerRefId: response.provider_ref_id,
+    reference: response.reference || response.provider_ref_id || response.id,
+    // Use backend reference or fallback to provider ref then ID
     orgId: response.org_id,
     connectionId: response.connection_id,
     provider: response.provider,
@@ -817,30 +818,47 @@ function detectCountryFromCurrency(currency) {
   };
   return currencyToCountry[currency.toUpperCase()] || "GH";
 }
+var MethodIcons = {
+  card: () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "1", y: "4", width: "22", height: "16", rx: "3" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "1", y1: "10", x2: "23", y2: "10" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "5", y1: "15", x2: "9", y2: "15" })
+  ] }),
+  mobile_money: () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "5", y: "2", width: "14", height: "20", rx: "3" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "18", x2: "12", y2: "18.01", strokeWidth: "2", strokeLinecap: "round" })
+  ] }),
+  bank_transfer: () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 21h18" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 10h18" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 3l9 7H3l9-7z" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 10v8" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 10v8" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 10v8" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 10v8" })
+  ] }),
+  apple_pay: () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.53 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" }) }),
+  google_pay: () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.345-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24z", fill: "currentColor" }) })
+};
 var methodConfig = {
   card: {
     label: "Card",
-    icon: "\u{1F4B3}",
     description: "Pay with Visa, Mastercard, or other cards"
   },
   mobile_money: {
     label: "Mobile Money",
-    icon: "\u{1F4F1}",
     description: "MTN, Telecel, AirtelTigo Money"
   },
   bank_transfer: {
     label: "Bank Transfer",
-    icon: "\u{1F3E6}",
     description: "Pay directly from your bank account"
   },
   apple_pay: {
     label: "Apple Pay",
-    icon: "\u{1F34E}",
     description: "Pay with Apple Pay"
   },
   google_pay: {
     label: "Google Pay",
-    icon: "\u{1F916}",
     description: "Pay with Google Pay"
   }
 };
@@ -890,7 +908,6 @@ function PaymentMethodSelector({
         ),
         style: selectedTheme?.backgroundColor ? { backgroundColor: selectedTheme.backgroundColor } : void 0,
         children: methods.map((method, index) => {
-          const config = methodConfig[method];
           const isSelected = selectedMethod === method;
           const methodLabel = getMethodLabel(method);
           const methodDescription = getMethodDescription(method);
@@ -921,7 +938,7 @@ function PaymentMethodSelector({
                     className: "reevit-method-option__logo-img"
                   },
                   i
-                )) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "reevit-method-option__icon", children: config.icon }) }),
+                )) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "reevit-method-option__icon", children: MethodIcons[method]() }) }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-method-option__content", children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "reevit-method-option__label", style: selectedTheme?.textColor ? { color: selectedTheme.textColor } : void 0, children: methodLabel }),
                   !isGrid && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "reevit-method-option__description", style: selectedTheme?.descriptionColor ? { color: selectedTheme.descriptionColor } : void 0, children: methodDescription })
@@ -1321,6 +1338,38 @@ function PaystackBridge({
     /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Connecting to Paystack..." })
   ] }) });
 }
+var DEFAULT_REEVIT_API_BASE_URL = "https://api.reevit.io";
+function getHubtelCallbackURL(apiBaseUrl) {
+  return `${apiBaseUrl || DEFAULT_REEVIT_API_BASE_URL}/v1/webhooks/incoming/hubtel`;
+}
+function parseHubtelCallbackPayload(input) {
+  if (!input || typeof input !== "object") {
+    return {};
+  }
+  const raw = input;
+  const nested = raw.data;
+  if (typeof nested === "string") {
+    try {
+      const parsed = JSON.parse(nested);
+      if (parsed && typeof parsed === "object") {
+        return { ...raw, ...parsed };
+      }
+    } catch {
+    }
+  } else if (nested && typeof nested === "object") {
+    return { ...raw, ...nested };
+  }
+  return raw;
+}
+function readHubtelField(payload, keys) {
+  for (const key of keys) {
+    const value = payload[key];
+    if (typeof value === "string" && value.trim().length > 0) {
+      return value.trim();
+    }
+  }
+  return "";
+}
 function HubtelBridge({
   paymentId,
   publicKey,
@@ -1397,12 +1446,12 @@ function HubtelBridge({
         purchaseDescription: description,
         customerPhoneNumber: phone || "",
         ...email ? { customerEmail: email } : {},
-        clientReference: reference || `hubtel_${Date.now()}`,
+        clientReference: reference || paymentId || `hubtel_${Date.now()}`,
         ...methodPreference ? { paymentMethod: methodPreference } : {}
       };
       const config = {
         branding: "enabled",
-        callbackUrl: callbackUrl || window.location.href,
+        callbackUrl: callbackUrl || getHubtelCallbackURL(apiBaseUrl),
         merchantAccount: typeof resolvedMerchantAccount === "string" ? parseInt(resolvedMerchantAccount, 10) : resolvedMerchantAccount,
         basicAuth: authValue || "",
         ...methodPreference ? { paymentMethod: methodPreference } : {}
@@ -1413,24 +1462,41 @@ function HubtelBridge({
         callBacks: {
           onInit: () => console.log("Hubtel checkout initialized"),
           onPaymentSuccess: (data) => {
+            const payload = parseHubtelCallbackPayload(data);
+            const transactionReference = readHubtelField(payload, [
+              "transactionId",
+              "transaction_id",
+              "transactionReference",
+              "paymentReference",
+              "checkoutId"
+            ]);
+            const clientReference = readHubtelField(payload, ["clientReference", "client_reference"]);
             const result = {
-              paymentId: data.transactionId || reference || "",
-              reference: data.clientReference || reference || "",
+              paymentId,
+              reference: clientReference || reference || paymentId,
               amount,
               currency: currency || "GHS",
               paymentMethod: preferredMethod || "mobile_money",
               psp: "hubtel",
-              pspReference: data.transactionId || "",
-              status: "success"
+              pspReference: transactionReference || paymentId,
+              status: "success",
+              metadata: {
+                hubtel_payload: payload,
+                hubtel_raw: data
+              }
             };
             onSuccess(result);
             checkout.closePopUp();
           },
           onPaymentFailure: (data) => {
+            const payload = parseHubtelCallbackPayload(data);
             const error = {
               code: "PAYMENT_FAILED",
-              message: data.message || "Payment failed",
-              recoverable: true
+              message: readHubtelField(payload, ["message", "error", "reason"]) || "Payment failed",
+              recoverable: true,
+              details: {
+                hubtel_payload: payload
+              }
             };
             onError(error);
           },
@@ -1455,6 +1521,8 @@ function HubtelBridge({
     phone,
     description,
     callbackUrl,
+    paymentId,
+    apiBaseUrl,
     authValue,
     isLoading,
     preferredMethod,
@@ -1487,7 +1555,7 @@ function openHubtelPopup(config) {
   };
   const checkoutConfig = {
     branding: "enabled",
-    callbackUrl: config.callbackUrl || window.location.href,
+    callbackUrl: config.callbackUrl || getHubtelCallbackURL(config.apiBaseUrl),
     merchantAccount: typeof config.merchantAccount === "string" ? parseInt(config.merchantAccount, 10) : config.merchantAccount,
     basicAuth: config.basicAuth || "",
     ...methodPreference ? { paymentMethod: methodPreference } : {}
@@ -1497,11 +1565,11 @@ function openHubtelPopup(config) {
     config: checkoutConfig,
     callBacks: {
       onPaymentSuccess: (data) => {
-        config.onSuccess?.(data);
+        config.onSuccess?.(parseHubtelCallbackPayload(data));
         checkout.closePopUp();
       },
       onPaymentFailure: (data) => {
-        config.onError?.(data);
+        config.onError?.(parseHubtelCallbackPayload(data));
       },
       onClose: () => {
         config.onClose?.();
@@ -2481,7 +2549,11 @@ function ReevitCheckout({
   const renderContent = () => {
     if (status === "loading" || status === "processing") {
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-loading reevit-animate-fade-in", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-spinner" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-dot-pulse", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "reevit-dot-pulse__dot" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "reevit-dot-pulse__dot" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "reevit-dot-pulse__dot" })
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { children: status === "loading" ? "Preparing checkout..." : "Processing payment..." })
       ] });
     }
@@ -2497,12 +2569,22 @@ function ReevitCheckout({
           "Reference: ",
           result.reference
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "reevit-success__redirect", children: "Redirecting in a moment..." })
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "reevit-success__redirect", children: "Redirecting in a moment..." }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "reevit-success__countdown",
+            style: { animationDuration: `${successDelayMs}ms` }
+          }
+        )
       ] });
     }
     if (status === "failed" && error && !error.recoverable) {
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-error reevit-animate-fade-in", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-error__icon", children: "\u2715" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-error__icon", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+          /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+        ] }) }),
         /* @__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" })
@@ -2547,10 +2629,11 @@ function ReevitCheckout({
               merchantAccount: paymentIntent?.pspCredentials?.merchantAccount || "",
               amount: paymentIntent?.amount ?? amount,
               currency: paymentIntent?.currency ?? currency,
-              reference: paymentIntent?.reference || reference,
+              reference: paymentIntent?.providerRefId || paymentIntent?.reference || reference,
               email,
               phone: momoData?.phone || phone,
               description: `Payment ${paymentIntent?.reference || reference || ""}`,
+              callbackUrl: `${apiBaseUrl || "https://api.reevit.io"}/v1/webhooks/incoming/hubtel`,
               hubtelSessionToken: paymentIntent?.id ? paymentIntent.id : void 0,
               clientSecret: paymentIntent?.clientSecret,
               apiBaseUrl,
@@ -2624,7 +2707,11 @@ function ReevitCheckout({
           );
         default:
           return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-error", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-error__icon", children: "\u26A0\uFE0F" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-error__icon", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+            ] }) }),
             /* @__PURE__ */ jsxRuntime.jsx("h3", { children: "Provider Not Supported" }),
             /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
               "Provider (",