@wix/headless-bookings 1.0.16 → 1.0.18

package/dist/react/core/booking/Booking.d.ts

@@ -45,6 +45,12 @@ export interface BookingData {
      * heuristic applies. Set via `actions.setSelectedPaymentOption`.
      */
     selectedPaymentOption: SelectedPaymentOption | undefined;
+    /**
+     * Deposit-vs-full-upfront choice. `true` pays only the deposit now, `false`
+     * pays the full price now, `undefined` means not chosen. Set via
+     * `actions.setDepositSelected`.
+     */
+    depositSelected: boolean | undefined;
     actions: BookingServiceActions;
 }
 /**

package/dist/react/core/booking/Booking.js

@@ -106,6 +106,7 @@ export function Data(props) {
     const timezone = bookingService.timezone.get();
     const formSubmission = bookingService.formSubmission.get();
     const selectedPaymentOption = bookingService.selectedPaymentOption.get();
+    const depositSelected = bookingService.depositSelected.get();
     const { actions } = bookingService;
     const location = resolveLocation(bookingLocation, serviceSelections);
     return children({
@@ -114,6 +115,7 @@ export function Data(props) {
         timezone,
         formSubmission,
         selectedPaymentOption,
+        depositSelected,
         actions,
     });
 }

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

@@ -172,7 +172,8 @@ export interface ServiceOptionsProps {
 }
 /**
  * Core component that exposes service payment options via render props.
- * Reads isOnline, isInPerson, isDeposit from the payment service signal.
+ * Reads isOnline, isInPerson, isDeposit, canPayFullUpfront from the payment
+ * service signal.
  *
  * @component
  */

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

@@ -81,10 +81,12 @@ export function Data(props) {
     const additionalInfoList = paymentDetails?.additionalInfo?.lineItems || [];
     const firstLineItemInfo = additionalInfoList[0];
     const customPrice = firstLineItemInfo?.customPrice || null;
-    // Computed flags
-    const hasTax = tax !== null && tax.amount > 0;
-    const hasDiscount = discount !== null && discount.amount > 0;
-    const isDeposit = payNow !== null && total !== null && payNow.amount < total.amount;
+    // Computed flags (amounts may be strings — compare numerically)
+    const hasTax = tax !== null && Number(tax.amount) > 0;
+    const hasDiscount = discount !== null && Number(discount.amount) > 0;
+    const isDeposit = payNow !== null &&
+        total !== null &&
+        Number(payNow.amount) < Number(total.amount);
     return props.children({
         subtotal,
         total,
@@ -190,7 +192,8 @@ export function LineItemProvider(props) {
 }
 /**
  * Core component that exposes service payment options via render props.
- * Reads isOnline, isInPerson, isDeposit from the payment service signal.
+ * Reads isOnline, isInPerson, isDeposit, canPayFullUpfront from the payment
+ * service signal.
  *
  * @component
  */
@@ -217,9 +220,9 @@ export function ServiceOptions(props) {
  */
 export function LineItemInfo(props) {
     const { lineItem, currency } = useLineItemContext();
-    // Computed flags
-    const hasDiscount = lineItem.discount !== null && lineItem.discount.amount > 0;
-    const hasDeposit = lineItem.deposit !== null && lineItem.deposit.amount > 0;
+    // Computed flags (amounts may be strings — compare numerically)
+    const hasDiscount = lineItem.discount !== null && Number(lineItem.discount.amount) > 0;
+    const hasDeposit = lineItem.deposit !== null && Number(lineItem.deposit.amount) > 0;
     return props.children({
         lineItem,
         currency,

package/dist/react/core/service/Service.js

@@ -19,8 +19,10 @@ function RootContent({ children, }) {
     const selected = serviceService.selectedSignal.get();
     const bookable = serviceService.bookableSignal.get();
     // In "from booking signal" mode, render null when no service is selected
-    // The signal will trigger a re-render when a service is selected
-    if (!service || !service._id) {
+    // The signal will trigger a re-render when a service is selected.
+    // While a slug/id-based fetch is in flight, keep rendering the subtree so
+    // consumers' loading skeletons (<Service.Raw>) can show instead of a blank screen.
+    if ((!service || !service._id) && !serviceService.isLoadingSignal.get()) {
         return null;
     }
     if (typeof children === 'function') {

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

@@ -210,7 +210,8 @@ export interface ServiceOptionsProps {
  *
  * 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=false, isDeposit=true, canPayFullUpfront=false` → Pay now + security deposit
+ * - `isOnline=true, isInPerson=false, isDeposit=true, canPayFullUpfront=true` → Radio: Pay deposit now / Pay in full now
  * - `isOnline=true, isInPerson=true` → Radio: Pay Online / Pay on Arrival
  * - `isOnline=false, isInPerson=true` → Pay on arrival only
  *
@@ -223,7 +224,7 @@ export interface ServiceOptionsProps {
  * @example
  * ```tsx
  * <Payment.ServiceOptions asChild>
- *   {({ isOnline, isInPerson, isDeposit }) => (
+ *   {({ isOnline, isInPerson, isDeposit, canPayFullUpfront }) => (
  *     // render the correct payment scenario
  *   )}
  * </Payment.ServiceOptions>

package/dist/react/payment/Payment.js

@@ -144,7 +144,7 @@ Total.displayName = 'Payment.Total';
  */
 export const PayNow = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CorePayment.Data, { children: ({ payNow, isDeposit }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, customElement: children, customElementProps: { payNow, isDeposit }, "data-testid": TestIds.paymentPayNow, "data-has-deposit": isDeposit, children: isDeposit && payNow && payNow.amount > 0 && (_jsx(Money, { money: payNow })) })) }));
+    return (_jsx(CorePayment.Data, { children: ({ payNow, isDeposit }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, customElement: children, customElementProps: { payNow, isDeposit }, "data-testid": TestIds.paymentPayNow, "data-has-deposit": isDeposit, children: isDeposit && payNow && Number(payNow.amount) > 0 && (_jsx(Money, { money: payNow })) })) }));
 });
 PayNow.displayName = 'Payment.PayNow';
 /**
@@ -159,7 +159,7 @@ PayNow.displayName = 'Payment.PayNow';
  */
 export const PayLater = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    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 })) })) }));
