@nuitee/booking-widget 1.0.0 → 1.0.2

package/README.md

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

package/USAGE.md

@@ -170,22 +170,22 @@ Use the **standalone bundle** when you are not using a bundler: load the script
 
 ### 1. Load assets
 
+Load the script and CSS from the CDN:
+
 ```html
-<link rel="stylesheet" href="node_modules/@nuitee/booking-widget/dist/booking-widget.css">
-<script src="node_modules/@nuitee/booking-widget/dist/booking-widget-standalone.js"></script>
+<link rel="stylesheet" href="https://cdn.thehotelplanet.com/booking-widget/v1.0.0/dist/booking-widget.css">
+<script src="https://cdn.thehotelplanet.com/booking-widget/v1.0.0/dist/booking-widget-standalone.js"></script>
 
 <div id="booking-widget-container"></div>
 ```
 
-Replace `node_modules/...` with your actual path or a CDN URL if you host the built files.
-
 ### 2. Create the widget
 
 ```html
 <script>
   const widget = new BookingWidget({
     containerId: 'booking-widget-container',
-    cssUrl: 'node_modules/@nuitee/booking-widget/dist/booking-widget.css',
+    cssUrl: 'https://cdn.thehotelplanet.com/booking-widget/v1.0.0/dist/booking-widget.css',
     propertyKey: 'your-property-key',
     onOpen: () => console.log('Opened'),
     onClose: () => console.log('Closed'),

package/dist/booking-widget-standalone.js

@@ -1,4 +1,4 @@
-(function(){'use strict';window.__BOOKING_WIDGET_API_BASE_URL__='https://ai.thehotelplanet.com';window.__BOOKING_WIDGET_STRIPE_KEY__='pk_test_51T0Se5EvQaQIixshRA8gbsI40NubMGwHlSWZmQM2LAx3jpVO0ThzVifqdTiMeGOyBfLNe8V9G8POGu8SjkvWOStM00H0i1U3uz';})();
+(function(){'use strict';window.__BOOKING_WIDGET_API_BASE_URL__='https://ai.thehotelplanet.com';window.__BOOKING_WIDGET_STRIPE_KEY__='pk_live_51T0SdzEj1UJpIPAMQQUH55w3Dj1E07CihP3iTOVO1IM4mMVAJvE86BiUmzGQKuNPPl05btyY39lRca8PSzRzZ9K700CncmOGQ0';})();
 /**
  * Shared Booking API layer for the @nuitee/booking-widget.
  * Used by Vanilla JS, Vue, and React variants so integration lives in one place.
@@ -198,6 +198,7 @@ function deriveRatePolicyDetail(avRate) {
  * @param {string} [config.s3BaseUrl] - Base URL for room images (e.g. from VITE_AWS_S3_PATH).
  * @param {string|number} [config.propertyId] - Property ID (legacy). Prefer propertyKey for proxy endpoints.
  * @param {string} [config.propertyKey] - Property key for proxy endpoints (e.g. VITE_PROPERTY_KEY). Used in /proxy/availability and /proxy/ari-properties?key=.
+ * @param {string} [config.mode] - 'sandbox' to pass sandbox=true on all proxy/API calls; omit or 'live' to not pass it.
  * @param {string} [config.currency] - Currency code (e.g. 'MAD'). Default 'MAD'.
  * @param {Object} [config.headers] - Optional. Static headers for each request (e.g. { 'X-API-Key': '...' }).
  * @param {function(): Object} [config.getHeaders] - Optional. Return headers for each request (merged after headers). Use for dynamic headers.
@@ -216,6 +217,7 @@ function createBookingApi(config = {}) {
   if (rawKey && !propertyKey && typeof console !== 'undefined' && console.warn) {
     console.warn('[booking-api] Property key must start with "book_engine_". Ignoring invalid value. Set VITE_PROPERTY_KEY in your .env (see .env.example).');
   }
+  const sandbox = config.mode === 'sandbox';
   const currency = config.currency || 'MAD';
   const staticHeaders = config.headers || {};
   const getHeaders = config.getHeaders || (() => ({}));
@@ -280,8 +282,11 @@ function createBookingApi(config = {}) {
     // Fetch get_properties first to get currency_code (e.g. 'EUR') and room details
     let propertyRooms = {};
     let propertyCurrency = currency;
+    const propQuery = propertyKey
+      ? `key=${encodeURIComponent(propertyKey)}${sandbox ? '&sandbox=true' : ''}`
+      : '';
     const propFullUrl = propertyKey
-      ? `${availabilityBaseUrl}/proxy/ari-properties?key=${encodeURIComponent(propertyKey)}`
+      ? `${availabilityBaseUrl}/proxy/ari-properties?${propQuery}`
       : propertyBaseUrl
         ? `${propertyBaseUrl}/ari/get_properties?id=${encodeURIComponent(propertyId)}`
         : `/ari/get_properties?id=${encodeURIComponent(propertyId)}`;
@@ -308,7 +313,7 @@ function createBookingApi(config = {}) {
     };
 
     const availabilityPath = propertyKey
-      ? `/proxy/availability?key=${encodeURIComponent(propertyKey)}`
+      ? `/proxy/availability?key=${encodeURIComponent(propertyKey)}${sandbox ? '&sandbox=true' : ''}`
       : `/api/calendar/booking_engine/${propertyId}/availability`;
     const data = await request('POST', availabilityPath, body, availabilityBaseUrl);
     if (data && typeof data === 'object' && (data.error || data.message)) {
@@ -521,14 +526,15 @@ function computeCheckoutTotal(state, nights) {
  * Use this when integrating Stripe (amount/currency for Payment Intent) and your booking API (external_booking + internal_booking; add stripe_token after payment success).
  *
  * @param {Object} state - Widget state: checkIn, checkOut, rooms, occupancies, selectedRoom, selectedRate, guest
- * @param {Object} [options] - { propertyId: string|number, propertyKey: string, clientBookingReference?: string }
- * @returns {{ stripe: { amount: number, currency: string }, external_booking: Object, internal_booking: Object }}
+ * @param {Object} [options] - { propertyId: string|number, propertyKey: string, clientBookingReference?: string, sandbox?: boolean }
+ * @returns {{ stripe: { amount: number, currency: string }, external_booking: Object, internal_booking: Object, sandbox?: boolean }}
  */
 function buildCheckoutPayload(state, options = {}) {
   const propertyId = options.propertyId != null ? String(options.propertyId) : '';
   const rawKey = options.propertyKey != null && options.propertyKey !== '' ? String(options.propertyKey).trim() : '';
   const propertyKey = rawKey && rawKey.startsWith('book_engine_') ? rawKey : '';
   const clientBookingReference = options.clientBookingReference || 'nuitee-booking-widget';
+  const sandbox = options.sandbox === true;
 
   const checkIn = state.checkIn;
   const checkOut = state.checkOut;
@@ -592,7 +598,7 @@ function buildCheckoutPayload(state, options = {}) {
     room_id: state.selectedRoom?.id ?? '',
   };
 
-  return {
+  const out = {
     stripe: {
       amount: total,
       currency: currency.toLowerCase(),
@@ -600,6 +606,8 @@ function buildCheckoutPayload(state, options = {}) {
     external_booking,
     internal_booking,
   };
+  if (sandbox) out.sandbox = true;
+  return out;
 }
 
 /**
@@ -608,12 +616,13 @@ function buildCheckoutPayload(state, options = {}) {
  * Response: { clientSecret, confirmationToken }
  *
  * @param {Object} state - Widget state: checkIn, checkOut, rooms, occupancies, selectedRoom, selectedRate, guest
- * @param {Object} [options] - { propertyKey: string }
- * @returns {{ rate_identifier: string, key: string, metadata: Object }}
+ * @param {Object} [options] - { propertyKey: string, sandbox?: boolean }
+ * @returns {{ rate_identifier: string, key: string, metadata: Object, sandbox?: boolean }}
  */
 function buildPaymentIntentPayload(state, options = {}) {
   const rawKey = options.propertyKey != null && options.propertyKey !== '' ? String(options.propertyKey).trim() : '';
   const propertyKey = rawKey && rawKey.startsWith('book_engine_') ? rawKey : '';
+  const sandbox = options.sandbox === true;
   const checkIn = state.checkIn;
   const checkOut = state.checkOut;
   const nights = checkIn && checkOut
@@ -633,7 +642,7 @@ function buildPaymentIntentPayload(state, options = {}) {
     ...(Array.isArray(o.childrenAges) && o.childrenAges.length ? { child_ages: o.childrenAges } : {}),
   }));
 
-  return {
+  const out = {
     rate_identifier: rateIdentifier,
     key: propertyKey,
     metadata: {
@@ -651,6 +660,8 @@ function buildPaymentIntentPayload(state, options = {}) {
       source_transaction: 'booking engine',
     },
   };
+  if (sandbox) out.sandbox = true;
+  return out;
 }
 
 /**
@@ -819,28 +830,30 @@ if (typeof window !== 'undefined') {
 
   // Copy the BookingWidget class from core/widget.js
   // This is a simplified version that will be bundled
-  const apiBase = (typeof window !== 'undefined' && window.__BOOKING_WIDGET_API_BASE_URL__) ? window.__BOOKING_WIDGET_API_BASE_URL__ : '';
   const builtInStripeKey = (typeof window !== 'undefined' && window.__BOOKING_WIDGET_STRIPE_KEY__) ? window.__BOOKING_WIDGET_STRIPE_KEY__ : '';
-  const builtInCreatePaymentIntent = (apiBase && typeof window !== 'undefined')
-    ? function (payload) {
-        return fetch(apiBase.replace(/\/$/, '') + '/proxy/create-payment-intent', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(payload),
-        }).then(function (r) {
-          if (!r.ok) throw new Error(r.statusText || 'Payment intent failed');
-          return r.json();
-        }).then(function (data) {
-          return {
-            clientSecret: data.clientSecret ?? data.client_secret ?? data.data?.clientSecret ?? data.data?.client_secret ?? data.paymentIntent?.client_secret,
-            confirmationToken: data.confirmationToken ?? data.confirmation_token ?? data.data?.confirmationToken ?? data.data?.confirmation_token,
-          };
-        });
-      }
-    : null;
 
   class BookingWidget {
     constructor(options = {}) {
+      const defaultApiBase = (typeof window !== 'undefined' && window.__BOOKING_WIDGET_API_BASE_URL__) ? window.__BOOKING_WIDGET_API_BASE_URL__ : '';
+      const builtInCreatePaymentIntent = (!options.createPaymentIntent && defaultApiBase && typeof window !== 'undefined')
+        ? function (payload) {
+          const url = defaultApiBase.replace(/\/$/, '') + '/proxy/create-payment-intent' + (options.mode === 'sandbox' ? '?sandbox=true' : '');
+          return fetch(url, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(payload),
+          }).then(function (r) {
+            if (!r.ok) throw new Error(r.statusText || 'Payment intent failed');
+            return r.json();
+          }).then(function (data) {
+            return {
+              clientSecret: data.clientSecret ?? data.client_secret ?? data.data?.clientSecret ?? data.data?.client_secret ?? data.paymentIntent?.client_secret,
+              confirmationToken: data.confirmationToken ?? data.confirmation_token ?? data.data?.confirmationToken ?? data.data?.confirmation_token,
+            };
+          });
+        }
+        : null;
+
       this.options = {
         containerId: options.containerId || 'booking-widget-container',
         onOpen: options.onOpen || null,
@@ -849,10 +862,11 @@ if (typeof window !== 'undefined') {
         onBeforeConfirm: options.onBeforeConfirm || null,
         createPaymentIntent: options.createPaymentIntent || builtInCreatePaymentIntent,
         onBookingComplete: options.onBookingComplete || null,
-        confirmationBaseUrl: options.confirmationBaseUrl || (typeof window !== 'undefined' && window.__BOOKING_WIDGET_API_BASE_URL__) || 'https://ai.thehotelplanet.com',
+        confirmationBaseUrl: options.confirmationBaseUrl || defaultApiBase || 'https://ai.thehotelplanet.com',
         stripePublishableKey: options.stripePublishableKey || builtInStripeKey || null,
         propertyId: options.propertyId != null && options.propertyId !== '' ? options.propertyId : null,
         propertyKey: options.propertyKey || null,
+        mode: options.mode || null,
         bookingApi: options.bookingApi || null,
         cssUrl: options.cssUrl || null,
         // Color customization options
@@ -902,11 +916,11 @@ if (typeof window !== 'undefined') {
 
       this.ROOMS = [];
       this.RATES = [];
-      const defaultApiBase = (typeof window !== 'undefined' && window.__BOOKING_WIDGET_API_BASE_URL__) ? window.__BOOKING_WIDGET_API_BASE_URL__ : '';
       this.bookingApi = this.options.bookingApi || ((this.options.propertyKey || defaultApiBase) && typeof window.createBookingApi === 'function'
         ? window.createBookingApi({
             availabilityBaseUrl: defaultApiBase || '',
             propertyKey: this.options.propertyKey || undefined,
+            mode: this.options.mode === 'sandbox' ? 'sandbox' : undefined,
           })
         : null);
 
@@ -1042,6 +1056,7 @@ if (typeof window !== 'undefined') {
       this.widget.innerHTML = `
         <button class="booking-widget-close">${iconHTML('x', '1.5em')}</button>
         <div class="booking-widget-step-indicator"></div>
