@resira/ui 0.4.0 → 0.4.2

package/dist/index.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { Product, WeightedBaseUrl, Resira, RefundRule, TimeSlotAvailability, DurationPrice, PublicResource, ValidatePromoCodeResponse, Reservation, AvailabilityParams, Availability, Dish, PaymentIntentResponse, CreatePaymentIntentRequest, CreateReservationRequest } from '@resira/sdk';
-export { ConfirmPaymentRequest, ConfirmPaymentResponse, CreatePaymentIntentRequest, Dish, DishListResponse, DishModel, DishResponse, PaymentIntentResponse, PricingModel, Product, ProductListResponse, PublicResource, ResourceListResponse } from '@resira/sdk';
+import { Product, WeightedBaseUrl, Resira, RefundRule, TimeSlotAvailability, DurationPrice, PublicResource, ValidatePromoCodeResponse, Reservation, AvailabilityParams, Availability, CheckoutSession, Dish, PaymentIntentResponse, CreatePaymentIntentRequest, CreateReservationRequest } from '@resira/sdk';
+export { CheckoutConfig, CheckoutSession, CheckoutSessionResponse, ConfirmPaymentRequest, ConfirmPaymentResponse, CreateCheckoutSessionRequest, CreateCheckoutSessionResponse, CreatePaymentIntentRequest, Dish, DishListResponse, DishModel, DishResponse, PaymentIntentResponse, PricingModel, Product, ProductListResponse, ProductVariant, PublicResource, ResourceListResponse } from '@resira/sdk';
 
 type ResiraDomain = "rental" | "restaurant" | "watersport" | "service";
 /** Layout direction for the product/service selector. */
@@ -320,6 +320,8 @@ interface ResiraProviderProps {
     domain: ResiraDomain;
     /** Configuration overrides. */
     config?: ResiraProviderConfig;
+    /** Checkout session token. When provided, skips service selection and opens directly into checkout. */
+    checkoutSessionToken?: string;
     /** Callback when the modal/widget should close. */
     onClose?: () => void;
     /** Child components. */
@@ -392,9 +394,11 @@ interface ResiraContextValue {
     }) => void;
     /** Called when an error occurs during the booking flow. */
     onError?: (code: string, message: string) => void;
+    /** Checkout session token — when provided, the widget skips to checkout. */
+    checkoutSessionToken?: string;
 }
 /** Steps in the booking flow. */
