@reevit/react 0.5.9 → 0.7.0

package/README.md

@@ -5,7 +5,7 @@ Unified Payment Widget for React Applications. Accept card and mobile money paym
 ## Installation
 
 ```bash
-npm install @reevit/react@0.5.0
+npm install @reevit/react
 ```
 
 ## Quick Start
@@ -23,6 +23,7 @@ function App() {
       amount={10000} // Amount in smallest unit (e.g., pesewas for GHS)
       currency="GHS"
       email="customer@example.com"
+      idempotencyKey={`order_${Date.now()}`}
       onSuccess={(result) => {
         console.log('Payment success!', result);
         alert(`Payment of ${result.currency} ${result.amount/100} successful!`);
@@ -37,6 +38,19 @@ function App() {
 }
 ```
 
+## Idempotency
+
+Provide an `idempotencyKey` tied to your order/cart to avoid duplicate intent creation and enable safe retries.
+
+```tsx
+<ReevitCheckout
+  publicKey="pk_test_your_key"
+  amount={10000}
+  currency="GHS"
+  idempotencyKey="order_12345"
+/>
+```
+
 ## Payment Links
 
 If you have a hosted payment link, pass the link code. The widget will create the payment intent from the public link endpoint.
@@ -279,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

@@ -22,6 +22,8 @@ interface ReevitCheckoutConfig {
     customerName?: string;
     /** Unique reference for this transaction */
     reference?: string;
+    /** Optional idempotency key to safely retry or dedupe intent creation */
+    idempotencyKey?: string;
     /** Additional metadata to attach to the payment */
     metadata?: Record<string, unknown>;
     /** Custom fields for payment links (if applicable) */

package/dist/index.d.ts

@@ -22,6 +22,8 @@ interface ReevitCheckoutConfig {
     customerName?: string;
     /** Unique reference for this transaction */
     reference?: string;
+    /** Optional idempotency key to safely retry or dedupe intent creation */
+    idempotencyKey?: string;
     /** Additional metadata to attach to the payment */
     metadata?: Record<string, unknown>;
     /** Custom fields for payment links (if applicable) */

package/dist/index.js

@@ -259,7 +259,7 @@ var ReevitAPIClient = class {
         allowed_providers: options?.allowedProviders
       };
     }
-    const idempotencyKey = generateIdempotencyKey({
+    const idempotencyKey = config.idempotencyKey || generateIdempotencyKey({
       amount: config.amount,
       currency: config.currency,
       customer: config.email || config.metadata?.customerId || "",
@@ -438,6 +438,72 @@ function normalizeBranding(branding) {
   setIf("selectedBorderColor", getString(raw.selectedBorderColor ?? raw.selected_border_color));
   return theme;
 }
+var INTENT_CACHE_TTL_MS = 10 * 60 * 1e3;
+var intentCache = /* @__PURE__ */ new Map();
+function pruneIntentCache(now = Date.now()) {
+  for (const [key, entry] of intentCache) {
+    if (entry.expiresAt <= now) {
+      intentCache.delete(key);
+    }
+  }
+}
+function getIntentCacheEntry(key) {
+  const entry = intentCache.get(key);
+  if (!entry) {
+    return void 0;
+  }
+  if (entry.expiresAt <= Date.now()) {
+    intentCache.delete(key);
+    return void 0;
+  }
+  return entry;
+}
+function setIntentCacheEntry(key, update) {
+  const now = Date.now();
+  const existing = getIntentCacheEntry(key);
+  const next = {
+    ...existing,
+    ...update,
+    expiresAt: now + INTENT_CACHE_TTL_MS
+  };
+  intentCache.set(key, next);
+  return next;
+}
+function clearIntentCacheEntry(key) {
+  intentCache.delete(key);
+}
+function buildIdempotencyPayload(config, method, options) {
+  const payload = {
+    amount: config.amount,
+    currency: config.currency,
+    email: config.email || "",
+    phone: config.phone || "",
+    customerName: config.customerName || "",
+    paymentLinkCode: config.paymentLinkCode || "",
+    paymentMethods: config.paymentMethods || [],
+    metadata: config.metadata || {},
+    customFields: config.customFields || {},
+    method: method || "",
+    preferredProvider: options?.preferredProvider || "",
+    allowedProviders: options?.allowedProviders || [],
+    publicKey: config.publicKey || ""
+  };
+  if (config.reference) {
+    payload.reference = config.reference;
+  }
+  return payload;
+}
+function resolveIntentIdentity(config, method, options) {
+  pruneIntentCache();
+  const idempotencyKey = config.idempotencyKey || generateIdempotencyKey(buildIdempotencyPayload(config, method, options));
+  const existing = getIntentCacheEntry(idempotencyKey);
+  const reference = config.reference || existing?.reference || generateReference();
+  const cacheEntry = setIntentCacheEntry(idempotencyKey, { reference });
+  return { idempotencyKey, reference, cacheEntry };
+}
+function isPaymentError(error) {
+  return typeof error === "object" && error !== null && "code" in error && "message" in error;
+}
 function mapToPaymentIntent(response, config) {
   return {
     id: response.id,
@@ -471,14 +537,22 @@ function useReevit(options) {
     selectedMethod: config.initialPaymentIntent?.availableMethods?.length === 1 ? config.initialPaymentIntent.availableMethods[0] : null
   });
   const apiClientRef = react.useRef(null);
-  const initializingRef = react.useRef(!!config.initialPaymentIntent);
+  const stateRef = react.useRef(state);
+  react.useEffect(() => {
+    stateRef.current = state;
+  }, [state]);
+  const currentIntentKeyRef = react.useRef(
+    config.initialPaymentIntent ? `initial:${config.initialPaymentIntent.id}` : null
+  );
   const initRequestIdRef = react.useRef(0);
   react.useEffect(() => {
     if (config.initialPaymentIntent) {
       if (!state.paymentIntent || state.paymentIntent.id !== config.initialPaymentIntent.id) {
         dispatch({ type: "INIT_SUCCESS", payload: config.initialPaymentIntent });
-        initializingRef.current = true;
+        currentIntentKeyRef.current = `initial:${config.initialPaymentIntent.id}`;
       }
+    } else if (currentIntentKeyRef.current?.startsWith("initial:")) {
+      currentIntentKeyRef.current = null;
     }
   }, [config.initialPaymentIntent, state.paymentIntent?.id]);
   if (!apiClientRef.current) {
@@ -492,61 +566,60 @@ function useReevit(options) {
   }, [state.status, onStateChange]);
   const initialize = react.useCallback(
     async (method, options2) => {
-      if (initializingRef.current) {
+      if (config.initialPaymentIntent) {
         return;
       }
-      initializingRef.current = true;
-      const requestId = ++initRequestIdRef.current;
-      dispatch({ type: "INIT_START" });
+      let requestId = 0;
+      let intentKey = null;
       try {
         const apiClient = apiClientRef.current;
         if (!apiClient) {
           throw new Error("API client not initialized");
         }
-        const reference = config.reference || generateReference();
         const country = detectCountryFromCurrency(config.currency);
         const defaultMethod = config.paymentMethods && config.paymentMethods.length === 1 ? config.paymentMethods[0] : void 0;
         const paymentMethod = method ?? defaultMethod;
-        let data;
-        let error;
-        if (config.paymentLinkCode) {
-          const idempotencyKey = generateIdempotencyKey({
-            paymentLinkCode: config.paymentLinkCode,
-            amount: config.amount,
-            email: config.email || "",
-            phone: config.phone || "",
-            method: paymentMethod || "",
-            provider: options2?.preferredProvider || options2?.allowedProviders?.[0] || ""
-          });
-          const response = await fetch(
-            `${apiBaseUrl || DEFAULT_PUBLIC_API_BASE_URL}/v1/pay/${config.paymentLinkCode}/pay`,
-            {
-              method: "POST",
-              headers: {
-                "Content-Type": "application/json",
-                "Idempotency-Key": idempotencyKey
-              },
-              body: JSON.stringify({
-                amount: config.amount,
-                email: config.email || "",
-                name: config.customerName || "",
-                phone: config.phone || "",
-                method: paymentMethod,
-                country,
-                provider: options2?.preferredProvider || options2?.allowedProviders?.[0],
-                custom_fields: config.customFields
-              })
+        const identity = resolveIntentIdentity(config, paymentMethod, options2);
+        const { idempotencyKey, reference, cacheEntry } = identity;
+        intentKey = idempotencyKey;
+        if (currentIntentKeyRef.current === idempotencyKey && stateRef.current.paymentIntent) {
+          return;
+        }
+        currentIntentKeyRef.current = idempotencyKey;
+        requestId = ++initRequestIdRef.current;
+        if (stateRef.current.status !== "loading") {
+          dispatch({ type: "INIT_START" });
+        }
+        const requestIntent = async () => {
+          if (config.paymentLinkCode) {
+            const response = await fetch(
+              `${apiBaseUrl || DEFAULT_PUBLIC_API_BASE_URL}/v1/pay/${config.paymentLinkCode}/pay`,
+              {
+                method: "POST",
+                headers: {
+                  "Content-Type": "application/json",
+                  "Idempotency-Key": idempotencyKey
+                },
+                body: JSON.stringify({
+                  amount: config.amount,
+                  email: config.email || "",
+                  name: config.customerName || "",
+                  phone: config.phone || "",
+                  method: paymentMethod,
+                  country,
+                  provider: options2?.preferredProvider || options2?.allowedProviders?.[0],
+                  custom_fields: config.customFields
+                })
+              }
+            );
+            const responseData = await response.json().catch(() => ({}));
+            if (!response.ok) {
+              throw buildPaymentLinkError(response, responseData);
             }
-          );
-          const responseData = await response.json().catch(() => ({}));
-          if (!response.ok) {
-            error = buildPaymentLinkError(response, responseData);
-          } else {
-            data = responseData;
+            return responseData;
           }
-        } else {
           const result = await apiClient.createPaymentIntent(
-            { ...config, reference },
+            { ...config, reference, idempotencyKey },
             paymentMethod,
             country,
             {
@@ -554,35 +627,43 @@ function useReevit(options) {
               allowedProviders: options2?.allowedProviders
             }
           );
-          data = result.data;
-          error = result.error;
+          if (result.error) {
+            throw result.error;
+          }
+          if (!result.data) {
+            throw {
+              code: "INIT_FAILED",
+              message: "No data received from API",
+              recoverable: true
+            };
+          }
+          return result.data;
+        };
+        let data;
+        if (cacheEntry?.response) {
+          data = cacheEntry.response;
+        } else {
+          let intentPromise = cacheEntry?.promise;
+          if (!intentPromise) {
+            intentPromise = requestIntent();
+            setIntentCacheEntry(idempotencyKey, { promise: intentPromise });
+          }
+          data = await intentPromise;
+          setIntentCacheEntry(idempotencyKey, { response: data, promise: void 0 });
         }
         if (requestId !== initRequestIdRef.current) {
           return;
         }
-        if (error) {
-          dispatch({ type: "INIT_ERROR", payload: error });
-          onError?.(error);
-          return;
-        }
-        if (!data) {
-          const noDataError = {
-            code: "INIT_FAILED",
-            message: "No data received from API",
-            recoverable: true
-          };
-          dispatch({ type: "INIT_ERROR", payload: noDataError });
-          onError?.(noDataError);
-          initializingRef.current = false;
-          return;
-        }
-        const paymentIntent = mapToPaymentIntent(data, { ...config, reference });
+        const paymentIntent = mapToPaymentIntent(data, { ...config, reference, idempotencyKey });
         dispatch({ type: "INIT_SUCCESS", payload: paymentIntent });
       } catch (err) {
+        if (intentKey) {
+          clearIntentCacheEntry(intentKey);
+        }
         if (requestId !== initRequestIdRef.current) {
           return;
         }
-        const error = {
+        const error = isPaymentError(err) ? err : {
           code: "INIT_FAILED",
           message: err instanceof Error ? err.message : "Failed to initialize checkout",
           recoverable: true,
@@ -590,7 +671,6 @@ function useReevit(options) {
         };
         dispatch({ type: "INIT_ERROR", payload: error });
         onError?.(error);
-        initializingRef.current = false;
       }
     },
     [config, onError, apiBaseUrl]
@@ -671,7 +751,7 @@ function useReevit(options) {
       } catch {
       }
     }
-    initializingRef.current = false;
+    currentIntentKeyRef.current = null;
     initRequestIdRef.current += 1;
     dispatch({ type: "RESET" });
   }, [state.paymentIntent, state.status]);
@@ -737,30 +817,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"
   }
 };
@@ -810,7 +907,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);
@@ -841,7 +937,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 })
@@ -2401,7 +2497,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..." })
       ] });
     }
@@ -2417,12 +2517,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" })
@@ -2544,7 +2654,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 (",