+    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 && Number(payLater.amount) > 0 && (_jsx(Money, { money: payLater })) })) }));
 });
 PayLater.displayName = 'Payment.PayLater';
 /**
@@ -168,7 +168,8 @@ PayLater.displayName = 'Payment.PayLater';
  *
  * 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=false, isDeposit=true, canPayFullUpfront=false` → Pay now + security deposit
+ * - `isOnline=true, isInPerson=false, isDeposit=true, canPayFullUpfront=true` → Radio: Pay deposit now / Pay in full now
  * - `isOnline=true, isInPerson=true` → Radio: Pay Online / Pay on Arrival
  * - `isOnline=false, isInPerson=true` → Pay on arrival only
  *
@@ -181,7 +182,7 @@ PayLater.displayName = 'Payment.PayLater';
  * @example
  * ```tsx
  * <Payment.ServiceOptions asChild>
- *   {({ isOnline, isInPerson, isDeposit }) => (
+ *   {({ isOnline, isInPerson, isDeposit, canPayFullUpfront }) => (
  *     // render the correct payment scenario
  *   )}
  * </Payment.ServiceOptions>
@@ -189,7 +190,12 @@ PayLater.displayName = 'Payment.PayLater';
  */
 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 })) }));
+    return (_jsx(CorePayment.ServiceOptions, { children: ({ isOnline, isInPerson, isDeposit, canPayFullUpfront }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, customElement: children, customElementProps: {
+                isOnline,
+                isInPerson,
+                isDeposit,
+                canPayFullUpfront,
+            }, "data-testid": TestIds.paymentServiceOptions, "data-is-online": isOnline, "data-is-in-person": isInPerson, "data-is-deposit": isDeposit, "data-can-pay-full-upfront": canPayFullUpfront, children: null })) }));
 });
 ServiceOptions.displayName = 'Payment.ServiceOptions';
 /**

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

@@ -4,6 +4,7 @@
 import { LocationType as TimeSlotLocationType } from '@wix/auto_sdk_bookings_availability-time-slots';
 import { LocationType as BookingLocationType, SelectionMethod, } from '@wix/auto_sdk_bookings_bookings';
 import { STAFF_MEMBER_RESOURCE_TYPE_ID } from '../../constants.js';
+import { isFullUpfrontPaymentAllowed, requiresDeposit, } from '../../servicePayment.js';
 /**
  * Derives the selected payment option from service payment settings.
  * Maps service.payment.options to booking API's selectedPaymentOption.
@@ -53,12 +54,20 @@ export function buildBookingRequest(params) {
     const resource = item.timeSlot.resources?.[0] ?? item.resources?.[0];
     // Get location: prefer timeSlot.location, fallback to params.location
     const slotLocation = item.timeSlot.location ?? location;
+    // Consumer override (if set) wins over the service-config heuristic.
+    const selectedPaymentOption = params.selectedPaymentOption ?? deriveSelectedPaymentOption(item.service);
+    // The only state where the schema allows `false`. Outside it, omitting the key
+    // leaves the server default in place.
+    const depositSelectedApplies = params.depositSelected !== undefined &&
+        selectedPaymentOption === 'ONLINE' &&
+        requiresDeposit(item.service) &&
+        isFullUpfrontPaymentAllowed(item.service);
     return {
         booking: {
-            // Payment option: consumer override (if set) wins over the
-            // service-config heuristic.
-            selectedPaymentOption: params.selectedPaymentOption ??
-                deriveSelectedPaymentOption(item.service),
+            selectedPaymentOption,
+            ...(depositSelectedApplies && {
+                depositSelected: params.depositSelected,
+            }),
             // Participants
             totalParticipants: item.totalParticipants || 1,
             // App that created the booking (used to filter bookings by source app).

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

@@ -59,6 +59,12 @@ export interface BookActionParams {
      * service. When omitted, the existing service-config heuristic applies.
      */
     selectedPaymentOption?: SelectedPaymentOption;