-type BookingStep = "resource" | "availability" | "details" | "terms" | "payment" | "confirmation";
+type BookingStep = "resource" | "availability" | "details" | "terms" | "payment" | "confirmation" | "checkout";
 /** Selection state from the availability step. */
 interface BookingSelection {
     /** Selected start date (YYYY-MM-DD). */
@@ -438,7 +442,7 @@ declare function useResira(): ResiraContextValue;
  * </ResiraProvider>
  * ```
  */
-declare function ResiraProvider({ apiKey, resourceId, domain, config, onClose, children, }: ResiraProviderProps): react_jsx_runtime.JSX.Element;
+declare function ResiraProvider({ apiKey, resourceId, domain, config, checkoutSessionToken, onClose, children, }: ResiraProviderProps): react_jsx_runtime.JSX.Element;
 
 declare function ResiraBookingWidget(): react_jsx_runtime.JSX.Element;
 
@@ -451,6 +455,8 @@ interface BookingModalProps {
     resourceId?: string;
     /** Configuration overrides. */
     config?: ResiraProviderConfig;
+    /** Checkout session token. When provided, skips to checkout. */
+    checkoutSessionToken?: string;
     /** Custom trigger button — if omitted, uses the default "Book Now" button. */
     trigger?: React.ReactNode;
     /** Custom button label. @default "Book Now" */
@@ -460,7 +466,7 @@ interface BookingModalProps {
     /** Custom button style. */
     buttonStyle?: React.CSSProperties;
 }
-declare function BookingModal({ apiKey, domain, resourceId, config, trigger, buttonLabel, buttonClassName, buttonStyle, }: BookingModalProps): react_jsx_runtime.JSX.Element;
+declare function BookingModal({ apiKey, domain, resourceId, config, checkoutSessionToken, trigger, buttonLabel, buttonClassName, buttonStyle, }: BookingModalProps): react_jsx_runtime.JSX.Element;
 
 interface BookingCalendarProps {
     /** Set of blocked/unavailable dates (YYYY-MM-DD). */
@@ -759,6 +765,31 @@ interface UseDishesReturn {
  * ```
  */
 declare function useDishes(enabled?: boolean): UseDishesReturn;
+/** Checkout session error codes for UX branching. */
+type CheckoutSessionErrorCode = "not_found" | "consumed" | "expired" | "unknown";
+interface UseCheckoutSessionReturn {
+    /** The hydrated checkout session. */
+    session: CheckoutSession | null;
+    /** Whether the session is loading. */
+    loading: boolean;
+    /** Error message if loading failed. */
+    error: string | null;
+    /** Structured error code for UX branching. */
+    errorCode: CheckoutSessionErrorCode | null;
+}
+/**
+ * Fetch and hydrate a checkout session by token.
+ *
+ * Handles the three error cases from the API:
+ * - 404 → "Invalid booking link"
+ * - "already consumed" → "This booking was already completed"
+ * - "expired" → "Session expired"
+ *
+ * ```tsx
+ * const { session, loading, error, errorCode } = useCheckoutSession("cs_ab12cd34...");
+ * ```
+ */
+declare function useCheckoutSession(token: string | undefined): UseCheckoutSessionReturn;
 
 /** Default theme values. */
 declare const DEFAULT_THEME: Required<ResiraTheme>;
@@ -798,4 +829,4 @@ declare function TagIcon({ size, className }: IconProps): react_jsx_runtime.JSX.
 declare function CubeIcon({ size, className }: IconProps): react_jsx_runtime.JSX.Element;
 declare function ViewfinderIcon({ size, className }: IconProps): react_jsx_runtime.JSX.Element;
 
-export { AlertCircleIcon, BookingCalendar, BookingModal, type BookingSelection, type BookingStep, CalendarIcon, CheckCircleIcon, CheckIcon, ChevronLeftIcon, ChevronRightIcon, ClockIcon, ConfirmationView, CreditCardIcon, CubeIcon, DEFAULT_LOCALE, DEFAULT_THEME, type DeeplinkGuest, type DeeplinkSelection, DishShowcase, type DishShowcaseProps, type DomainConfig, GuestForm, type GuestFormErrors, type GuestFormValues, LockIcon, MailIcon, MinusIcon, NoteIcon, PaymentForm, PhoneIcon, PlusIcon, ProductSelector, ResiraBookingWidget, type ResiraClassNames, type ResiraContextValue, type ResiraDomain, type ResiraLocale, ResiraProvider, type ResiraProviderConfig, type ResiraProviderProps, type ResiraTheme, ResourcePicker, type ServiceLayout, ShieldIcon, SummaryPreview, TagIcon, TimeSlotPicker, UserIcon, UsersIcon, ViewfinderIcon, WaiverConsent, XIcon, resolveTheme, themeToCSS, useAvailability, useDish, useDishes, usePaymentIntent, useProducts, useReservation, useResira, useResources, validateGuestForm };
+export { AlertCircleIcon, BookingCalendar, BookingModal, type BookingSelection, type BookingStep, CalendarIcon, CheckCircleIcon, CheckIcon, type CheckoutSessionErrorCode, ChevronLeftIcon, ChevronRightIcon, ClockIcon, ConfirmationView, CreditCardIcon, CubeIcon, DEFAULT_LOCALE, DEFAULT_THEME, type DeeplinkGuest, type DeeplinkSelection, DishShowcase, type DishShowcaseProps, type DomainConfig, GuestForm, type GuestFormErrors, type GuestFormValues, LockIcon, MailIcon, MinusIcon, NoteIcon, PaymentForm, PhoneIcon, PlusIcon, ProductSelector, ResiraBookingWidget, type ResiraClassNames, type ResiraContextValue, type ResiraDomain, type ResiraLocale, ResiraProvider, type ResiraProviderConfig, type ResiraProviderProps, type ResiraTheme, ResourcePicker, type ServiceLayout, ShieldIcon, SummaryPreview, TagIcon, TimeSlotPicker, UserIcon, UsersIcon, ViewfinderIcon, WaiverConsent, XIcon, resolveTheme, themeToCSS, useAvailability, useCheckoutSession, useDish, useDishes, usePaymentIntent, useProducts, useReservation, useResira, useResources, validateGuestForm };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { Product, WeightedBaseUrl, Resira, RefundRule, TimeSlotAvailability, DurationPrice, PublicResource, ValidatePromoCodeResponse, Reservation, AvailabilityParams, Availability, Dish, PaymentIntentResponse, CreatePaymentIntentRequest, CreateReservationRequest } from '@resira/sdk';
-export { ConfirmPaymentRequest, ConfirmPaymentResponse, CreatePaymentIntentRequest, Dish, DishListResponse, DishModel, DishResponse, PaymentIntentResponse, PricingModel, Product, ProductListResponse, PublicResource, ResourceListResponse } from '@resira/sdk';
+import { Product, WeightedBaseUrl, Resira, RefundRule, TimeSlotAvailability, DurationPrice, PublicResource, ValidatePromoCodeResponse, Reservation, AvailabilityParams, Availability, CheckoutSession, Dish, PaymentIntentResponse, CreatePaymentIntentRequest, CreateReservationRequest } from '@resira/sdk';
+export { CheckoutConfig, CheckoutSession, CheckoutSessionResponse, ConfirmPaymentRequest, ConfirmPaymentResponse, CreateCheckoutSessionRequest, CreateCheckoutSessionResponse, CreatePaymentIntentRequest, Dish, DishListResponse, DishModel, DishResponse, PaymentIntentResponse, PricingModel, Product, ProductListResponse, ProductVariant, PublicResource, ResourceListResponse } from '@resira/sdk';
 
 type ResiraDomain = "rental" | "restaurant" | "watersport" | "service";
 /** Layout direction for the product/service selector. */
@@ -320,6 +320,8 @@ interface ResiraProviderProps {
     domain: ResiraDomain;
     /** Configuration overrides. */
     config?: ResiraProviderConfig;
+    /** Checkout session token. When provided, skips service selection and opens directly into checkout. */
+    checkoutSessionToken?: string;
     /** Callback when the modal/widget should close. */
     onClose?: () => void;
     /** Child components. */
@@ -392,9 +394,11 @@ interface ResiraContextValue {
     }) => void;
     /** Called when an error occurs during the booking flow. */
     onError?: (code: string, message: string) => void;
+    /** Checkout session token — when provided, the widget skips to checkout. */
+    checkoutSessionToken?: string;
 }
 /** Steps in the booking flow. */
