@wix/headless-bookings 0.0.117 → 0.0.118

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/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/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/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.117",
+  "version": "0.0.118",
   "type": "module",
   "license": "MIT",
   "scripts": {
@@ -73,5 +73,5 @@
       "groupId": "com.wixpress.headless-components"
     }
   },
-  "falconPackageHash": "f3af7c27f3ef8bd8bdc06d522c39551763e5bf65fd9fe6891ba25425"
+  "falconPackageHash": "dac1d1f3424ebe62c7911b33c4224023bcfa07880c8ea404481cc7b0"
 }