+    /**
+     * Optional consumer choice: `true` pays only the deposit now, `false` pays the
+     * full price now. Dropped unless the booking is ONLINE and the service has a
+     * deposit with `fullUpfrontPaymentAllowed`. Omit to keep the server default.
+     */
+    depositSelected?: boolean;
     /**
      * DAY-range only. When `true`, the picked per-day slots are collapsed into a
      * single Booking spanning the whole range (`firstSlot.startDate ->

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

@@ -89,6 +89,12 @@ export interface BookingServiceActions {
      * is cleared and the heuristic applies again.
      */
     setSelectedPaymentOption(value: SelectedPaymentOption | null): void;
+    /**
+     * Set (or clear with `undefined`) the deposit-vs-full-upfront choice. `true`
+     * charges only the deposit now, `false` charges the full price now. Gate the UI
+     * on `Payment.ServiceOptions`' `isDeposit && canPayFullUpfront`.
+     */
+    setDepositSelected(value: boolean | undefined): void;
     /**
      * Toggle the DAY-range `allDay` flag. When `true`, `book()` collapses the
      * picked per-day slots into one range-spanning Booking created via
@@ -117,6 +123,12 @@ export interface BookingService {
      * service-config heuristic. Set to `'ONLINE'` or `'OFFLINE'` to override.
      */
     selectedPaymentOption: Signal<SelectedPaymentOption | undefined>;
+    /**
+     * Signal containing the deposit-vs-full-upfront choice. `true` pays only the
+     * deposit now, `false` pays the full price now. `undefined` means "not chosen"
+     * — `book()` omits the field and the preview keeps its deposit default.
+     */
+    depositSelected: Signal<boolean | undefined>;
     /** Actions for modifying booking state */
     actions: BookingServiceActions;
 }