-type BookingStep = "resource" | "availability" | "details" | "terms" | "payment" | "confirmation";
+type BookingStep = "resource" | "availability" | "details" | "terms" | "payment" | "confirmation" | "checkout";
 /** Selection state from the availability step. */
 interface BookingSelection {
     /** Selected start date (YYYY-MM-DD). */
@@ -438,7 +442,7 @@ declare function useResira(): ResiraContextValue;
  * </ResiraProvider>
  * ```
  */
-declare function ResiraProvider({ apiKey, resourceId, domain, config, onClose, children, }: ResiraProviderProps): react_jsx_runtime.JSX.Element;
+declare function ResiraProvider({ apiKey, resourceId, domain, config, checkoutSessionToken, onClose, children, }: ResiraProviderProps): react_jsx_runtime.JSX.Element;
 
 declare function ResiraBookingWidget(): react_jsx_runtime.JSX.Element;
 
@@ -451,6 +455,8 @@ interface BookingModalProps {
     resourceId?: string;
     /** Configuration overrides. */
     config?: ResiraProviderConfig;
+    /** Checkout session token. When provided, skips to checkout. */
+    checkoutSessionToken?: string;
     /** Custom trigger button — if omitted, uses the default "Book Now" button. */
     trigger?: React.ReactNode;
     /** Custom button label. @default "Book Now" */
@@ -460,7 +466,7 @@ interface BookingModalProps {
     /** Custom button style. */
     buttonStyle?: React.CSSProperties;
 }
-declare function BookingModal({ apiKey, domain, resourceId, config, trigger, buttonLabel, buttonClassName, buttonStyle, }: BookingModalProps): react_jsx_runtime.JSX.Element;
+declare function BookingModal({ apiKey, domain, resourceId, config, checkoutSessionToken, trigger, buttonLabel, buttonClassName, buttonStyle, }: BookingModalProps): react_jsx_runtime.JSX.Element;
 
 interface BookingCalendarProps {
     /** Set of blocked/unavailable dates (YYYY-MM-DD). */
@@ -759,6 +765,31 @@ interface UseDishesReturn {
  * ```
  */
 declare function useDishes(enabled?: boolean): UseDishesReturn;
+/** Checkout session error codes for UX branching. */
+type CheckoutSessionErrorCode = "not_found" | "consumed" | "expired" | "unknown";
+interface UseCheckoutSessionReturn {
+    /** The hydrated checkout session. */
+    session: CheckoutSession | null;
+    /** Whether the session is loading. */
+    loading: boolean;
+    /** Error message if loading failed. */
+    error: string | null;
+    /** Structured error code for UX branching. */
+    errorCode: CheckoutSessionErrorCode | null;
+}
+/**
+ * Fetch and hydrate a checkout session by token.
+ *
+ * Handles the three error cases from the API:
+ * - 404 → "Invalid booking link"
+ * - "already consumed" → "This booking was already completed"
+ * - "expired" → "Session expired"
+ *
+ * ```tsx
+ * const { session, loading, error, errorCode } = useCheckoutSession("cs_ab12cd34...");
+ * ```
+ */
+declare function useCheckoutSession(token: string | undefined): UseCheckoutSessionReturn;
 
 /** Default theme values. */
 declare const DEFAULT_THEME: Required<ResiraTheme>;
@@ -798,4 +829,4 @@ declare function TagIcon({ size, className }: IconProps): react_jsx_runtime.JSX.
 declare function CubeIcon({ size, className }: IconProps): react_jsx_runtime.JSX.Element;
 declare function ViewfinderIcon({ size, className }: IconProps): react_jsx_runtime.JSX.Element;
 
-export { AlertCircleIcon, BookingCalendar, BookingModal, type BookingSelection, type BookingStep, CalendarIcon, CheckCircleIcon, CheckIcon, ChevronLeftIcon, ChevronRightIcon, ClockIcon, ConfirmationView, CreditCardIcon, CubeIcon, DEFAULT_LOCALE, DEFAULT_THEME, type DeeplinkGuest, type DeeplinkSelection, DishShowcase, type DishShowcaseProps, type DomainConfig, GuestForm, type GuestFormErrors, type GuestFormValues, LockIcon, MailIcon, MinusIcon, NoteIcon, PaymentForm, PhoneIcon, PlusIcon, ProductSelector, ResiraBookingWidget, type ResiraClassNames, type ResiraContextValue, type ResiraDomain, type ResiraLocale, ResiraProvider, type ResiraProviderConfig, type ResiraProviderProps, type ResiraTheme, ResourcePicker, type ServiceLayout, ShieldIcon, SummaryPreview, TagIcon, TimeSlotPicker, UserIcon, UsersIcon, ViewfinderIcon, WaiverConsent, XIcon, resolveTheme, themeToCSS, useAvailability, useDish, useDishes, usePaymentIntent, useProducts, useReservation, useResira, useResources, validateGuestForm };
+export { AlertCircleIcon, BookingCalendar, BookingModal, type BookingSelection, type BookingStep, CalendarIcon, CheckCircleIcon, CheckIcon, type CheckoutSessionErrorCode, ChevronLeftIcon, ChevronRightIcon, ClockIcon, ConfirmationView, CreditCardIcon, CubeIcon, DEFAULT_LOCALE, DEFAULT_THEME, type DeeplinkGuest, type DeeplinkSelection, DishShowcase, type DishShowcaseProps, type DomainConfig, GuestForm, type GuestFormErrors, type GuestFormValues, LockIcon, MailIcon, MinusIcon, NoteIcon, PaymentForm, PhoneIcon, PlusIcon, ProductSelector, ResiraBookingWidget, type ResiraClassNames, type ResiraContextValue, type ResiraDomain, type ResiraLocale, ResiraProvider, type ResiraProviderConfig, type ResiraProviderProps, type ResiraTheme, ResourcePicker, type ServiceLayout, ShieldIcon, SummaryPreview, TagIcon, TimeSlotPicker, UserIcon, UsersIcon, ViewfinderIcon, WaiverConsent, XIcon, resolveTheme, themeToCSS, useAvailability, useCheckoutSession, useDish, useDishes, usePaymentIntent, useProducts, useReservation, useResira, useResources, validateGuestForm };

package/dist/index.js

@@ -171,6 +171,7 @@ function ResiraProvider({
   resourceId,
   domain,
   config,
+  checkoutSessionToken,
   onClose,
   children
 }) {
@@ -260,9 +261,10 @@ function ResiraProvider({
       deeplinkGuest,
       onStepChange,
       onBookingComplete,
-      onError
+      onError,
+      checkoutSessionToken
     }),
-    [client, resourceId, activeResourceId, setActiveResourceId, catalogMode, allowMultiSelect, domain, theme, locale, domainConfig, stripePublishableKey, termsText, waiverText, showWaiver, showTerms, showRemainingSpots, depositPercent, refundPolicy, onClose, classNames, serviceLayout, visibleServiceCount, groupServicesByCategory, renderServiceCard, showStepIndicator, deeplink, deeplinkGuest, onStepChange, onBookingComplete, onError]
+    [client, resourceId, activeResourceId, setActiveResourceId, catalogMode, allowMultiSelect, domain, theme, locale, domainConfig, stripePublishableKey, termsText, waiverText, showWaiver, showTerms, showRemainingSpots, depositPercent, refundPolicy, onClose, classNames, serviceLayout, visibleServiceCount, groupServicesByCategory, renderServiceCard, showStepIndicator, deeplink, deeplinkGuest, onStepChange, onBookingComplete, onError, checkoutSessionToken]
   );
   return /* @__PURE__ */ jsx(ResiraContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { className: "resira-root", style: cssVars, children }) });
 }
