@reevit/react 0.4.2 → 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 */
@@ -109,6 +115,16 @@ interface ReevitTheme {
     fontFamily?: string;
     /** Whether to use dark mode */
     darkMode?: boolean;
+    /** Custom logo URL to display in checkout header */
+    logoUrl?: string;
+    /** PSP selector background color */
+    pspSelectorBgColor?: string;
+    /** PSP selector text color */
+    pspSelectorTextColor?: string;
+    /** PSP selector border color */
+    pspSelectorBorderColor?: string;
+    /** Use border-only style for PSP selector (no filled background) */
+    pspSelectorUseBorder?: boolean;
 }
 interface CheckoutProviderOption {
     provider: string;
@@ -172,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[];
@@ -180,16 +196,19 @@ interface PaymentMethodSelectorProps {
     onSelect: (method: PaymentMethod) => void;
     disabled?: boolean;
     provider?: string;
+    layout?: 'grid' | 'list';
+    showLabel?: boolean;
 }
-declare function PaymentMethodSelector({ methods, selectedMethod, onSelect, disabled, provider, }: PaymentMethodSelectorProps): react_jsx_runtime.JSX.Element;
+declare function PaymentMethodSelector({ methods, selectedMethod, onSelect, disabled, provider, layout, showLabel, }: PaymentMethodSelectorProps): react_jsx_runtime.JSX.Element;
 
 interface MobileMoneyFormProps {
     onSubmit: (data: MobileMoneyFormData) => void;
-    onCancel: () => void;
+    onCancel?: () => void;
     isLoading?: boolean;
     initialPhone?: string;
+    hideCancel?: boolean;
 }
-declare function MobileMoneyForm({ onSubmit, onCancel, isLoading, initialPhone, }: MobileMoneyFormProps): react_jsx_runtime.JSX.Element;
+declare function MobileMoneyForm({ onSubmit, onCancel, isLoading, initialPhone, hideCancel, }: MobileMoneyFormProps): react_jsx_runtime.JSX.Element;
 
 /**
  * useReevit hook
@@ -278,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;
@@ -287,16 +306,19 @@ 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) */
     basicAuth?: string;
+    preferredMethod?: PaymentMethod;
     onSuccess: (result: PaymentResult) => void;
     onError: (error: PaymentError) => void;
     onClose: () => void;
     autoStart?: boolean;
 }
-declare function HubtelBridge({ paymentId, publicKey, merchantAccount, amount, reference, phone, description, callbackUrl, hubtelSessionToken, basicAuth, 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
@@ -309,6 +331,7 @@ declare function openHubtelPopup(config: {
     callbackUrl?: string;
     customerPhoneNumber?: string;
     basicAuth?: string;
+    preferredMethod?: PaymentMethod;
     onSuccess?: (data: Record<string, unknown>) => void;
     onError?: (data: Record<string, unknown>) => void;
     onClose?: () => void;
@@ -624,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 */
@@ -688,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 */
@@ -109,6 +115,16 @@ interface ReevitTheme {
     fontFamily?: string;
     /** Whether to use dark mode */
     darkMode?: boolean;
+    /** Custom logo URL to display in checkout header */
+    logoUrl?: string;
+    /** PSP selector background color */
+    pspSelectorBgColor?: string;
+    /** PSP selector text color */
+    pspSelectorTextColor?: string;
+    /** PSP selector border color */
+    pspSelectorBorderColor?: string;
+    /** Use border-only style for PSP selector (no filled background) */
+    pspSelectorUseBorder?: boolean;
 }
 interface CheckoutProviderOption {
     provider: string;
@@ -172,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[];
@@ -180,16 +196,19 @@ interface PaymentMethodSelectorProps {
     onSelect: (method: PaymentMethod) => void;
     disabled?: boolean;
     provider?: string;
+    layout?: 'grid' | 'list';
+    showLabel?: boolean;
 }
-declare function PaymentMethodSelector({ methods, selectedMethod, onSelect, disabled, provider, }: PaymentMethodSelectorProps): react_jsx_runtime.JSX.Element;
+declare function PaymentMethodSelector({ methods, selectedMethod, onSelect, disabled, provider, layout, showLabel, }: PaymentMethodSelectorProps): react_jsx_runtime.JSX.Element;
 
 interface MobileMoneyFormProps {
     onSubmit: (data: MobileMoneyFormData) => void;
-    onCancel: () => void;
+    onCancel?: () => void;
     isLoading?: boolean;
     initialPhone?: string;
+    hideCancel?: boolean;
 }
-declare function MobileMoneyForm({ onSubmit, onCancel, isLoading, initialPhone, }: MobileMoneyFormProps): react_jsx_runtime.JSX.Element;
+declare function MobileMoneyForm({ onSubmit, onCancel, isLoading, initialPhone, hideCancel, }: MobileMoneyFormProps): react_jsx_runtime.JSX.Element;
 
 /**
  * useReevit hook
@@ -278,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;
@@ -287,16 +306,19 @@ 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) */
     basicAuth?: string;
+    preferredMethod?: PaymentMethod;
     onSuccess: (result: PaymentResult) => void;
     onError: (error: PaymentError) => void;
     onClose: () => void;
     autoStart?: boolean;
 }
-declare function HubtelBridge({ paymentId, publicKey, merchantAccount, amount, reference, phone, description, callbackUrl, hubtelSessionToken, basicAuth, 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
@@ -309,6 +331,7 @@ declare function openHubtelPopup(config: {
     callbackUrl?: string;
     customerPhoneNumber?: string;
     basicAuth?: string;
+    preferredMethod?: PaymentMethod;
     onSuccess?: (data: Record<string, unknown>) => void;
     onError?: (data: Record<string, unknown>) => void;
     onClose?: () => void;
@@ -624,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 */
@@ -688,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;
     }>;