@nuitee/booking-widget 1.0.8 → 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.8/dist/booking-widget.css">
-<script src="https://cdn.thehotelplanet.com/booking-widget/v1.0.8/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.8/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

@@ -287,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' : ''}`
@@ -302,7 +316,7 @@ function createBookingApi(config = {}) {
       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;
@@ -361,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²';
@@ -986,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,
           })
@@ -1222,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();
@@ -1232,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 || '');
@@ -1248,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.js

@@ -208,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 = [];
@@ -489,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).
@@ -506,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 || '');
@@ -522,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

@@ -286,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' : ''}`
@@ -301,7 +315,7 @@ function createBookingApi(config = {}) {
       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;
@@ -360,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²';

package/dist/react/BookingWidget.jsx

@@ -56,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());
@@ -113,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);
@@ -121,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;
@@ -276,6 +279,9 @@ const BookingWidget = ({
       setConfigLoading(false);
       setConfigLoaded(false);
       setRuntimeWidgetStyles({});
+      setRuntimeS3BaseUrl('');
+      setRuntimeStripePublishableKey('');
+      setRuntimeApiBaseUrl('');
       return;
     }
     let cancelled = false;
@@ -283,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/utils/config-service.js

@@ -16,9 +16,47 @@ const _nativeFetch = typeof fetch === 'function' ? fetch : /* istanbul ignore ne
 
 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.
@@ -31,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;
 }
 
@@ -74,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()) {
@@ -87,9 +126,9 @@ 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' : ''}`;
@@ -101,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

@@ -549,6 +549,8 @@ export default {
       configLoaded: false,
       configError: null,
       runtimeWidgetStyles: {},
+      runtimeS3BaseUrl: '',
+      runtimeStripePublishableKey: '',
       calendarMonth: new Date().getMonth(),
       calendarYear: new Date().getFullYear(),
       pickState: 0,
@@ -590,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 : {};
@@ -603,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;
@@ -805,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;
       }
@@ -866,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 {
@@ -878,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' } } });
@@ -987,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuitee/booking-widget",
-  "version": "1.0.8",
+  "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",