@@ -594,6 +596,60 @@ function useDishes(enabled = true) {
   }, [client, enabled]);
   return { dishes, loading, error };
 }
+function useCheckoutSession(token) {
+  const { client } = useResira();
+  const [session, setSession] = useState(null);
+  const [loading, setLoading] = useState(!!token);
+  const [error, setError] = useState(null);
+  const [errorCode, setErrorCode] = useState(null);
+  useEffect(() => {
+    if (!token) {
+      setSession(null);
+      setLoading(false);
+      setError(null);
+      setErrorCode(null);
+      return;
+    }
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    setErrorCode(null);
+    async function fetchSession() {
+      try {
+        const data = await client.getCheckoutSession(token);
+        if (!cancelled) {
+          setSession(data.session);
+        }
+      } catch (err) {
+        if (cancelled) return;
+        const apiErr = err;
+        const message = apiErr.body?.error ?? (err instanceof Error ? err.message : "Failed to load checkout session");
+        if (apiErr.status === 404) {
+          setError("Invalid booking link");
+          setErrorCode("not_found");
+        } else if (message.toLowerCase().includes("consumed")) {
+          setError("This booking was already completed");
+          setErrorCode("consumed");
+        } else if (message.toLowerCase().includes("expired")) {
+          setError("Session expired \u2014 please start a new booking");
+          setErrorCode("expired");
+        } else {
+          setError(message);
+          setErrorCode("unknown");
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    }
+    fetchSession();
+    return () => {
+      cancelled = true;
+    };
+  }, [client, token]);
+  return { session, loading, error, errorCode };
+}
 var defaultSize = 20;
 function CalendarIcon({ size = defaultSize, className }) {
   return /* @__PURE__ */ jsxs(
@@ -2675,7 +2731,8 @@ var STEP_LABELS = {
   details: "Details",
   terms: "Terms",
   payment: "Payment",
-  confirmation: "Done"
+  confirmation: "Done",
+  checkout: "Checkout"
 };
 function ResiraBookingWidget() {
   const {
@@ -2697,16 +2754,26 @@ function ResiraBookingWidget() {
     deeplinkGuest,
     onStepChange,
     onBookingComplete,
-    onError
+    onError,
+    checkoutSessionToken
   } = useResira();
   const isDateBased = domain === "rental";
   const isTimeBased = domain === "restaurant" || domain === "watersport" || domain === "service";
   const isServiceBased = domain === "watersport" || domain === "service";
   const hasPayment = !!stripePublishableKey;
-  const STEPS = useMemo(
-    () => buildSteps(domain, hasPayment, catalogMode),
-    [domain, hasPayment, catalogMode]
-  );
+  const isCheckoutMode = !!checkoutSessionToken;
+  const {
+    session: checkoutSession,
+    loading: checkoutSessionLoading,
+    error: checkoutSessionError,
+    errorCode: checkoutSessionErrorCode
+  } = useCheckoutSession(checkoutSessionToken);
+  const STEPS = useMemo(() => {
+    if (isCheckoutMode) {
+      return ["checkout", "payment", "confirmation"];
+    }
+    return buildSteps(domain, hasPayment, catalogMode);
+  }, [domain, hasPayment, catalogMode, isCheckoutMode]);
   const initialStep = STEPS[0];
   const [step, setStep] = useState(initialStep);
   const [selectedResourceIds, setSelectedResourceIds] = useState([]);
@@ -2787,6 +2854,16 @@ function ResiraBookingWidget() {
   const [paymentFormReady, setPaymentFormReady] = useState(false);
   const [paymentFormSubmitting, setPaymentFormSubmitting] = useState(false);
   const paymentPayload = useMemo(() => {
+    if (isCheckoutMode && checkoutSession) {
+      return {
+        checkoutSessionToken,
+        guestName: guest.guestName.trim() || checkoutSession.guestName || "",
+        guestEmail: guest.guestEmail.trim() || checkoutSession.guestEmail || void 0,
+        guestPhone: guest.guestPhone.trim() || void 0,
+        notes: guest.notes.trim() || void 0,
+        termsAccepted: termsAccepted || void 0
+      };
+    }
     const resourceId = activeResourceId ?? selectedProduct?.equipmentIds?.[0] ?? "";
     return {
       productId: selectedProduct?.id ?? "",
@@ -2803,7 +2880,7 @@ function ResiraBookingWidget() {
       promoCode: discountCode.trim() || void 0,
       termsAccepted: termsAccepted || void 0
     };
-  }, [activeResourceId, selectedProduct, selection, guest, discountCode, termsAccepted]);
+  }, [activeResourceId, selectedProduct, selection, guest, discountCode, termsAccepted, isCheckoutMode, checkoutSession, checkoutSessionToken]);
   const blockedDates = useMemo(() => {
     const dates = calendarData?.dates?.blockedDates ?? availability?.dates?.blockedDates ?? [];
     return new Set(dates);
@@ -2861,6 +2938,8 @@ function ResiraBookingWidget() {
         return locale.payment;
       case "confirmation":
         return locale.bookingConfirmed;
+      case "checkout":
+        return "Checkout";
     }
   }, [step, isDateBased, isServiceBased, locale, domain]);
   const stepSubtitle = useMemo(() => {
@@ -2879,8 +2958,10 @@ function ResiraBookingWidget() {
         return "Complete your booking securely";
       case "confirmation":
         return "";
+      case "checkout":
+        return checkoutSession?.productName ?? "Complete your booking";
     }
-  }, [step, domainConfig.label, locale, allowMultiSelect, isServiceBased, selectedProduct, domain]);
+  }, [step, domainConfig.label, locale, allowMultiSelect, isServiceBased, selectedProduct, domain, checkoutSession]);
   const canContinue = useMemo(() => {
     if (step === "resource") {
       if (isServiceBased) return !!selectedProduct;
@@ -3058,6 +3139,35 @@ function ResiraBookingWidget() {
   const handlePaymentError = useCallback((msg) => {
     onError?.("payment_error", msg);
   }, [onError]);
+  const handleCheckoutSubmit = useCallback(async () => {
+    const contactMode = "email-required";
+    const errors = validateGuestForm(guest, {
+      required: locale.required,
+      invalidEmail: locale.invalidEmail,
+      contactRequired: locale.contactRequired
+    }, contactMode);
+    if (Object.keys(errors).length > 0) {
+      setFormErrors(errors);
+      return;
+    }
+    setFormErrors({});
+    if (checkoutSession?.checkoutConfig.termsRequired && !termsAccepted) {
+      setTermsError(locale.termsRequired);
+      return;
+    }
+    setTermsError(null);
+    const result = await createPayment(paymentPayload);
+    if (!result) return;
+    if (result.amountNow === 0) {
+      if (result.reservationId) {
+        const confirmed = await confirmPayment(result.paymentIntentId, result.reservationId);
+        if (!confirmed) return;
+      }
+      setStep("confirmation");
+    } else {
+      setStep("payment");
+    }
+  }, [guest, locale, checkoutSession, termsAccepted, createPayment, paymentPayload, confirmPayment]);
   const handleSubmitNoPayment = useCallback(async () => {
     if (showTerms && !termsAccepted) {
       setTermsError(locale.termsRequired);
@@ -3088,6 +3198,17 @@ function ResiraBookingWidget() {
   const footerBusy = submitting || creatingPayment || confirmingPayment || paymentFormSubmitting;
   const paymentActionDisabled = !paymentIntent || !paymentFormReady || paymentFormSubmitting || confirmingPayment;
   const [deeplinkApplied, setDeeplinkApplied] = useState(false);
+  const [checkoutGuestFilled, setCheckoutGuestFilled] = useState(false);
+  useEffect(() => {
+    if (checkoutGuestFilled || !checkoutSession) return;
+    setGuest((prev) => ({
+      guestName: checkoutSession.guestName ?? prev.guestName,
+      guestEmail: checkoutSession.guestEmail ?? prev.guestEmail,
+      guestPhone: prev.guestPhone,
+      notes: prev.notes
+    }));
+    setCheckoutGuestFilled(true);
+  }, [checkoutSession, checkoutGuestFilled]);
   useEffect(() => {
     if (deeplinkApplied || !deeplink) return;
     if (deeplink.productId && products.length > 0 && !selectedProduct) {
@@ -3323,6 +3444,93 @@ function ResiraBookingWidget() {
           /* @__PURE__ */ jsx("p", { className: "resira-error-message", children: paymentError })
         ] })
       ] }),
+      step === "checkout" && /* @__PURE__ */ jsxs(Fragment, { children: [
+        checkoutSessionLoading && /* @__PURE__ */ jsxs("div", { className: "resira-loading", role: "status", "aria-live": "polite", "aria-busy": "true", children: [
+          /* @__PURE__ */ jsx("div", { className: "resira-spinner", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { className: "resira-loading-text", children: locale.loading })
+        ] }),
+        checkoutSessionError && /* @__PURE__ */ jsxs("div", { className: "resira-error", role: "alert", "aria-live": "assertive", children: [
+          /* @__PURE__ */ jsx(AlertCircleIcon, { size: 24 }),
+          /* @__PURE__ */ jsx("p", { className: "resira-error-message", children: checkoutSessionError }),
+          (checkoutSessionErrorCode === "not_found" || checkoutSessionErrorCode === "expired") && onClose && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "resira-btn resira-btn--secondary resira-error-retry",
+              onClick: onClose,
+              children: "Start a new booking"
+            }
+          )
+        ] }),
+        checkoutSession && !checkoutSessionError && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "resira-summary", style: { marginBottom: 16 }, children: [
+            /* @__PURE__ */ jsxs("div", { className: "resira-summary-row", children: [
+              /* @__PURE__ */ jsx("span", { className: "resira-summary-label", children: "Service" }),
+              /* @__PURE__ */ jsx("span", { className: "resira-summary-value", children: checkoutSession.productName })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "resira-summary-row", children: [
+              /* @__PURE__ */ jsx("span", { className: "resira-summary-label", children: "Date" }),
+              /* @__PURE__ */ jsx("span", { className: "resira-summary-value", children: (/* @__PURE__ */ new Date(checkoutSession.date + "T00:00:00")).toLocaleDateString("default", { weekday: "short", month: "short", day: "numeric" }) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "resira-summary-row", children: [
+              /* @__PURE__ */ jsx("span", { className: "resira-summary-label", children: "Time" }),
+              /* @__PURE__ */ jsxs("span", { className: "resira-summary-value", children: [
+                new Date(checkoutSession.startTime).toLocaleTimeString("default", { hour: "2-digit", minute: "2-digit", hour12: false }),
+                " \u2013 ",
+                new Date(checkoutSession.endTime).toLocaleTimeString("default", { hour: "2-digit", minute: "2-digit", hour12: false })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "resira-summary-row", children: [
+              /* @__PURE__ */ jsx("span", { className: "resira-summary-label", children: "Duration" }),
+              /* @__PURE__ */ jsxs("span", { className: "resira-summary-value", children: [
+                checkoutSession.durationMinutes,
+                " min"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "resira-summary-row", children: [
+              /* @__PURE__ */ jsx("span", { className: "resira-summary-label", children: locale.guests }),
+              /* @__PURE__ */ jsx("span", { className: "resira-summary-value", children: checkoutSession.partySize })
+            ] }),
+            checkoutSession.promoCode && /* @__PURE__ */ jsxs("div", { className: "resira-summary-row", children: [
+              /* @__PURE__ */ jsx("span", { className: "resira-summary-label", children: locale.discountCode }),
+              /* @__PURE__ */ jsx("span", { className: "resira-summary-value", children: checkoutSession.promoCode })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "resira-summary-divider" }),
+            /* @__PURE__ */ jsxs("div", { className: "resira-summary-row", children: [
+              /* @__PURE__ */ jsx("span", { className: "resira-summary-label resira-summary-total", children: locale.total }),
+              /* @__PURE__ */ jsx("span", { className: "resira-summary-value resira-summary-total", children: formatPrice5(checkoutSession.priceCents, checkoutSession.currency) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            GuestForm,
+            {
+              values: guest,
+              onChange: setGuest,
+              errors: formErrors
+            }
+          ),
+          checkoutSession.checkoutConfig.termsRequired && /* @__PURE__ */ jsx("div", { style: { marginTop: 14 }, children: /* @__PURE__ */ jsx(
+            WaiverConsent,
+            {
+              termsAccepted,
+              onTermsChange: setTermsAccepted,
+              waiverAccepted: false,
+              onWaiverChange: () => {
+              },
+              discountCode: "",
+              onDiscountCodeChange: () => {
+              },
+              onPromoValidated: () => {
+              },
+              error: termsError ?? void 0
+            }
+          ) }),
+          paymentError && /* @__PURE__ */ jsxs("div", { className: "resira-error", style: { padding: "12px 0" }, children: [
+            /* @__PURE__ */ jsx(AlertCircleIcon, { size: 18 }),
+            /* @__PURE__ */ jsx("p", { className: "resira-error-message", children: paymentError })
+          ] })
+        ] })
+      ] }),
       step === "payment" && /* @__PURE__ */ jsxs(Fragment, { children: [
         paymentError && /* @__PURE__ */ jsxs("div", { className: "resira-error", children: [
           /* @__PURE__ */ jsx(AlertCircleIcon, { size: 24 }),
@@ -3408,31 +3616,45 @@ function ResiraBookingWidget() {
               /* @__PURE__ */ jsx("span", { className: "resira-summary-value resira-summary-total", children: formatPrice5(computedPrice.total, currency) })
             ] })
           ] })
-        ] }) }),
-        onClose && /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: "resira-btn resira-btn--primary",
-            style: { marginTop: 20, width: "100%" },
-            onClick: onClose,
-            children: locale.done
-          }
-        )
+        ] }) })
       ] })
     ] }),
-    step !== "confirmation" && /* @__PURE__ */ jsxs("div", { className: `resira-widget-footer${currentIndex > 0 ? "" : " resira-widget-footer--single"}`, children: [
-      currentIndex > 0 && /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs("div", { className: "resira-widget-footer", children: [
+      /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
           className: "resira-btn resira-btn--secondary",
           onClick: handleBack,
-          disabled: footerBusy,
+          disabled: footerBusy || currentIndex === 0,
+          style: currentIndex === 0 || step === "confirmation" ? { visibility: "hidden" } : void 0,
+          "aria-hidden": currentIndex === 0 || step === "confirmation",
           children: locale.back
         }
       ),
-      (step === "resource" || step === "availability") && /* @__PURE__ */ jsx(
+      step === "confirmation" ? onClose ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "resira-btn resira-btn--primary",
+          onClick: onClose,
+          children: locale.done
+        }
+      ) : /* @__PURE__ */ jsx("span", { style: { visibility: "hidden" }, className: "resira-btn resira-btn--primary", children: locale.continue }) : step === "checkout" ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "resira-btn resira-btn--primary",
+          onClick: () => {
+            void handleCheckoutSubmit();
+          },
+          disabled: footerBusy || checkoutSessionLoading || !!checkoutSessionError,
+          children: creatingPayment ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "resira-spinner", style: { width: 16, height: 16 } }),
+            locale.processingPayment
+          ] }) : checkoutSession ? `${locale.payNow} \u2014 ${formatPrice5(checkoutSession.priceCents, checkoutSession.currency)}` : locale.continue
+        }
+      ) : step === "resource" || step === "availability" ? /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
@@ -3443,8 +3665,7 @@ function ResiraBookingWidget() {
           disabled: !canContinue || footerBusy,
           children: locale.continue
         }
-      ),
-      step === "details" && /* @__PURE__ */ jsx(
+      ) : step === "details" ? /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
@@ -3456,8 +3677,7 @@ function ResiraBookingWidget() {
             locale.loading
           ] }) : domain === "restaurant" && !hasPayment ? locale.reserveTable : locale.continue
         }
