@reevit/react 0.4.3 → 0.4.4

package/dist/index.d.mts

@@ -8,8 +8,8 @@ type MobileMoneyNetwork = 'mtn' | 'vodafone' | 'airteltigo';
 /** Payment source type - indicates where the payment originated from */
 type PaymentSource = 'payment_link' | 'api' | 'subscription';
 interface ReevitCheckoutConfig {
-    /** Your Reevit public key (pk_live_xxx or pk_test_xxx) */
-    publicKey: string;
+    /** Your Reevit public key (required for API-created intents; omit for payment links) */
+    publicKey?: string;
     /** Amount in the smallest currency unit (e.g., pesewas for GHS) */
     amount: number;
     /** Currency code (e.g., 'GHS', 'NGN', 'USD') */
@@ -18,10 +18,16 @@ interface ReevitCheckoutConfig {
     email?: string;
     /** Customer phone number (required for mobile money) */
     phone?: string;
+    /** Customer name (optional, used for payment links) */
+    customerName?: string;
     /** Unique reference for this transaction */
     reference?: string;
     /** Additional metadata to attach to the payment */
     metadata?: Record<string, unknown>;
+    /** Custom fields for payment links (if applicable) */
+    customFields?: Record<string, unknown>;
+    /** Payment link code (for public checkout flows) */
+    paymentLinkCode?: string;
     /** Payment methods to display */
     paymentMethods?: PaymentMethod[];
     /** Optional existing payment intent to use instead of creating a new one */
@@ -182,7 +188,7 @@ interface ReevitContextValue {
     currency: string;
 }
 declare function useReevitContext(): ReevitContextValue;
-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;
+declare function ReevitCheckout({ publicKey, amount, currency, email, phone, customerName, reference, metadata, customFields, paymentLinkCode, paymentMethods, initialPaymentIntent, onSuccess, onError, onClose, onStateChange, children, autoOpen, isOpen: controlledIsOpen, onOpenChange, theme, apiBaseUrl, }: ReevitCheckoutProps): react_jsx_runtime.JSX.Element;
 
 interface PaymentMethodSelectorProps {
     methods: PaymentMethod[];
@@ -291,7 +297,7 @@ declare function PaystackBridge({ publicKey, email, phone, amount, currency, ref
 
 interface HubtelBridgeProps {
     paymentId: string;
-    publicKey: string;
+    publicKey?: string;
     merchantAccount: string | number;
     amount: number;
     currency?: string;
@@ -300,6 +306,8 @@ interface HubtelBridgeProps {
     phone?: string;
     description?: string;
     callbackUrl?: string;
+    apiBaseUrl?: string;
+    clientSecret?: string;
     /** Session token from server (recommended - credentials never exposed to client) */
     hubtelSessionToken?: string;
     /** Basic auth credential (legacy - credentials exposed to client, deprecated) */
@@ -310,7 +318,7 @@ interface HubtelBridgeProps {
     onClose: () => void;
     autoStart?: boolean;
 }
-declare function HubtelBridge({ paymentId, publicKey, merchantAccount, amount, reference, phone, description, callbackUrl, hubtelSessionToken, basicAuth, preferredMethod, onSuccess, onError, onClose, autoStart, }: HubtelBridgeProps): react_jsx_runtime.JSX.Element;
+declare function HubtelBridge({ paymentId, publicKey, merchantAccount, amount, reference, phone, description, callbackUrl, apiBaseUrl, clientSecret, hubtelSessionToken, basicAuth, preferredMethod, onSuccess, onError, onClose, autoStart, }: HubtelBridgeProps): react_jsx_runtime.JSX.Element;
 /**
  * Opens Hubtel checkout modal directly
  * Uses the @hubteljs/checkout npm package
@@ -639,7 +647,7 @@ interface PaymentDetailResponse {
 }
 interface ReevitAPIClientConfig {
     /** Your Reevit public key */
-    publicKey: string;
+    publicKey?: string;
     /** Base URL for the Reevit API (defaults to production) */
     baseUrl?: string;
     /** Request timeout in milliseconds */
@@ -703,7 +711,7 @@ declare class ReevitAPIClient {
      * @param paymentId - The payment intent ID for Hubtel checkout
      * @returns Hubtel session with token, merchant account, and expiry information
      */
-    createHubtelSession(paymentId: string): Promise<{
+    createHubtelSession(paymentId: string, clientSecret?: string): Promise<{
         data?: HubtelSessionResponse;
         error?: PaymentError;
     }>;

package/dist/index.d.ts

@@ -8,8 +8,8 @@ type MobileMoneyNetwork = 'mtn' | 'vodafone' | 'airteltigo';
 /** Payment source type - indicates where the payment originated from */
 type PaymentSource = 'payment_link' | 'api' | 'subscription';
 interface ReevitCheckoutConfig {
-    /** Your Reevit public key (pk_live_xxx or pk_test_xxx) */
-    publicKey: string;
+    /** Your Reevit public key (required for API-created intents; omit for payment links) */
+    publicKey?: string;
     /** Amount in the smallest currency unit (e.g., pesewas for GHS) */
     amount: number;
     /** Currency code (e.g., 'GHS', 'NGN', 'USD') */
@@ -18,10 +18,16 @@ interface ReevitCheckoutConfig {
     email?: string;
     /** Customer phone number (required for mobile money) */
     phone?: string;
+    /** Customer name (optional, used for payment links) */
+    customerName?: string;
     /** Unique reference for this transaction */
     reference?: string;
     /** Additional metadata to attach to the payment */
     metadata?: Record<string, unknown>;
+    /** Custom fields for payment links (if applicable) */
+    customFields?: Record<string, unknown>;
+    /** Payment link code (for public checkout flows) */
+    paymentLinkCode?: string;
     /** Payment methods to display */
     paymentMethods?: PaymentMethod[];
     /** Optional existing payment intent to use instead of creating a new one */
@@ -182,7 +188,7 @@ interface ReevitContextValue {
     currency: string;
 }
 declare function useReevitContext(): ReevitContextValue;
-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;
+declare function ReevitCheckout({ publicKey, amount, currency, email, phone, customerName, reference, metadata, customFields, paymentLinkCode, paymentMethods, initialPaymentIntent, onSuccess, onError, onClose, onStateChange, children, autoOpen, isOpen: controlledIsOpen, onOpenChange, theme, apiBaseUrl, }: ReevitCheckoutProps): react_jsx_runtime.JSX.Element;
 
 interface PaymentMethodSelectorProps {
     methods: PaymentMethod[];
@@ -291,7 +297,7 @@ declare function PaystackBridge({ publicKey, email, phone, amount, currency, ref
 
 interface HubtelBridgeProps {
     paymentId: string;
-    publicKey: string;
+    publicKey?: string;
     merchantAccount: string | number;
     amount: number;
     currency?: string;
@@ -300,6 +306,8 @@ interface HubtelBridgeProps {
     phone?: string;
     description?: string;
     callbackUrl?: string;
+    apiBaseUrl?: string;
+    clientSecret?: string;
     /** Session token from server (recommended - credentials never exposed to client) */
     hubtelSessionToken?: string;
     /** Basic auth credential (legacy - credentials exposed to client, deprecated) */
@@ -310,7 +318,7 @@ interface HubtelBridgeProps {
     onClose: () => void;
     autoStart?: boolean;
 }
-declare function HubtelBridge({ paymentId, publicKey, merchantAccount, amount, reference, phone, description, callbackUrl, hubtelSessionToken, basicAuth, preferredMethod, onSuccess, onError, onClose, autoStart, }: HubtelBridgeProps): react_jsx_runtime.JSX.Element;
+declare function HubtelBridge({ paymentId, publicKey, merchantAccount, amount, reference, phone, description, callbackUrl, apiBaseUrl, clientSecret, hubtelSessionToken, basicAuth, preferredMethod, onSuccess, onError, onClose, autoStart, }: HubtelBridgeProps): react_jsx_runtime.JSX.Element;
 /**
  * Opens Hubtel checkout modal directly
  * Uses the @hubteljs/checkout npm package
@@ -639,7 +647,7 @@ interface PaymentDetailResponse {
 }
 interface ReevitAPIClientConfig {
     /** Your Reevit public key */
-    publicKey: string;
+    publicKey?: string;
     /** Base URL for the Reevit API (defaults to production) */
     baseUrl?: string;
     /** Request timeout in milliseconds */
@@ -703,7 +711,7 @@ declare class ReevitAPIClient {
      * @param paymentId - The payment intent ID for Hubtel checkout
      * @returns Hubtel session with token, merchant account, and expiry information
      */
-    createHubtelSession(paymentId: string): Promise<{
+    createHubtelSession(paymentId: string, clientSecret?: string): Promise<{
         data?: HubtelSessionResponse;
         error?: PaymentError;
     }>;

package/dist/index.js

@@ -138,8 +138,8 @@ function createPaymentError(response, errorData) {
 }
 var ReevitAPIClient = class {
   constructor(config) {
-    this.publicKey = config.publicKey;
-    this.baseUrl = config.baseUrl || (isSandboxKey(config.publicKey) ? API_BASE_URL_SANDBOX : API_BASE_URL_PRODUCTION);
+    this.publicKey = config.publicKey || "";
+    this.baseUrl = config.baseUrl || (config.publicKey && isSandboxKey(config.publicKey) ? API_BASE_URL_SANDBOX : API_BASE_URL_PRODUCTION);
     this.timeout = config.timeout || DEFAULT_TIMEOUT;
   }
   /**
@@ -150,10 +150,12 @@ var ReevitAPIClient = class {
     const timeoutId = setTimeout(() => controller.abort(), this.timeout);
     const headers = {
       "Content-Type": "application/json",
-      "X-Reevit-Key": this.publicKey,
       "X-Reevit-Client": "@reevit/react",
       "X-Reevit-Client-Version": "0.3.2"
     };
+    if (this.publicKey) {
+      headers["X-Reevit-Key"] = this.publicKey;
+    }
     if (method === "POST" || method === "PATCH" || method === "PUT") {
       headers["Idempotency-Key"] = `${Date.now()}-${Math.random().toString(36).substring(2, 15)}`;
     }
@@ -260,8 +262,9 @@ var ReevitAPIClient = class {
    * @param paymentId - The payment intent ID for Hubtel checkout
    * @returns Hubtel session with token, merchant account, and expiry information
    */
-  async createHubtelSession(paymentId) {
-    return this.request("POST", `/v1/payments/hubtel/sessions/${paymentId}`);
+  async createHubtelSession(paymentId, clientSecret) {
+    const query = clientSecret ? `?client_secret=${encodeURIComponent(clientSecret)}` : "";
+    return this.request("POST", `/v1/payments/hubtel/sessions/${paymentId}${query}`);
   }
   /**
    * Maps SDK payment method to backend format
@@ -291,6 +294,18 @@ var initialState = {
   error: null,
   result: null
 };
+var DEFAULT_PUBLIC_API_BASE_URL = "https://api.reevit.io";
+function buildPaymentLinkError(response, data) {
+  return {
+    code: data?.code || "payment_link_error",
+    message: data?.message || "Payment link request failed",
+    recoverable: true,
+    details: {
+      httpStatus: response.status,
+      ...data?.details || {}
+    }
+  };
+}
 function reevitReducer(state, action) {
   switch (action.type) {
     case "INIT_START":
@@ -414,15 +429,48 @@ function useReevit(options) {
         const reference = config.reference || generateReference();
         const country = detectCountryFromCurrency(config.currency);
         const paymentMethod = method || config.paymentMethods?.[0] || "card";
-        const { data, error } = await apiClient.createPaymentIntent(
-          { ...config, reference },
-          paymentMethod,
-          country,
-          {
-            preferredProviders: options2?.preferredProvider ? [options2.preferredProvider] : void 0,
-            allowedProviders: options2?.allowedProviders
+        let data;
+        let error;
+        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": `${Date.now()}-${Math.random().toString(36).substring(2, 15)}`
+              },
+              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) {
+            error = buildPaymentLinkError(response, responseData);
+          } else {
+            data = responseData;
           }
-        );
+        } else {
+          const result = await apiClient.createPaymentIntent(
+            { ...config, reference },
+            paymentMethod,
+            country,
+            {
+              preferredProviders: options2?.preferredProvider ? [options2.preferredProvider] : void 0,
+              allowedProviders: options2?.allowedProviders
+            }
+          );
+          data = result.data;
+          error = result.error;
+        }
         if (error) {
           dispatch({ type: "INIT_ERROR", payload: error });
           onError?.(error);
@@ -1042,6 +1090,8 @@ function HubtelBridge({
   phone,
   description = "Payment",
   callbackUrl,
+  apiBaseUrl,
+  clientSecret,
   hubtelSessionToken,
   basicAuth,
   preferredMethod,
@@ -1054,13 +1104,17 @@ function HubtelBridge({
   const checkoutRef = react.useRef(null);
   const [authValue, setAuthValue] = react.useState("");
   const [isLoading, setIsLoading] = react.useState(false);
+  const [resolvedMerchantAccount, setResolvedMerchantAccount] = react.useState(merchantAccount);
+  react.useEffect(() => {
+    setResolvedMerchantAccount(merchantAccount);
+  }, [merchantAccount]);
   react.useEffect(() => {
     const fetchAuth = async () => {
       if (hubtelSessionToken) {
         setIsLoading(true);
         try {
-          const client = createReevitClient({ publicKey });
-          const { data, error } = await client.createHubtelSession(paymentId);
+          const client = createReevitClient({ publicKey, baseUrl: apiBaseUrl });
+          const { data, error } = await client.createHubtelSession(paymentId, clientSecret);
           if (error) {
             onError({
               code: "SESSION_ERROR",
@@ -1071,6 +1125,9 @@ function HubtelBridge({
           }
           if (data) {
             setAuthValue(data.token);
+            if (data.merchantAccount) {
+              setResolvedMerchantAccount(data.merchantAccount);
+            }
           }
         } catch (err) {
           onError({
@@ -1087,7 +1144,7 @@ function HubtelBridge({
       }
     };
     fetchAuth();
-  }, [paymentId, publicKey, hubtelSessionToken, basicAuth, onError]);
+  }, [paymentId, publicKey, apiBaseUrl, clientSecret, hubtelSessionToken, basicAuth, onError]);
   const startPayment = react.useCallback(async () => {
     if (isLoading || !authValue) {
       return;
@@ -1107,7 +1164,7 @@ function HubtelBridge({
       const config = {
         branding: "enabled",
         callbackUrl: callbackUrl || window.location.href,
-        merchantAccount: typeof merchantAccount === "string" ? parseInt(merchantAccount, 10) : merchantAccount,
+        merchantAccount: typeof resolvedMerchantAccount === "string" ? parseInt(resolvedMerchantAccount, 10) : resolvedMerchantAccount,
         // Use session token or basicAuth for authentication
         // Session tokens are base64-encoded credentials fetched securely from the server
         basicAuth: authValue || "",
@@ -1890,8 +1947,11 @@ function ReevitCheckout({
   currency,
   email = "",
   phone = "",
+  customerName,
   reference,
   metadata,
+  customFields,
+  paymentLinkCode,
   paymentMethods = ["card", "mobile_money"],
   initialPaymentIntent,
   // Callbacks
@@ -1942,8 +2002,11 @@ function ReevitCheckout({
       currency,
       email,
       phone,
+      customerName,
       reference,
       metadata,
+      customFields,
+      paymentLinkCode,
       paymentMethods,
       initialPaymentIntent
     },
@@ -2151,7 +2214,7 @@ function ReevitCheckout({
     const psp = selectedProvider || paymentIntent?.recommendedPsp || "paystack";
     const pspLower = psp.toLowerCase();
     if (showPSPBridge) {
-      const pspKey = paymentIntent?.pspPublicKey || publicKey;
+      const pspKey = paymentIntent?.pspPublicKey || publicKey || "";
       const bridgeMetadata = {
         ...metadata,
         payment_id: paymentIntent?.id,
@@ -2191,6 +2254,8 @@ function ReevitCheckout({
               phone: momoData?.phone || phone,
               description: `Payment ${paymentIntent?.reference || reference || ""}`,
               hubtelSessionToken: paymentIntent?.id ? paymentIntent.id : void 0,
+              clientSecret: paymentIntent?.clientSecret,
+              apiBaseUrl,
               preferredMethod: selectedMethod || void 0,
               onSuccess: handlePSPSuccess,
               onError: (err) => handlePSPError(err),
@@ -2241,7 +2306,7 @@ function ReevitCheckout({
               currency: paymentIntent?.currency ?? currency,
               reference: paymentIntent?.reference || reference || `mpesa_${Date.now()}`,
               description: `Payment ${paymentIntent?.reference || reference || ""}`,
-              headers: { "x-reevit-public-key": publicKey },
+              headers: { "x-reevit-public-key": publicKey || "" },
               onSuccess: handlePSPSuccess,
               onError: handlePSPError
             }
@@ -2334,7 +2399,7 @@ function ReevitCheckout({
       ] }) })
     ] });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(ReevitContext.Provider, { value: { publicKey, amount, currency }, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(ReevitContext.Provider, { value: { publicKey: publicKey || "", amount, currency }, children: [
     trigger,
     isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-overlay", onClick: handleClose, children: /* @__PURE__ */ jsxRuntime.jsxs(
       "div",