@wix/headless-bookings 0.0.116 → 0.0.118

package/cjs/dist/react/booking-form/BookingForm.d.ts

@@ -21,6 +21,8 @@ export interface RootProps {
     serviceIds?: string[];
     /** Optional additional metadata to pass to FormService */
     additionalMetadata?: Record<string, string | string[]>;
+    /** Optional namespace override for the form. Defaults to the bookings namespace. */
+    namespace?: string;
     /** Field map to override default booking field components */
     fieldMap: FieldMap;
     /**

package/cjs/dist/react/booking-form/BookingForm.js

@@ -151,8 +151,8 @@ exports.TestIds = {
  * ```
  */
 exports.Root = react_1.default.forwardRef((props, ref) => {
-    const { children, asChild, className, formId, serviceIds, additionalMetadata, fieldMap, rowGapClassname = 'gap-y-4', columnGapClassname = 'gap-x-2', loadErrorFallback, ...otherProps } = props;
-    return ((0, jsx_runtime_1.jsx)(BookingFormErrorBoundary, { fallback: loadErrorFallback, children: (0, jsx_runtime_1.jsx)(CoreBookingForm.Root, { formId: formId, serviceIds: serviceIds, additionalMetadata: additionalMetadata, fieldMap: fieldMap, children: (renderProps) => {
+    const { children, asChild, className, formId, serviceIds, additionalMetadata, namespace, fieldMap, rowGapClassname = 'gap-y-4', columnGapClassname = 'gap-x-2', loadErrorFallback, ...otherProps } = props;
+    return ((0, jsx_runtime_1.jsx)(BookingFormErrorBoundary, { fallback: loadErrorFallback, children: (0, jsx_runtime_1.jsx)(CoreBookingForm.Root, { formId: formId, serviceIds: serviceIds, additionalMetadata: additionalMetadata, namespace: namespace, fieldMap: fieldMap, children: (renderProps) => {
                 // If children is a render prop function, call it with the render props
                 if (typeof children === 'function') {
                     return children(renderProps);

package/cjs/dist/react/core/booking-form/BookingForm.d.ts

@@ -44,6 +44,8 @@ interface BookingFormBaseProps {
     serviceIds?: string[];
     /** Optional additional metadata to pass to FormService */
     additionalMetadata?: Record<string, string | string[]>;
+    /** Optional namespace override for the form. Defaults to the bookings namespace. */
+    namespace?: string;
     /** Field map to override default booking field components */
     fieldMap: FieldMap;
     /** Render prop function that receives form data and actions */

package/cjs/dist/react/core/booking-form/BookingForm.js

@@ -129,13 +129,13 @@ const signals_1 = require("@wix/services-definitions/core-services/signals");
  * ```
  */
 function Root(props) {
-    const { serviceIds, additionalMetadata, fieldMap, children } = props;
+    const { serviceIds, additionalMetadata, namespace, fieldMap, children } = props;
     // Create formRef to pass to Form.Root and BookingFormContent
     const formRef = (0, react_1.useRef)(null);
     const bookingFormServiceConfig = props.form
-        ? { form: props.form }
+        ? { form: props.form, ...(namespace !== undefined ? { namespace } : {}) }
         : props.formId
-            ? { formId: props.formId, additionalMetadata, serviceIds }
+            ? { formId: props.formId, additionalMetadata, serviceIds, namespace }
             : undefined;
     // Use Form.Root to set up FormService, then nest WixServices for BookingFormService
     // This allows BookingFormService to access FormService via getService internally

package/cjs/dist/react/core/payment/Payment.d.ts

@@ -4,7 +4,7 @@
  * Note: Currently supports single service only
  */
 import React from 'react';
-import { type PaymentServiceConfig, type PricingServiceSelection } from '../../../services/payment/payment.js';
+import { type PaymentServiceConfig, type PricingServiceSelection, type ServicePaymentOptions } from '../../../services/payment/payment.js';
 import type { MoneyData } from '@wix/headless-components/react';
 /**
  * Props for Payment.Root component
@@ -164,6 +164,19 @@ export interface LineItemProviderProps {
  * ```
  */
 export declare function LineItemProvider(props: LineItemProviderProps): React.ReactNode;
+/**
+ * Props for ServiceOptions render prop component
+ */
+export interface ServiceOptionsProps {
+    children: (options: ServicePaymentOptions) => React.ReactNode;
+}
+/**
+ * Core component that exposes service payment options via render props.
+ * Reads isOnline, isInPerson, isDeposit from the payment service signal.
+ *
+ * @component
+ */
+export declare function ServiceOptions(props: ServiceOptionsProps): React.ReactNode;
 /**
  * Props for LineItemInfo render prop component
  */

package/cjs/dist/react/core/payment/Payment.js

@@ -8,6 +8,7 @@ exports.Data = Data;
 exports.LineItems = LineItems;
 exports.useLineItemContext = useLineItemContext;
 exports.LineItemProvider = LineItemProvider;
+exports.ServiceOptions = ServiceOptions;
 exports.LineItemInfo = LineItemInfo;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /**
@@ -199,6 +200,17 @@ function LineItemProvider(props) {
     };
     return ((0, jsx_runtime_1.jsx)(LineItemContext.Provider, { value: contextValue, children: children }));
 }
+/**
+ * Core component that exposes service payment options via render props.
+ * Reads isOnline, isInPerson, isDeposit from the payment service signal.
+ *
+ * @component
+ */
+function ServiceOptions(props) {
+    const paymentService = (0, services_manager_react_1.useService)(payment_js_1.PaymentServiceDefinition);
+    const serviceOptions = paymentService.serviceOptionsSignal.get();
+    return props.children(serviceOptions);
+}
 /**
  * Core component that provides access to line item info via render props.
  * Must be used within LineItemProvider.

package/cjs/dist/react/payment/Payment.d.ts

@@ -5,7 +5,7 @@
 import React from 'react';
 import { AsChildChildren } from '@wix/headless-utils/react';
 import { MoneyData } from '@wix/headless-components/react';
-import type { PaymentServiceConfig, PricingServiceSelection } from '../../services/payment/payment.js';
+import type { PaymentServiceConfig, PricingServiceSelection, ServicePaymentOptions } from '../../services/payment/payment.js';
 export declare const TestIds: {
     readonly paymentRoot: "payment-root";
     readonly paymentSubtotal: "payment-subtotal";
@@ -19,6 +19,7 @@ export declare const TestIds: {
     readonly paymentLineItemTotal: "payment-line-item-total";
     readonly paymentLineItemSubtotal: "payment-line-item-subtotal";
     readonly paymentLineItemDeposit: "payment-line-item-deposit";
+    readonly paymentServiceOptions: "payment-service-options";
 };
 /**
  * Props for Payment.Root component
@@ -194,6 +195,41 @@ export interface PayLaterProps extends Omit<React.HTMLAttributes<HTMLElement>, '
  * ```
  */
 export declare const PayLater: React.ForwardRefExoticComponent<PayLaterProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Payment.ServiceOptions component
+ */
+export interface ServiceOptionsProps {
+    asChild?: boolean;
+    /** Render prop receiving service payment options. This component renders no
+     * visible DOM element by default — it is a flags-only data component. */
+    children?: AsChildChildren<ServicePaymentOptions>;
+}
+/**
+ * Exposes service payment options via render props.
+ * Use this to determine which payment scenario to render without reading the service entity directly.
+ *
+ * Payment scenarios:
+ * - `isOnline=true, isInPerson=false, isDeposit=false` → Pay now only (Due now = total)
+ * - `isOnline=true, isInPerson=false, isDeposit=true` → Pay now + security deposit
+ * - `isOnline=true, isInPerson=true` → Radio: Pay Online / Pay on Arrival
+ * - `isOnline=false, isInPerson=true` → Pay on arrival only
+ *
+ * @component
+ * Note: This component renders no visible DOM element. It is a flags-only data
+ * component — use `asChild` with a render function to consume the flags.
+ * For the actual split amounts (deposit / pay-later), use `Payment.PayNow` and
+ * `Payment.PayLater`.
+ *
+ * @example
+ * ```tsx
+ * <Payment.ServiceOptions asChild>
+ *   {({ isOnline, isInPerson, isDeposit }) => (
+ *     // render the correct payment scenario
+ *   )}
+ * </Payment.ServiceOptions>
+ * ```
+ */
+export declare const ServiceOptions: React.ForwardRefExoticComponent<ServiceOptionsProps & React.RefAttributes<HTMLElement>>;
 /**
  * Props for Payment.LineItems component (Container Level)
  */

package/cjs/dist/react/payment/Payment.js

@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LineItemDeposit = exports.LineItemSubtotal = exports.LineItemTotal = exports.LineItemRepeater = exports.LineItemsList = exports.LineItems = exports.PayLater = exports.PayNow = exports.Total = exports.Tax = exports.Subtotal = exports.Root = exports.TestIds = void 0;
+exports.LineItemDeposit = exports.LineItemSubtotal = exports.LineItemTotal = exports.LineItemRepeater = exports.LineItemsList = exports.LineItems = exports.ServiceOptions = exports.PayLater = exports.PayNow = exports.Total = exports.Tax = exports.Subtotal = exports.Root = exports.TestIds = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /**
  * Payment - High-level component for displaying payment information
@@ -59,6 +59,7 @@ exports.TestIds = {
     paymentLineItemTotal: 'payment-line-item-total',
     paymentLineItemSubtotal: 'payment-line-item-subtotal',
     paymentLineItemDeposit: 'payment-line-item-deposit',
+    paymentServiceOptions: 'payment-service-options',
 };
 /**
  * Root component that provides payment context to the entire app.
@@ -200,6 +201,36 @@ exports.PayLater = react_1.default.forwardRef((props, ref) => {
     return ((0, jsx_runtime_1.jsx)(CorePayment.Data, { children: ({ payLater, isDeposit }) => ((0, jsx_runtime_1.jsx)(react_2.AsChildSlot, { ref: ref, asChild: asChild, className: className, customElement: children, customElementProps: { payLater, isDeposit }, "data-testid": exports.TestIds.paymentPayLater, "data-has-deposit": isDeposit, children: isDeposit && payLater && payLater.amount > 0 && ((0, jsx_runtime_1.jsx)(react_3.Money, { money: payLater })) })) }));
 });
 exports.PayLater.displayName = 'Payment.PayLater';
+/**
+ * Exposes service payment options via render props.
+ * Use this to determine which payment scenario to render without reading the service entity directly.
+ *
+ * Payment scenarios:
+ * - `isOnline=true, isInPerson=false, isDeposit=false` → Pay now only (Due now = total)
+ * - `isOnline=true, isInPerson=false, isDeposit=true` → Pay now + security deposit
+ * - `isOnline=true, isInPerson=true` → Radio: Pay Online / Pay on Arrival
+ * - `isOnline=false, isInPerson=true` → Pay on arrival only
+ *
+ * @component
+ * Note: This component renders no visible DOM element. It is a flags-only data
+ * component — use `asChild` with a render function to consume the flags.
+ * For the actual split amounts (deposit / pay-later), use `Payment.PayNow` and
+ * `Payment.PayLater`.
+ *
+ * @example
+ * ```tsx
+ * <Payment.ServiceOptions asChild>
+ *   {({ isOnline, isInPerson, isDeposit }) => (
+ *     // render the correct payment scenario
+ *   )}
+ * </Payment.ServiceOptions>
+ * ```
+ */
+exports.ServiceOptions = react_1.default.forwardRef((props, ref) => {
+    const { asChild, children } = props;
+    return ((0, jsx_runtime_1.jsx)(CorePayment.ServiceOptions, { children: ({ isOnline, isInPerson, isDeposit }) => ((0, jsx_runtime_1.jsx)(react_2.AsChildSlot, { ref: ref, asChild: asChild, customElement: children, customElementProps: { isOnline, isInPerson, isDeposit }, "data-testid": exports.TestIds.paymentServiceOptions, "data-is-online": isOnline, "data-is-in-person": isInPerson, "data-is-deposit": isDeposit, children: null })) }));
+});
+exports.ServiceOptions.displayName = 'Payment.ServiceOptions';
 /**
  * Container component for line items.
  * Follows the 3-level List/Options/Repeater pattern.

package/cjs/dist/services/booking/book-action/bookAction.js

@@ -62,6 +62,7 @@ async function executeBookAction(params) {
         bookingId,
         contactDetails,
         businessLocationId,
+        appId: params.appId,
     });
     const checkoutResponse = await (0, index_js_2.createCheckout)(checkoutRequest);
     const checkout = checkoutResponse.checkout;

package/cjs/dist/services/booking/book-action/buildCheckoutRequest.d.ts

@@ -10,6 +10,8 @@ export interface BuildCheckoutParams {
     bookingId: string;
     contactDetails?: ContactDetails;
     businessLocationId?: string;
+    /** Optional app ID override for the catalog reference. Defaults to BOOKING_APP_ID. */
+    appId?: string;
 }
 /**
  * Builds a checkout request from the booking ID and contact details

package/cjs/dist/services/booking/book-action/buildCheckoutRequest.js

@@ -19,7 +19,7 @@ const constants_js_1 = require("../../constants.js");
  * @returns CreateCheckoutRequest ready to be sent to the API
  */
 function buildCheckoutRequest(params) {
-    const { bookingId, contactDetails, businessLocationId } = params;
+    const { bookingId, contactDetails, businessLocationId, appId } = params;
     // Build checkoutInfo incrementally for readability
     const checkoutInfo = {};
     // businessLocationId for multi-location support
@@ -56,7 +56,7 @@ function buildCheckoutRequest(params) {
                 quantity: 1,
                 catalogReference: {
                     catalogItemId: bookingId,
-                    appId: constants_js_1.BOOKING_APP_ID,
+                    appId: appId ?? constants_js_1.BOOKING_APP_ID,
                 },
             },
         ],

package/cjs/dist/services/booking/book-action/types.d.ts

@@ -36,6 +36,8 @@ export interface BookActionParams {
     location: TimeSlotLocationType | null;
     formSubmission: FormValues | null;
     timezone?: string;
+    /** Optional app ID override for the catalog reference. Defaults to the bookings app ID. */
+    appId?: string;
 }
 /**
  * Props passed to children of Book component

package/cjs/dist/services/booking/booking.d.ts

@@ -110,6 +110,8 @@ export interface BookingServiceConfig {
     timezone?: string;
     /** Optional initial form submission */
     formSubmission?: FormValues | null;
+    /** Optional app ID override for the catalog reference. Defaults to the bookings app ID. */
+    appId?: string;
 }
 /**
  * Implementation of BookingService

package/cjs/dist/services/booking/booking.js

@@ -186,6 +186,7 @@ exports.BookingService = services_definitions_1.implementService.withConfig()(ex
                 formSubmission,
                 location,
                 timezone,
+                appId: config.appId,
             });
         },
     };

package/cjs/dist/services/booking-form/booking-form.d.ts

@@ -55,9 +55,13 @@ export type BookingFormServiceConfig = {
     additionalMetadata?: Record<string, string | string[]>;
     /** Optional list of service IDs to pass to FormService */
     serviceIds?: string[];
+    /** Optional namespace override. Defaults to BOOKING_FORM_NAMESPACE. */
+    namespace?: string;
 } | {
     /** Pre-loaded form object (SSR/SSG) - must be from bookings namespace */
     form: forms.Form;
+    /** Optional namespace override. Defaults to BOOKING_FORM_NAMESPACE. */
+    namespace?: string;
 };
 /**
  * API interface for the BookingForm service.

package/cjs/dist/services/booking-form/booking-form.js

@@ -61,15 +61,18 @@ exports.BookingFormServiceDefinition = (0, services_definitions_1.defineService)
 // Validation Helpers
 // ============================================================================
 /**
- * Validates that a form belongs to the bookings namespace.
- * @param config The service config that may contain a pre-loaded form
- * @throws Error if the form is not from the bookings namespace
+ * Validates that a form belongs to the expected namespace.
+ * When a custom namespace is provided, validates against it; otherwise validates
+ * against BOOKING_FORM_NAMESPACE.
+ * @param form The form to validate
+ * @param expectedNamespace The expected namespace (defaults to BOOKING_FORM_NAMESPACE)
+ * @throws Error if the form namespace does not match the expected namespace
  */
-function validateBookingFormNamespace(form) {
+function validateBookingFormNamespace(form, expectedNamespace = exports.BOOKING_FORM_NAMESPACE) {
     const formNamespace = form.namespace;
-    if (formNamespace && formNamespace !== exports.BOOKING_FORM_NAMESPACE) {
+    if (formNamespace && formNamespace !== expectedNamespace) {
         throw new Error(`BookingFormService: Invalid form namespace. ` +
-            `Expected "${exports.BOOKING_FORM_NAMESPACE}", but received "${formNamespace}". ` +
+            `Expected "${expectedNamespace}", but received "${formNamespace}". ` +
             `Ensure the form is a booking form.`);
     }
 }
@@ -78,7 +81,7 @@ function validateBookingFormConfig({ config, services, }) {
         return;
     }
     if ((0, utils_js_1.hasForm)(config)) {
-        validateBookingFormNamespace(config.form);
+        validateBookingFormNamespace(config.form, config.namespace);
         const servicesFormId = services.length > 1 ? DEFAULT_FORM_ID : services?.[0]?.form?._id;
         if (servicesFormId !== config.form._id) {
             throw new Error(`BookingFormService: Invalid form ID. ` +
@@ -236,7 +239,7 @@ exports.BookingFormService = services_definitions_1.implementService.withConfig(
         ? { form: config.form }
         : {
             formId: formIdValue,
-            namespace: exports.BOOKING_FORM_NAMESPACE,
+            namespace: config?.namespace ?? exports.BOOKING_FORM_NAMESPACE,
             additionalMetadata: {
                 ...config?.additionalMetadata,
                 serviceIds,

package/cjs/dist/services/index.d.ts

@@ -9,6 +9,6 @@ export { ServiceListService, ServiceListServiceDefinition, type ServiceListServi
 export { SYNTHETIC_CUSTOM_ID, SYNTHETIC_CUSTOMER_ID, } from '../api/query-services/index.js';
 export { executeBookAction, canBook, buildBookingRequest, buildCheckoutRequest, type CanBookParams, type BookResult, type BookingError, type BookActionParams, type BookChildProps, type BookProps, type BuildCheckoutParams, } from './booking/book-action/index.js';
 export { BookingFormService, BookingFormServiceDefinition, type BookingFormServiceAPI, type BookingFormServiceConfig, } from './booking-form/booking-form.js';
-export { PaymentService, PaymentServiceDefinition, type PaymentServiceAPI, type PaymentServiceConfig, type PaymentDetails, type PricingServiceSelection, type LineItemAdditionalInfo, loadPaymentConfig, type SuccessPaymentConfigResult, type ErrorPaymentConfigResult, } from './payment/payment.js';
+export { PaymentService, PaymentServiceDefinition, type PaymentServiceAPI, type PaymentServiceConfig, type PaymentDetails, type PricingServiceSelection, type LineItemAdditionalInfo, type ServicePaymentOptions, loadPaymentConfig, type SuccessPaymentConfigResult, type ErrorPaymentConfigResult, } from './payment/payment.js';
 export { LocationListService, LocationListServiceDefinition, LocationType, loadLocationListServiceInitialData, locationListServiceBinding, type LocationListServiceAPI, type LocationListServiceConfig, type LocationListActions, type Location, type LoadLocationListServiceResult, getLocationById, } from './location-list/location-list.js';
 export { StaffMemberListService, StaffMemberListServiceDefinition, loadStaffMemberListServiceInitialData, staffMemberListServiceBinding, type StaffMemberListServiceAPI, type StaffMemberListServiceConfig, type StaffMemberListActions, type StaffMemberData, type LoadStaffMemberListServiceResult, } from './staff-member-list/staff-member-list.js';

package/cjs/dist/services/payment/payment.d.ts

@@ -4,7 +4,7 @@
  * Supports two modes: SSR (config with pre-fetched data) and lazy loading (reactive)
  */
 import { type PaymentServiceConfig, type PaymentServiceInternalConfig, type PricingServiceSelection } from './payment.def.js';
-export { PaymentServiceDefinition, type PaymentServiceConfig, type PaymentDetails, type LineItemAdditionalInfo, type PricingServiceSelection, } from './payment.def.js';
+export { PaymentServiceDefinition, type PaymentServiceConfig, type PaymentDetails, type LineItemAdditionalInfo, type PricingServiceSelection, type ServicePaymentOptions, } from './payment.def.js';
 export type { PaymentServiceAPI, PaymentServiceInternalConfig, } from './payment.def.js';
 export declare const PaymentService: import("@wix/services-definitions").ServiceFactory<string & {
     __api: import("./payment.def.js").PaymentServiceAPI;

package/cjs/dist/services/payment/payment.def.d.ts

@@ -5,6 +5,18 @@
 import type { Signal } from '@wix/services-definitions/core-services/signals';
 import type { CalculateTotalsResponse } from '@wix/auto_sdk_ecom_totals-calculator';
 import type { Service } from '@wix/auto_sdk_bookings_services';
+/**
+ * Service payment options derived from service.payment.options.
+ * Describes which payment methods the service supports.
+ */
+export interface ServicePaymentOptions {
+    /** Customer can pay online at booking time */
+    isOnline: boolean;
+    /** Customer can pay in person (on arrival) */
+    isInPerson: boolean;
+    /** A deposit is required at booking time */
+    isDeposit: boolean;
+}
 /**
  * Payment option for line items
  */
@@ -44,6 +56,8 @@ export interface PricingServiceSelection {
 export interface PaymentServiceConfig {
     /** Pre-calculated payment details for SSR (no API call) */
     paymentDetails?: PaymentDetails;
+    /** Service payment options for SSR (derived from service.payment.options) */
+    serviceOptions?: ServicePaymentOptions;
 }
 /**
  * Internal config used by Core component to pass lazy loading data
@@ -59,6 +73,7 @@ export interface PaymentServiceAPI {
     paymentDetailsSignal: Signal<PaymentDetails | null>;
     isLoadingSignal: Signal<boolean>;
     errorSignal: Signal<string | null>;
+    serviceOptionsSignal: Signal<ServicePaymentOptions>;
 }
 export declare const PaymentServiceDefinition: string & {
     __api: PaymentServiceAPI;

package/cjs/dist/services/payment/payment.js

@@ -20,6 +20,35 @@ const constants_js_1 = require("../constants.js");
 // ============================================================================
 // Helper Functions
 // ============================================================================
+const DEFAULT_SERVICE_OPTIONS = {
+    isOnline: false,
+    isInPerson: false,
+    isDeposit: false,
+};
+/**
+ * Derives static service payment options from the first service's configuration.
+ *
+ * Note on `isDeposit`: this reflects whether the service is *configured* with a
+ * deposit (i.e. `payment.fixed.deposit.value > 0`), consistent with how
+ * `buildLineItem` determines `hasDeposit`. Only `FIXED` rate type is checked;
+ * `VARIED` pricing is not currently supported for deposit detection here.
+ *
+ * This is distinct from the runtime `isDeposit` flag in `CorePayment.Data`, which
+ * is computed dynamically from the ecom API result (`payNow.amount < total.amount`).
+ * Use `Payment.ServiceOptions` to determine *which scenario to render* (static config),
+ * and `Payment.PayNow`/`Payment.PayLater` for the *actual split amounts* (runtime).
+ */
+function deriveServiceOptions(pricingServiceSelections) {
+    const service = pricingServiceSelections[0]?.service;
+    const options = service?.payment?.options;
+    const depositValue = service?.payment?.fixed?.deposit?.value;
+    const hasDeposit = !!depositValue && Number(depositValue) > 0;
+    return {
+        isOnline: !!options?.online,
+        isInPerson: !!options?.inPerson,
+        isDeposit: hasDeposit,
+    };
+}
 function getAdditionalInfo(service, lineItemId) {
     const payment = service.payment;
     const customPrice = payment?.rateType === auto_sdk_bookings_services_1.RateType.CUSTOM && payment.custom?.description
@@ -97,6 +126,7 @@ exports.PaymentService = services_definitions_1.implementService.withConfig()(pa
     const paymentDetailsSignal = signalsService.signal(config.paymentDetails || null);
     const isLoadingSignal = signalsService.signal(false);
     const errorSignal = signalsService.signal(null);
+    const serviceOptionsSignal = signalsService.signal(config.serviceOptions || DEFAULT_SERVICE_OPTIONS);
     // Internal calculate function
     const calculate = async (pricingServiceSelections, totalParticipants) => {
         if (!pricingServiceSelections.length) {
@@ -122,10 +152,18 @@ exports.PaymentService = services_definitions_1.implementService.withConfig()(pa
     };
     // Mode 1: SSR - paymentDetails already set in signal initialization
     if (config.paymentDetails) {
-        // No-op - data is pre-fetched
+        if (!config.serviceOptions &&
+            process.env['NODE_ENV'] !== 'production') {
+            console.warn('[PaymentService] SSR mode: `serviceOptions` was not provided in config. ' +
+                'Payment.ServiceOptions will return all-false defaults. ' +
+                'Use `loadPaymentConfig` to automatically derive serviceOptions, ' +
+                'or pass `serviceOptions` explicitly in `paymentServiceConfig`.');
+        }
+        // serviceOptionsSignal already initialized from config.serviceOptions (or DEFAULT_SERVICE_OPTIONS)
     }
     // Mode 2: Lazy loading - pricingServiceSelections provided via internal config
     else if (config.pricingServiceSelections?.length) {
+        serviceOptionsSignal.set(deriveServiceOptions(config.pricingServiceSelections));
         void calculate(config.pricingServiceSelections, config.totalParticipants ?? 1);
     }
     // Mode 3: Reactive - observe BookingService signals (client-side only)
@@ -147,6 +185,9 @@ exports.PaymentService = services_definitions_1.implementService.withConfig()(pa
                 service: selection.service,
                 lineItemId: selection.instanceId,
             }));
+            if (pricingServiceSelections.length) {
+                serviceOptionsSignal.set(deriveServiceOptions(pricingServiceSelections));
+            }
             void calculate(pricingServiceSelections, numParticipants);
         });
     }
@@ -154,6 +195,7 @@ exports.PaymentService = services_definitions_1.implementService.withConfig()(pa
         paymentDetailsSignal,
         isLoadingSignal,
         errorSignal,
+        serviceOptionsSignal,
     };
 });
 /**
@@ -169,13 +211,19 @@ async function loadPaymentConfig(params) {
         if (!pricingServiceSelections.length) {
             return {
                 type: 'success',
-                config: { paymentDetails: undefined },
+                config: {
+                    paymentDetails: undefined,
+                    serviceOptions: DEFAULT_SERVICE_OPTIONS,
+                },
             };
         }
         const paymentDetails = await calculatePaymentDetails(pricingServiceSelections, totalParticipants);
         return {
             type: 'success',
-            config: { paymentDetails },
+            config: {
+                paymentDetails,
+                serviceOptions: deriveServiceOptions(pricingServiceSelections),
+            },
         };
     }
     catch (error) {

package/dist/react/booking-form/BookingForm.d.ts

@@ -21,6 +21,8 @@ export interface RootProps {
     serviceIds?: string[];
     /** Optional additional metadata to pass to FormService */
     additionalMetadata?: Record<string, string | string[]>;
+    /** Optional namespace override for the form. Defaults to the bookings namespace. */
+    namespace?: string;
     /** Field map to override default booking field components */
     fieldMap: FieldMap;
     /**

package/dist/react/booking-form/BookingForm.js

@@ -112,8 +112,8 @@ export const TestIds = {
  * ```
  */
 export const Root = React.forwardRef((props, ref) => {
-    const { children, asChild, className, formId, serviceIds, additionalMetadata, fieldMap, rowGapClassname = 'gap-y-4', columnGapClassname = 'gap-x-2', loadErrorFallback, ...otherProps } = props;
-    return (_jsx(BookingFormErrorBoundary, { fallback: loadErrorFallback, children: _jsx(CoreBookingForm.Root, { formId: formId, serviceIds: serviceIds, additionalMetadata: additionalMetadata, fieldMap: fieldMap, children: (renderProps) => {
+    const { children, asChild, className, formId, serviceIds, additionalMetadata, namespace, fieldMap, rowGapClassname = 'gap-y-4', columnGapClassname = 'gap-x-2', loadErrorFallback, ...otherProps } = props;
+    return (_jsx(BookingFormErrorBoundary, { fallback: loadErrorFallback, children: _jsx(CoreBookingForm.Root, { formId: formId, serviceIds: serviceIds, additionalMetadata: additionalMetadata, namespace: namespace, fieldMap: fieldMap, children: (renderProps) => {
                 // If children is a render prop function, call it with the render props
                 if (typeof children === 'function') {
                     return children(renderProps);

package/dist/react/core/booking-form/BookingForm.d.ts

@@ -44,6 +44,8 @@ interface BookingFormBaseProps {
     serviceIds?: string[];
     /** Optional additional metadata to pass to FormService */
     additionalMetadata?: Record<string, string | string[]>;
+    /** Optional namespace override for the form. Defaults to the bookings namespace. */
+    namespace?: string;
     /** Field map to override default booking field components */
     fieldMap: FieldMap;
     /** Render prop function that receives form data and actions */

package/dist/react/core/booking-form/BookingForm.js

@@ -90,13 +90,13 @@ import { SignalsServiceDefinition } from '@wix/services-definitions/core-service
  * ```
  */
 export function Root(props) {
-    const { serviceIds, additionalMetadata, fieldMap, children } = props;
+    const { serviceIds, additionalMetadata, namespace, fieldMap, children } = props;
     // Create formRef to pass to Form.Root and BookingFormContent
     const formRef = useRef(null);
     const bookingFormServiceConfig = props.form
-        ? { form: props.form }
+        ? { form: props.form, ...(namespace !== undefined ? { namespace } : {}) }
         : props.formId
-            ? { formId: props.formId, additionalMetadata, serviceIds }
+            ? { formId: props.formId, additionalMetadata, serviceIds, namespace }
             : undefined;
     // Use Form.Root to set up FormService, then nest WixServices for BookingFormService
     // This allows BookingFormService to access FormService via getService internally

package/dist/react/core/payment/Payment.d.ts

@@ -4,7 +4,7 @@
  * Note: Currently supports single service only
  */
 import React from 'react';
-import { type PaymentServiceConfig, type PricingServiceSelection } from '../../../services/payment/payment.js';
+import { type PaymentServiceConfig, type PricingServiceSelection, type ServicePaymentOptions } from '../../../services/payment/payment.js';
 import type { MoneyData } from '@wix/headless-components/react';
 /**
  * Props for Payment.Root component
@@ -164,6 +164,19 @@ export interface LineItemProviderProps {
  * ```
  */
 export declare function LineItemProvider(props: LineItemProviderProps): React.ReactNode;
+/**
+ * Props for ServiceOptions render prop component
+ */
+export interface ServiceOptionsProps {
+    children: (options: ServicePaymentOptions) => React.ReactNode;
+}
+/**
+ * Core component that exposes service payment options via render props.
+ * Reads isOnline, isInPerson, isDeposit from the payment service signal.
+ *
+ * @component
+ */
+export declare function ServiceOptions(props: ServiceOptionsProps): React.ReactNode;
 /**
  * Props for LineItemInfo render prop component
  */

package/dist/react/core/payment/Payment.js

@@ -188,6 +188,17 @@ export function LineItemProvider(props) {
     };
     return (_jsx(LineItemContext.Provider, { value: contextValue, children: children }));
 }
+/**
+ * Core component that exposes service payment options via render props.
+ * Reads isOnline, isInPerson, isDeposit from the payment service signal.
+ *
+ * @component
+ */
+export function ServiceOptions(props) {
+    const paymentService = useService(PaymentServiceDefinition);
+    const serviceOptions = paymentService.serviceOptionsSignal.get();
+    return props.children(serviceOptions);
+}
 /**
  * Core component that provides access to line item info via render props.
  * Must be used within LineItemProvider.

package/dist/react/payment/Payment.d.ts

@@ -5,7 +5,7 @@
 import React from 'react';
 import { AsChildChildren } from '@wix/headless-utils/react';
 import { MoneyData } from '@wix/headless-components/react';
-import type { PaymentServiceConfig, PricingServiceSelection } from '../../services/payment/payment.js';
+import type { PaymentServiceConfig, PricingServiceSelection, ServicePaymentOptions } from '../../services/payment/payment.js';
 export declare const TestIds: {
     readonly paymentRoot: "payment-root";
     readonly paymentSubtotal: "payment-subtotal";
@@ -19,6 +19,7 @@ export declare const TestIds: {
     readonly paymentLineItemTotal: "payment-line-item-total";
     readonly paymentLineItemSubtotal: "payment-line-item-subtotal";
     readonly paymentLineItemDeposit: "payment-line-item-deposit";
+    readonly paymentServiceOptions: "payment-service-options";
 };
 /**
  * Props for Payment.Root component
@@ -194,6 +195,41 @@ export interface PayLaterProps extends Omit<React.HTMLAttributes<HTMLElement>, '
  * ```
  */
 export declare const PayLater: React.ForwardRefExoticComponent<PayLaterProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Payment.ServiceOptions component
+ */
+export interface ServiceOptionsProps {
+    asChild?: boolean;
+    /** Render prop receiving service payment options. This component renders no
+     * visible DOM element by default — it is a flags-only data component. */
+    children?: AsChildChildren<ServicePaymentOptions>;
+}
+/**
+ * Exposes service payment options via render props.
+ * Use this to determine which payment scenario to render without reading the service entity directly.
+ *
+ * Payment scenarios:
+ * - `isOnline=true, isInPerson=false, isDeposit=false` → Pay now only (Due now = total)
+ * - `isOnline=true, isInPerson=false, isDeposit=true` → Pay now + security deposit
+ * - `isOnline=true, isInPerson=true` → Radio: Pay Online / Pay on Arrival
+ * - `isOnline=false, isInPerson=true` → Pay on arrival only
+ *
+ * @component
+ * Note: This component renders no visible DOM element. It is a flags-only data
+ * component — use `asChild` with a render function to consume the flags.
+ * For the actual split amounts (deposit / pay-later), use `Payment.PayNow` and
+ * `Payment.PayLater`.
+ *
+ * @example
+ * ```tsx
+ * <Payment.ServiceOptions asChild>
+ *   {({ isOnline, isInPerson, isDeposit }) => (
+ *     // render the correct payment scenario
+ *   )}
+ * </Payment.ServiceOptions>
+ * ```
+ */
+export declare const ServiceOptions: React.ForwardRefExoticComponent<ServiceOptionsProps & React.RefAttributes<HTMLElement>>;
 /**
  * Props for Payment.LineItems component (Container Level)
  */

package/dist/react/payment/Payment.js

@@ -20,6 +20,7 @@ export const TestIds = {
     paymentLineItemTotal: 'payment-line-item-total',
     paymentLineItemSubtotal: 'payment-line-item-subtotal',
     paymentLineItemDeposit: 'payment-line-item-deposit',
+    paymentServiceOptions: 'payment-service-options',
 };
 /**
  * Root component that provides payment context to the entire app.
@@ -161,6 +162,36 @@ export const PayLater = React.forwardRef((props, ref) => {
     return (_jsx(CorePayment.Data, { children: ({ payLater, isDeposit }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, customElement: children, customElementProps: { payLater, isDeposit }, "data-testid": TestIds.paymentPayLater, "data-has-deposit": isDeposit, children: isDeposit && payLater && payLater.amount > 0 && (_jsx(Money, { money: payLater })) })) }));
 });
 PayLater.displayName = 'Payment.PayLater';
+/**
+ * Exposes service payment options via render props.
+ * Use this to determine which payment scenario to render without reading the service entity directly.
+ *
+ * Payment scenarios:
+ * - `isOnline=true, isInPerson=false, isDeposit=false` → Pay now only (Due now = total)
+ * - `isOnline=true, isInPerson=false, isDeposit=true` → Pay now + security deposit
+ * - `isOnline=true, isInPerson=true` → Radio: Pay Online / Pay on Arrival
+ * - `isOnline=false, isInPerson=true` → Pay on arrival only
+ *
+ * @component
+ * Note: This component renders no visible DOM element. It is a flags-only data
+ * component — use `asChild` with a render function to consume the flags.
+ * For the actual split amounts (deposit / pay-later), use `Payment.PayNow` and
+ * `Payment.PayLater`.
+ *
+ * @example
+ * ```tsx
+ * <Payment.ServiceOptions asChild>
+ *   {({ isOnline, isInPerson, isDeposit }) => (
+ *     // render the correct payment scenario
+ *   )}
+ * </Payment.ServiceOptions>
+ * ```
+ */
+export const ServiceOptions = React.forwardRef((props, ref) => {
+    const { asChild, children } = props;
+    return (_jsx(CorePayment.ServiceOptions, { children: ({ isOnline, isInPerson, isDeposit }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, customElement: children, customElementProps: { isOnline, isInPerson, isDeposit }, "data-testid": TestIds.paymentServiceOptions, "data-is-online": isOnline, "data-is-in-person": isInPerson, "data-is-deposit": isDeposit, children: null })) }));
+});
+ServiceOptions.displayName = 'Payment.ServiceOptions';
 /**
  * Container component for line items.
  * Follows the 3-level List/Options/Repeater pattern.

package/dist/services/booking/book-action/bookAction.js

@@ -59,6 +59,7 @@ export async function executeBookAction(params) {
         bookingId,
         contactDetails,
         businessLocationId,
+        appId: params.appId,
     });
     const checkoutResponse = await createCheckout(checkoutRequest);
     const checkout = checkoutResponse.checkout;

package/dist/services/booking/book-action/buildCheckoutRequest.d.ts

@@ -10,6 +10,8 @@ export interface BuildCheckoutParams {
     bookingId: string;
     contactDetails?: ContactDetails;
     businessLocationId?: string;
+    /** Optional app ID override for the catalog reference. Defaults to BOOKING_APP_ID. */
+    appId?: string;
 }
 /**
  * Builds a checkout request from the booking ID and contact details

package/dist/services/booking/book-action/buildCheckoutRequest.js

@@ -16,7 +16,7 @@ import { BOOKING_APP_ID } from '../../constants.js';
  * @returns CreateCheckoutRequest ready to be sent to the API
  */
 export function buildCheckoutRequest(params) {
-    const { bookingId, contactDetails, businessLocationId } = params;
+    const { bookingId, contactDetails, businessLocationId, appId } = params;
     // Build checkoutInfo incrementally for readability
     const checkoutInfo = {};
     // businessLocationId for multi-location support
@@ -53,7 +53,7 @@ export function buildCheckoutRequest(params) {
                 quantity: 1,
                 catalogReference: {
                     catalogItemId: bookingId,
-                    appId: BOOKING_APP_ID,
+                    appId: appId ?? BOOKING_APP_ID,
                 },
             },
         ],

package/dist/services/booking/book-action/types.d.ts

@@ -36,6 +36,8 @@ export interface BookActionParams {
     location: TimeSlotLocationType | null;
     formSubmission: FormValues | null;
     timezone?: string;
+    /** Optional app ID override for the catalog reference. Defaults to the bookings app ID. */
+    appId?: string;
 }
 /**
  * Props passed to children of Book component

package/dist/services/booking/booking.d.ts

@@ -110,6 +110,8 @@ export interface BookingServiceConfig {
     timezone?: string;
     /** Optional initial form submission */
     formSubmission?: FormValues | null;
+    /** Optional app ID override for the catalog reference. Defaults to the bookings app ID. */
+    appId?: string;
 }
 /**
  * Implementation of BookingService

package/dist/services/booking/booking.js

@@ -183,6 +183,7 @@ export const BookingService = implementService.withConfig()(BookingServiceDefini
                 formSubmission,
                 location,
                 timezone,
+                appId: config.appId,
             });
         },
     };

package/dist/services/booking-form/booking-form.d.ts

@@ -55,9 +55,13 @@ export type BookingFormServiceConfig = {
     additionalMetadata?: Record<string, string | string[]>;
     /** Optional list of service IDs to pass to FormService */
     serviceIds?: string[];
+    /** Optional namespace override. Defaults to BOOKING_FORM_NAMESPACE. */
+    namespace?: string;
 } | {
     /** Pre-loaded form object (SSR/SSG) - must be from bookings namespace */
     form: forms.Form;
+    /** Optional namespace override. Defaults to BOOKING_FORM_NAMESPACE. */
+    namespace?: string;
 };
 /**
  * API interface for the BookingForm service.

package/dist/services/booking-form/booking-form.js

@@ -53,15 +53,18 @@ export const BookingFormServiceDefinition = defineService('bookingForm');
 // Validation Helpers
 // ============================================================================
 /**
- * Validates that a form belongs to the bookings namespace.
- * @param config The service config that may contain a pre-loaded form
- * @throws Error if the form is not from the bookings namespace
+ * Validates that a form belongs to the expected namespace.
+ * When a custom namespace is provided, validates against it; otherwise validates
+ * against BOOKING_FORM_NAMESPACE.
+ * @param form The form to validate
+ * @param expectedNamespace The expected namespace (defaults to BOOKING_FORM_NAMESPACE)
+ * @throws Error if the form namespace does not match the expected namespace
  */
-function validateBookingFormNamespace(form) {
+function validateBookingFormNamespace(form, expectedNamespace = BOOKING_FORM_NAMESPACE) {
     const formNamespace = form.namespace;
-    if (formNamespace && formNamespace !== BOOKING_FORM_NAMESPACE) {
+    if (formNamespace && formNamespace !== expectedNamespace) {
         throw new Error(`BookingFormService: Invalid form namespace. ` +
-            `Expected "${BOOKING_FORM_NAMESPACE}", but received "${formNamespace}". ` +
+            `Expected "${expectedNamespace}", but received "${formNamespace}". ` +
             `Ensure the form is a booking form.`);
     }
 }
@@ -70,7 +73,7 @@ function validateBookingFormConfig({ config, services, }) {
         return;
     }
     if (hasForm(config)) {
-        validateBookingFormNamespace(config.form);
+        validateBookingFormNamespace(config.form, config.namespace);
         const servicesFormId = services.length > 1 ? DEFAULT_FORM_ID : services?.[0]?.form?._id;
         if (servicesFormId !== config.form._id) {
             throw new Error(`BookingFormService: Invalid form ID. ` +
@@ -228,7 +231,7 @@ export const BookingFormService = implementService.withConfig()(BookingFormServi
         ? { form: config.form }
         : {
             formId: formIdValue,
-            namespace: BOOKING_FORM_NAMESPACE,
+            namespace: config?.namespace ?? BOOKING_FORM_NAMESPACE,
             additionalMetadata: {
                 ...config?.additionalMetadata,
                 serviceIds,

package/dist/services/index.d.ts

@@ -9,6 +9,6 @@ export { ServiceListService, ServiceListServiceDefinition, type ServiceListServi
 export { SYNTHETIC_CUSTOM_ID, SYNTHETIC_CUSTOMER_ID, } from '../api/query-services/index.js';
 export { executeBookAction, canBook, buildBookingRequest, buildCheckoutRequest, type CanBookParams, type BookResult, type BookingError, type BookActionParams, type BookChildProps, type BookProps, type BuildCheckoutParams, } from './booking/book-action/index.js';
 export { BookingFormService, BookingFormServiceDefinition, type BookingFormServiceAPI, type BookingFormServiceConfig, } from './booking-form/booking-form.js';
-export { PaymentService, PaymentServiceDefinition, type PaymentServiceAPI, type PaymentServiceConfig, type PaymentDetails, type PricingServiceSelection, type LineItemAdditionalInfo, loadPaymentConfig, type SuccessPaymentConfigResult, type ErrorPaymentConfigResult, } from './payment/payment.js';
+export { PaymentService, PaymentServiceDefinition, type PaymentServiceAPI, type PaymentServiceConfig, type PaymentDetails, type PricingServiceSelection, type LineItemAdditionalInfo, type ServicePaymentOptions, loadPaymentConfig, type SuccessPaymentConfigResult, type ErrorPaymentConfigResult, } from './payment/payment.js';
 export { LocationListService, LocationListServiceDefinition, LocationType, loadLocationListServiceInitialData, locationListServiceBinding, type LocationListServiceAPI, type LocationListServiceConfig, type LocationListActions, type Location, type LoadLocationListServiceResult, getLocationById, } from './location-list/location-list.js';
 export { StaffMemberListService, StaffMemberListServiceDefinition, loadStaffMemberListServiceInitialData, staffMemberListServiceBinding, type StaffMemberListServiceAPI, type StaffMemberListServiceConfig, type StaffMemberListActions, type StaffMemberData, type LoadStaffMemberListServiceResult, } from './staff-member-list/staff-member-list.js';

package/dist/services/payment/payment.d.ts

@@ -4,7 +4,7 @@
  * Supports two modes: SSR (config with pre-fetched data) and lazy loading (reactive)
  */
 import { type PaymentServiceConfig, type PaymentServiceInternalConfig, type PricingServiceSelection } from './payment.def.js';
-export { PaymentServiceDefinition, type PaymentServiceConfig, type PaymentDetails, type LineItemAdditionalInfo, type PricingServiceSelection, } from './payment.def.js';
+export { PaymentServiceDefinition, type PaymentServiceConfig, type PaymentDetails, type LineItemAdditionalInfo, type PricingServiceSelection, type ServicePaymentOptions, } from './payment.def.js';
 export type { PaymentServiceAPI, PaymentServiceInternalConfig, } from './payment.def.js';
 export declare const PaymentService: import("@wix/services-definitions").ServiceFactory<string & {
     __api: import("./payment.def.js").PaymentServiceAPI;

package/dist/services/payment/payment.def.d.ts

@@ -5,6 +5,18 @@
 import type { Signal } from '@wix/services-definitions/core-services/signals';
 import type { CalculateTotalsResponse } from '@wix/auto_sdk_ecom_totals-calculator';
 import type { Service } from '@wix/auto_sdk_bookings_services';
+/**
+ * Service payment options derived from service.payment.options.
+ * Describes which payment methods the service supports.
+ */
+export interface ServicePaymentOptions {
+    /** Customer can pay online at booking time */
+    isOnline: boolean;
+    /** Customer can pay in person (on arrival) */
+    isInPerson: boolean;
+    /** A deposit is required at booking time */
+    isDeposit: boolean;
+}
 /**
  * Payment option for line items
  */
@@ -44,6 +56,8 @@ export interface PricingServiceSelection {
 export interface PaymentServiceConfig {
     /** Pre-calculated payment details for SSR (no API call) */
     paymentDetails?: PaymentDetails;
+    /** Service payment options for SSR (derived from service.payment.options) */
+    serviceOptions?: ServicePaymentOptions;
 }
 /**
  * Internal config used by Core component to pass lazy loading data
@@ -59,6 +73,7 @@ export interface PaymentServiceAPI {
     paymentDetailsSignal: Signal<PaymentDetails | null>;
     isLoadingSignal: Signal<boolean>;
     errorSignal: Signal<string | null>;
+    serviceOptionsSignal: Signal<ServicePaymentOptions>;
 }
 export declare const PaymentServiceDefinition: string & {
     __api: PaymentServiceAPI;

package/dist/services/payment/payment.js

@@ -15,6 +15,35 @@ import { BOOKING_APP_ID } from '../constants.js';
 // ============================================================================
 // Helper Functions
 // ============================================================================
+const DEFAULT_SERVICE_OPTIONS = {
+    isOnline: false,
+    isInPerson: false,
+    isDeposit: false,
+};
+/**
+ * Derives static service payment options from the first service's configuration.
+ *
+ * Note on `isDeposit`: this reflects whether the service is *configured* with a
+ * deposit (i.e. `payment.fixed.deposit.value > 0`), consistent with how
+ * `buildLineItem` determines `hasDeposit`. Only `FIXED` rate type is checked;
+ * `VARIED` pricing is not currently supported for deposit detection here.
+ *
+ * This is distinct from the runtime `isDeposit` flag in `CorePayment.Data`, which
+ * is computed dynamically from the ecom API result (`payNow.amount < total.amount`).
+ * Use `Payment.ServiceOptions` to determine *which scenario to render* (static config),
+ * and `Payment.PayNow`/`Payment.PayLater` for the *actual split amounts* (runtime).
+ */
+function deriveServiceOptions(pricingServiceSelections) {
+    const service = pricingServiceSelections[0]?.service;
+    const options = service?.payment?.options;
+    const depositValue = service?.payment?.fixed?.deposit?.value;
+    const hasDeposit = !!depositValue && Number(depositValue) > 0;
+    return {
+        isOnline: !!options?.online,
+        isInPerson: !!options?.inPerson,
+        isDeposit: hasDeposit,
+    };
+}
 function getAdditionalInfo(service, lineItemId) {
     const payment = service.payment;
     const customPrice = payment?.rateType === RateType.CUSTOM && payment.custom?.description
@@ -92,6 +121,7 @@ export const PaymentService = implementService.withConfig()(PaymentServiceDefini
     const paymentDetailsSignal = signalsService.signal(config.paymentDetails || null);
     const isLoadingSignal = signalsService.signal(false);
     const errorSignal = signalsService.signal(null);
+    const serviceOptionsSignal = signalsService.signal(config.serviceOptions || DEFAULT_SERVICE_OPTIONS);
     // Internal calculate function
     const calculate = async (pricingServiceSelections, totalParticipants) => {
         if (!pricingServiceSelections.length) {
@@ -117,10 +147,18 @@ export const PaymentService = implementService.withConfig()(PaymentServiceDefini
     };
     // Mode 1: SSR - paymentDetails already set in signal initialization
     if (config.paymentDetails) {
-        // No-op - data is pre-fetched
+        if (!config.serviceOptions &&
+            process.env['NODE_ENV'] !== 'production') {
+            console.warn('[PaymentService] SSR mode: `serviceOptions` was not provided in config. ' +
+                'Payment.ServiceOptions will return all-false defaults. ' +
+                'Use `loadPaymentConfig` to automatically derive serviceOptions, ' +
+                'or pass `serviceOptions` explicitly in `paymentServiceConfig`.');
+        }
+        // serviceOptionsSignal already initialized from config.serviceOptions (or DEFAULT_SERVICE_OPTIONS)
     }
     // Mode 2: Lazy loading - pricingServiceSelections provided via internal config
     else if (config.pricingServiceSelections?.length) {
+        serviceOptionsSignal.set(deriveServiceOptions(config.pricingServiceSelections));
         void calculate(config.pricingServiceSelections, config.totalParticipants ?? 1);
     }
     // Mode 3: Reactive - observe BookingService signals (client-side only)
@@ -142,6 +180,9 @@ export const PaymentService = implementService.withConfig()(PaymentServiceDefini
                 service: selection.service,
                 lineItemId: selection.instanceId,
             }));
+            if (pricingServiceSelections.length) {
+                serviceOptionsSignal.set(deriveServiceOptions(pricingServiceSelections));
+            }
             void calculate(pricingServiceSelections, numParticipants);
         });
     }
@@ -149,6 +190,7 @@ export const PaymentService = implementService.withConfig()(PaymentServiceDefini
         paymentDetailsSignal,
         isLoadingSignal,
         errorSignal,
+        serviceOptionsSignal,
     };
 });
 /**
@@ -164,13 +206,19 @@ export async function loadPaymentConfig(params) {
         if (!pricingServiceSelections.length) {
             return {
                 type: 'success',
-                config: { paymentDetails: undefined },
+                config: {
+                    paymentDetails: undefined,
+                    serviceOptions: DEFAULT_SERVICE_OPTIONS,
+                },
             };
         }
         const paymentDetails = await calculatePaymentDetails(pricingServiceSelections, totalParticipants);
         return {
             type: 'success',
-            config: { paymentDetails },
+            config: {
+                paymentDetails,
+                serviceOptions: deriveServiceOptions(pricingServiceSelections),
+            },
         };
     }
     catch (error) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-bookings",
-  "version": "0.0.116",
+  "version": "0.0.118",
   "type": "module",
   "license": "MIT",
   "scripts": {
@@ -73,5 +73,5 @@
       "groupId": "com.wixpress.headless-components"
     }
   },
-  "falconPackageHash": "96b4aee5fd93e8621d0abf4d240bc28225e45e66505e7b24823f7710"
+  "falconPackageHash": "dac1d1f3424ebe62c7911b33c4224023bcfa07880c8ea404481cc7b0"
 }