-      ),
-      step === "terms" && /* @__PURE__ */ jsx(
+      ) : step === "terms" ? /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
@@ -3474,8 +3694,7 @@ function ResiraBookingWidget() {
             locale.loading
           ] }) : hasPayment ? locale.continue : locale.bookNow
         }
-      ),
-      step === "payment" && !paymentIntent && /* @__PURE__ */ jsx(
+      ) : step === "payment" && !paymentIntent ? /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
@@ -3489,8 +3708,7 @@ function ResiraBookingWidget() {
             locale.processingPayment
           ] }) : computedPrice ? `${locale.payNow} \u2014 ${formatPrice5(computedPrice.amountNow, currency)}` : locale.payNow
         }
-      ),
-      step === "payment" && paymentIntent?.amountNow != null && paymentIntent.amountNow > 0 && /* @__PURE__ */ jsx(
+      ) : step === "payment" && paymentIntent?.amountNow != null && paymentIntent.amountNow > 0 ? /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
@@ -3502,6 +3720,9 @@ function ResiraBookingWidget() {
             locale.processingPayment
           ] }) : `${locale.payNow} \u2014 ${formatPrice5(paymentIntent.amountNow, paymentIntent.currency)}`
         }
+      ) : (
+        /* Fallback placeholder to hold space (e.g. zero-amount payment auto-advancing) */
+        /* @__PURE__ */ jsx("span", { style: { visibility: "hidden" }, className: "resira-btn resira-btn--primary", children: locale.continue })
       )
     ] })
   ] });
