@code-collective/booking-widget 1.0.7 → 1.0.8

package/src/lib/cart-manager.ts

@@ -3,6 +3,16 @@ import type { BookingApi } from './api';
 
 const STORAGE_KEY = 'morii-checkout-cart';
 
+// sessionStorage, not localStorage: the cart token is a full pay/confirm capability, and the widget ships as
+// a shadow:none custom element, so it runs in the *merchant's* top-level origin - its web storage is shared
+// with every other script on that page. sessionStorage narrows the exposure to the one tab and clears it when
+// that tab closes (it still survives reloads and same-tab navigation, so the cart-survives-reload behaviour is
+// unchanged), rather than persisting the token across all tabs indefinitely. The token is additionally bound
+// to this origin server-side (see CheckoutCart.OriginAtIssue), so it cannot be lifted and replayed from
+// another site; what remains - a hostile script on the merchant's own page - is inherent to shadow:none
+// embedding and can only be fully closed by isolating the widget in its own iframe origin.
+const storage: Storage | null = typeof sessionStorage !== 'undefined' ? sessionStorage : null;
+
 interface StoredCart {
   cartToken: string;
   absoluteExpiresAt: string;
@@ -40,10 +50,13 @@ export class CartManager {
   // ensureCart to mint a fresh one after the server refuses an operation on the cart it was given.
   reset(): void {
     this.cart = null;
+    // Also cleared on the api - loadFromStorage sets it there, so leaving it behind would keep sending the
+    // dropped cart's token on every subsequent request.
+    this.api.cartToken = '';
     try {
-      localStorage.removeItem(STORAGE_KEY);
+      storage?.removeItem(STORAGE_KEY);
     } catch {
-      // localStorage unavailable (e.g. iframe sandbox)
+      // storage unavailable (e.g. iframe sandbox, or a browser blocking site data)
     }
   }
 
@@ -59,20 +72,20 @@ export class CartManager {
       absoluteExpiresAt: this.cart.absoluteExpiresAt ?? '',
     };
     try {
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(stored));
+      storage?.setItem(STORAGE_KEY, JSON.stringify(stored));
     } catch {
-      // localStorage unavailable (e.g. iframe sandbox)
+      // storage unavailable (e.g. iframe sandbox, or a browser blocking site data)
     }
   }
 
   private loadFromStorage(): void {
     try {
-      const raw = localStorage.getItem(STORAGE_KEY);
+      const raw = storage?.getItem(STORAGE_KEY);
       if (!raw) return;
 
       const stored: StoredCart = JSON.parse(raw);
       if (new Date(stored.absoluteExpiresAt).getTime() <= Date.now()) {
-        localStorage.removeItem(STORAGE_KEY);
+        storage?.removeItem(STORAGE_KEY);
         return;
       }
 

package/src/lib/client-types.ts

@@ -29,6 +29,12 @@ export interface PaymentStatus {
   outcome: PaymentOutcome;
   resultCode?: string;
   resultDescription?: string;
+  // Only meaningful for outcome 'failed'. A card that was actually charged - which is every 'failed' this
+  // gateway produces once confirmation itself is what failed, not the payment - must never be offered a
+  // "try again" that re-opens the card form, since the shopper would be charged a second time for a booking
+  // that already has their money against it. Defaults true (the ordinary declined/expired/errored case,
+  // where nothing was charged and retrying is exactly correct) so existing callers need not set it.
+  retryPayment?: boolean;
 }
 
 export interface CartItem {

package/src/lib/elements/bw-cart.svelte

@@ -3,6 +3,7 @@
 <script lang="ts">
   import CartOverview from '../CartOverview.svelte';
   import type { CartOverviewDisplay } from '../config';
+  import { onWidgetMessage } from '../messages';
   import { getSharedServices } from './shared';
 
   let {
@@ -19,21 +20,11 @@
     host.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
   }
 
-  function handleMessage(e: MessageEvent) {
-    let d: Record<string, unknown>;
-    try { d = typeof e.data === 'string' ? JSON.parse(e.data) : e.data; }
-    catch { return; }
-    if (!d?.type) return;
-
+  $effect(() => onWidgetMessage((d) => {
     if (d.type === 'modal:open') {
       dispatch('bw:checkout', {});
     }
-  }
-
-  $effect(() => {
-    window.addEventListener('message', handleMessage);
-    return () => window.removeEventListener('message', handleMessage);
-  });
+  }));
 </script>
 
 {#if ready}

package/src/lib/elements/bw-checkout.svelte

@@ -3,6 +3,7 @@
 <script lang="ts">
   import Checkout from '../Checkout.svelte';
   import { resolveWizardPages, resolveEditPages } from '../config';
+  import { onWidgetMessage } from '../messages';
   import { getSharedServices } from './shared';
 
   let {
@@ -17,7 +18,7 @@
   let isModal = $derived(isModalAttr !== undefined);
   let showModal = $state(false);
 
-  const { api, ready: readyPromise } = getSharedServices();
+  const { api, cartManager, ready: readyPromise } = getSharedServices();
 
   let ready = $state(false);
   readyPromise.then(() => { ready = true; });
@@ -34,30 +35,22 @@
   export function open() { showModal = true; }
   export function close() { showModal = false; dispatch('bw:close', {}); }
 
-  function handleMessage(e: MessageEvent) {
-    let d: Record<string, unknown>;
-    try { d = typeof e.data === 'string' ? JSON.parse(e.data) : e.data; }
-    catch { return; }
-    if (!d?.type) return;
-
+  $effect(() => onWidgetMessage((d) => {
     if (d.type === 'modal:close') {
       if (isModal) showModal = false;
       dispatch('bw:close', {});
     }
     if (d.type === 'order:complete') {
-      if (isModal) showModal = false;
+      // Deliberately does not close the modal - order:complete only reports that the order is confirmed
+      // (for host analytics/cart-clearing), not that the shopper has finished looking at the result screen.
+      // The modal stays open until they dismiss it themselves, which sends modal:close separately.
       dispatch('bw:order-confirmed', {
         cartToken: d.cartToken ?? '',
         value: d.value ?? 0,
         currency: d.currency ?? 'ZAR',
       });
     }
-  }
-
-  $effect(() => {
-    window.addEventListener('message', handleMessage);
-    return () => window.removeEventListener('message', handleMessage);
-  });
+  }));
 
   // Listen for a custom 'bw:open' event so register.ts can trigger it
   $effect(() => {
@@ -74,12 +67,12 @@
     <div class="bw-modal-overlay" onclick={() => close()}>
       <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
       <div class="bw-modal-inner" onclick={(e) => e.stopPropagation()}>
-        <Checkout {api} {wizardPages} {editPages} {autoSelectSingleTimeSlot} />
+        <Checkout {api} {cartManager} {wizardPages} {editPages} {autoSelectSingleTimeSlot} />
       </div>
     </div>
   {/if}
 {:else if ready}
-  <Checkout {api} {wizardPages} {editPages} {autoSelectSingleTimeSlot} />
+  <Checkout {api} {cartManager} {wizardPages} {editPages} {autoSelectSingleTimeSlot} />
 {:else}
   <div class="loading-center"><div class="spinner"></div></div>
 {/if}

package/src/lib/elements/bw-configurator.svelte

@@ -3,7 +3,7 @@
 <script lang="ts">
   import TicketConfigurator from '../TicketConfigurator.svelte';
   import { resolveWizardPages } from '../config';
-  import { postMessage } from '../messages';
+  import { onWidgetMessage, postMessage } from '../messages';
   import { getSharedServices } from './shared';
 
   let {
@@ -26,12 +26,7 @@
   }
 
   // Forward postMessage events as CustomEvents
-  function handleMessage(e: MessageEvent) {
-    let d: Record<string, unknown>;
-    try { d = typeof e.data === 'string' ? JSON.parse(e.data) : e.data; }
-    catch { return; }
-    if (!d?.type) return;
-
+  $effect(() => onWidgetMessage((d) => {
     if (d.type === 'cart:change') {
       dispatch('bw:cart-change', {
         itemCount: d.itemCount ?? 0,
@@ -39,12 +34,7 @@
         totalFormatted: d.totalFormatted ?? '',
       });
     }
-  }
-
-  $effect(() => {
-    window.addEventListener('message', handleMessage);
-    return () => window.removeEventListener('message', handleMessage);
-  });
+  }));
 
   const onCancel = cancelable !== undefined
     ? () => { postMessage({ type: 'modal:close' }); dispatch('bw:cancel', {}); }

package/src/lib/elements/register.ts

@@ -4,6 +4,7 @@ import { ApiClient } from '../api';
 import { SessionManager } from '../session-manager';
 import { CartManager } from '../cart-manager';
 import { defaultApiBaseUrl } from './env';
+import { onWidgetMessage } from '../messages';
 
 // Bootstrap shared services BEFORE element imports trigger connectedCallback.
 // Elements read from window.__bwServices instead of importing shared.ts,
@@ -26,11 +27,8 @@ import './bw-checkout.svelte';
 // cart TicketConfigurator/CheckoutModal already fetch for their own posting - see those files' own comments -
 // so a consumer can build a custom cart summary (item count, remaining time, item details) without calling
 // the checkout API directly.
-window.addEventListener('message', (e) => {
-  let d: Record<string, unknown>;
-  try { d = typeof e.data === 'string' ? JSON.parse(e.data) : e.data; }
-  catch { return; }
-  if (d?.type === 'cart:updated' && 'cart' in d) {
+onWidgetMessage((d) => {
+  if (d.type === 'cart:updated' && 'cart' in d) {
     window.dispatchEvent(new CustomEvent('bw:cart-updated', { detail: { cart: d.cart } }));
   }
 });

package/src/lib/generated-types.ts

@@ -373,6 +373,7 @@ export interface components {
         CheckoutCartPaymentInitiationDto: {
             checkoutId?: string | null;
             redirectUrl?: string | null;
+            entityId?: string | null;
         };
         CheckoutCartResult: {
             cartToken?: string | null;

package/src/lib/index.ts

@@ -6,6 +6,7 @@ import type { CheckoutCartDetailDto } from './client-types';
 import { ApiClient, ApiError } from './api';
 import { SessionManager } from './session-manager';
 import { CartManager } from './cart-manager';
+import { onWidgetMessage } from './messages';
 import TicketConfiguratorComponent from './TicketConfigurator.svelte';
 import CheckoutComponent from './Checkout.svelte';
 import CartOverviewComponent from './CartOverview.svelte';
@@ -96,12 +97,7 @@ export async function mountConfigurator(target: HTMLElement, config: Configurato
   });
 
   // Listen for postMessage events and forward to callbacks
-  function messageHandler(e: MessageEvent) {
-    let d: Record<string, unknown>;
-    try { d = typeof e.data === 'string' ? JSON.parse(e.data) : e.data; }
-    catch { return; }
-    if (!d?.type) return;
-
+  const stopListening = onWidgetMessage((d) => {
     if (d.type === 'cart:change' && config.onCartChange) {
       config.onCartChange({
         itemCount: (d.itemCount as number) ?? 0,
@@ -112,12 +108,11 @@ export async function mountConfigurator(target: HTMLElement, config: Configurato
     if (d.type === 'cart:updated' && 'cart' in d) {
       config.onCartUpdated?.(d.cart as CheckoutCartDetailDto | null);
     }
-  }
-  window.addEventListener('message', messageHandler);
+  });
 
   return {
     destroy() {
-      window.removeEventListener('message', messageHandler);
+      stopListening();
       sessionManager.stop();
       unmount(component);
     },
@@ -125,7 +120,7 @@ export async function mountConfigurator(target: HTMLElement, config: Configurato
 }
 
 export async function mountCheckout(target: HTMLElement, config: CheckoutConfig): Promise<MountedWidget> {
-  const { api, sessionManager } = bootstrap(config);
+  const { api, sessionManager, cartManager } = bootstrap(config);
 
   await sessionManager.ensureSession(config.checkoutKey ?? '');
 
@@ -133,18 +128,14 @@ export async function mountCheckout(target: HTMLElement, config: CheckoutConfig)
     target,
     props: {
       api,
+      cartManager,
       wizardPages: config.wizardPages,
       editPages: config.editPages,
       autoSelectSingleTimeSlot: config.autoSelectSingleTimeSlot ?? false,
     },
   });
 
-  function messageHandler(e: MessageEvent) {
-    let d: Record<string, unknown>;
-    try { d = typeof e.data === 'string' ? JSON.parse(e.data) : e.data; }
-    catch { return; }
-    if (!d?.type) return;
-
+  const stopListening = onWidgetMessage((d) => {
     if (d.type === 'modal:close' && config.onClose) config.onClose();
     if (d.type === 'order:complete' && config.onOrderConfirmed) {
       config.onOrderConfirmed({
@@ -156,12 +147,11 @@ export async function mountCheckout(target: HTMLElement, config: CheckoutConfig)
     if (d.type === 'cart:updated' && 'cart' in d) {
       config.onCartUpdated?.(d.cart as CheckoutCartDetailDto | null);
     }
-  }
-  window.addEventListener('message', messageHandler);
+  });
 
   return {
     destroy() {
-      window.removeEventListener('message', messageHandler);
+      stopListening();
       sessionManager.stop();
       unmount(component);
     },
@@ -182,22 +172,16 @@ export async function mountCartOverview(target: HTMLElement, config: CartOvervie
     },
   });
 
-  function messageHandler(e: MessageEvent) {
-    let d: Record<string, unknown>;
-    try { d = typeof e.data === 'string' ? JSON.parse(e.data) : e.data; }
-    catch { return; }
-    if (!d?.type) return;
-
+  const stopListening = onWidgetMessage((d) => {
     if (d.type === 'modal:open' && config.onCheckout) config.onCheckout();
     if (d.type === 'cart:updated' && 'cart' in d) {
       config.onCartUpdated?.(d.cart as CheckoutCartDetailDto | null);
     }
-  }
-  window.addEventListener('message', messageHandler);
+  });
 
   return {
     destroy() {
-      window.removeEventListener('message', messageHandler);
+      stopListening();
       sessionManager.stop();
       unmount(component);
     },

package/src/lib/messages.ts

@@ -1,3 +1,63 @@
-export function postMessage(data: Record<string, unknown>): void {
-  window.parent?.postMessage(JSON.stringify(data), '*');
-}
+// The widget's own components talk to each other over postMessage - a cart added in bw-configurator has to
+// reach the bar in bw-cart and the modal in bw-checkout, which are separate custom elements with no shared
+// Svelte tree. That makes every one of these messages same-window and same-origin, and the guards below exist
+// to keep it that way.
+
+/** Messages this widget sends itself. Anything else on the wire is not ours. */
+const WIDGET_MESSAGE_TYPES = new Set([
+  'cart:change',
+  'cart:updated',
+  'modal:open',
+  'modal:close',
+  'order:complete',
+]);
+
+/**
+ * Sends a widget message.
+ *
+ * Targets this window's own origin rather than '*'. These payloads carry `cart`, and CheckoutCartDetailDto
+ * includes `cartToken` - a bearer credential that authorises reading, modifying and paying for the cart. With
+ * '*' that went to whatever origin happened to be framing the widget, which in the standalone iframe build is
+ * not necessarily anyone we trust.
+ */
+export function postMessage(data: Record<string, unknown>): void {
+  window.parent?.postMessage(JSON.stringify(data), window.location.origin);
+}
+
+/**
+ * Subscribes to widget messages, ignoring anything that did not come from this widget.
+ *
+ * The elements mount directly into the merchant's own document (shadow: 'none'), so these listeners sit on
+ * the top-level window of a third-party page. Without this check, any iframe already on that page - an ad, a
+ * chat widget, a tag manager - could reach them with window.parent.postMessage and drive the widget: spoof
+ * the total on the payment consent screen, fire a forged order confirmation into the merchant's analytics, or
+ * close the modal mid-confirm on a card that has already been charged.
+ *
+ * Checking `source` is what does the real work: a message from another frame carries that frame's own window,
+ * never ours, and it cannot be spoofed. The origin check is belt-and-braces for the same-window case.
+ */
+export function onWidgetMessage(handler: (data: Record<string, unknown>) => void): () => void {
+  function listener(e: MessageEvent) {
+    if (e.source !== window || e.origin !== window.location.origin) {
+      return;
+    }
+
+    let data: Record<string, unknown>;
+    try {
+      data = typeof e.data === 'string' ? JSON.parse(e.data) : e.data;
+    } catch {
+      return;
+    }
+
+    // Anything without one of our own type values is someone else's traffic sharing this window - a library
+    // or the host page talking to itself - not something to hand to a widget handler.
+    if (typeof data?.type !== 'string' || !WIDGET_MESSAGE_TYPES.has(data.type)) {
+      return;
+    }
+
+    handler(data);
+  }
+
+  window.addEventListener('message', listener);
+  return () => window.removeEventListener('message', listener);
+}