@reevit/react 0.2.9 → 0.3.1

package/dist/index.d.mts

@@ -118,6 +118,8 @@ interface PaymentIntent {
     recommendedPsp: 'paystack' | 'hubtel' | 'flutterwave';
     /** Available payment methods for this intent */
     availableMethods: PaymentMethod[];
+    /** Reference provided or generated */
+    reference?: string;
     /** Connection ID (from Reevit backend) */
     connectionId?: string;
     /** Provider name (from backend) */
@@ -138,7 +140,7 @@ interface ReevitContextValue {
     currency: string;
 }
 declare function useReevitContext(): ReevitContextValue;
-declare function ReevitCheckout({ publicKey, amount, currency, email, phone, reference, metadata, paymentMethods, onSuccess, onError, onClose, onStateChange, children, autoOpen, isOpen: controlledIsOpen, onOpenChange, theme, apiBaseUrl, }: ReevitCheckoutProps): react_jsx_runtime.JSX.Element;
+declare function ReevitCheckout({ publicKey, amount, currency, email, phone, reference, metadata, paymentMethods, initialPaymentIntent, onSuccess, onError, onClose, onStateChange, children, autoOpen, isOpen: controlledIsOpen, onOpenChange, theme, apiBaseUrl, }: ReevitCheckoutProps): react_jsx_runtime.JSX.Element;
 
 interface PaymentMethodSelectorProps {
     methods: PaymentMethod[];
@@ -202,9 +204,11 @@ interface PaystackPopupInterface {
 interface PaystackConfig {
     key: string;
     email: string;
-    amount: number;
+    phone?: string;
+    amount?: number;
     currency?: string;
     ref?: string;
+    access_code?: string;
     metadata?: Record<string, unknown>;
     channels?: string[];
     callback: (response: PaystackResponse) => void;
@@ -221,9 +225,11 @@ interface PaystackResponse {
 interface PaystackBridgeProps {
     publicKey: string;
     email: string;
+    phone?: string;
     amount: number;
     currency?: string;
     reference?: string;
+    accessCode?: string;
     metadata?: Record<string, unknown>;
     channels?: ('card' | 'bank' | 'ussd' | 'qr' | 'mobile_money' | 'bank_transfer')[];
     onSuccess: (result: PaymentResult) => void;
@@ -232,7 +238,7 @@ interface PaystackBridgeProps {
     autoStart?: boolean;
 }
 declare function loadPaystackScript(): Promise<void>;
-declare function PaystackBridge({ publicKey, email, amount, currency, reference, metadata, channels, onSuccess, onError, onClose, autoStart, }: PaystackBridgeProps): react_jsx_runtime.JSX.Element;
+declare function PaystackBridge({ publicKey, email, phone, amount, currency, reference, accessCode, metadata, channels, onSuccess, onError, onClose, autoStart, }: PaystackBridgeProps): react_jsx_runtime.JSX.Element;
 
 declare global {
     interface Window {
@@ -539,6 +545,7 @@ interface PaymentIntentResponse {
     fee_amount: number;
     fee_currency: string;
     net_amount: number;
+    reference?: string;
 }
 interface PaymentDetailResponse {
     id: string;
@@ -593,7 +600,14 @@ declare class ReevitAPIClient {
         error?: PaymentError;
     }>;
     /**
-     * Confirms a payment after PSP callback
+     * Confirms a payment intent after PSP callback (public endpoint)
+     */
+    confirmPaymentIntent(paymentId: string, clientSecret: string): Promise<{
+        data?: PaymentDetailResponse;
+        error?: PaymentError;
+    }>;
+    /**
+     * Confirms a payment after PSP callback (authenticated endpoint)
      */
     confirmPayment(paymentId: string): Promise<{
         data?: PaymentDetailResponse;

package/dist/index.d.ts

@@ -118,6 +118,8 @@ interface PaymentIntent {
     recommendedPsp: 'paystack' | 'hubtel' | 'flutterwave';
     /** Available payment methods for this intent */
     availableMethods: PaymentMethod[];
+    /** Reference provided or generated */
+    reference?: string;
     /** Connection ID (from Reevit backend) */
     connectionId?: string;
     /** Provider name (from backend) */
@@ -138,7 +140,7 @@ interface ReevitContextValue {
     currency: string;
 }
 declare function useReevitContext(): ReevitContextValue;
-declare function ReevitCheckout({ publicKey, amount, currency, email, phone, reference, metadata, paymentMethods, onSuccess, onError, onClose, onStateChange, children, autoOpen, isOpen: controlledIsOpen, onOpenChange, theme, apiBaseUrl, }: ReevitCheckoutProps): react_jsx_runtime.JSX.Element;
+declare function ReevitCheckout({ publicKey, amount, currency, email, phone, reference, metadata, paymentMethods, initialPaymentIntent, onSuccess, onError, onClose, onStateChange, children, autoOpen, isOpen: controlledIsOpen, onOpenChange, theme, apiBaseUrl, }: ReevitCheckoutProps): react_jsx_runtime.JSX.Element;
 
 interface PaymentMethodSelectorProps {
     methods: PaymentMethod[];
@@ -202,9 +204,11 @@ interface PaystackPopupInterface {
 interface PaystackConfig {
     key: string;
     email: string;
-    amount: number;
+    phone?: string;
+    amount?: number;
     currency?: string;
     ref?: string;
+    access_code?: string;
     metadata?: Record<string, unknown>;
     channels?: string[];
     callback: (response: PaystackResponse) => void;
@@ -221,9 +225,11 @@ interface PaystackResponse {
 interface PaystackBridgeProps {
     publicKey: string;
     email: string;
+    phone?: string;
     amount: number;
     currency?: string;
     reference?: string;
+    accessCode?: string;
     metadata?: Record<string, unknown>;
     channels?: ('card' | 'bank' | 'ussd' | 'qr' | 'mobile_money' | 'bank_transfer')[];
     onSuccess: (result: PaymentResult) => void;
@@ -232,7 +238,7 @@ interface PaystackBridgeProps {
     autoStart?: boolean;
 }
 declare function loadPaystackScript(): Promise<void>;
-declare function PaystackBridge({ publicKey, email, amount, currency, reference, metadata, channels, onSuccess, onError, onClose, autoStart, }: PaystackBridgeProps): react_jsx_runtime.JSX.Element;
+declare function PaystackBridge({ publicKey, email, phone, amount, currency, reference, accessCode, metadata, channels, onSuccess, onError, onClose, autoStart, }: PaystackBridgeProps): react_jsx_runtime.JSX.Element;
 
 declare global {
     interface Window {
@@ -539,6 +545,7 @@ interface PaymentIntentResponse {
     fee_amount: number;
     fee_currency: string;
     net_amount: number;
+    reference?: string;
 }
 interface PaymentDetailResponse {
     id: string;
@@ -593,7 +600,14 @@ declare class ReevitAPIClient {
         error?: PaymentError;
     }>;
     /**
-     * Confirms a payment after PSP callback
+     * Confirms a payment intent after PSP callback (public endpoint)
+     */
+    confirmPaymentIntent(paymentId: string, clientSecret: string): Promise<{
+        data?: PaymentDetailResponse;
+        error?: PaymentError;
+    }>;
+    /**
+     * Confirms a payment after PSP callback (authenticated endpoint)
      */
     confirmPayment(paymentId: string): Promise<{
         data?: PaymentDetailResponse;

package/dist/index.js

@@ -178,6 +178,7 @@ var ReevitAPIClient = class {
       method: this.mapPaymentMethod(method),
       country,
       customer_id: config.email || config.metadata?.customerId,
+      phone: config.phone,
       metadata
     };
     return this.request("POST", "/v1/payments/intents", request);
@@ -189,7 +190,13 @@ var ReevitAPIClient = class {
     return this.request("GET", `/v1/payments/${paymentId}`);
   }
   /**
-   * Confirms a payment after PSP callback
+   * Confirms a payment intent after PSP callback (public endpoint)
+   */
+  async confirmPaymentIntent(paymentId, clientSecret) {
+    return this.request("POST", `/v1/payments/${paymentId}/confirm-intent?client_secret=${clientSecret}`);
+  }
+  /**
+   * Confirms a payment after PSP callback (authenticated endpoint)
    */
   async confirmPayment(paymentId) {
     return this.request("POST", `/v1/payments/${paymentId}/confirm`);
@@ -233,7 +240,12 @@ function reevitReducer(state, action) {
     case "INIT_START":
       return { ...state, status: "loading", error: null };
     case "INIT_SUCCESS":
-      return { ...state, status: "ready", paymentIntent: action.payload };
+      return {
+        ...state,
+        status: "ready",
+        paymentIntent: action.payload,
+        selectedMethod: action.payload.availableMethods?.length === 1 ? action.payload.availableMethods[0] : state.selectedMethod
+      };
     case "INIT_ERROR":
       return { ...state, status: "failed", error: action.payload };
     case "SELECT_METHOD":
@@ -269,6 +281,8 @@ 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
     connectionId: response.connection_id,
     provider: response.provider,
     feeAmount: response.fee_amount,
@@ -282,14 +296,17 @@ function useReevit(options) {
   const [state, dispatch] = react.useReducer(reevitReducer, {
     ...initialState,
     status: config.initialPaymentIntent ? "ready" : "idle",
-    paymentIntent: config.initialPaymentIntent || null
+    paymentIntent: config.initialPaymentIntent || null,
+    selectedMethod: config.initialPaymentIntent?.availableMethods?.length === 1 ? config.initialPaymentIntent.availableMethods[0] : null
   });
   const apiClientRef = react.useRef(null);
   const initializingRef = react.useRef(!!config.initialPaymentIntent);
   react.useEffect(() => {
-    if (config.initialPaymentIntent && (!state.paymentIntent || state.paymentIntent.id !== config.initialPaymentIntent.id)) {
-      dispatch({ type: "INIT_SUCCESS", payload: config.initialPaymentIntent });
-      initializingRef.current = true;
+    if (config.initialPaymentIntent) {
+      if (!state.paymentIntent || state.paymentIntent.id !== config.initialPaymentIntent.id) {
+        dispatch({ type: "INIT_SUCCESS", payload: config.initialPaymentIntent });
+        initializingRef.current = true;
+      }
     }
   }, [config.initialPaymentIntent, state.paymentIntent?.id]);
   if (!apiClientRef.current) {
@@ -368,8 +385,10 @@ function useReevit(options) {
         if (!apiClient) {
           throw new Error("API client not initialized");
         }
-        const { data, error } = await apiClient.confirmPayment(state.paymentIntent.id);
+        const clientSecret = state.paymentIntent.clientSecret;
+        const { data, error } = clientSecret ? await apiClient.confirmPaymentIntent(state.paymentIntent.id, clientSecret) : await apiClient.confirmPayment(state.paymentIntent.id);
         if (error) {
+          console.error("[useReevit] Confirmation error:", error);
           dispatch({ type: "PROCESS_ERROR", payload: error });
           onError?.(error);
           return;
@@ -382,11 +401,17 @@ function useReevit(options) {
           paymentMethod: state.selectedMethod,
           psp: state.paymentIntent.recommendedPsp,
           pspReference: paymentData.pspReference || data?.provider_ref_id || "",
-          status: "success",
-          metadata: paymentData
+          status: data?.status === "succeeded" ? "success" : "pending",
+          metadata: { ...paymentData, backend_status: data?.status }
         };
-        dispatch({ type: "PROCESS_SUCCESS", payload: result });
-        onSuccess?.(result);
+        console.log("[useReevit] Process result:", result);
+        if (result.status === "success") {
+          dispatch({ type: "PROCESS_SUCCESS", payload: result });
+          onSuccess?.(result);
+        } else {
+          dispatch({ type: "PROCESS_SUCCESS", payload: result });
+          onSuccess?.(result);
+        }
       } catch (err) {
         const error = {
           code: "PAYMENT_FAILED",
@@ -676,9 +701,11 @@ function loadPaystackScript() {
 function PaystackBridge({
   publicKey,
   email,
+  phone,
   amount,
   currency = "GHS",
   reference,
+  accessCode,
   metadata,
   channels = ["card", "mobile_money"],
   onSuccess,
@@ -689,47 +716,70 @@ function PaystackBridge({
   const initialized = react.useRef(false);
   const startPayment = react.useCallback(async () => {
     try {
+      console.log("[PaystackBridge] Starting payment", {
+        hasPublicKey: !!publicKey,
+        email,
+        amount,
+        reference,
+        hasAccessCode: !!accessCode
+      });
       if (!publicKey) {
         throw new Error("Paystack public key is required but was empty");
       }
-      if (!email) {
-        throw new Error("Email is required for Paystack payments");
+      if (!email && !accessCode) {
+        throw new Error("Email is required for Paystack payments when no access code is provided");
       }
-      if (!amount || amount <= 0) {
-        throw new Error("Valid amount is required for Paystack payments");
+      if (!amount && !accessCode) {
+        throw new Error("Valid amount is required for Paystack payments when no access code is provided");
       }
       await loadPaystackScript();
       if (!window.PaystackPop) {
         throw new Error("Paystack script loaded but PaystackPop not available");
       }
-      const handler = window.PaystackPop.setup({
+      const setupConfig = {
         key: publicKey,
         email,
+        phone,
         amount,
-        // Paystack expects amount in kobo/pesewas (smallest unit)
         currency,
         ref: reference,
+        access_code: accessCode,
         metadata,
         channels,
         callback: (response) => {
+          console.log("[PaystackBridge] Callback received", response);
+          let usedMethod = "card";
+          if (channels && channels.length === 1) {
+            usedMethod = channels[0];
+          } else if (response.message?.toLowerCase().includes("mobile money")) {
+            usedMethod = "mobile_money";
+          }
           const result = {
-            paymentId: response.transaction,
+            paymentId: response.reference,
+            // Use the reference as paymentId because we set it to Reevit's UUID
             reference: response.reference,
             amount,
             currency,
-            paymentMethod: "card",
-            // Paystack handles this internally
+            paymentMethod: usedMethod,
             psp: "paystack",
-            pspReference: response.trans,
+            pspReference: response.transaction,
+            // Paystack's internal transaction ID
             status: response.status === "success" ? "success" : "pending",
-            metadata: { trxref: response.trxref }
+            metadata: {
+              ...response,
+              trxref: response.trxref,
+              paystack_transaction_id: response.transaction,
+              paystack_trans: response.trans
+            }
           };
           onSuccess(result);
         },
         onClose: () => {
+          console.log("[PaystackBridge] Modal closed");
           onClose();
         }
-      });
+      };
+      const handler = window.PaystackPop.setup(setupConfig);
       handler.openIframe();
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : "Failed to initialize Paystack";
@@ -741,7 +791,7 @@ function PaystackBridge({
       };
       onError(error);
     }
-  }, [publicKey, email, amount, currency, reference, metadata, channels, onSuccess, onError, onClose]);
+  }, [publicKey, email, amount, currency, reference, accessCode, metadata, channels, onSuccess, onError, onClose]);
   react.useEffect(() => {
     if (autoStart && !initialized.current) {
       initialized.current = true;
@@ -771,6 +821,7 @@ function ReevitCheckout({
   reference,
   metadata,
   paymentMethods = ["card", "mobile_money"],
+  initialPaymentIntent,
   // Callbacks
   onSuccess,
   onError,
@@ -812,7 +863,17 @@ function ReevitCheckout({
     isLoading,
     isComplete
   } = useReevit({
-    config: { publicKey, amount, currency, email, phone, reference, metadata, paymentMethods },
+    config: {
+      publicKey,
+      amount,
+      currency,
+      email,
+      phone,
+      reference,
+      metadata,
+      paymentMethods,
+      initialPaymentIntent
+    },
     apiBaseUrl,
     onSuccess: (result2) => {
       onSuccess?.(result2);
@@ -828,10 +889,19 @@ function ReevitCheckout({
     onStateChange
   });
   react.useEffect(() => {
-    if (isOpen && status === "idle") {
+    if (isOpen && status === "idle" && !initialPaymentIntent) {
       initialize();
     }
-  }, [isOpen, status, initialize]);
+  }, [isOpen, status, initialize, initialPaymentIntent]);
+  react.useEffect(() => {
+    if (isOpen && (selectedMethod === "card" || selectedMethod === "mobile_money") && !showPSPBridge) {
+      if (selectedMethod === "card" && paymentIntent) {
+        setShowPSPBridge(true);
+      } else if (selectedMethod === "mobile_money" && paymentIntent && (momoData?.phone || phone)) {
+        setShowPSPBridge(true);
+      }
+    }
+  }, [isOpen, selectedMethod, showPSPBridge, paymentIntent, momoData, phone]);
   const handleOpen = react.useCallback(() => {
     if (controlledIsOpen !== void 0) return;
     setIsOpen(true);
@@ -885,15 +955,16 @@ function ReevitCheckout({
     setShowPSPBridge(false);
   }, [reset]);
   const themeStyles = theme ? createThemeVariables(theme) : {};
-  const trigger = children ? /* @__PURE__ */ jsxRuntime.jsx("span", { onClick: handleOpen, role: "button", tabIndex: 0, children }) : /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "reevit-trigger-btn", onClick: handleOpen, children: [
+  const isControlled = controlledIsOpen !== void 0;
+  const trigger = children ? /* @__PURE__ */ jsxRuntime.jsx("span", { onClick: isControlled ? void 0 : handleOpen, role: isControlled ? void 0 : "button", tabIndex: isControlled ? void 0 : 0, children }) : !isControlled ? /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "reevit-trigger-btn", onClick: handleOpen, children: [
     "Pay ",
     formatAmount(amount, currency)
-  ] });
+  ] }) : null;
   const renderContent = () => {
-    if (status === "loading") {
+    if (status === "loading" || status === "processing") {
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-loading", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-spinner" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Preparing checkout..." })
+        /* @__PURE__ */ jsxRuntime.jsx("p", { children: status === "loading" ? "Preparing checkout..." : "Processing payment..." })
       ] });
     }
     if (status === "success" && result) {
@@ -921,15 +992,18 @@ function ReevitCheckout({
         {
           publicKey: pspKey,
           email,
+          phone: momoData?.phone || phone,
           amount: paymentIntent?.amount ?? amount,
           currency: paymentIntent?.currency ?? currency,
           reference,
+          accessCode: paymentIntent?.clientSecret,
           metadata: {
             ...metadata,
             // Override with correct payment intent ID for webhook routing
             // This ensures Paystack webhook includes the correct ID to find the payment
             payment_id: paymentIntent?.id,
-            connection_id: paymentIntent?.connectionId ?? metadata?.connection_id
+            connection_id: paymentIntent?.connectionId ?? metadata?.connection_id,
+            customer_phone: momoData?.phone || phone
           },
           channels: selectedMethod === "mobile_money" ? ["mobile_money"] : ["card"],
           onSuccess: handlePSPSuccess,