@code-collective/booking-widget 1.0.6 → 1.0.8

package/src/lib/PaymentPage.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
+  import { loadPeachSdk } from './peach-sdk';
 
   interface Props {
     checkoutId: string;
-    totalFormatted: string;
-    onBack: () => void;
-    onClose: () => void;
+    entityId: string;
     onPaymentComplete: (result: { status: string }) => void;
   }
-  let { checkoutId, totalFormatted, onBack, onClose, onPaymentComplete }: Props = $props();
+  let { checkoutId, entityId, onPaymentComplete }: Props = $props();
 
   let failed = $state(false);
   let errorMessage = $state('');
@@ -16,33 +15,44 @@
   let peachInstance: any = null;
 
   onMount(() => {
-    try {
-      const Checkout = (window as any).Checkout;
-      if (!Checkout) {
-        failed = true;
-        errorMessage = 'Payment SDK not loaded';
-        return;
-      }
+    (async () => {
+      try {
+        await loadPeachSdk();
 
-      peachInstance = Checkout.initiate({
-        checkoutId,
-        customisations: {
-          card: { submitButtonText: 'Pay Now' },
-          theme: { brand: { primary: '#E30613' } },
-        },
-        eventHandlers: {
-          onCompleted: () => { cleanup(); onPaymentComplete({ status: 'completed' }); },
-          onCancelled: () => { cleanup(); onPaymentComplete({ status: 'cancelled' }); },
-          onExpired: () => { cleanup(); onPaymentComplete({ status: 'expired' }); },
-          onError: () => { cleanup(); onPaymentComplete({ status: 'error' }); },
-        },
-      });
+        const Checkout = (window as any).Checkout;
+        if (!Checkout) {
+          failed = true;
+          errorMessage = 'Payment SDK not loaded';
+          return;
+        }
 
-      peachInstance.render('#peach-container');
-    } catch (e) {
-      failed = true;
-      errorMessage = String(e);
-    }
+        peachInstance = Checkout.initiate({
+          checkoutId,
+          // Peach's own "key" field, not our checkoutKey/entityId naming - without it Checkout.initiate()
+          // throws (Cannot read properties of undefined (reading 'trim')) before ever rendering anything,
+          // since the embedded widget authenticates to Peach directly with this rather than through us.
+          key: entityId,
+          customisations: {
+            card: { submitButtonText: 'Pay Now' },
+            theme: { brand: { primary: '#E30613' } },
+            // Peach's own Cancel (method-selection screen) and Back (card-entry screen) are the only
+            // back/exit controls in this dialog - we don't render one of our own alongside them, so there's
+            // exactly one way out per screen instead of ours and Peach's competing for the same job.
+          },
+          eventHandlers: {
+            onCompleted: () => { cleanup(); onPaymentComplete({ status: 'completed' }); },
+            onCancelled: () => { cleanup(); onPaymentComplete({ status: 'cancelled' }); },
+            onExpired: () => { cleanup(); onPaymentComplete({ status: 'expired' }); },
+            onError: () => { cleanup(); onPaymentComplete({ status: 'error' }); },
+          },
+        });
+
+        peachInstance.render('#peach-container');
+      } catch (e) {
+        failed = true;
+        errorMessage = String(e);
+      }
+    })();
   });
 
   function cleanup() {
@@ -55,77 +65,70 @@
   onDestroy(cleanup);
 </script>
 
-<div class="payment-page">
-  <div class="page-header">
-    <button class="icon-btn" onclick={onBack} aria-label="Back">&larr;</button>
-    <h2>Payment</h2>
-    <span class="spacer"></span>
-    <button class="icon-btn" onclick={onClose} aria-label="Close">&times;</button>
-  </div>
-
-  <div class="body">
-    <div class="amount-bar">
-      <span>Amount to pay</span>
-      <span class="amount">{totalFormatted}</span>
+<!-- Peach's own card form renders inside a cross-origin iframe with its own Cancel/Back controls we have no
+     way to hide or reach (no SDK option, no CSS/JS access across origins) - see Checkout.initiate()'s
+     customisations doc comment above. Presenting it as its own nested dialog over the checkout modal, rather
+     than as just another view swapped into that modal's own body, means Peach's own Cancel/Back read as
+     belonging to Peach's own layer instead of visually competing with a second, separate Back of ours - so
+     this dialog has no back/exit control of its own at all; onCancelled below routes back to contact. -->
+<div class="payment-overlay">
+  <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+  <div class="payment-dialog" onclick={(e) => e.stopPropagation()}>
+    <div class="page-header">
+      <h2>Payment</h2>
     </div>
 
-    {#if failed}
-      <div class="error-state">
-        <div class="error-icon">!</div>
-        <p class="error-title">Unable to load payment form</p>
-        <p class="error-msg">{errorMessage || 'The checkout session may have expired.'}</p>
-      </div>
-    {:else}
-      <div class="brands">
-        <span class="brand">VISA</span>
-        <span class="brand">MC</span>
-        <span class="brand">AMEX</span>
-      </div>
-      <div id="peach-container"></div>
-    {/if}
+    <div class="body">
+      {#if failed}
+        <div class="error-state">
+          <div class="error-icon">!</div>
+          <p class="error-title">Unable to load payment form</p>
+          <p class="error-msg">{errorMessage || 'The checkout session may have expired.'}</p>
+        </div>
+      {:else}
+        <div id="peach-container"></div>
+      {/if}
+    </div>
   </div>
 </div>
 
 <style>
-  .payment-page {
+  .payment-overlay {
+    position: fixed;
+    inset: 0;
+    /* Above bw-checkout's own .bw-modal-overlay (z-index 10000) so this reads as a second dialog opening
+       on top of the checkout modal, not content living inside it. */
+    z-index: 10001;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 16px;
+  }
+  .payment-dialog {
     display: flex;
     flex-direction: column;
-    height: 100%;
+    width: 100%;
+    max-width: 480px;
+    height: min(700px, 90vh);
+    background: var(--bw-color-bg);
+    border-radius: var(--bw-radius-lg);
+    box-shadow: var(--bw-shadow-3);
+    overflow: hidden;
   }
   .body {
     flex: 1;
+    /* A definite height (not just flex:1 alone) so #peach-container's own height:100% below has something
+       real to resolve against, and so this scrolls as a single region if content overflows - Peach's own
+       root is `height: inherit`, so without that it collapses to its 360px fallback regardless of how tall
+       the card form actually gets (e.g. once billing address fields are showing), and its submit button
+       ends up overlapping the fields above it. */
+    min-height: 0;
     overflow-y: auto;
     padding: 16px;
   }
-  .amount-bar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 16px;
-    background: var(--bw-color-surface);
-    border-radius: var(--bw-radius-lg);
-    margin-bottom: 20px;
-    font-weight: 600;
-    font-size: 15px;
-  }
-  .amount {
-    color: var(--bw-color-primary);
-    font-size: 18px;
-    font-weight: 700;
-  }
-  .brands {
-    display: flex;
-    gap: 8px;
-    margin-bottom: 16px;
-  }
-  .brand {
-    padding: 4px 10px;
-    border: 1px solid var(--bw-color-border);
-    border-radius: var(--bw-radius-sm);
-    font-size: 11px;
-    font-weight: 700;
-    color: var(--bw-color-text-secondary);
-    letter-spacing: 0.02em;
+  #peach-container {
+    height: 100%;
   }
   .error-state {
     text-align: center;

package/src/lib/ResultView.svelte

@@ -6,19 +6,43 @@
     verifying: boolean;
     onDone: () => void;
     onRetry: () => void;
+    // Re-checks confirmation on demand without touching payment - only meaningful (and only rendered) for
+    // a 'pending' outcome. Optional so callers that predate this state need not pass it.
+    onCheckAgain?: () => void;
   }
-  let { status, verifying, onDone, onRetry }: Props = $props();
+  let { status, verifying, onDone, onRetry, onCheckAgain }: Props = $props();
 
   let success = $derived(status?.outcome === 'successful');
+  let pending = $derived(status?.outcome === 'pending');
+  // A 'failed' outcome covers two genuinely different situations - see CheckoutModal's own remarks on
+  // confirmOutcome. Only one of them is safe to offer "Try Again" for: the payment itself never went
+  // through (declined, expired, SDK error), so re-opening the card form charges the shopper once, not
+  // twice. The other - payment succeeded but this gateway could not confirm every item - already has the
+  // shopper's money against a real charge; offering to pay again there would risk a second charge for
+  // nothing this screen can fix, so status.retryPayment gates the button rather than the outcome alone.
+  let retryable = $derived(status?.outcome === 'failed' && status.retryPayment !== false);
 </script>
 
 <div class="result">
   {#if verifying}
     <div class="spinner"></div>
     <p class="hint">Verifying payment...</p>
+  {:else if pending}
+    <div class="icon pending">&hellip;</div>
+    <h2>Payment Received</h2>
+    <p class="desc">
+      {status?.resultDescription ??
+        "We're still confirming your booking - this can take a minute. Please don't try to pay again; we'll email your confirmation as soon as it's ready."}
+    </p>
+    <div class="actions">
+      {#if onCheckAgain}
+        <button class="btn btn-primary" onclick={onCheckAgain}>Check Again</button>
+      {/if}
+      <button class="btn btn-outline" onclick={onDone}>Close</button>
+    </div>
   {:else}
     <div class="icon" class:success class:failure={!success}>
-      {success ? '\u2713' : '!'}
+      {success ? '✓' : '!'}
     </div>
     <h2>{success ? 'Payment Successful' : 'Payment Failed'}</h2>
     <p class="desc">
@@ -28,8 +52,10 @@
     </p>
     {#if success}
       <button class="btn btn-primary" onclick={onDone}>Done</button>
-    {:else}
+    {:else if retryable}
       <button class="btn btn-outline" onclick={onRetry}>Try Again</button>
+    {:else}
+      <button class="btn btn-outline" onclick={onDone}>Close</button>
     {/if}
   {/if}
 </div>
@@ -69,6 +95,13 @@
     color: var(--bw-color-error);
     background: var(--bw-color-primary-light);
   }
+  /* Deliberately its own amber, not success green or failure red - payment succeeded (so red reads as an
+     alarming false alarm) but nothing is confirmed yet (so green would be premature). */
+  .icon.pending {
+    border: 2px solid #B8860B;
+    color: #B8860B;
+    background: rgba(184, 134, 11, 0.08);
+  }
   h2 {
     font-size: 20px;
     font-weight: 700;
@@ -81,4 +114,11 @@
     max-width: 280px;
     line-height: 1.5;
   }
+  .actions {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: 100%;
+    max-width: 220px;
+  }
 </style>

package/src/lib/TicketConfigurator.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { BookingApi } from './api';
+  import { ApiError, isPriceMismatch } from './api';
   import type { WizardPages } from './config';
   import { DEFAULT_WIZARD_PAGES } from './config';
   import type { CartItem, CheckoutProductDto } from './client-types';
@@ -22,6 +23,7 @@
   let product = $state<CheckoutProductDto | null>(null);
   let isLoading = $state(true);
   let isAddingToCart = $state(false);
+  let addToCartError = $state<string | null>(null);
 
   async function load() {
     product = await api.getProduct(productId);
@@ -30,41 +32,87 @@
 
   load();
 
+  async function addItemToCart(item: CartItem): Promise<void> {
+    await cartManager.ensureCart();
+
+    const unitItems = expandUnitItems(item.units);
+    const added = await api.addCartItem({
+      productId: item.productId,
+      optionId: item.optionId,
+      unitItems,
+      availabilityId: item.availabilityId,
+      localDate: item.localDate,
+      pickupPointId: item.pickupPointId,
+      // Currency and precision are the supplier's to state, not ours - the API resolves both server-side and
+      // ignores anything sent here. Amount stays, but only as a claim about the price the customer was shown:
+      // the server accepts it solely when it matches what the supplier is asking or a price the server itself
+      // published, and returns PRICE_MISMATCH otherwise.
+      amount: item.totalPrice,
+    });
+
+    const total = formatCurrency(item.totalPrice, item.currency, item.currencyPrecision, 2);
+    postMessage({
+      type: 'cart:change',
+      itemCount: unitItems.length,
+      cartItemId: added.id,
+      totalFormatted: total,
+      openCheckout: true,
+    });
+    // Separate from cart:change above - that one is per-item-added detail forwarded to consumers as the
+    // public bw:cart-change event. This one carries the fresh cart itself: CartBar/CartOverviewButton/Checkout
+    // use it to update their own state without each independently re-fetching, and it's forwarded to
+    // consumers as the public bw:cart-updated event/onCartUpdated callback - see this event's own doc comment
+    // in CheckoutModal (the other place it's posted from, after an edit/remove).
+    const cart = await api.getCart().catch(() => null);
+    postMessage({ type: 'cart:updated', cart });
+  }
+
   async function onAddToCart(item: CartItem) {
     isAddingToCart = true;
+    addToCartError = null;
 
     try {
-      await cartManager.ensureCart();
-
-      const unitItems = expandUnitItems(item.units);
-      const added = await api.addCartItem({
-        productId: item.productId,
-        optionId: item.optionId,
-        unitItems,
-        availabilityId: item.availabilityId,
-        localDate: item.localDate,
-        pickupPointId: item.pickupPointId,
-        amount: item.totalPrice,
-        currencyCode: item.currency,
-        currencyPrecision: item.currencyPrecision,
-      });
+      await addItemToCart(item);
+    } catch (e) {
+      // The supplier moved the price while the customer was configuring, and the amount they agreed to is no
+      // longer one the server accepts. Retrying is useless - the wizard still holds the old prices, so it
+      // would resubmit exactly the same amount and fail identically. The only way out is to re-fetch and let
+      // the customer see the new price, which is what the message asks them to do.
+      if (isPriceMismatch(e)) {
+        await reloadAfterPriceChange();
+        return;
+      }
 
-      const total = formatCurrency(item.totalPrice, item.currency, item.currencyPrecision, 2);
-      postMessage({
-        type: 'cart:change',
-        itemCount: unitItems.length,
-        cartItemId: added.id,
-        totalFormatted: total,
-        openCheckout: true,
-      });
-      // Separate from cart:change above - that one is per-item-added detail forwarded to consumers as the
-      // public bw:cart-change event. This one just tells CartBar/CartOverviewButton to refetch their own
-      // total, same signal update/remove in CheckoutModal use - see this event's own doc comment there.
-      postMessage({ type: 'cart:updated' });
+      // CartManager only knows a cart is expired from timestamps it saw at creation - it can't see the
+      // server's idle window sliding forward, so a cart that looks valid locally can still be rejected
+      // server-side. A 401/404 here means exactly that: drop the stale cart and retry once with a fresh one
+      // before giving up, rather than leaving the user stuck with no feedback and no way to proceed.
+      const isStaleCart = e instanceof ApiError && (e.status === 401 || e.status === 404);
+      if (isStaleCart) {
+        cartManager.reset();
+        try {
+          await addItemToCart(item);
+        } catch {
+          addToCartError = 'Something went wrong adding this to your cart. Please try again.';
+        }
+      } else {
+        addToCartError = 'Something went wrong adding this to your cart. Please try again.';
+      }
     } finally {
       isAddingToCart = false;
     }
   }
+
+  async function reloadAfterPriceChange() {
+    addToCartError = "This ticket's price has changed since you started. Please check the updated price and try again.";
+    try {
+      await load();
+    } catch {
+      // The reload is what makes the message actionable; if even that fails the customer needs to start over
+      // rather than be left looking at prices we already know are wrong.
+      addToCartError = "This ticket's price has changed and we could not load the new one. Please reload the page.";
+    }
+  }
 </script>
 
 <div class="bw-widget">
@@ -73,6 +121,9 @@
       <div class="spinner"></div>
     </div>
   {:else if product}
+    {#if addToCartError}
+      <p class="add-to-cart-error">{addToCartError}</p>
+    {/if}
     <WizardPage
       {product}
       {api}
@@ -90,4 +141,12 @@
   .bw-widget {
     display: contents;
   }
+
+  .add-to-cart-error {
+    margin: 0;
+    padding: 12px 16px;
+    background: #fdecea;
+    color: #b3261e;
+    font-size: 14px;
+  }
 </style>

package/src/lib/api.ts

@@ -15,6 +15,32 @@ import type {
 } from './client-types';
 import { dateKey } from './utils';
 
+// Lets a caller distinguish "the server said no, and specifically why" (e.g. 402 - not paid yet, retryable
+// while Peach's webhook is still in flight) from any other failure, without parsing the message string.
+export class ApiError extends Error {
+  constructor(
+    public readonly status: number,
+    public readonly body?: unknown,
+  ) {
+    super(`API error ${status}`);
+  }
+
+  // The server's own machine-readable reason, where it sends one. Several distinct failures share a status -
+  // a price that moved and a malformed request are both 400 - and only this tells them apart.
+  get code(): string | undefined {
+    return typeof this.body === 'object' && this.body !== null && 'error' in this.body
+      ? String((this.body as { error: unknown }).error)
+      : undefined;
+  }
+}
+
+// The price of an item changed between the widget displaying it and the item being added, and the amount the
+// customer agreed to is no longer one the server will accept. Recoverable, but only by showing the customer
+// the new price - see PRICE_MISMATCH handling in TicketConfigurator/EditBookingView.
+export function isPriceMismatch(e: unknown): e is ApiError {
+  return e instanceof ApiError && e.status === 400 && e.code === 'PRICE_MISMATCH';
+}
+
 export interface BookingApi {
   sessionToken: string;
   cartToken: string;
@@ -70,7 +96,7 @@ export class ApiClient implements BookingApi {
 
   private unwrap<T>(result: { data?: T; error?: unknown; response: Response }): T {
     if (result.data === undefined) {
-      throw new Error(`API error ${result.response.status}`);
+      throw new ApiError(result.response.status, result.error);
     }
     return result.data;
   }
@@ -185,7 +211,7 @@ export class ApiClient implements BookingApi {
       params: { path: { itemId } },
     });
     if (result.response.status >= 400) {
-      throw new Error(`API error ${result.response.status}`);
+      throw new ApiError(result.response.status);
     }
   }
 

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;
@@ -34,6 +44,22 @@ export class CartManager {
     return cart;
   }
 
+  // The client only knows a cart's absolute/idle expiry from whenever it was last (re)created here - it
+  // never sees the server's sliding idle window update in between, so a cart the server has since rejected
+  // (e.g. idle timeout) can still look valid locally. Callers use this to drop that stale state and force
+  // 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 {
+      storage?.removeItem(STORAGE_KEY);
+    } catch {
+      // storage unavailable (e.g. iframe sandbox, or a browser blocking site data)
+    }
+  }
+
   private isExpired(): boolean {
     if (!this.cart) return true;
     return new Date(this.cart.absoluteExpiresAt ?? 0).getTime() <= Date.now();
@@ -46,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/config.ts

@@ -1,3 +1,10 @@
+// Defaults for the standalone dev app (App.svelte) when no query params are given at all, or no apiBaseUrl
+// is given - same real QA product booking/demo/product.html's own fallback attributes point at, so `npm run
+// dev` with no params still shows something real instead of talking to an empty relative URL.
+const DEFAULT_QA_API_BASE_URL = 'https://qa.tranzact.co.za/morii-checkout/api';
+const DEFAULT_QA_PRODUCT_ID = 'fec72dc6-0357-411b-88f5-d37083ab88cb';
+const DEFAULT_QA_CHECKOUT_KEY = 'morii_checkout_key_2qGS3onnv2eigOiV6RT1yQ';
+
 export type WidgetMode = 'configurator' | 'checkout' | 'cart-overview';
 
 export type CartOverviewDisplay = 'bar' | 'button';
@@ -81,7 +88,6 @@ export interface AppConfig {
   productId: string;
   checkoutKey: string;
   currency: string;
-  useFakeApi: boolean;
   mode: WidgetMode;
   cartDisplay: CartOverviewDisplay;
   orderId: string;
@@ -96,14 +102,12 @@ export function readConfig(): AppConfig {
   const params = new URLSearchParams(window.location.search);
 
   if (params.has('product') || params.has('mode')) {
-    const apiBaseUrl = params.get('apiBaseUrl') ?? '';
     const productId = params.get('product') ?? '';
     return {
-      apiBaseUrl,
+      apiBaseUrl: params.get('apiBaseUrl') ?? DEFAULT_QA_API_BASE_URL,
       productId,
       checkoutKey: params.get('checkoutKey') ?? deriveCheckoutKey(productId),
       currency: params.get('currency') ?? 'ZAR',
-      useFakeApi: params.get('useFakeApi') === 'true' || !apiBaseUrl,
       mode: parseMode(params.get('mode')),
       cartDisplay: parseCartDisplay(params.get('cartDisplay')),
       orderId: params.get('orderId') ?? '',
@@ -116,11 +120,10 @@ export function readConfig(): AppConfig {
   }
 
   return {
-    apiBaseUrl: '',
-    productId: '',
-    checkoutKey: 'morii',
+    apiBaseUrl: DEFAULT_QA_API_BASE_URL,
+    productId: DEFAULT_QA_PRODUCT_ID,
+    checkoutKey: DEFAULT_QA_CHECKOUT_KEY,
     currency: 'ZAR',
-    useFakeApi: true,
     mode: 'configurator',
     cartDisplay: 'bar',
     orderId: '',

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}