@@ -3511,6 +3732,7 @@ function BookingModal({
   domain,
   resourceId,
   config,
+  checkoutSessionToken,
   trigger,
   buttonLabel = "Book Now",
   buttonClassName,
@@ -3634,6 +3856,7 @@ function BookingModal({
                   domain,
                   resourceId,
                   config,
+                  checkoutSessionToken,
                   onClose: handleClose,
                   children: /* @__PURE__ */ jsx(ResiraBookingWidget, {})
                 }
@@ -3984,6 +4207,6 @@ function DishShowcase({
   ] });
 }
 
-export { AlertCircleIcon, BookingCalendar, BookingModal, CalendarIcon, CheckCircleIcon, CheckIcon, ChevronLeftIcon, ChevronRightIcon, ClockIcon, ConfirmationView, CreditCardIcon, CubeIcon, DEFAULT_LOCALE, DEFAULT_THEME, DishShowcase, GuestForm, LockIcon, MailIcon, MinusIcon, NoteIcon, PaymentForm, PhoneIcon, PlusIcon, ProductSelector, ResiraBookingWidget, ResiraProvider, ResourcePicker, ShieldIcon, SummaryPreview, TagIcon, TimeSlotPicker, UserIcon, UsersIcon, ViewfinderIcon, WaiverConsent, XIcon, resolveTheme, themeToCSS, useAvailability, useDish, useDishes, usePaymentIntent, useProducts, useReservation, useResira, useResources, validateGuestForm };
+export { AlertCircleIcon, BookingCalendar, BookingModal, CalendarIcon, CheckCircleIcon, CheckIcon, ChevronLeftIcon, ChevronRightIcon, ClockIcon, ConfirmationView, CreditCardIcon, CubeIcon, DEFAULT_LOCALE, DEFAULT_THEME, DishShowcase, GuestForm, LockIcon, MailIcon, MinusIcon, NoteIcon, PaymentForm, PhoneIcon, PlusIcon, ProductSelector, ResiraBookingWidget, ResiraProvider, ResourcePicker, ShieldIcon, SummaryPreview, TagIcon, TimeSlotPicker, UserIcon, UsersIcon, ViewfinderIcon, WaiverConsent, XIcon, resolveTheme, themeToCSS, useAvailability, useCheckoutSession, useDish, useDishes, usePaymentIntent, useProducts, useReservation, useResira, useResources, validateGuestForm };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map