@reevit/react 0.5.8 → 0.6.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.

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

@@ -180,7 +180,7 @@ var ReevitAPIClient = class {
     const headers = {
       "Content-Type": "application/json",
       "X-Reevit-Client": "@reevit/react",
-      "X-Reevit-Client-Version": "0.3.2"
+      "X-Reevit-Client-Version": "0.5.9"
     };
     if (this.publicKey) {
       headers["X-Reevit-Key"] = this.publicKey;
@@ -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]);
@@ -2251,19 +2331,6 @@ function ReevitCheckout({
       selectMethod(activeProvider.methods[0]);
     }
   }, [activeProvider, selectedMethod, selectMethod]);
-  react.useEffect(() => {
-    if (isOpen && selectedMethod && paymentIntent && !showPSPBridge) {
-      const psp = (selectedProvider || paymentIntent.recommendedPsp || "paystack").toLowerCase();
-      const needsPhone = psp.includes("mpesa");
-      if (selectedMethod === "card") {
-        setShowPSPBridge(true);
-      } else if (selectedMethod === "mobile_money") {
-        if (!needsPhone || (momoData?.phone || phone)) {
-          setShowPSPBridge(true);
-        }
-      }
-    }
-  }, [isOpen, selectedMethod, showPSPBridge, paymentIntent, momoData, phone, selectedProvider]);
   const handleOpen = react.useCallback(() => {
     if (controlledIsOpen !== void 0) return;
     setIsOpen(true);