+        <div class="booking-widget-property-key-message" role="alert" style="display:none;margin:0 1.5em 1em;padding:0.75em 1em;background:var(--destructive,#ef4444);color:#fff;border-radius:8px;font-size:0.9em;"></div>
         <div class="booking-widget-step-content"></div>
       `;
       this.widget.querySelector('.booking-widget-close').addEventListener('click', () => this.close());
@@ -1098,12 +1113,29 @@ if (typeof window !== 'undefined') {
 
     render() {
       this.renderStepIndicator();
+      this.renderPropertyKeyMessage();
       this.renderStepContent();
     }
 
+    renderPropertyKeyMessage() {
+      const el = this.widget.querySelector('.booking-widget-property-key-message');
+      if (!el) return;
+      const key = this.options.propertyKey;
+      const missing = !key || (typeof key === 'string' && !key.trim());
+      if (missing) {
+        el.style.display = 'block';
+        el.innerHTML = 'The propertyKey is missing. Please provide it as a prop to load rooms from the API.';
+      } else {
+        el.style.display = 'none';
+      }
+    }
+
     renderStepIndicator() {
       const el = this.widget.querySelector('.booking-widget-step-indicator');
-      if (this.state.step === 'confirmation') {
+      if (!el) return;
+      const key = this.options.propertyKey;
+      const hasPropertyKey = key != null && key !== '' && (typeof key !== 'string' || key.trim() !== '');
+      if (!hasPropertyKey || this.state.step === 'confirmation') {
         el.innerHTML = '';
         return;
       }
@@ -1125,6 +1157,13 @@ if (typeof window !== 'undefined') {
 
     renderStepContent() {
       const el = this.widget.querySelector('.booking-widget-step-content');
+      if (!el) return;
+      const key = this.options.propertyKey;
+      const hasPropertyKey = key != null && key !== '' && (typeof key !== 'string' || key.trim() !== '');
+      if (!hasPropertyKey) {
+        el.innerHTML = '';
+        return;
+      }
       switch (this.state.step) {
         case 'dates':
           el.innerHTML = this.renderDatesStep();
@@ -1472,7 +1511,7 @@ if (typeof window !== 'undefined') {
               <span class="rate-name">${[r.policy, ...(r.benefits || [])].filter(Boolean).join(' ')}</span>
               <div class="rate-benefits"><span class="amenity-tag">${r.rate_code ?? r.name}</span></div>
             </div>
-            <div class="rate-price"><strong>$ ${total.toLocaleString()}</strong><small>total</small></div>
+            <div class="rate-price"><strong>${(typeof window.formatPrice === 'function' ? window.formatPrice(total, this.state.selectedRoom?.currency) : (this.state.selectedRoom?.currency || 'USD') + ' ' + total.toLocaleString())}</strong><small>total</small></div>
           </div>
           <p class="rate-desc">${r.description}</p>
         </div>`;
