@nuitee/booking-widget 1.0.7 → 1.0.9

package/README.md

@@ -94,15 +94,15 @@ widget.open();
 No bundler: load the script and CSS from the CDN, then create the widget.
 
 ```html
-<link rel="stylesheet" href="https://cdn.thehotelplanet.com/booking-widget/v1.0.7/dist/booking-widget.css">
-<script src="https://cdn.thehotelplanet.com/booking-widget/v1.0.7/dist/booking-widget-standalone.js"></script>
+<link rel="stylesheet" href="https://cdn.thehotelplanet.com/booking-widget/v1.0.9/dist/booking-widget.css">
+<script src="https://cdn.thehotelplanet.com/booking-widget/v1.0.9/dist/booking-widget-standalone.js"></script>
 
 <div id="booking-widget-container"></div>
 
 <script>
   const widget = new BookingWidget({
     containerId: 'booking-widget-container',
-    cssUrl: 'https://cdn.thehotelplanet.com/booking-widget/v1.0.7/dist/booking-widget.css',
+    cssUrl: 'https://cdn.thehotelplanet.com/booking-widget/v1.0.9/dist/booking-widget.css',
     propertyKey: 'your-property-key',
     onOpen: () => console.log('Opened'),
     onClose: () => console.log('Closed'),

package/dist/booking-widget-standalone.js

@@ -20,6 +20,11 @@ const DEFAULT_ROOMS = [];
 
 const DEFAULT_RATES = [];
 
+// Capture the native browser fetch at module-load time — before PostHog (or any other
+// library) has a chance to wrap window.fetch for session recording. PostHog's wrapped
+// fetch drops non-standard request headers such as 'Source', breaking API auth.
+const _fetch = typeof fetch === 'function' ? fetch : /* istanbul ignore next */ undefined;
+
 /**
  * Returns date as YYYY-MM-DD using local date (no timezone shift).
  * Calendar dates are created at local midnight; using toISOString() would convert to UTC and can shift the day.
@@ -237,7 +242,7 @@ function createBookingApi(config = {}) {
     if (url.includes('ngrok')) headers['ngrok-skip-browser-warning'] = 'true';
     const options = { method, headers };
     if (body && (method === 'POST' || method === 'PUT')) options.body = JSON.stringify(body);
-    const res = await fetch(url, options);
+    const res = await _fetch(url, options);
     if (!res.ok) {
       let body;
       try { body = await res.json(); } catch (_) {}
@@ -282,6 +287,20 @@ function createBookingApi(config = {}) {
 
     // Fetch get_properties first to get currency_code (e.g. 'EUR') and room details
     let propertyRooms = {};
+    const normalizeRoomsById = (rooms) => {
+      if (!rooms) return {};
+      if (Array.isArray(rooms)) {
+        return rooms.reduce((acc, room) => {
+          if (!room || typeof room !== 'object') return acc;
+          const key = room.id ?? room.room_id;
+          if (key == null) return acc;
+          acc[String(key)] = room;
+          return acc;
+        }, {});
+      }
+      if (typeof rooms === 'object') return rooms;
+      return {};
+    };
     let propertyCurrency = currency;
     const propQuery = propertyKey
       ? `key=${encodeURIComponent(propertyKey)}${sandbox ? '&sandbox=true' : ''}`
@@ -294,10 +313,10 @@ function createBookingApi(config = {}) {
     try {
       const getOpts = { method: 'GET', headers: { 'Source': 'booking_engine' } };
       if (propFullUrl.includes('ngrok')) getOpts.headers['ngrok-skip-browser-warning'] = 'true';
-      const propRes = await fetch(propFullUrl, getOpts);
+      const propRes = await _fetch(propFullUrl, getOpts);
       if (propRes.ok) {
         const propData = await propRes.json();
-        propertyRooms = propData?.rooms ?? {};
+        propertyRooms = normalizeRoomsById(propData?.rooms);
         propertyCurrency = (typeof propData?.currency_code === 'string' && propData.currency_code.trim())
           ? propData.currency_code.trim()
           : currency;
@@ -356,18 +375,41 @@ function createBookingApi(config = {}) {
       return (a?.price ?? a?.total ?? r?.price ?? 0) || 0;
     };
     const fallbackImage = 'https://images.unsplash.com/photo-1618773928121-c32242e63f39?w=800&q=80';
+    const toImageUrl = (value) => {
+      if (typeof value !== 'string') return '';
+      const v = value.trim();
+      if (!v) return '';
+      if (/^https?:\/\//i.test(v)) return v;
+      if (v.startsWith('//')) return `https:${v}`;
+      if (s3BaseUrl) return `${s3BaseUrl}/${v.replace(/^\//, '')}`;
+      return '';
+    };
 
     return availableRoomIds.map((roomId) => {
-      const roomData = propertyRooms[roomId] ?? propertyRooms[String(roomId)] ?? {};
+      const roomData = propertyRooms[String(roomId)] ?? propertyRooms[roomId] ?? {};
       const roomRates = filteredRates.filter((r) => String(r.room_id) === String(roomId));
       const minPrice = roomRates.length
         ? Math.min(...roomRates.map(getPrice).filter((p) => p > 0)) || roomData.base_price || 0
         : roomData.base_price || 0;
 
-      const photos = roomData.photos ?? [];
-      const mainPhoto = photos.find((p) => p.main) ?? photos[0];
-      const photoPath = mainPhoto?.path ?? '';
-      const image = s3BaseUrl && photoPath ? `${s3BaseUrl}/${photoPath.replace(/^\//, '')}` : fallbackImage;
+      const photos = Array.isArray(roomData.photos) ? roomData.photos : [];
+      const mainPhoto = photos.find((p) => (typeof p === 'object' && p?.main)) ?? photos[0] ?? {};
+      const photoValue = typeof mainPhoto === 'string' ? mainPhoto : '';
+      const imageCandidates = [
+        photoValue,
+        mainPhoto.path,
+        mainPhoto.url,
+        mainPhoto.src,
+        mainPhoto.image,
+        mainPhoto.image_url,
+        mainPhoto.secure_url,
+        roomData.image,
+        roomData.image_url,
+        roomData.imageUrl,
+        roomData.thumbnail,
+        roomData.thumbnail_url,
+      ];
+      const image = imageCandidates.map(toImageUrl).find(Boolean) || fallbackImage;
 
       const sizeVal = roomData.size?.value ?? roomData.size_value;
       let sizeUnit = roomData.size?.unit ?? roomData.size_unit ?? 'm²';
@@ -691,7 +733,7 @@ async function decryptPropertyId(options = {}) {
   if (!propertyKey) return null;
   const base = (baseUrl || '').replace(/\/$/, '');
   const url = `${base}/${locale}/booking_engine/decrypt_property_id`;
-  const res = await fetch(url, {
+  const res = await _fetch(url, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json', 'Source': 'booking_engine', ...headers },
     body: JSON.stringify({ hash: propertyKey }),
@@ -718,7 +760,7 @@ async function fetchBookingEnginePref(options = {}) {
   }
   const base = (baseUrl || '').replace(/\/$/, '');
   const url = `${base}/api/core/${locale}/booking_engine/booking_engine_pref?property_id=${encodeURIComponent(propertyId)}`;
-  const res = await fetch(url, {
+  const res = await _fetch(url, {
     method: 'GET',
     headers: { 'Content-Type': 'application/json', 'Source': 'booking_engine', ...headers },
   });
@@ -872,8 +914,9 @@ if (typeof window !== 'undefined') {
     var primaryRgb = hexToRgb(primary), bgHsl = hexToHsl(bg), fgHsl = hexToHsl(fg);
     var styles = { '--primary': primary, '--primary-fg': primaryFg, '--bg': bg, '--fg': fg, '--card-fg': fg };
     if (primaryRgb) styles['--primary-rgb'] = primaryRgb[0] + ', ' + primaryRgb[1] + ', ' + primaryRgb[2];
-    styles['--card'] = c.card || (bgHsl ? 'hsl(' + bgHsl[0] + ', ' + bgHsl[1] + '%, ' + Math.min(95, bgHsl[2] + 2) + '%)' : bg);
-    styles['--card-solid'] = styles['--card'];
+    var _cardBase = c.card || (bgHsl ? 'hsl(' + bgHsl[0] + ', ' + bgHsl[1] + '%, ' + Math.min(95, bgHsl[2] + 2) + '%)' : bg);
+    styles['--card'] = c.card ? _cardBase + '40' : _cardBase;
+    styles['--card-solid'] = _cardBase;
     if (bgHsl) {
       styles['--secondary'] = 'hsl(' + bgHsl[0] + ', ' + bgHsl[1] + '%, ' + Math.min(95, bgHsl[2] + 10) + '%)';
       styles['--border'] = 'hsl(' + bgHsl[0] + ', ' + bgHsl[1] + '%, ' + Math.min(95, bgHsl[2] + 14) + '%)';
@@ -980,20 +1023,20 @@ if (typeof window !== 'undefined') {
       this.stripeInstance = null;
       this.elementsInstance = null;
 
-      const baseSteps = [
+      this.baseSteps = [
         { key: 'dates', label: 'Dates & Guests', num: '01' },
         { key: 'rooms', label: 'Room', num: '02' },
         { key: 'rates', label: 'Rate', num: '03' },
         { key: 'summary', label: 'Summary', num: '04' },
       ];
-      this.hasStripe = !!(this.options.stripePublishableKey && typeof this.options.createPaymentIntent === 'function');
-      this.STEPS = this.hasStripe ? [...baseSteps, { key: 'payment', label: 'Payment', num: '05' }] : baseSteps;
+      this._recomputeSteps();
 
       this.ROOMS = [];
       this.RATES = [];
       this.bookingApi = this.options.bookingApi || ((this.options.propertyKey || defaultApiBase) && typeof window.createBookingApi === 'function'
         ? window.createBookingApi({
             availabilityBaseUrl: defaultApiBase || '',
+            s3BaseUrl: this.options.s3BaseUrl || undefined,
             propertyKey: this.options.propertyKey || undefined,
             mode: this.options.mode === 'sandbox' ? 'sandbox' : undefined,
           })
@@ -1216,6 +1259,34 @@ if (typeof window !== 'undefined') {
       };
     }
 
+    _applyApiS3BaseUrl(value) {
+      const s3 = (typeof value === 'string' ? value.trim() : '').replace(/\/$/, '');
+      if (!s3) return;
+      if (!this.options.s3BaseUrl) this.options.s3BaseUrl = s3;
+      if (this.options.bookingApi || typeof window.createBookingApi !== 'function') return;
+      const defaultApiBase = (typeof window !== 'undefined' && window.__BOOKING_WIDGET_API_BASE_URL__) ? window.__BOOKING_WIDGET_API_BASE_URL__ : '';
+      this.bookingApi = window.createBookingApi({
+        availabilityBaseUrl: defaultApiBase || '',
+        s3BaseUrl: this.options.s3BaseUrl || undefined,
+        propertyKey: this.options.propertyKey || undefined,
+        mode: this.options.mode === 'sandbox' ? 'sandbox' : undefined,
+      });
+    }
+
+    _applyApiStripeKey(value) {
+      const key = (typeof value === 'string' ? value.trim() : '');
+      if (!key || this.options.stripePublishableKey) return;
+      this.options.stripePublishableKey = key;
+      this._recomputeSteps();
+    }
+
+    _recomputeSteps() {
+      this.hasStripe = !!(this.options.stripePublishableKey && typeof this.options.createPaymentIntent === 'function');
+      this.STEPS = this.hasStripe
+        ? this.baseSteps.concat([{ key: 'payment', label: 'Payment', num: '05' }])
+        : this.baseSteps.slice();
+    }
+
     _fetchRuntimeConfig() {
       const self = this;
       const key = String(this.options.propertyKey).trim();
@@ -1226,6 +1297,8 @@ if (typeof window !== 'undefined') {
       if (__bwConfigCache[cacheKey]) {
         const cached = __bwConfigCache[cacheKey];
         this._applyApiColors(cached);
+        this._applyApiS3BaseUrl(cached._s3BaseUrl);
+        this._applyApiStripeKey(cached._stripePublishableKey);
         this._configState = 'loaded';
         this.applyColors();
         this._initPosthog(cached._posthogKey || '');
@@ -1242,15 +1315,36 @@ if (typeof window !== 'undefined') {
           return res.json();
         })
         .then(function (data) {
+          const cfg = (data && typeof data.CONFIG === 'object' && data.CONFIG) ? data.CONFIG : {};
           const apiColors = {};
-          if (data.widgetBackground) apiColors.background  = data.widgetBackground;
-          if (data.widgetTextColor)  apiColors.text        = data.widgetTextColor;
-          if (data.primaryColor)     apiColors.primary     = data.primaryColor;
-          if (data.buttonTextColor)  apiColors.primaryText = data.buttonTextColor;
-          if (data.widgetCardColor)  apiColors.card        = data.widgetCardColor;
+          if (data.widgetBackground || cfg.widgetBackground) apiColors.background  = data.widgetBackground || cfg.widgetBackground;
+          if (data.widgetTextColor || cfg.widgetTextColor)   apiColors.text        = data.widgetTextColor || cfg.widgetTextColor;
+          if (data.primaryColor || cfg.primaryColor)         apiColors.primary     = data.primaryColor || cfg.primaryColor;
+          if (data.buttonTextColor || cfg.buttonTextColor)   apiColors.primaryText = data.buttonTextColor || cfg.buttonTextColor;
+          if (data.widgetCardColor || cfg.widgetCardColor)   apiColors.card        = data.widgetCardColor || cfg.widgetCardColor;
           apiColors._posthogKey = ((data.posthogKey || data.POSTHOG_KEY) ?? '').trim();
+          apiColors._s3BaseUrl = String(
+            data.VITE_AWS_S3_PATH
+            || data.vite_aws_s3_path
+            || data.s3BaseUrl
+            || data.s3_base_url
+            || data.CONFIG?.VITE_AWS_S3_PATH
+            || ''
+          ).trim();
+          apiColors._stripePublishableKey = String(
+            data.STRIPE_PUBLISHABLE_KEY
+            || data.STRIPE_PUBLICED_KEY
+            || data.stripePublishableKey
+            || data.stripe_publishable_key
+            || data.CONFIG?.STRIPE_PUBLISHABLE_KEY
+            || data.CONFIG?.STRIPE_PUBLICED_KEY
+            || data.CONFIG?.stripePublishableKey
+            || ''
+          ).trim();
           __bwConfigCache[cacheKey] = apiColors;
           self._applyApiColors(apiColors);
+          self._applyApiS3BaseUrl(apiColors._s3BaseUrl);
+          self._applyApiStripeKey(apiColors._stripePublishableKey);
           self._configState = 'loaded';
           self.applyColors();
           self._initPosthog(apiColors._posthogKey);

package/dist/booking-widget.css

@@ -612,7 +612,7 @@
   max-width: calc(100vw - 2em);
   box-sizing: border-box;
   z-index: 10;
-  background: var(--card-solid);
+  background: var(--bg);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 1em;

package/dist/booking-widget.js

@@ -83,8 +83,9 @@ function deriveWidgetStyles(c) {
   var primaryRgb = hexToRgb(primary), bgHsl = hexToHsl(bg), fgHsl = hexToHsl(fg);
   var styles = { '--primary': primary, '--primary-fg': primaryFg, '--bg': bg, '--fg': fg, '--card-fg': fg };
   if (primaryRgb) styles['--primary-rgb'] = primaryRgb[0] + ', ' + primaryRgb[1] + ', ' + primaryRgb[2];
-  styles['--card'] = c.card || (bgHsl ? 'hsl(' + bgHsl[0] + ', ' + bgHsl[1] + '%, ' + Math.min(95, bgHsl[2] + 2) + '%)' : bg);
-  styles['--card-solid'] = styles['--card'];
+  var _cardBase = c.card || (bgHsl ? 'hsl(' + bgHsl[0] + ', ' + bgHsl[1] + '%, ' + Math.min(95, bgHsl[2] + 2) + '%)' : bg);
+  styles['--card'] = c.card ? _cardBase + '40' : _cardBase;
+  styles['--card-solid'] = _cardBase;
   if (bgHsl) {
     styles['--secondary'] = 'hsl(' + bgHsl[0] + ', ' + bgHsl[1] + '%, ' + Math.min(95, bgHsl[2] + 10) + '%)';
     styles['--border'] = 'hsl(' + bgHsl[0] + ', ' + bgHsl[1] + '%, ' + Math.min(95, bgHsl[2] + 14) + '%)';
@@ -207,14 +208,13 @@ class BookingWidget {
       guest: { firstName: '', lastName: '', email: '', phone: '', specialRequests: '' },
     };
 
-    const baseSteps = [
+    this.baseSteps = [
       { key: 'dates', label: 'Dates & Guests', num: '01' },
       { key: 'rooms', label: 'Room', num: '02' },
       { key: 'rates', label: 'Rate', num: '03' },
       { key: 'summary', label: 'Summary', num: '04' },
     ];
-    this.hasStripe = !!(this.options.stripePublishableKey && typeof this.options.createPaymentIntent === 'function');
-    this.STEPS = this.hasStripe ? [...baseSteps, { key: 'payment', label: 'Payment', num: '05' }] : baseSteps;
+    this._recomputeSteps();
 
     this.ROOMS = [];
     this.RATES = [];
@@ -488,6 +488,39 @@ class BookingWidget {
     };
   }
 
+  _applyApiS3BaseUrl(value) {
+    const s3 = (typeof value === 'string' ? value.trim() : '').replace(/\/$/, '');
+    if (!s3) return;
+    if (!this.options.s3BaseUrl) this.options.s3BaseUrl = s3;
+    if (this.options.bookingApi || typeof window.createBookingApi !== 'function') return;
+    const defaultApiBase = (typeof window !== 'undefined' && window.__BOOKING_WIDGET_API_BASE_URL__) ? window.__BOOKING_WIDGET_API_BASE_URL__ : '';
+    const opts = this.options;
+    this.bookingApi = window.createBookingApi({
+      baseUrl: opts.apiBaseUrl || opts.availabilityBaseUrl || defaultApiBase || '',
+      availabilityBaseUrl: opts.availabilityBaseUrl || defaultApiBase || undefined,
+      propertyBaseUrl: opts.propertyBaseUrl || undefined,
+      s3BaseUrl: opts.s3BaseUrl || undefined,
+      propertyId: opts.propertyId != null && opts.propertyId !== '' ? String(opts.propertyId) : undefined,
+      propertyKey: opts.propertyKey || undefined,
+      mode: opts.mode === 'sandbox' ? 'sandbox' : undefined,
+      headers: opts.apiSecret ? { 'X-API-Key': opts.apiSecret } : undefined,
+    });
+  }
+
+  _applyApiStripeKey(value) {
+    const key = (typeof value === 'string' ? value.trim() : '');
+    if (!key || this.options.stripePublishableKey) return;
+    this.options.stripePublishableKey = key;
+    this._recomputeSteps();
+  }
+
+  _recomputeSteps() {
+    this.hasStripe = !!(this.options.stripePublishableKey && typeof this.options.createPaymentIntent === 'function');
+    this.STEPS = this.hasStripe
+      ? [...this.baseSteps, { key: 'payment', label: 'Payment', num: '05' }]
+      : [...this.baseSteps];
+  }
+
   /**
    * Fetch runtime styling config from /load-config.
    * Caches result in __bwConfigCache (module-level, shared across instances).
@@ -505,6 +538,8 @@ class BookingWidget {
     if (__bwConfigCache[cacheKey]) {
       const cached = __bwConfigCache[cacheKey];
       this._applyApiColors(cached);
+      this._applyApiS3BaseUrl(cached._s3BaseUrl);
+      this._applyApiStripeKey(cached._stripePublishableKey);
       this._configState = 'loaded';
       this.applyColors();
       this._initPosthog(cached._posthogKey || '');
@@ -521,15 +556,36 @@ class BookingWidget {
         return res.json();
       })
       .then(function (data) {
+        const cfg = (data && typeof data.CONFIG === 'object' && data.CONFIG) ? data.CONFIG : {};
         const apiColors = {};
-        if (data.widgetBackground) apiColors.background  = data.widgetBackground;
-        if (data.widgetTextColor)  apiColors.text        = data.widgetTextColor;
-        if (data.primaryColor)     apiColors.primary     = data.primaryColor;
-        if (data.buttonTextColor)  apiColors.primaryText = data.buttonTextColor;
-        if (data.widgetCardColor)  apiColors.card        = data.widgetCardColor;
+        if (data.widgetBackground || cfg.widgetBackground) apiColors.background  = data.widgetBackground || cfg.widgetBackground;
+        if (data.widgetTextColor || cfg.widgetTextColor)   apiColors.text        = data.widgetTextColor || cfg.widgetTextColor;
+        if (data.primaryColor || cfg.primaryColor)         apiColors.primary     = data.primaryColor || cfg.primaryColor;
+        if (data.buttonTextColor || cfg.buttonTextColor)   apiColors.primaryText = data.buttonTextColor || cfg.buttonTextColor;
+        if (data.widgetCardColor || cfg.widgetCardColor)   apiColors.card        = data.widgetCardColor || cfg.widgetCardColor;
         apiColors._posthogKey = ((data.posthogKey || data.POSTHOG_KEY) ?? '').trim();
+        apiColors._s3BaseUrl = String(
+          data.VITE_AWS_S3_PATH
+          || data.vite_aws_s3_path
+          || data.s3BaseUrl
+          || data.s3_base_url
+          || data.CONFIG?.VITE_AWS_S3_PATH
+          || ''
+        ).trim();
+        apiColors._stripePublishableKey = String(
+          data.STRIPE_PUBLISHABLE_KEY
+          || data.STRIPE_PUBLICED_KEY
+          || data.stripePublishableKey
+          || data.stripe_publishable_key
+          || data.CONFIG?.STRIPE_PUBLISHABLE_KEY
+          || data.CONFIG?.STRIPE_PUBLICED_KEY
+          || data.CONFIG?.stripePublishableKey
+          || ''
+        ).trim();
         __bwConfigCache[cacheKey] = apiColors;
         self._applyApiColors(apiColors);
+        self._applyApiS3BaseUrl(apiColors._s3BaseUrl);
+        self._applyApiStripeKey(apiColors._stripePublishableKey);
         self._configState = 'loaded';
         self.applyColors();
         self._initPosthog(apiColors._posthogKey);

package/dist/core/booking-api.js

@@ -19,6 +19,11 @@ const DEFAULT_ROOMS = [];
 
 const DEFAULT_RATES = [];
 
+// Capture the native browser fetch at module-load time — before PostHog (or any other
+// library) has a chance to wrap window.fetch for session recording. PostHog's wrapped
+// fetch drops non-standard request headers such as 'Source', breaking API auth.
+const _fetch = typeof fetch === 'function' ? fetch : /* istanbul ignore next */ undefined;
+
 /**
  * Returns date as YYYY-MM-DD using local date (no timezone shift).
  * Calendar dates are created at local midnight; using toISOString() would convert to UTC and can shift the day.
@@ -236,7 +241,7 @@ function createBookingApi(config = {}) {
     if (url.includes('ngrok')) headers['ngrok-skip-browser-warning'] = 'true';
     const options = { method, headers };
     if (body && (method === 'POST' || method === 'PUT')) options.body = JSON.stringify(body);
-    const res = await fetch(url, options);
+    const res = await _fetch(url, options);
     if (!res.ok) {
       let body;
       try { body = await res.json(); } catch (_) {}
@@ -281,6 +286,20 @@ function createBookingApi(config = {}) {
 
     // Fetch get_properties first to get currency_code (e.g. 'EUR') and room details
     let propertyRooms = {};
+    const normalizeRoomsById = (rooms) => {
+      if (!rooms) return {};
+      if (Array.isArray(rooms)) {
+        return rooms.reduce((acc, room) => {
+          if (!room || typeof room !== 'object') return acc;
+          const key = room.id ?? room.room_id;
+          if (key == null) return acc;
+          acc[String(key)] = room;
+          return acc;
+        }, {});
+      }
+      if (typeof rooms === 'object') return rooms;
+      return {};
+    };
     let propertyCurrency = currency;
     const propQuery = propertyKey
       ? `key=${encodeURIComponent(propertyKey)}${sandbox ? '&sandbox=true' : ''}`
@@ -293,10 +312,10 @@ function createBookingApi(config = {}) {
     try {
       const getOpts = { method: 'GET', headers: { 'Source': 'booking_engine' } };
       if (propFullUrl.includes('ngrok')) getOpts.headers['ngrok-skip-browser-warning'] = 'true';
-      const propRes = await fetch(propFullUrl, getOpts);
+      const propRes = await _fetch(propFullUrl, getOpts);
       if (propRes.ok) {
         const propData = await propRes.json();
-        propertyRooms = propData?.rooms ?? {};
+        propertyRooms = normalizeRoomsById(propData?.rooms);
         propertyCurrency = (typeof propData?.currency_code === 'string' && propData.currency_code.trim())
           ? propData.currency_code.trim()
           : currency;
@@ -355,18 +374,41 @@ function createBookingApi(config = {}) {
       return (a?.price ?? a?.total ?? r?.price ?? 0) || 0;
     };
     const fallbackImage = 'https://images.unsplash.com/photo-1618773928121-c32242e63f39?w=800&q=80';
+    const toImageUrl = (value) => {
+      if (typeof value !== 'string') return '';
+      const v = value.trim();
+      if (!v) return '';
+      if (/^https?:\/\//i.test(v)) return v;
+      if (v.startsWith('//')) return `https:${v}`;
+      if (s3BaseUrl) return `${s3BaseUrl}/${v.replace(/^\//, '')}`;
+      return '';
+    };
 
     return availableRoomIds.map((roomId) => {
-      const roomData = propertyRooms[roomId] ?? propertyRooms[String(roomId)] ?? {};
+      const roomData = propertyRooms[String(roomId)] ?? propertyRooms[roomId] ?? {};
       const roomRates = filteredRates.filter((r) => String(r.room_id) === String(roomId));
       const minPrice = roomRates.length
         ? Math.min(...roomRates.map(getPrice).filter((p) => p > 0)) || roomData.base_price || 0
         : roomData.base_price || 0;
 
-      const photos = roomData.photos ?? [];
-      const mainPhoto = photos.find((p) => p.main) ?? photos[0];
-      const photoPath = mainPhoto?.path ?? '';
-      const image = s3BaseUrl && photoPath ? `${s3BaseUrl}/${photoPath.replace(/^\//, '')}` : fallbackImage;
+      const photos = Array.isArray(roomData.photos) ? roomData.photos : [];
+      const mainPhoto = photos.find((p) => (typeof p === 'object' && p?.main)) ?? photos[0] ?? {};
+      const photoValue = typeof mainPhoto === 'string' ? mainPhoto : '';
+      const imageCandidates = [
+        photoValue,
+        mainPhoto.path,
+        mainPhoto.url,
+        mainPhoto.src,
+        mainPhoto.image,
+        mainPhoto.image_url,
+        mainPhoto.secure_url,
+        roomData.image,
+        roomData.image_url,
+        roomData.imageUrl,
+        roomData.thumbnail,
+        roomData.thumbnail_url,
+      ];
+      const image = imageCandidates.map(toImageUrl).find(Boolean) || fallbackImage;
 
       const sizeVal = roomData.size?.value ?? roomData.size_value;
       let sizeUnit = roomData.size?.unit ?? roomData.size_unit ?? 'm²';
@@ -690,7 +732,7 @@ async function decryptPropertyId(options = {}) {
   if (!propertyKey) return null;
   const base = (baseUrl || '').replace(/\/$/, '');
   const url = `${base}/${locale}/booking_engine/decrypt_property_id`;
-  const res = await fetch(url, {
+  const res = await _fetch(url, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json', 'Source': 'booking_engine', ...headers },
     body: JSON.stringify({ hash: propertyKey }),
@@ -717,7 +759,7 @@ async function fetchBookingEnginePref(options = {}) {
   }
   const base = (baseUrl || '').replace(/\/$/, '');
   const url = `${base}/api/core/${locale}/booking_engine/booking_engine_pref?property_id=${encodeURIComponent(propertyId)}`;
-  const res = await fetch(url, {
+  const res = await _fetch(url, {
     method: 'GET',
     headers: { 'Content-Type': 'application/json', 'Source': 'booking_engine', ...headers },
   });

package/dist/core/color-utils.js

@@ -73,7 +73,7 @@ export function deriveWidgetStyles(c) {
   if (primaryRgb) styles['--primary-rgb'] = `${primaryRgb[0]}, ${primaryRgb[1]}, ${primaryRgb[2]}`;
 
   if (cardExplicit) {
-    styles['--card'] = cardExplicit + "40";
+    styles['--card'] = cardExplicit + '40';
     styles['--card-solid'] = cardExplicit;
   } else if (bgHsl) {
     const cardVal = `hsl(${bgHsl[0]}, ${bgHsl[1]}%, ${Math.min(95, bgHsl[2] + 2)}%)`;

package/dist/core/styles.css

@@ -612,7 +612,7 @@
   max-width: calc(100vw - 2em);
   box-sizing: border-box;
   z-index: 10;
-  background: var(--card-solid);
+  background: var(--bg);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 1em;

package/dist/react/BookingWidget.jsx

@@ -7,6 +7,11 @@ import { STRIPE_PUBLISHABLE_KEY, API_BASE_URL } from '../core/stripe-config.js';
 import { fetchRuntimeConfig } from '../utils/config-service.js';
 import { init as initAnalytics, capture as captureEvent, identify as identifyAnalytics } from '../utils/analytics.js';
 
+// Capture the native browser fetch at module-load time — before PostHog (or any other
+// library) wraps window.fetch for session recording. The wrapped version drops
+// non-standard request headers such as 'Source'.
+const _nativeFetch = typeof fetch === 'function' ? fetch : /* istanbul ignore next */ undefined;
+
 const BASE_STEPS = [
   { key: 'dates', label: 'Dates & Guests', num: '01' },
   { key: 'rooms', label: 'Room', num: '02' },
@@ -51,9 +56,11 @@ const BookingWidget = ({
   /** PostHog: optional override for API host (defaults to VITE_POSTHOG_HOST). */
   posthogHost = '',
 }) => {
-  const stripePublishableKey = stripePublishableKeyProp || STRIPE_PUBLISHABLE_KEY;
+  const [runtimeStripePublishableKey, setRuntimeStripePublishableKey] = useState('');
+  const [runtimeApiBaseUrl, setRuntimeApiBaseUrl] = useState('');
+  const stripePublishableKey = stripePublishableKeyProp || runtimeStripePublishableKey || STRIPE_PUBLISHABLE_KEY;
   const env = typeof import.meta !== 'undefined' && import.meta.env ? import.meta.env : {};
-  const apiBase = (env.VITE_API_BASE_URL || API_BASE_URL || '').replace(/\/$/, '');
+  const apiBase = (runtimeApiBaseUrl || env.VITE_API_BASE_URL || API_BASE_URL || '').replace(/\/$/, '');
   const effectivePaymentIntentUrl = (apiBase ? apiBase + '/proxy/create-payment-intent' : '').trim();
   const isSandbox = mode === 'sandbox';
   const hasPropertyKey = !!(propertyKey && String(propertyKey).trim());
@@ -64,7 +71,7 @@ const BookingWidget = ({
       const url = effectivePaymentIntentUrl + (isSandbox ? '?sandbox=true' : '');
       const headers = { 'Content-Type': 'application/json', 'Source': 'booking_engine' };
       if (url.includes('ngrok')) headers['ngrok-skip-browser-warning'] = 'true';
-      const res = await fetch(url, { method: 'POST', headers, body: JSON.stringify(payload) });
+      const res = await _nativeFetch(url, { method: 'POST', headers, body: JSON.stringify(payload) });
       if (!res.ok) throw new Error(await res.text());
       const data = await res.json();
       const clientSecret = data.clientSecret ?? data.client_secret ?? data.data?.clientSecret ?? data.data?.client_secret ?? data.paymentIntent?.client_secret;
@@ -108,6 +115,7 @@ const BookingWidget = ({
   const [configLoaded, setConfigLoaded] = useState(false);
   const [configError, setConfigError] = useState(null);
   const [runtimeWidgetStyles, setRuntimeWidgetStyles] = useState({});
+  const [runtimeS3BaseUrl, setRuntimeS3BaseUrl] = useState('');
   const [configRetryCount, setConfigRetryCount] = useState(0);
   const widgetRef = useRef(null);
   const stripeRef = useRef(null);
@@ -116,11 +124,11 @@ const BookingWidget = ({
 
   // Use package .env when props not passed (e.g. examples with envDir pointing at root)
   const effectiveApiBaseUrl = apiBaseUrl || env.VITE_API_URL || '';
-  const effectiveConfirmationBaseUrl = (env.VITE_API_BASE_URL || API_BASE_URL || 'https://ai.thehotelplanet.com').replace(/\/$/, '');
+  const effectiveConfirmationBaseUrl = (runtimeApiBaseUrl || env.VITE_API_BASE_URL || API_BASE_URL || 'https://ai.thehotelplanet.com').replace(/\/$/, '');
   const apiBaseForAvailability = (env.VITE_API_BASE_URL || API_BASE_URL || '').replace(/\/$/, '');
   const effectiveAvailabilityBaseUrl = availabilityBaseUrl !== '' ? availabilityBaseUrl : apiBaseForAvailability;
   const effectivePropertyBaseUrl = propertyBaseUrl || env.VITE_PROPERTY_BASE_URL || '';
-  const effectiveS3BaseUrl = s3BaseUrl || env.VITE_AWS_S3_PATH || '';
+  const effectiveS3BaseUrl = s3BaseUrl || runtimeS3BaseUrl || env.VITE_AWS_S3_PATH || '';
 
   const bookingApiRef = useMemo(() => {
     if (bookingApiProp && typeof bookingApiProp.fetchRooms === 'function') return bookingApiProp;
@@ -227,7 +235,7 @@ const BookingWidget = ({
       if (cancelled) return;
       try {
         const url = `${effectiveConfirmationBaseUrl}/proxy/confirmation/${encodeURIComponent(String(confirmationToken).trim())}${isSandbox ? '?sandbox=true' : ''}`;
-        const res = await fetch(url, { method: 'POST', headers: { 'Source': 'booking_engine' } });
+        const res = await _nativeFetch(url, { method: 'POST', headers: { 'Source': 'booking_engine' } });
         if (!res.ok) throw new Error(await res.text());
         const data = await res.json();
         const status = data?.status != null ? String(data.status) : '';
@@ -271,6 +279,9 @@ const BookingWidget = ({
       setConfigLoading(false);
       setConfigLoaded(false);
       setRuntimeWidgetStyles({});
+      setRuntimeS3BaseUrl('');
+      setRuntimeStripePublishableKey('');
+      setRuntimeApiBaseUrl('');
       return;
     }
     let cancelled = false;
@@ -278,17 +289,23 @@ const BookingWidget = ({
     setConfigError(null);
     setConfigLoaded(false);
     fetchRuntimeConfig(propertyKey, colors, mode)
-      .then(({ widgetStyles, posthogKey: configPosthogKey }) => {
+      .then(({ widgetStyles, posthogKey: configPosthogKey, s3BaseUrl: configS3BaseUrl, stripePublishableKey: configStripeKey, apiBaseUrl: configApiBaseUrl }) => {
         if (cancelled) return;
         const analyticsKey = posthogKey || configPosthogKey || '';
         initAnalytics(analyticsKey || posthogHost ? { key: analyticsKey || undefined, host: posthogHost || undefined } : {});
         setRuntimeWidgetStyles(widgetStyles);
+        setRuntimeS3BaseUrl(configS3BaseUrl || '');
+        setRuntimeStripePublishableKey(configStripeKey || '');
+        setRuntimeApiBaseUrl(configApiBaseUrl || '');
         setConfigLoaded(true);
         setConfigLoading(false);
       })
       .catch((err) => {
         if (cancelled) return;
         setConfigError(err?.message || 'Failed to load widget configuration.');
+        setRuntimeS3BaseUrl('');
+        setRuntimeStripePublishableKey('');
+        setRuntimeApiBaseUrl('');
         setConfigLoading(false);
       });
     return () => { cancelled = true; };

package/dist/react/styles.css

@@ -612,7 +612,7 @@
   max-width: calc(100vw - 2em);
   box-sizing: border-box;
   z-index: 10;
-  background: var(--card-solid);
+  background: var(--bg);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 1em;

package/dist/utils/analytics.js

@@ -0,0 +1,88 @@
+/**
+ * PostHog analytics for the booking widget.
+ * The key is sourced from /load-config at runtime; VITE_POSTHOG_KEY/.env or prop overrides are
+ * also supported but the config-fetched key is preferred so no hardcoded key is needed.
+ * Used by React and Vue; core/standalone use window.posthog when host provides it.
+ */
+import posthog from 'posthog-js';
+
+let initialized = false;
+
+function getConfig(overrides = {}) {
+  if (overrides.key != null || overrides.host != null) {
+    return {
+      key: (overrides.key && String(overrides.key).trim()) || '',
+      host: overrides.host || 'https://us.i.posthog.com',
+    };
+  }
+  if (typeof import.meta !== 'undefined' && import.meta.env) {
+    const key = import.meta.env.VITE_POSTHOG_KEY || import.meta.env.POSTHOG_KEY || '';
+    const host = import.meta.env.VITE_POSTHOG_HOST || import.meta.env.POSTHOG_HOST || 'https://us.i.posthog.com';
+    return { key: (key && String(key).trim()) || '', host };
+  }
+  if (typeof window !== 'undefined') {
+    const key = (window.__BOOKING_WIDGET_POSTHOG_KEY__ || '').trim();
+    const host = window.__BOOKING_WIDGET_POSTHOG_HOST__ || 'https://us.i.posthog.com';
+    return { key, host };
+  }
+  return { key: '', host: 'https://us.i.posthog.com' };
+}
+
+/**
+ * Initialize PostHog when key is available. Call once at app/widget load.
+ * @param {object} [overrides] - Optional { key, host } to override env.
+ */
+export function init(overrides = {}) {
+  if (initialized) return posthog;
+  const { key, host } = getConfig(overrides);
+  if (!key) return null;
+  try {
+    // Snapshot the native fetch/XHR before posthog.init() wraps them for session recording.
+    // PostHog's wrapped fetch drops non-standard headers (e.g. 'Source'), so we restore the
+    // originals immediately after init so all subsequent widget API calls are unaffected.
+    const _savedFetch = typeof window !== 'undefined' ? window.fetch : undefined;
+    const _savedXHROpen = typeof window !== 'undefined' && window.XMLHttpRequest
+      ? window.XMLHttpRequest.prototype.open
+      : undefined;
+
+    posthog.init(key, { api_host: host });
+
+    if (_savedFetch && typeof window !== 'undefined') window.fetch = _savedFetch;
+    if (_savedXHROpen && typeof window !== 'undefined') window.XMLHttpRequest.prototype.open = _savedXHROpen;
+
+    initialized = true;
+    return posthog;
+  } catch (e) {
+    return null;
+  }
+}
+
+/**
+ * Identify the current context (e.g. property/tenant) so events are associated with it.
+ * Call with propertyKey when the widget has a known property.
+ * @param {string} id - Distinct ID (e.g. propertyKey).
+ */
+export function identify(id) {
+  try {
+    if (initialized && id != null && String(id).trim() && typeof posthog.identify === 'function') {
+      posthog.identify(String(id).trim());
+    }
+  } catch (e) {
+    // ignore
+  }
+}
+
+/**
+ * Capture an event. No-op if PostHog is not initialized.
+ * @param {string} eventName - Event name (e.g. 'widgetLoaded', 'search').
+ * @param {object} [properties] - Optional event properties.
+ */
+export function capture(eventName, properties = {}) {
+  try {
+    if (initialized && typeof posthog.capture === 'function') {
+      posthog.capture(eventName, properties);
+    }
+  } catch (e) {
+    // ignore
+  }
+}

package/dist/utils/config-service.js

@@ -10,11 +10,53 @@
 import { DEFAULT_COLORS } from '../core/stripe-config.js';
 import { deriveWidgetStyles } from '../core/color-utils.js';
 
+// Capture native fetch before PostHog can wrap it (PostHog session recording
+// wraps window.fetch and may strip non-standard headers such as 'Source').
+const _nativeFetch = typeof fetch === 'function' ? fetch : /* istanbul ignore next */ undefined;
+
 const CONFIG_BASE_URL = 'https://ai.thehotelplanet.com/load-config';
 
-/** In-memory cache: propertyKey → { apiColors, posthogKey } */
+/** In-memory cache: propertyKey → { apiColors, posthogKey, s3BaseUrl, stripePublishableKey } */
 const _configCache = new Map();
 
+function extractS3BaseUrl(data) {
+  const cfg = (data && typeof data.CONFIG === 'object' && data.CONFIG) ? data.CONFIG : {};
+  return String(
+    data?.VITE_AWS_S3_PATH
+    || data?.vite_aws_s3_path
+    || data?.s3BaseUrl
+    || data?.s3_base_url
+    || cfg?.VITE_AWS_S3_PATH
+    || ''
+  ).trim();
+}
+
+function extractStripePublishableKey(data) {
+  const cfg = (data && typeof data.CONFIG === 'object' && data.CONFIG) ? data.CONFIG : {};
+  return String(
+    data?.STRIPE_PUBLISHABLE_KEY
+    || data?.STRIPE_PUBLICED_KEY
+    || data?.stripePublishableKey
+    || data?.stripe_publishable_key
+    || cfg?.STRIPE_PUBLISHABLE_KEY
+    || cfg?.STRIPE_PUBLICED_KEY
+    || cfg?.stripePublishableKey
+    || ''
+  ).trim();
+}
+
+function extractApiBaseUrl(data) {
+  const cfg = (data && typeof data.CONFIG === 'object' && data.CONFIG) ? data.CONFIG : {};
+  return String(
+    data?.API_BASE_URL
+    || data?.apiBaseUrl
+    || data?.api_base_url
+    || cfg?.API_BASE_URL
+    || cfg?.apiBaseUrl
+    || ''
+  ).trim().replace(/\/$/, '');
+}
+
 /**
  * Map the /load-config response field names to the internal color keys used
  * throughout the widget.
@@ -27,12 +69,13 @@ const _configCache = new Map();
  * widgetCardColor    → card
  */
 function mapApiColors(data) {
+  const cfg = (data && typeof data.CONFIG === 'object' && data.CONFIG) ? data.CONFIG : {};
   const mapped = {};
-  if (data.widgetBackground) mapped.background  = data.widgetBackground;
-  if (data.widgetTextColor)  mapped.text        = data.widgetTextColor;
-  if (data.primaryColor)     mapped.primary     = data.primaryColor;
-  if (data.buttonTextColor)  mapped.primaryText = data.buttonTextColor;
-  if (data.widgetCardColor)  mapped.card        = data.widgetCardColor;
+  if (data.widgetBackground || cfg.widgetBackground) mapped.background  = data.widgetBackground || cfg.widgetBackground;
+  if (data.widgetTextColor || cfg.widgetTextColor)   mapped.text        = data.widgetTextColor || cfg.widgetTextColor;
+  if (data.primaryColor || cfg.primaryColor)         mapped.primary     = data.primaryColor || cfg.primaryColor;
+  if (data.buttonTextColor || cfg.buttonTextColor)   mapped.primaryText = data.buttonTextColor || cfg.buttonTextColor;
+  if (data.widgetCardColor || cfg.widgetCardColor)   mapped.card        = data.widgetCardColor || cfg.widgetCardColor;
   return mapped;
 }
 
@@ -70,7 +113,7 @@ export function mergeColors(mappedApiColors, installerColors) {
  * @param {string}      propertyKey      - The hotel property key / API key.
  * @param {object|null} installerColors  - Optional installer color overrides.
  * @param {string}      [mode]           - Pass 'sandbox' to append &mode=sandbox to the request.
- * @returns {Promise<{ apiColors: object, colors: object, widgetStyles: object }>}
+ * @returns {Promise<{ apiColors: object, colors: object, widgetStyles: object, posthogKey: string, s3BaseUrl: string, stripePublishableKey: string, apiBaseUrl: string }>}
  */
 export async function fetchRuntimeConfig(propertyKey, installerColors = null, mode = null) {
   if (!propertyKey || !String(propertyKey).trim()) {
@@ -83,13 +126,13 @@ export async function fetchRuntimeConfig(propertyKey, installerColors = null, mo
   const cacheKey = isSandbox ? `${key}:sandbox` : key;
 
   if (_configCache.has(cacheKey)) {
-    const { apiColors, posthogKey } = _configCache.get(cacheKey);
+    const { apiColors, posthogKey, s3BaseUrl, stripePublishableKey, apiBaseUrl } = _configCache.get(cacheKey);
     const colors = mergeColors(apiColors, installerColors);
-    return { apiColors, colors, widgetStyles: deriveWidgetStyles(colors), posthogKey };
+    return { apiColors, colors, widgetStyles: deriveWidgetStyles(colors), posthogKey, s3BaseUrl, stripePublishableKey, apiBaseUrl };
   }
 
   const url = `${CONFIG_BASE_URL}?apikey=${encodeURIComponent(key)}${isSandbox ? '&mode=sandbox' : ''}`;
-  const res = await fetch(url, { headers: { 'Source': 'booking_engine' } });
+  const res = await _nativeFetch(url, { headers: { 'Source': 'booking_engine' } });
   if (!res.ok) {
     throw new Error(`Failed to load widget configuration (HTTP ${res.status}).`);
   }
@@ -97,8 +140,11 @@ export async function fetchRuntimeConfig(propertyKey, installerColors = null, mo
   const data = await res.json();
   const apiColors = mapApiColors(data);
   const posthogKey = ((data.posthogKey || data.POSTHOG_KEY) ?? '').trim();
-  _configCache.set(cacheKey, { apiColors, posthogKey });
+  const s3BaseUrl = extractS3BaseUrl(data);
+  const stripePublishableKey = extractStripePublishableKey(data);
+  const apiBaseUrl = extractApiBaseUrl(data);
+  _configCache.set(cacheKey, { apiColors, posthogKey, s3BaseUrl, stripePublishableKey, apiBaseUrl });
 
   const colors = mergeColors(apiColors, installerColors);
-  return { apiColors, colors, widgetStyles: deriveWidgetStyles(colors), posthogKey };
+  return { apiColors, colors, widgetStyles: deriveWidgetStyles(colors), posthogKey, s3BaseUrl, stripePublishableKey, apiBaseUrl };
 }

package/dist/vue/BookingWidget.vue

@@ -484,6 +484,11 @@ import { STRIPE_PUBLISHABLE_KEY, API_BASE_URL } from '../core/stripe-config.js';
 import { fetchRuntimeConfig } from '../utils/config-service.js';
 import { init as initAnalytics, capture as captureEvent, identify as identifyAnalytics } from '../utils/analytics.js';
 
+// Capture the native browser fetch at module-load time — before PostHog (or any other
+// library) wraps window.fetch for session recording. The wrapped version drops
+// non-standard request headers such as 'Source'.
+const _nativeFetch = typeof fetch === 'function' ? fetch : /* istanbul ignore next */ undefined;
+
 
 const BASE_STEPS = [
   { key: 'dates', label: 'Dates & Guests', num: '01' },
@@ -544,6 +549,8 @@ export default {
       configLoaded: false,
       configError: null,
       runtimeWidgetStyles: {},
+      runtimeS3BaseUrl: '',
+      runtimeStripePublishableKey: '',
       calendarMonth: new Date().getMonth(),
       calendarYear: new Date().getFullYear(),
       pickState: 0,
@@ -585,7 +592,10 @@ export default {
       return this.propertyBaseUrl || (typeof import.meta !== 'undefined' && import.meta.env && import.meta.env.VITE_PROPERTY_BASE_URL) || '';
     },
     effectiveS3BaseUrl() {
-      return this.s3BaseUrl || (typeof import.meta !== 'undefined' && import.meta.env && import.meta.env.VITE_AWS_S3_PATH) || '';
+      return this.s3BaseUrl || this.runtimeS3BaseUrl || (typeof import.meta !== 'undefined' && import.meta.env && import.meta.env.VITE_AWS_S3_PATH) || '';
+    },
+    effectiveStripePublishableKey() {
+      return this.stripePublishableKey || this.runtimeStripePublishableKey || '';
     },
     effectivePaymentIntentUrl() {
       const env = typeof import.meta !== 'undefined' && import.meta.env ? import.meta.env : {};
@@ -598,7 +608,7 @@ export default {
       return String(base).replace(/\/$/, '');
     },
     hasStripe() {
-      return !!(this.stripePublishableKey && typeof this.effectiveCreatePaymentIntent === 'function');
+      return !!(this.effectiveStripePublishableKey && typeof this.effectiveCreatePaymentIntent === 'function');
     },
     STEPS() {
       return this.hasStripe ? [...BASE_STEPS, { key: 'payment', label: 'Payment', num: '05' }] : BASE_STEPS;
@@ -611,7 +621,7 @@ export default {
         const requestUrl = url + (this.isSandbox ? '?sandbox=true' : '');
         const headers = { 'Content-Type': 'application/json', 'Source': 'booking_engine' };
         if (requestUrl.includes('ngrok')) headers['ngrok-skip-browser-warning'] = 'true';
-        const res = await fetch(requestUrl, { method: 'POST', headers, body: JSON.stringify(payload) });
+        const res = await _nativeFetch(requestUrl, { method: 'POST', headers, body: JSON.stringify(payload) });
         if (!res.ok) throw new Error(await res.text());
         const data = await res.json();
         const clientSecret = data.clientSecret ?? data.client_secret ?? data.data?.clientSecret ?? data.data?.client_secret ?? data.paymentIntent?.client_secret;
@@ -800,19 +810,25 @@ export default {
         this.configLoading = false;
         this.configLoaded = false;
         this.runtimeWidgetStyles = {};
+        this.runtimeS3BaseUrl = '';
+        this.runtimeStripePublishableKey = '';
         return;
       }
       this.configLoading = true;
       this.configError = null;
       this.configLoaded = false;
       try {
-        const { widgetStyles, posthogKey: configPosthogKey } = await fetchRuntimeConfig(this.propertyKey, this.colors, this.mode);
+        const { widgetStyles, posthogKey: configPosthogKey, s3BaseUrl: configS3BaseUrl, stripePublishableKey: configStripeKey } = await fetchRuntimeConfig(this.propertyKey, this.colors, this.mode);
         const analyticsKey = this.posthogKey || configPosthogKey || '';
         initAnalytics(analyticsKey || this.posthogHost ? { key: analyticsKey || undefined, host: this.posthogHost || undefined } : {});
         this.runtimeWidgetStyles = widgetStyles;
+        this.runtimeS3BaseUrl = configS3BaseUrl || '';
+        this.runtimeStripePublishableKey = configStripeKey || '';
         this.configLoaded = true;
       } catch (err) {
         this.configError = err?.message || 'Failed to load widget configuration.';
+        this.runtimeS3BaseUrl = '';
+        this.runtimeStripePublishableKey = '';
       } finally {
         this.configLoading = false;
       }
@@ -821,7 +837,7 @@ export default {
       const t = String(token || '').trim();
       if (!t) throw new Error('Missing confirmation token');
       const url = `${this.effectiveConfirmationBaseUrl}/proxy/confirmation/${encodeURIComponent(t)}${this.isSandbox ? '?sandbox=true' : ''}`;
-      const res = await fetch(url, { method: 'POST', headers: { 'Source': 'booking_engine' } });
+      const res = await _nativeFetch(url, { method: 'POST', headers: { 'Source': 'booking_engine' } });
       if (!res.ok) throw new Error(await res.text());
       return await res.json();
     },
@@ -861,7 +877,7 @@ export default {
       pollOnce();
     },
     async loadStripePaymentElement() {
-      if (this.state.step !== 'payment' || !this.checkoutShowPaymentForm || !this.stripePublishableKey || typeof this.effectiveCreatePaymentIntent !== 'function') return;
+      if (this.state.step !== 'payment' || !this.checkoutShowPaymentForm || !this.effectiveStripePublishableKey || typeof this.effectiveCreatePaymentIntent !== 'function') return;
       const paymentIntentPayload = buildPaymentIntentPayload(this.state, { propertyKey: this.propertyKey || undefined, sandbox: this.isSandbox });
       this.paymentElementReady = false;
       try {
@@ -873,7 +889,7 @@ export default {
           this.apiError = 'Payment setup failed: no client secret returned';
           return;
         }
-        const stripe = await loadStripe(this.stripePublishableKey);
+        const stripe = await loadStripe(this.effectiveStripePublishableKey);
         if (!stripe || this.state.step !== 'payment') return;
         this.stripeInstance = stripe;
         const elements = stripe.elements({ clientSecret, appearance: { theme: 'flat', variables: { borderRadius: '8px' } } });
@@ -982,14 +998,14 @@ export default {
       if (!this.canSubmit) return;
       const payload = buildCheckoutPayload(this.state, { propertyId: this.propertyId != null && this.propertyId !== '' ? this.propertyId : undefined, propertyKey: this.propertyKey || undefined, sandbox: this.isSandbox });
       // Summary step with Stripe: go to payment step (form loads there)
-      if (this.state.step === 'summary' && this.stripePublishableKey && typeof this.effectiveCreatePaymentIntent === 'function') {
+      if (this.state.step === 'summary' && this.effectiveStripePublishableKey && typeof this.effectiveCreatePaymentIntent === 'function') {
         this.apiError = null;
         this.goToStep('payment');
         return;
       }
 
       // Payment step: confirm payment
-      if (this.state.step === 'payment' && this.stripePublishableKey && typeof this.effectiveCreatePaymentIntent === 'function' && this.stripeInstance && this.elementsInstance) {
+      if (this.state.step === 'payment' && this.effectiveStripePublishableKey && typeof this.effectiveCreatePaymentIntent === 'function' && this.stripeInstance && this.elementsInstance) {
         this.apiError = null;
         this.stripeInstance.confirmPayment({
           elements: this.elementsInstance,

package/dist/vue/styles.css

@@ -612,7 +612,7 @@
   max-width: calc(100vw - 2em);
   box-sizing: border-box;
   z-index: 10;
-  background: var(--card-solid);
+  background: var(--bg);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 1em;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuitee/booking-widget",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "A beautiful, customizable booking widget modal that can be embedded in any website. Supports vanilla JavaScript, React, and Vue.js.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -34,7 +34,7 @@
     "build": "node scripts/generate-stripe-config.js && npm run build:css && npm run build:js && npm run build:react && npm run build:vue && npm run build:types",
     "build:stripe-config": "node scripts/generate-stripe-config.js",
     "build:css": "mkdir -p dist dist/core && cp src/core/styles.css dist/booking-widget.css && cp src/core/styles.css dist/core/styles.css",
-    "build:js": "mkdir -p dist dist/core dist/utils && cp src/core/widget.js dist/booking-widget.js && cp src/core/booking-api.js dist/core/booking-api.js && cp src/core/stripe-config.js dist/core/stripe-config.js && cp src/core/color-utils.js dist/core/color-utils.js && cp src/utils/config-service.js dist/utils/config-service.js && node scripts/inject-widget-bootstrap.js && cp src/standalone/bundle.js dist/booking-widget-standalone.js && node scripts/build-standalone.js && npm run build:entry",
+    "build:js": "mkdir -p dist dist/core dist/utils && cp src/core/widget.js dist/booking-widget.js && cp src/core/booking-api.js dist/core/booking-api.js && cp src/core/stripe-config.js dist/core/stripe-config.js && cp src/core/color-utils.js dist/core/color-utils.js && cp src/utils/config-service.js dist/utils/config-service.js && cp src/utils/analytics.js dist/utils/analytics.js && node scripts/inject-widget-bootstrap.js && cp src/standalone/bundle.js dist/booking-widget-standalone.js && node scripts/build-standalone.js && npm run build:entry",
     "build:react": "mkdir -p dist/react && cp src/react/BookingWidget.jsx dist/react/BookingWidget.jsx && cp src/core/styles.css dist/react/styles.css",
     "build:vue": "mkdir -p dist/vue && cp src/vue/BookingWidget.vue dist/vue/BookingWidget.vue && cp src/core/styles.css dist/vue/styles.css",
     "build:types": "npm run build:types:main && npm run build:types:react && npm run build:types:vue",