@@ -146,6 +158,11 @@ export interface BookingServiceConfig {
      * service-config heuristic; set to `'ONLINE'` or `'OFFLINE'` to override.
      */
     selectedPaymentOption?: SelectedPaymentOption;
+    /**
+     * Optional initial deposit-vs-full-upfront choice. Omit to keep the server's
+     * default.
+     */
+    depositSelected?: boolean;
     /** Optional app ID override for the catalog reference. Defaults to the bookings app ID. */
     appId?: string;
     /**

package/dist/services/booking/booking.js

@@ -71,6 +71,7 @@ export const BookingService = implementService.withConfig()(BookingServiceDefini
     const timezoneSignal = signalsService.signal(config.timezone ?? getClientTimezone());
     const formSubmissionSignal = signalsService.signal(config.formSubmission || null);
     const selectedPaymentOptionSignal = signalsService.signal(config.selectedPaymentOption);
+    const depositSelectedSignal = signalsService.signal(config.depositSelected);
     // Internal-only signal: set via `setAllDay`, read by `book()`. Not
     // exposed on the service surface — consumers derive and push the value
     // (e.g. from the picker's selection mode), so there's no read-back.
@@ -173,6 +174,10 @@ export const BookingService = implementService.withConfig()(BookingServiceDefini
         setSelectedPaymentOption(value) {
             selectedPaymentOptionSignal.set(value ?? undefined);
         },
+        // Deposit vs full upfront action
+        setDepositSelected(value) {
+            depositSelectedSignal.set(value);
+        },
         // All-day (DAY-range) action
         setAllDay(value) {
             allDaySignal.set(value);
@@ -192,6 +197,7 @@ export const BookingService = implementService.withConfig()(BookingServiceDefini
             const location = locationSignal.get();
             const timezone = timezoneSignal.get();
             const selectedPaymentOption = selectedPaymentOptionSignal.get();
+            const depositSelected = depositSelectedSignal.get();
             const allDay = allDaySignal.get();
             // Validation happens inside executeBookAction
             return executeBookAction({
@@ -202,6 +208,7 @@ export const BookingService = implementService.withConfig()(BookingServiceDefini
                 appId: config.appId,
                 sourceAppId: config.sourceAppId,
                 selectedPaymentOption,
+                depositSelected,
                 allDay,
             });
         },
@@ -212,6 +219,7 @@ export const BookingService = implementService.withConfig()(BookingServiceDefini
         timezone: timezoneSignal,
         formSubmission: formSubmissionSignal,
         selectedPaymentOption: selectedPaymentOptionSignal,
+        depositSelected: depositSelectedSignal,
         actions,
     };
 });

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

@@ -28,9 +28,12 @@ export type ErrorPaymentConfigResult = {
  * @param params.totalParticipants - Number of participants (default: 1)
  * @param params.selectedPaymentOption - Optional consumer-selected payment option;
  *   overrides the service-config heuristic on each line item's `paymentOption`.
+ * @param params.depositSelected - Optional deposit-vs-full-upfront choice; `false`
+ *   resolves a deposit service to full payment. Omit to keep the deposit default.
  */
 export declare function loadPaymentConfig(params: {
     pricingServiceSelections: PricingServiceSelection[];
     totalParticipants?: number;
     selectedPaymentOption?: SelectedPaymentOption;
+    depositSelected?: boolean;
 }): Promise<SuccessPaymentConfigResult | ErrorPaymentConfigResult>;

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

@@ -16,8 +16,17 @@ export interface ServicePaymentOptions {
     isOnline: boolean;
     /** Customer can pay in person (on arrival) */
     isInPerson: boolean;
-    /** A deposit is required at booking time */
+    /**
+     * A deposit is required at booking time — including percentage deposits, which
+     * set no amount. For the amount use `Payment.PayNow` / `Payment.PayLater`.
+     */
     isDeposit: boolean;
+    /**
+     * Customers may pay the full price upfront instead of only the deposit.
+     * Meaningful only with `isDeposit`; together they gate the
+     * deposit-vs-pay-in-full toggle.
+     */
+    canPayFullUpfront: boolean;
 }
 /**
  * Payment option for line items
@@ -83,6 +92,11 @@ export interface PaymentServiceInternalConfig extends PaymentServiceConfig {
      * set, overrides the service-config heuristic in line item `paymentOption`.
      */
     selectedPaymentOption?: SelectedPaymentOption;
+    /**
+     * Deposit-vs-full-upfront choice for lazy loading. `false` resolves a deposit
+     * service to full payment instead of `DEPOSIT_ONLINE`.
+     */
+    depositSelected?: boolean;
 }
 export interface PaymentServiceAPI {
     paymentDetailsSignal: Signal<PaymentDetails | null>;

package/dist/services/payment/payment.js

@@ -10,6 +10,7 @@ import { previewPrice, } from '@wix/auto_sdk_bookings_pricing';
 import { BookingServiceDefinition } from '../booking/booking.js';
 import { RateType, } from '@wix/auto_sdk_bookings_services';
 import { PaymentServiceDefinition, } from './payment.def.js';
+import { getDepositValue, hasDeposit as serviceHasDeposit, isFullUpfrontPaymentAllowed, requiresDeposit, } from '../servicePayment.js';
 import { generateLineItemId } from '../../utils/guid.js';
 export { PaymentServiceDefinition, } from './payment.def.js';
 import { BOOKING_APP_ID } from '../constants.js';
@@ -20,14 +21,13 @@ const DEFAULT_SERVICE_OPTIONS = {
     isOnline: false,
     isInPerson: false,
     isDeposit: false,
+    canPayFullUpfront: 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.
+ * Note on `isDeposit`: reflects whether the service *takes* a deposit, not
+ * whether an amount is configured — see `requiresDeposit`.
  *
  * This is distinct from the runtime `isDeposit` flag in `CorePayment.Data`, which
  * is computed dynamically from the ecom API result (`payNow.amount < total.amount`).
@@ -37,12 +37,11 @@ const DEFAULT_SERVICE_OPTIONS = {
 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,
+        isDeposit: requiresDeposit(service),
+        canPayFullUpfront: isFullUpfrontPaymentAllowed(service),
     };
 }
 function getAdditionalInfo(service, lineItemId) {
@@ -55,52 +54,77 @@ function getAdditionalInfo(service, lineItemId) {
 /**
  * Resolves the line item's `paymentOption`.
  *
- * Precedence: explicit consumer choice (`selectedPaymentOption`) wins over the
- * service-config heuristic so the preview always agrees with what `book()`
- * will send. When unset, the existing heuristic is preserved for backward
- * compat.
+ * Precedence: an explicit `selectedPaymentOption` wins over the service-config
+ * heuristic. `depositSelected` then picks deposit-vs-full within the online
+ * branches only — the offline branches ignore it.
+ *
+ * Note: `online && inPerson` resolves OFFLINE here but ONLINE in
+ * `buildBookingRequest`'s heuristic. Pre-existing; the two aren't derived from a
+ * shared rule.
  */
-function getPaymentOption(service, hasDeposit, selectedPaymentOption) {
+function getPaymentOption(service, hasDeposit, selectedPaymentOption, depositSelected) {
+    // Only an explicit `false` (pay in full) cancels the deposit split. `undefined`
+    // means the visitor never chose, and must keep charging the deposit — that is
+    // what every deposit service did before this field existed.
+    const chargeDeposit = hasDeposit && depositSelected !== false;
     if (selectedPaymentOption === 'OFFLINE') {
         return 'FULL_PAYMENT_OFFLINE';
     }
     if (selectedPaymentOption === 'ONLINE') {
-        return hasDeposit ? 'DEPOSIT_ONLINE' : 'FULL_PAYMENT_ONLINE';
+        return chargeDeposit ? 'DEPOSIT_ONLINE' : 'FULL_PAYMENT_ONLINE';
     }
     const options = service.payment?.options;
     if (options?.inPerson) {
         return 'FULL_PAYMENT_OFFLINE';
     }
     // If deposit is configured, use DEPOSIT_ONLINE to get correct payNow/payLater split
-    if (hasDeposit) {
+    if (chargeDeposit) {
         return 'DEPOSIT_ONLINE';
     }
     return 'FULL_PAYMENT_ONLINE';
 }
-function buildLineItem(service, totalParticipants, lineItemId, selectedPaymentOption) {
-    // Get fixed price from service
-    const servicePrice = service.payment?.fixed?.price?.value;
-    const price = Number(servicePrice || 0) * totalParticipants;
-    // Get deposit if configured
-    const depositValue = service.payment?.fixed?.deposit?.value;
-    const hasDeposit = !!depositValue && Number(depositValue) > 0;
-    const deposit = hasDeposit
-        ? Number(depositValue) * totalParticipants
-        : undefined;
-    // Get payment option from service configuration (pass hasDeposit for correct API behavior)
-    const paymentOption = getPaymentOption(service, hasDeposit, selectedPaymentOption);
+/**
+ * Assembles the eCom line item. Both pricing paths go through here so the
+ * `depositAmount` rule — eCom rejects it unless the option is `DEPOSIT_ONLINE` —
+ * lives in one place.
+ */
+function toLineItem(args) {
+    const { lineItemId, serviceId, price, deposit, paymentOption } = args;
     return {
         _id: lineItemId,
         catalogReference: {
-            catalogItemId: service._id || '',
+            catalogItemId: serviceId || '',
             appId: BOOKING_APP_ID,
         },
         price: String(price),
-        ...(deposit ? { depositAmount: String(deposit) } : {}),
+        ...(deposit && paymentOption === 'DEPOSIT_ONLINE'
+            ? { depositAmount: String(deposit) }
+            : {}),
         quantity: 1,
         paymentOption,
     };
 }
+function buildLineItem(service, totalParticipants, lineItemId, selectedPaymentOption, depositSelected) {
+    // VARIED-rate services carry price and deposit under `varied`, not `fixed`.
+    const servicePrice = service.payment?.fixed?.price?.value ??
+        service.payment?.varied?.defaultPrice?.value;
+    const price = Number(servicePrice || 0) * totalParticipants;
+    // Charge a deposit only if the service takes one and we know the amount.
+    const depositValue = getDepositValue(service);
+    const hasDeposit = requiresDeposit(service) && serviceHasDeposit(service);
+    const deposit = hasDeposit
+        ? Number(depositValue) * totalParticipants
+        : undefined;
+    // Get payment option from service configuration (pass hasDeposit for correct API behavior)
+    const paymentOption = getPaymentOption(service, hasDeposit, selectedPaymentOption, depositSelected);
+    return toLineItem({
+        lineItemId,
+        serviceId: service._id,
+        price,
+        deposit,
+        paymentOption,
+    });
+}
 // durationRange is an @internal field on AvailabilityConstraints (bookings services SDK v1.0.226+).
 // It signals that the service uses flexible duration pricing (hourly/daily rentals),
 // where the correct price must be fetched via previewPrice() rather than the fixed unit price.
@@ -119,7 +143,7 @@ async function getPreviewedPrice(bookingLineItems) {
         deposit: result.priceInfo?.deposit ?? null,
     };
 }
-async function buildLineItemWithPreview(item, totalParticipants, selectedPaymentOption) {
+async function buildLineItemWithPreview(item, totalParticipants, selectedPaymentOption, depositSelected) {
     const slots = item.rangeTimeSlots && item.rangeTimeSlots.length > 0
         ? item.rangeTimeSlots.map((s) => ({
             localStartDate: s.startDate,
@@ -133,7 +157,12 @@ async function buildLineItemWithPreview(item, totalParticipants, selectedPayment
                 },
             ]
             : [];
-    if (item.service._id && slots.length && getDurationRange(item.service)) {
+    // A deposit with no configured amount is a percentage — only the server knows
+    // the figure, and guessing it risks charging something else.
+    const needsServerResolvedDeposit = requiresDeposit(item.service) && !serviceHasDeposit(item.service);
+    if (item.service._id &&
+        slots.length &&
+        (getDurationRange(item.service) || needsServerResolvedDeposit)) {
         const bookingLineItems = slots.map((slot) => ({
             serviceId: item.service._id,
             localStartDate: slot.localStartDate,
@@ -143,37 +172,34 @@ async function buildLineItemWithPreview(item, totalParticipants, selectedPayment
         }));
         const previewedPrice = await getPreviewedPrice(bookingLineItems).catch(() => null);
         if (previewedPrice != null) {
-            const depositValue = item.service.payment?.fixed?.deposit?.value;
+            const depositValue = getDepositValue(item.service);
             const previewedDeposit = previewedPrice.deposit;
-            const hasDeposit = previewedDeposit != null
-                ? previewedDeposit > 0
-                : !!depositValue && Number(depositValue) > 0;
+            const hasDeposit = requiresDeposit(item.service) &&
+                (previewedDeposit != null
+                    ? previewedDeposit > 0
+                    : serviceHasDeposit(item.service));
             const deposit = hasDeposit
                 ? previewedDeposit != null
                     ? previewedDeposit
                     : Number(depositValue) * totalParticipants
                 : undefined;
-            return {
-                _id: item.lineItemId,
-                catalogReference: {
-                    catalogItemId: item.service._id || '',
-                    appId: BOOKING_APP_ID,
-                },
-                price: String(previewedPrice.price),
-                ...(deposit ? { depositAmount: String(deposit) } : {}),
-                quantity: 1,
-                paymentOption: getPaymentOption(item.service, hasDeposit, selectedPaymentOption),
-            };
+            return toLineItem({
+                lineItemId: item.lineItemId,
+                serviceId: item.service._id,
+                price: previewedPrice.price,
+                deposit,
+                paymentOption: getPaymentOption(item.service, hasDeposit, selectedPaymentOption, depositSelected),
+            });
         }
     }
-    return buildLineItem(item.service, totalParticipants, item.lineItemId, selectedPaymentOption);
+    return buildLineItem(item.service, totalParticipants, item.lineItemId, selectedPaymentOption, depositSelected);
 }
-async function calculatePaymentDetails(pricingServiceSelections, totalParticipants, selectedPaymentOption) {
+async function calculatePaymentDetails(pricingServiceSelections, totalParticipants, selectedPaymentOption, depositSelected) {
     const data = pricingServiceSelections.map((selection) => ({
         ...selection,
         lineItemId: selection.lineItemId || generateLineItemId(),
     }));
-    const lineItems = await Promise.all(data.map((item) => buildLineItemWithPreview(item, totalParticipants, selectedPaymentOption)));
+    const lineItems = await Promise.all(data.map((item) => buildLineItemWithPreview(item, totalParticipants, selectedPaymentOption, depositSelected)));
     const response = await calculateTotals({
         lineItems,
     });
@@ -204,7 +230,7 @@ export const PaymentService = implementService.withConfig()(PaymentServiceDefini
     const errorSignal = signalsService.signal(null);
     const serviceOptionsSignal = signalsService.signal(config.serviceOptions || DEFAULT_SERVICE_OPTIONS);
     // Internal calculate function
-    const calculate = async (pricingServiceSelections, totalParticipants, selectedPaymentOption) => {
+    const calculate = async (pricingServiceSelections, totalParticipants, selectedPaymentOption, depositSelected) => {
         if (!pricingServiceSelections.length) {
             paymentDetailsSignal.set(null);
             return;
@@ -212,7 +238,7 @@ export const PaymentService = implementService.withConfig()(PaymentServiceDefini
         isLoadingSignal.set(true);
         errorSignal.set(null);
         try {
-            const paymentDetails = await calculatePaymentDetails(pricingServiceSelections, totalParticipants, selectedPaymentOption);
+            const paymentDetails = await calculatePaymentDetails(pricingServiceSelections, totalParticipants, selectedPaymentOption, depositSelected);
             paymentDetailsSignal.set(paymentDetails);
         }
         catch (error) {
@@ -240,16 +266,17 @@ export const PaymentService = implementService.withConfig()(PaymentServiceDefini
     // 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, config.selectedPaymentOption);
+        void calculate(config.pricingServiceSelections, config.totalParticipants ?? 1, config.selectedPaymentOption, config.depositSelected);
     }
     // Mode 3: Reactive - observe BookingService signals (client-side only)
     else if (typeof window !== 'undefined' && bookingService) {
-        // Computed signal that changes when services, selected time slots, or
-        // the consumer-selected payment option change (not participants).
+        // Computed signal that changes when services, selected time slots, or the
+        // consumer's payment choices change (not participants).
         const servicesKey = signalsService.computed(() => {
             const selections = bookingService?.serviceSelections.get() || [];
             const timezone = bookingService?.timezone.get();
             const selectedPaymentOption = bookingService?.selectedPaymentOption.get();
+            const depositSelected = bookingService?.depositSelected.get();
             return JSON.stringify({
                 selections: selections.map((s) => ({
                     serviceId: s.service._id,
@@ -259,16 +286,18 @@ export const PaymentService = implementService.withConfig()(PaymentServiceDefini
                 })),
                 timezone,
                 selectedPaymentOption,
+                depositSelected,
             });
         });
         signalsService.effect(() => {
-            // Subscribe to servicesKey to trigger effect when service, time
-            // slot, or selected payment option changes.
+            // Subscribe to servicesKey to trigger effect when service, time slot,
+            // or payment choices change.
             servicesKey.get();
             // Read current selections without subscribing (peek)
             const selections = bookingService?.serviceSelections.peek() || [];
             const timezone = bookingService?.timezone.peek();
             const selectedPaymentOption = bookingService?.selectedPaymentOption.peek();
+            const depositSelected = bookingService?.depositSelected.peek();
             // For single service mode, take the first selection
             const firstSelection = selections[0];
             const numParticipants = firstSelection?.totalParticipants || 1;
@@ -283,7 +312,7 @@ export const PaymentService = implementService.withConfig()(PaymentServiceDefini
             if (pricingServiceSelections.length) {
                 serviceOptionsSignal.set(deriveServiceOptions(pricingServiceSelections));
             }
-            void calculate(pricingServiceSelections, numParticipants, selectedPaymentOption);
+            void calculate(pricingServiceSelections, numParticipants, selectedPaymentOption, depositSelected);
         });
     }
     return {
@@ -301,10 +330,12 @@ export const PaymentService = implementService.withConfig()(PaymentServiceDefini
  * @param params.totalParticipants - Number of participants (default: 1)
  * @param params.selectedPaymentOption - Optional consumer-selected payment option;
  *   overrides the service-config heuristic on each line item's `paymentOption`.
+ * @param params.depositSelected - Optional deposit-vs-full-upfront choice; `false`
+ *   resolves a deposit service to full payment. Omit to keep the deposit default.
  */
 export async function loadPaymentConfig(params) {
     try {
-        const { pricingServiceSelections, totalParticipants = 1, selectedPaymentOption, } = params;
+        const { pricingServiceSelections, totalParticipants = 1, selectedPaymentOption, depositSelected, } = params;
         if (!pricingServiceSelections.length) {
             return {
                 type: 'success',
@@ -314,7 +345,7 @@ export async function loadPaymentConfig(params) {
                 },
             };
         }
-        const paymentDetails = await calculatePaymentDetails(pricingServiceSelections, totalParticipants, selectedPaymentOption);
+        const paymentDetails = await calculatePaymentDetails(pricingServiceSelections, totalParticipants, selectedPaymentOption, depositSelected);
         return {
             type: 'success',
             config: {