@@ -1536,18 +1575,20 @@ if (typeof window !== 'undefined') {
                 const roomTotal = Math.round(this.state.selectedRoom.basePrice * this.state.selectedRate.priceModifier * nights * rooms);
                 const fees = this.state.selectedRate.fees ?? [];
                 const allIncluded = fees.length > 0 && fees.every(f => f.included) && (!this.state.selectedRate.vat || this.state.selectedRate.vat.included);
+                const currency = this.state.selectedRoom?.currency || 'USD';
+                const fmt = (a) => (typeof window.formatPrice === 'function' ? window.formatPrice(a, currency) : currency + ' ' + Math.round(Number(a) || 0).toLocaleString());
                 let rows = fees.map(f => {
                   const amt = f.perNight ? f.amount * nights * rooms : f.amount;
                   const badge = f.included ? '<span class="summary-fee-badge">Included</span>' : '<span class="summary-fee-badge summary-fee-badge--excluded">Excluded</span>';
-                  return `<div class="summary-row summary-row--fee"><span class="summary-fee-label">${f.name} ${badge}</span><span>$ ` + Math.round(amt).toLocaleString() + `</span></div>`;
+                  return `<div class="summary-row summary-row--fee"><span class="summary-fee-label">${f.name} ${badge}</span><span>${fmt(amt)}</span></div>`;
                 }).join('');
                 const vat = this.state.selectedRate.vat;
                 if (vat) {
                   const showVatBadge = vat.value !== 0 && vat.value != null;
                   const vatBadge = showVatBadge ? (vat.included ? '<span class="summary-fee-badge">Included</span>' : '<span class="summary-fee-badge summary-fee-badge--excluded">Excluded</span>') : '';
-                  rows += `<div class="summary-row summary-row--fee"><span class="summary-fee-label">VAT${vatBadge ? ' ' + vatBadge : ''}</span><span>$ ` + Math.round(vat.value || 0).toLocaleString() + `</span></div>`;
+                  rows += `<div class="summary-row summary-row--fee"><span class="summary-fee-label">VAT${vatBadge ? ' ' + vatBadge : ''}</span><span>${fmt(vat.value || 0)}</span></div>`;
                 }
-                return `<div class="summary-row"><span>Room total</span><span>$ ` + Math.round(roomTotal).toLocaleString() + `</span></div>
+                return `<div class="summary-row"><span>Room total</span><span>${fmt(roomTotal)}</span></div>
                 <div class="summary-fees">
                   <p class="summary-fees-heading">Fees &amp; taxes</p>
                   ${allIncluded ? '<p class="summary-fees-note">Included in your rate</p>' : ''}
@@ -1556,7 +1597,7 @@ if (typeof window !== 'undefined') {
               })() : ''}
               <div class="summary-total">
                 <span class="summary-total-label">Total</span>
-                <span class="summary-total-price">$ ${total.toLocaleString()}</span>
+                <span class="summary-total-price">${(typeof window.formatPrice === 'function' ? window.formatPrice(total, this.state.selectedRoom?.currency) : (this.state.selectedRoom?.currency || 'USD') + ' ' + total.toLocaleString())}</span>
               </div>
               ${this.apiError ? `<p style="color:var(--destructive, #ef4444);font-size:0.85em;margin-top:0.5em;">${this.apiError}</p>` : ''}
               <button type="button" class="btn-primary" style="max-width:100%;margin-top:1em;" ${!canSubmit ? 'disabled' : ''} onclick="window.bookingWidgetInstance.confirmReservation(event)">${iconHTML('creditCard', '1.2em')}&nbsp; ${buttonLabel}</button>
@@ -1588,7 +1629,7 @@ if (typeof window !== 'undefined') {
               <h3>Amount due</h3>
               <div class="payment-total-row">
                 <span class="payment-total-label">Total</span>
-                <span class="payment-total-amount">$ ${total.toLocaleString()}</span>
+                <span class="payment-total-amount">${(typeof window.formatPrice === 'function' ? window.formatPrice(total, this.state.selectedRoom?.currency) : (this.state.selectedRoom?.currency || 'USD') + ' ' + total.toLocaleString())}</span>
               </div>
               <button type="button" class="btn-primary" ${buttonDisabled} onclick="window.bookingWidgetInstance.confirmReservation(event)">${iconHTML('creditCard', '1.2em')}&nbsp; ${buttonLabel}</button>
               <p class="secure-note">${iconHTML('lock', '1em')} Secure & encrypted booking</p>
@@ -1606,7 +1647,8 @@ if (typeof window !== 'undefined') {
       if (this.state.step !== 'payment' || !this.checkoutShowPaymentForm || !this.options.stripePublishableKey || typeof this.options.createPaymentIntent !== 'function') return;
       const buildPaymentIntentPayload = typeof window !== 'undefined' && window.buildPaymentIntentPayload;
       const buildCheckoutPayload = typeof window !== 'undefined' && window.buildCheckoutPayload;
-      const paymentIntentPayload = buildPaymentIntentPayload ? buildPaymentIntentPayload(this.state, { propertyKey: this.options.propertyKey ?? undefined }) : (buildCheckoutPayload ? buildCheckoutPayload(this.state, { propertyId: this.options.propertyId ?? undefined, propertyKey: this.options.propertyKey ?? undefined }) : null);
+      const sandbox = this.options.mode === 'sandbox';
+      const paymentIntentPayload = buildPaymentIntentPayload ? buildPaymentIntentPayload(this.state, { propertyKey: this.options.propertyKey ?? undefined, sandbox }) : (buildCheckoutPayload ? buildCheckoutPayload(this.state, { propertyId: this.options.propertyId ?? undefined, propertyKey: this.options.propertyKey ?? undefined, sandbox }) : null);
       if (!paymentIntentPayload) return;
       const self = this;
       this.paymentElementReady = false;
@@ -1685,7 +1727,8 @@ if (typeof window !== 'undefined') {
       const canSubmit = this.state.guest.firstName && this.state.guest.lastName && this.state.guest.email;
       if (!canSubmit) return;
       const buildPayload = typeof window !== 'undefined' && window.buildCheckoutPayload;
-      const payload = buildPayload ? buildPayload(this.state, { propertyId: this.options.propertyId ?? undefined, propertyKey: this.options.propertyKey ?? undefined }) : null;
+      const sandbox = this.options.mode === 'sandbox';
+      const payload = buildPayload ? buildPayload(this.state, { propertyId: this.options.propertyId ?? undefined, propertyKey: this.options.propertyKey ?? undefined, sandbox }) : null;
       const hasStripe = this.hasStripe;
 
       if (this.state.step === 'summary' && hasStripe) {
@@ -1745,7 +1788,7 @@ if (typeof window !== 'undefined') {
       const token = String(confirmationToken || '').trim();
       if (!token) throw new Error('Missing confirmation token');
       const base = String(this.options.confirmationBaseUrl || 'https://ai.thehotelplanet.com').replace(/\/$/, '');
-      const url = base + '/proxy/confirmation/' + encodeURIComponent(token);
+      const url = base + '/proxy/confirmation/' + encodeURIComponent(token) + (this.options.mode === 'sandbox' ? '?sandbox=true' : '');
       const res = await fetch(url, { method: 'POST' });
       if (!res.ok) throw new Error(await res.text());
       return await res.json();

package/dist/booking-widget.js

@@ -1,4 +1,4 @@
-(function(){'use strict';window.__BOOKING_WIDGET_API_BASE_URL__='https://ai.thehotelplanet.com';window.__BOOKING_WIDGET_STRIPE_KEY__='pk_test_51T0Se5EvQaQIixshRA8gbsI40NubMGwHlSWZmQM2LAx3jpVO0ThzVifqdTiMeGOyBfLNe8V9G8POGu8SjkvWOStM00H0i1U3uz';})();
+(function(){'use strict';window.__BOOKING_WIDGET_API_BASE_URL__='https://ai.thehotelplanet.com';window.__BOOKING_WIDGET_STRIPE_KEY__='pk_live_51T0SdzEj1UJpIPAMQQUH55w3Dj1E07CihP3iTOVO1IM4mMVAJvE86BiUmzGQKuNPPl05btyY39lRca8PSzRzZ9K700CncmOGQ0';})();
 // ===== Icons (Lucide/shadcn) =====
 const icons = {
   calendar: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>`,
@@ -64,9 +64,11 @@ class BookingWidget {
   constructor(options = {}) {
     const apiBase = (typeof window !== 'undefined' && window.__BOOKING_WIDGET_API_BASE_URL__) ? window.__BOOKING_WIDGET_API_BASE_URL__ : '';
     const builtInStripeKey = (typeof window !== 'undefined' && window.__BOOKING_WIDGET_STRIPE_KEY__) ? window.__BOOKING_WIDGET_STRIPE_KEY__ : '';
+    const builtInMode = options.mode;
     const builtInCreatePaymentIntent = (apiBase && typeof window !== 'undefined')
       ? function (payload) {
-          return fetch(apiBase.replace(/\/$/, '') + '/proxy/create-payment-intent', {
+          const url = apiBase.replace(/\/$/, '') + '/proxy/create-payment-intent' + (builtInMode === 'sandbox' ? '?sandbox=true' : '');
+          return fetch(url, {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify(payload),
@@ -99,6 +101,8 @@ class BookingWidget {
       apiSecret: options.apiSecret || null,
       propertyId: options.propertyId != null && options.propertyId !== '' ? options.propertyId : null,
       propertyKey: options.propertyKey || null,
+      /** 'sandbox' to pass sandbox=true on all proxy/API calls; omit or 'live' to not pass it. */
+      mode: options.mode || null,
       availabilityBaseUrl: options.availabilityBaseUrl || null,
       propertyBaseUrl: options.propertyBaseUrl || null,
       s3BaseUrl: options.s3BaseUrl || null,
@@ -125,6 +129,7 @@ class BookingWidget {
           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,
         })
       : null);
@@ -334,6 +339,7 @@ class BookingWidget {
     this.widget.innerHTML = `
       <button class="booking-widget-close">${iconHTML('x', '1.5em')}</button>
       <div class="booking-widget-step-indicator"></div>
+      <div class="booking-widget-property-key-message" role="alert" style="display:none;margin:0 1.5em 1em;padding:0.75em 1em;background:var(--destructive,#ef4444);color:#fff;border-radius:8px;font-size:0.9em;"></div>
       <div class="booking-widget-step-content"></div>
     `;
     this.widget.querySelector('.booking-widget-close').addEventListener('click', () => this.close());
@@ -392,6 +398,7 @@ class BookingWidget {
     window.__bookingWidgetRendering = true;
     try {
       this.renderStepIndicator();
+      this.renderPropertyKeyMessage();
       this.renderStepContent();
     } finally {
       window.__bookingWidgetRendering = false;
@@ -402,7 +409,9 @@ class BookingWidget {
   renderStepIndicator() {
     const el = this.widget.querySelector('.booking-widget-step-indicator');
     if (!el) return;
-    if (this.state.step === 'confirmation') {
+    const key = this.options.propertyKey;
+    const hasPropertyKey = key != null && key !== '' && (typeof key !== 'string' || key.trim() !== '');
+    if (!hasPropertyKey || this.state.step === 'confirmation') {
       el.innerHTML = '';
       return;
     }
@@ -422,9 +431,29 @@ class BookingWidget {
     el.innerHTML = html;
   }
 
+  renderPropertyKeyMessage() {
+    const el = this.widget.querySelector('.booking-widget-property-key-message');
+    if (!el) return;
+    const key = this.options.propertyKey;
+    const missing = !key || (typeof key === 'string' && !key.trim());
+    if (missing) {
+      el.style.display = 'block';
+      el.innerHTML = 'The propertyKey is missing. Please provide it as a prop to load rooms from the API.';
+    } else {
+      el.style.display = 'none';
+    }
+  }
+
   // ===== Step Renderers =====
   renderStepContent() {
     const el = this.widget.querySelector('.booking-widget-step-content');
+    if (!el) return;
+    const key = this.options.propertyKey;
+    const hasPropertyKey = key != null && key !== '' && (typeof key !== 'string' || key.trim() !== '');
+    if (!hasPropertyKey) {
+      el.innerHTML = '';
+      return;
+    }
     switch (this.state.step) {
       case 'dates':
         el.innerHTML = this.renderDatesStep();
@@ -949,9 +978,10 @@ class BookingWidget {
     if (this.state.step !== 'payment' || !this.checkoutShowPaymentForm || !this.options.stripePublishableKey || typeof this.options.createPaymentIntent !== 'function') return;
     const buildPaymentIntentPayload = typeof window !== 'undefined' && window.buildPaymentIntentPayload;
     const buildCheckoutPayload = typeof window !== 'undefined' && window.buildCheckoutPayload;
+    const sandbox = this.options.mode === 'sandbox';
     const paymentIntentPayload = buildPaymentIntentPayload
-      ? buildPaymentIntentPayload(this.state, { propertyKey: this.options.propertyKey ?? undefined })
-      : (buildCheckoutPayload ? buildCheckoutPayload(this.state, { propertyId: this.options.propertyId ?? undefined, propertyKey: this.options.propertyKey ?? undefined }) : null);
+      ? buildPaymentIntentPayload(this.state, { propertyKey: this.options.propertyKey ?? undefined, sandbox })
+      : (buildCheckoutPayload ? buildCheckoutPayload(this.state, { propertyId: this.options.propertyId ?? undefined, propertyKey: this.options.propertyKey ?? undefined, sandbox }) : null);
     if (!paymentIntentPayload) return;
     const self = this;
     this.paymentElementReady = false;
@@ -1030,7 +1060,8 @@ class BookingWidget {
     const canSubmit = this.state.guest.firstName && this.state.guest.lastName && this.state.guest.email;
     if (!canSubmit) return;
     const buildPayload = typeof window !== 'undefined' && window.buildCheckoutPayload;
-    const payload = buildPayload ? buildPayload(this.state, { propertyId: this.options.propertyId ?? undefined, propertyKey: this.options.propertyKey ?? undefined }) : null;
+    const sandbox = this.options.mode === 'sandbox';
+    const payload = buildPayload ? buildPayload(this.state, { propertyId: this.options.propertyId ?? undefined, propertyKey: this.options.propertyKey ?? undefined, sandbox }) : null;
     const hasStripe = this.options.stripePublishableKey && typeof this.options.createPaymentIntent === 'function';
 
     // Summary step with Stripe: go to payment step (form loads there)
@@ -1177,7 +1208,7 @@ class BookingWidget {
     const token = String(confirmationToken || '').trim();
     if (!token) throw new Error('Missing confirmation token');
     const base = String(this.options.confirmationBaseUrl || 'https://ai.thehotelplanet.com').replace(/\/$/, '');
-    const url = `${base}/proxy/confirmation/${encodeURIComponent(token)}`;
+    const url = `${base}/proxy/confirmation/${encodeURIComponent(token)}${this.options.mode === 'sandbox' ? '?sandbox=true' : ''}`;
     const res = await fetch(url, { method: 'POST' });
     if (!res.ok) throw new Error(await res.text());
     return await res.json();

package/dist/core/booking-api.js

@@ -197,6 +197,7 @@ function deriveRatePolicyDetail(avRate) {
  * @param {string} [config.s3BaseUrl] - Base URL for room images (e.g. from VITE_AWS_S3_PATH).
  * @param {string|number} [config.propertyId] - Property ID (legacy). Prefer propertyKey for proxy endpoints.
  * @param {string} [config.propertyKey] - Property key for proxy endpoints (e.g. VITE_PROPERTY_KEY). Used in /proxy/availability and /proxy/ari-properties?key=.
+ * @param {string} [config.mode] - 'sandbox' to pass sandbox=true on all proxy/API calls; omit or 'live' to not pass it.
  * @param {string} [config.currency] - Currency code (e.g. 'MAD'). Default 'MAD'.
  * @param {Object} [config.headers] - Optional. Static headers for each request (e.g. { 'X-API-Key': '...' }).
  * @param {function(): Object} [config.getHeaders] - Optional. Return headers for each request (merged after headers). Use for dynamic headers.
@@ -215,6 +216,7 @@ function createBookingApi(config = {}) {
   if (rawKey && !propertyKey && typeof console !== 'undefined' && console.warn) {
     console.warn('[booking-api] Property key must start with "book_engine_". Ignoring invalid value. Set VITE_PROPERTY_KEY in your .env (see .env.example).');
   }
+  const sandbox = config.mode === 'sandbox';
   const currency = config.currency || 'MAD';
   const staticHeaders = config.headers || {};
   const getHeaders = config.getHeaders || (() => ({}));
@@ -279,8 +281,11 @@ function createBookingApi(config = {}) {
     // Fetch get_properties first to get currency_code (e.g. 'EUR') and room details
     let propertyRooms = {};
     let propertyCurrency = currency;
+    const propQuery = propertyKey
+      ? `key=${encodeURIComponent(propertyKey)}${sandbox ? '&sandbox=true' : ''}`
+      : '';
     const propFullUrl = propertyKey
-      ? `${availabilityBaseUrl}/proxy/ari-properties?key=${encodeURIComponent(propertyKey)}`
+      ? `${availabilityBaseUrl}/proxy/ari-properties?${propQuery}`
       : propertyBaseUrl
         ? `${propertyBaseUrl}/ari/get_properties?id=${encodeURIComponent(propertyId)}`
         : `/ari/get_properties?id=${encodeURIComponent(propertyId)}`;
@@ -307,7 +312,7 @@ function createBookingApi(config = {}) {
     };
 
     const availabilityPath = propertyKey
-      ? `/proxy/availability?key=${encodeURIComponent(propertyKey)}`
+      ? `/proxy/availability?key=${encodeURIComponent(propertyKey)}${sandbox ? '&sandbox=true' : ''}`
       : `/api/calendar/booking_engine/${propertyId}/availability`;
     const data = await request('POST', availabilityPath, body, availabilityBaseUrl);
     if (data && typeof data === 'object' && (data.error || data.message)) {
@@ -520,14 +525,15 @@ function computeCheckoutTotal(state, nights) {
  * Use this when integrating Stripe (amount/currency for Payment Intent) and your booking API (external_booking + internal_booking; add stripe_token after payment success).
  *
  * @param {Object} state - Widget state: checkIn, checkOut, rooms, occupancies, selectedRoom, selectedRate, guest
- * @param {Object} [options] - { propertyId: string|number, propertyKey: string, clientBookingReference?: string }
- * @returns {{ stripe: { amount: number, currency: string }, external_booking: Object, internal_booking: Object }}
+ * @param {Object} [options] - { propertyId: string|number, propertyKey: string, clientBookingReference?: string, sandbox?: boolean }
+ * @returns {{ stripe: { amount: number, currency: string }, external_booking: Object, internal_booking: Object, sandbox?: boolean }}
  */
 function buildCheckoutPayload(state, options = {}) {
   const propertyId = options.propertyId != null ? String(options.propertyId) : '';
   const rawKey = options.propertyKey != null && options.propertyKey !== '' ? String(options.propertyKey).trim() : '';
   const propertyKey = rawKey && rawKey.startsWith('book_engine_') ? rawKey : '';
   const clientBookingReference = options.clientBookingReference || 'nuitee-booking-widget';
+  const sandbox = options.sandbox === true;
 
   const checkIn = state.checkIn;
   const checkOut = state.checkOut;
@@ -591,7 +597,7 @@ function buildCheckoutPayload(state, options = {}) {
     room_id: state.selectedRoom?.id ?? '',
   };
 
-  return {
+  const out = {
     stripe: {
       amount: total,
       currency: currency.toLowerCase(),
@@ -599,6 +605,8 @@ function buildCheckoutPayload(state, options = {}) {
     external_booking,
     internal_booking,
   };
+  if (sandbox) out.sandbox = true;
+  return out;
 }
 
 /**
@@ -607,12 +615,13 @@ function buildCheckoutPayload(state, options = {}) {
  * Response: { clientSecret, confirmationToken }
  *
  * @param {Object} state - Widget state: checkIn, checkOut, rooms, occupancies, selectedRoom, selectedRate, guest
- * @param {Object} [options] - { propertyKey: string }
- * @returns {{ rate_identifier: string, key: string, metadata: Object }}
+ * @param {Object} [options] - { propertyKey: string, sandbox?: boolean }
+ * @returns {{ rate_identifier: string, key: string, metadata: Object, sandbox?: boolean }}
  */
 function buildPaymentIntentPayload(state, options = {}) {
   const rawKey = options.propertyKey != null && options.propertyKey !== '' ? String(options.propertyKey).trim() : '';
   const propertyKey = rawKey && rawKey.startsWith('book_engine_') ? rawKey : '';
+  const sandbox = options.sandbox === true;
   const checkIn = state.checkIn;
   const checkOut = state.checkOut;
   const nights = checkIn && checkOut
@@ -632,7 +641,7 @@ function buildPaymentIntentPayload(state, options = {}) {
     ...(Array.isArray(o.childrenAges) && o.childrenAges.length ? { child_ages: o.childrenAges } : {}),
   }));
 
-  return {
+  const out = {
     rate_identifier: rateIdentifier,
     key: propertyKey,
     metadata: {
@@ -650,6 +659,8 @@ function buildPaymentIntentPayload(state, options = {}) {
       source_transaction: 'booking engine',
     },
   };
+  if (sandbox) out.sandbox = true;
+  return out;
 }
 
 /**

package/dist/core/stripe-config.js

@@ -2,7 +2,7 @@
  * Config from CONFIG_URL (default https://ai.thehotelplanet.com/load-config). No .env used.
  * Property key is NOT from load-config; installers must set it (VITE_PROPERTY_KEY in app .env or propertyKey option).
  */
-export const STRIPE_PUBLISHABLE_KEY = 'pk_test_51T0Se5EvQaQIixshRA8gbsI40NubMGwHlSWZmQM2LAx3jpVO0ThzVifqdTiMeGOyBfLNe8V9G8POGu8SjkvWOStM00H0i1U3uz';
+export const STRIPE_PUBLISHABLE_KEY = 'pk_live_51T0SdzEj1UJpIPAMQQUH55w3Dj1E07CihP3iTOVO1IM4mMVAJvE86BiUmzGQKuNPPl05btyY39lRca8PSzRzZ9K700CncmOGQ0';
 export const API_BASE_URL = 'https://ai.thehotelplanet.com';
 export const VITE_CONFIG_BASE_URL = 'https://ai.thehotelplanet.com/api';
 export const VITE_AWS_S3_PATH = 'https://nuitee-s3-temp.s3.us-west-1.amazonaws.com';

package/dist/react/BookingWidget.jsx

@@ -31,6 +31,8 @@ const BookingWidget = ({
   apiSecret = '',
   propertyId = '',
   propertyKey = '',
+  /** 'sandbox' to pass sandbox=true on all proxy/API calls; omit or 'live' to not pass it. */
+  mode = '',
   availabilityBaseUrl = '',
   propertyBaseUrl = '',
   s3BaseUrl = '',
@@ -47,20 +49,23 @@ const BookingWidget = ({
   const env = typeof import.meta !== 'undefined' && import.meta.env ? import.meta.env : {};
   const apiBase = (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());
   const createPaymentIntent = useMemo(() => {
     if (typeof createPaymentIntentProp === 'function') return createPaymentIntentProp;
     if (!effectivePaymentIntentUrl) return null;
     return async (payload) => {
+      const url = effectivePaymentIntentUrl + (isSandbox ? '?sandbox=true' : '');
       const headers = { 'Content-Type': 'application/json' };
-      if (effectivePaymentIntentUrl.includes('ngrok')) headers['ngrok-skip-browser-warning'] = 'true';
-      const res = await fetch(effectivePaymentIntentUrl, { method: 'POST', headers, body: JSON.stringify(payload) });
+      if (url.includes('ngrok')) headers['ngrok-skip-browser-warning'] = 'true';
+      const res = await fetch(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;
       const confirmationToken = data.confirmationToken ?? data.confirmation_token ?? data.data?.confirmationToken ?? data.data?.confirmation_token;
       return { clientSecret, confirmationToken };
     };
-  }, [createPaymentIntentProp, effectivePaymentIntentUrl]);
+  }, [createPaymentIntentProp, effectivePaymentIntentUrl, isSandbox]);
   const onBookingComplete = useMemo(() => onBookingCompleteProp ?? null, [onBookingCompleteProp]);
   const hasStripe = Boolean(stripePublishableKey && typeof createPaymentIntent === 'function');
   const STEPS = useMemo(() => buildSteps(hasStripe), [hasStripe]);
@@ -116,11 +121,12 @@ const BookingWidget = ({
         s3BaseUrl: effectiveS3BaseUrl || undefined,
         propertyId: propertyId || undefined,
         propertyKey: propertyKey || undefined,
+        mode: mode === 'sandbox' ? 'sandbox' : undefined,
         headers: apiSecret ? { 'X-API-Key': apiSecret } : undefined,
       });
     }
     return null;
-  }, [bookingApiProp, effectiveApiBaseUrl, effectiveAvailabilityBaseUrl, effectivePropertyBaseUrl, effectiveS3BaseUrl, apiSecret, propertyId, propertyKey]);
+  }, [bookingApiProp, effectiveApiBaseUrl, effectiveAvailabilityBaseUrl, effectivePropertyBaseUrl, effectiveS3BaseUrl, apiSecret, propertyId, propertyKey, mode]);
 
   useEffect(() => {
     if (isOpen && onOpen) onOpen();
@@ -145,7 +151,7 @@ const BookingWidget = ({
       setPaymentElementReady(false);
       return;
     }
-    const paymentIntentPayload = buildPaymentIntentPayload(state, { propertyKey: propertyKey || undefined });
+    const paymentIntentPayload = buildPaymentIntentPayload(state, { propertyKey: propertyKey || undefined, sandbox: isSandbox });
     let mounted = true;
     setPaymentElementReady(false);
     setApiError(null);
@@ -182,7 +188,7 @@ const BookingWidget = ({
       }
       stripeRef.current = null;
     };
-  }, [state.step, checkoutShowPaymentForm, stripePublishableKey, createPaymentIntent, onBookingComplete, state.checkIn, state.checkOut, state.rooms, state.occupancies, state.selectedRoom?.id, state.selectedRate?.id, state.guest, propertyId, propertyKey]);
+  }, [state.step, checkoutShowPaymentForm, stripePublishableKey, createPaymentIntent, onBookingComplete, state.checkIn, state.checkOut, state.rooms, state.occupancies, state.selectedRoom?.id, state.selectedRate?.id, state.guest, propertyId, propertyKey, isSandbox]);
 
   // After Stripe confirms payment, poll confirmation endpoint every 2s until status === 'confirmed'
   useEffect(() => {
@@ -192,7 +198,7 @@ const BookingWidget = ({
     const pollOnce = async () => {
       if (cancelled) return;
       try {
-        const url = `${effectiveConfirmationBaseUrl}/proxy/confirmation/${encodeURIComponent(String(confirmationToken).trim())}`;
+        const url = `${effectiveConfirmationBaseUrl}/proxy/confirmation/${encodeURIComponent(String(confirmationToken).trim())}${isSandbox ? '?sandbox=true' : ''}`;
         const res = await fetch(url, { method: 'POST' });
         if (!res.ok) throw new Error(await res.text());
         const data = await res.json();
@@ -212,7 +218,7 @@ const BookingWidget = ({
       cancelled = true;
       if (timer) clearTimeout(timer);
     };
-  }, [state.step, confirmationToken, effectiveConfirmationBaseUrl]);
+  }, [state.step, confirmationToken, effectiveConfirmationBaseUrl, isSandbox]);
 
   // Apply custom colors
   useEffect(() => {
@@ -431,7 +437,7 @@ const BookingWidget = ({
   const confirmReservation = () => {
     const canSubmit = state.guest.firstName && state.guest.lastName && state.guest.email;
     if (!canSubmit) return;
-    const payload = buildCheckoutPayload(state, { propertyId: propertyId || undefined, propertyKey: propertyKey || undefined });
+    const payload = buildCheckoutPayload(state, { propertyId: propertyId || undefined, propertyKey: propertyKey || undefined, sandbox: isSandbox });
     // Summary step with Stripe: go to payment step (payment form loads there)
     if (state.step === 'summary' && stripePublishableKey && typeof createPaymentIntent === 'function') {
       setApiError(null);
@@ -1175,7 +1181,12 @@ const BookingWidget = ({
         onTransitionEnd={handleTransitionEnd}
       >
         <button className="booking-widget-close" onClick={requestClose}><X size={24} /></button>
-        {renderStepIndicator()}
+        {hasPropertyKey && renderStepIndicator()}
+        {(!propertyKey || (typeof propertyKey === 'string' && !propertyKey.trim())) ? (
+          <div className="booking-widget-property-key-message" role="alert" style={{ margin: '1.5em', padding: '1em', background: 'var(--destructive, #ef4444)', color: '#fff', borderRadius: '8px', fontSize: '0.9em' }}>
+            The propertyKey is missing. Please provide it as a prop to load rooms from the API.
+          </div>
+        ) : (
         <div className="booking-widget-step-content">
           {state.step === 'dates' && renderDatesStep()}
           {state.step === 'rooms' && renderRoomsStep()}
@@ -1184,6 +1195,7 @@ const BookingWidget = ({
           {state.step === 'payment' && renderPaymentStep()}
           {state.step === 'confirmation' && renderConfirmationStep()}
         </div>
+        )}
       </div>
     </>
   );

package/dist/vue/BookingWidget.vue

@@ -10,7 +10,7 @@
       <button class="booking-widget-close" @click="requestClose">
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
       </button>
-      <div v-if="state.step !== 'confirmation'" class="booking-widget-step-indicator">
+      <div v-if="hasPropertyKey && state.step !== 'confirmation'" class="booking-widget-step-indicator">
         <template v-for="(step, i) in STEPS" :key="step.key">
           <div class="step-item">
             <span 
@@ -34,7 +34,10 @@
           </span>
         </template>
       </div>
-      <div class="booking-widget-step-content">
+      <div v-if="!propertyKey || !String(propertyKey).trim()" class="booking-widget-property-key-message" role="alert" style="margin: 1.5em; padding: 1em; background: var(--destructive, #ef4444); color: #fff; border-radius: 8px; font-size: 0.9em;">
+        The propertyKey is missing. Please provide it as a prop to load rooms from the API.
+      </div>
+      <div v-else class="booking-widget-step-content">
         <!-- Dates Step -->
         <div v-if="state.step === 'dates'">
           <h2 class="step-title">Plan Your Stay</h2>
@@ -467,6 +470,8 @@ export default {
     propertyId: { type: [String, Number], default: '' },
     /** Property key/hash for decrypt/pref (pass from your app instead of env). */
     propertyKey: { type: String, default: '' },
+    /** 'sandbox' to pass sandbox=true on all proxy/API calls; omit or 'live' to not pass it. */
+    mode: { type: String, default: '' },
     availabilityBaseUrl: { type: String, default: '' },
     propertyBaseUrl: { type: String, default: '' },
     s3BaseUrl: { type: String, default: '' },
@@ -556,9 +561,10 @@ export default {
       const url = this.effectivePaymentIntentUrl;
       if (!url) return null;
       return async (payload) => {
+        const requestUrl = url + (this.isSandbox ? '?sandbox=true' : '');
         const headers = { 'Content-Type': 'application/json' };
-        if (url.includes('ngrok')) headers['ngrok-skip-browser-warning'] = 'true';
-        const res = await fetch(url, { method: 'POST', headers, body: JSON.stringify(payload) });
+        if (requestUrl.includes('ngrok')) headers['ngrok-skip-browser-warning'] = 'true';
+        const res = await fetch(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;
@@ -566,6 +572,12 @@ export default {
         return { clientSecret, confirmationToken };
       };
     },
+    isSandbox() {
+      return this.mode === 'sandbox';
+    },
+    hasPropertyKey() {
+      return !!(this.propertyKey != null && this.propertyKey !== '' && String(this.propertyKey).trim() !== '');
+    },
     bookingApiRef() {
       if (this.bookingApi && typeof this.bookingApi.fetchRooms === 'function') return this.bookingApi;
       if ((this.effectiveApiBaseUrl || this.propertyKey) && typeof createBookingApi === 'function') {
@@ -576,6 +588,7 @@ export default {
           s3BaseUrl: this.effectiveS3BaseUrl || undefined,
           propertyId: this.propertyId != null && this.propertyId !== '' ? String(this.propertyId) : undefined,
           propertyKey: this.propertyKey || undefined,
+          mode: this.mode === 'sandbox' ? 'sandbox' : undefined,
           headers: this.apiSecret ? { 'X-API-Key': this.apiSecret } : undefined,
         });
       }
@@ -721,7 +734,7 @@ export default {
     async fetchConfirmationDetails(token) {
       const t = String(token || '').trim();
       if (!t) throw new Error('Missing confirmation token');
-      const url = `${this.effectiveConfirmationBaseUrl}/proxy/confirmation/${encodeURIComponent(t)}`;
+      const url = `${this.effectiveConfirmationBaseUrl}/proxy/confirmation/${encodeURIComponent(t)}${this.isSandbox ? '?sandbox=true' : ''}`;
       const res = await fetch(url, { method: 'POST' });
       if (!res.ok) throw new Error(await res.text());
       return await res.json();
@@ -750,7 +763,7 @@ export default {
     },
     async loadStripePaymentElement() {
       if (this.state.step !== 'payment' || !this.checkoutShowPaymentForm || !this.stripePublishableKey || typeof this.effectiveCreatePaymentIntent !== 'function') return;
-      const paymentIntentPayload = buildPaymentIntentPayload(this.state, { propertyKey: this.propertyKey || undefined });
+      const paymentIntentPayload = buildPaymentIntentPayload(this.state, { propertyKey: this.propertyKey || undefined, sandbox: this.isSandbox });
       this.paymentElementReady = false;
       try {
         await this.$nextTick();
@@ -859,7 +872,7 @@ export default {
     },
     confirmReservation() {
       if (!this.canSubmit) return;
-      const payload = buildCheckoutPayload(this.state, { propertyId: this.propertyId != null && this.propertyId !== '' ? this.propertyId : undefined, propertyKey: this.propertyKey || undefined });
+      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') {
         this.apiError = null;

package/package.json

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