@zonos/elements 1.2.2 → 1.2.3

package/dist/cjs/{cart-d4b52ae8.js → cart-55512e32.js}

@@ -92,6 +92,7 @@ const { onChange: onChange$1, reset: reset$1, state: stripeStore, } = zonosStore
   stripeAddressEventData: null,
   stripeAddressUsedWhenFetchingLC: null,
   stripeElements: null,
+  stripeElementsOptions: null,
   stripeLinkElement: null,
   stripeLinkEventData: null,
   stripeLinkUsedWhenFetchingLC: null,
@@ -132,13 +133,22 @@ const initStripeElements = async (props) => {
       overridePrimaryColor: props === null || props === void 0 ? void 0 : props.overridePrimaryColor,
       overrideTheme: props === null || props === void 0 ? void 0 : props.overrideTheme,
     });
+    // compare with the previous options to see if we need to update
+    const isSameOptions = JSON.stringify(stripeOptions) ===
+      JSON.stringify(stripeStore.stripeElementsOptions);
     if (!stripeStore.stripeElements) {
       // init stripe elements if it doesn't exist
       stripeStore.stripeElements = (_a = stripeStore.stripe) === null || _a === void 0 ? void 0 : _a.elements(stripeOptions);
+      // save stripe elements options for later comparison
+      stripeStore.stripeElementsOptions = stripeOptions;
+      localization.log('Stripe elements initialized');
+      return;
     }
-    else {
+    if (!isSameOptions) {
       // update elements with new option if it already exists
       stripeStore.stripeElements.update(stripeOptions);
+      // save stripe elements options for later comparison
+      stripeStore.stripeElementsOptions = stripeOptions;
     }
     localization.log('Stripe elements initialized');
   }

package/dist/cjs/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const cart = require('./cart-d4b52ae8.js');
+const cart = require('./cart-55512e32.js');
 require('./zonosStore-a430ec5b.js');
 require('./index-9542d2e7.js');
 require('./localization-d7fe7290.js');

package/dist/cjs/zonos-address_2.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9542d2e7.js');
-const cart = require('./cart-d4b52ae8.js');
+const cart = require('./cart-55512e32.js');
 const localization = require('./localization-d7fe7290.js');
 require('./zonosStore-a430ec5b.js');
 require('./isDarkColor-f3446afd.js');

package/dist/cjs/zonos-cart-items_10.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9542d2e7.js');
-const cart = require('./cart-d4b52ae8.js');
+const cart = require('./cart-55512e32.js');
 const localization = require('./localization-d7fe7290.js');
 const getBorderRadius = require('./getBorderRadius-fdd605c6.js');
 const submitGtag = require('./submitGtag-d65003f9.js');

package/dist/cjs/zonos-checkout.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9542d2e7.js');
-const cart = require('./cart-d4b52ae8.js');
+const cart = require('./cart-55512e32.js');
 const localization = require('./localization-d7fe7290.js');
 const zonosStore = require('./zonosStore-a430ec5b.js');
 const submitGtag = require('./submitGtag-d65003f9.js');
@@ -135,6 +135,8 @@ const ZonosCheckout = class {
         e.preventDefault();
         e.stopPropagation();
         localization.log('zonos checkout button clicked');
+        // start loading
+        cart.stripeStore.isFetchingSession = true;
         this.open = true;
         try {
           // buildCartDetail need to be catch since it may throw error
@@ -145,6 +147,8 @@ const ZonosCheckout = class {
           submitGtag.submitGtag('zonos-checkout-start');
         }
         catch (err) {
+          // stop loading
+          cart.stripeStore.isFetchingSession = false;
           cart.cartStoreUpdateToErrorState({
             messages: [
               localization.translate("There's been an error creating your checkout session. Please reload and try again or contact support if the error persists"),

package/dist/cjs/zonos-controller.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9542d2e7.js');
-const cart = require('./cart-d4b52ae8.js');
+const cart = require('./cart-55512e32.js');
 const localization = require('./localization-d7fe7290.js');
 const zonosStore = require('./zonosStore-a430ec5b.js');
 require('./isDarkColor-f3446afd.js');
@@ -27,7 +27,7 @@ const injectCheckoutElement = () => {
     document.body.appendChild(newCheckoutElement);
   }
 };
-const initCheckout = async (config) => {
+const initCheckout = (config) => {
   if (!config.placeOrderButtonSelector) {
     // do nothing if checkout button anchor is not set
     return;
@@ -66,6 +66,44 @@ const ZonosController = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.stripeInitEvent = index.createEvent(this, "stripeInitEvent", 7);
+    this.disablePlaceOrderButtons = ({ disable }) => {
+      const placeOrderButtonSelector = zonosStore.zonosStore.checkoutSettings.placeOrderButtonSelector;
+      if (!placeOrderButtonSelector) {
+        return;
+      }
+      const disableEvent = (e) => {
+        const target = e.target;
+        // prevent default and propagation when the item has disabled attribute
+        if (target.getAttribute('disabled')) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      };
+      const placeOrderButton = document.querySelectorAll(placeOrderButtonSelector);
+      placeOrderButton.forEach(button => {
+        if (disable) {
+          button.setAttribute('disabled', 'true');
+          // prevent the selector to perform default action when it's disabled
+          button.addEventListener('click', disableEvent);
+        }
+        else {
+          button.removeAttribute('disabled');
+          // clean up the event listener
+          button.removeEventListener('click', disableEvent);
+        }
+      });
+      // only auto enable if autoEnable is true and the state is enable
+      if (disable) {
+        setTimeout(() => {
+          // release it if zonos is not initialized after 5 seconds (this is to prevent the place order button from being disabled forever due to api)
+          placeOrderButton.forEach(button => {
+            button.removeAttribute('disabled');
+            // clean up the event listener if exists
+            button.removeEventListener('click', disableEvent);
+          });
+        }, 5000);
+      }
+    };
     this.config = undefined;
     this.zonosApiKey = undefined;
   }
@@ -81,6 +119,10 @@ const ZonosController = class {
     cart.stripeStore.stripe = stripe;
     void initCheckout(zonosStore.zonosStore.checkoutSettings);
     localization.log('init checkout element');
+    // enable place order button after checkout is loaded
+    this.disablePlaceOrderButtons({
+      disable: false,
+    });
   }
   /**
    * Init zonos notification
@@ -103,6 +145,10 @@ const ZonosController = class {
         localization.log('Failed to load zonos settings. This domain may not have access', 'warn');
         return;
       }
+      // disable place order button until checkout is loaded
+      this.disablePlaceOrderButtons({
+        disable: true,
+      });
       // init zonos notification
       this.initZonosNotification();
       // load default setting if fail to load user setting

package/dist/cjs/zonos-payment.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9542d2e7.js');
-const cart = require('./cart-d4b52ae8.js');
+const cart = require('./cart-55512e32.js');
 require('./zonosStore-a430ec5b.js');
 require('./localization-d7fe7290.js');
 require('./isDarkColor-f3446afd.js');

package/dist/cjs/zonos-shipping-rich-radio.cjs.entry.js

@@ -8,7 +8,7 @@ const classes = require('./classes-b7918f56.js');
 const getBorderRadius = require('./getBorderRadius-fdd605c6.js');
 const isColorVariable = require('./isColorVariable-c1ed7303.js');
 
-const zonosShippingRichRadioCss = ":host{font-family:Inter;display:block}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host input{margin:0;accent-color:var(--selected-border-color, var(--amino-blue-600))}:host .zonos--shipping-rich-radio-item{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;padding:var(--amino-space-16);-ms-flex-align:center;align-items:center;gap:var(--amino-space-16);cursor:pointer;border:1px solid var(--amino-gray-200)}:host .zonos--shipping-rich-radio-item:first-child{border-top-left-radius:var(--border-radius, var(--amino-radius-10));border-top-right-radius:var(--border-radius, var(--amino-radius-10))}:host .zonos--shipping-rich-radio-item:last-child{border-bottom-right-radius:var(--border-radius, var(--amino-radius-10))}:host .zonos--shipping-rich-radio-item:not(:last-child){border-bottom:none}:host .zonos--shipping-rich-radio-item.selected{outline:1px solid var(--selected-border-color, var(--amino-blue-600));outline-offset:-1px}:host .zonos--shipping-info{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex:1;flex:1}:host .zonos--shipping-detail{-ms-flex:1;flex:1}:host .zonos--sub-detail{display:-ms-inline-flexbox;display:inline-flex;gap:8px;-ms-flex-wrap:wrap;flex-wrap:wrap}";
+const zonosShippingRichRadioCss = ":host{font-family:Inter;display:block}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host input{margin:0;accent-color:var(--selected-border-color, var(--amino-blue-600))}:host .zonos--shipping-rich-radio-item{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;padding:var(--amino-space-16);-ms-flex-align:center;align-items:center;gap:var(--amino-space-16);cursor:pointer;border:1px solid var(--amino-gray-200)}:host .zonos--shipping-rich-radio-item:first-child{border-top-left-radius:var(--border-radius, var(--amino-radius-10));border-top-right-radius:var(--border-radius, var(--amino-radius-10))}:host .zonos--shipping-rich-radio-item:last-child{border-bottom-right-radius:var(--border-radius, var(--amino-radius-10));border-bottom-left-radius:var(--border-radius, var(--amino-radius-10))}:host .zonos--shipping-rich-radio-item:not(:last-child){border-bottom:none}:host .zonos--shipping-rich-radio-item.selected{outline:1px solid var(--selected-border-color, var(--amino-blue-600));outline-offset:-1px}:host .zonos--shipping-info{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex:1;flex:1}:host .zonos--shipping-detail{-ms-flex:1;flex:1}:host .zonos--sub-detail{display:-ms-inline-flexbox;display:inline-flex;gap:8px;-ms-flex-wrap:wrap;flex-wrap:wrap}";
 
 const ZonosShippingRichRadio = class {
   constructor(hostRef) {

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout.js

@@ -130,6 +130,8 @@ export class ZonosCheckout {
         e.preventDefault();
         e.stopPropagation();
         log('zonos checkout button clicked');
+        // start loading
+        stripeStore.isFetchingSession = true;
         this.open = true;
         try {
           // buildCartDetail need to be catch since it may throw error
@@ -140,6 +142,8 @@ export class ZonosCheckout {
           submitGtag('zonos-checkout-start');
         }
         catch (err) {
+          // stop loading
+          stripeStore.isFetchingSession = false;
           cartStoreUpdateToErrorState({
             messages: [
               translate("There's been an error creating your checkout session. Please reload and try again or contact support if the error persists"),

package/dist/collection/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.css

@@ -50,6 +50,7 @@
 }
 :host .zonos--shipping-rich-radio-item:last-child {
   border-bottom-right-radius: var(--border-radius, var(--amino-radius-10));
+  border-bottom-left-radius: var(--border-radius, var(--amino-radius-10));
 }
 :host .zonos--shipping-rich-radio-item:not(:last-child) {
   border-bottom: none;

package/dist/collection/components/main/zonos-controller.js

@@ -8,6 +8,44 @@ import { initHello } from "../utils/hello/initHello";
 import { log } from "../utils/logging/log";
 export class ZonosController {
   constructor() {
+    this.disablePlaceOrderButtons = ({ disable }) => {
+      const placeOrderButtonSelector = zonosStore.checkoutSettings.placeOrderButtonSelector;
+      if (!placeOrderButtonSelector) {
+        return;
+      }
+      const disableEvent = (e) => {
+        const target = e.target;
+        // prevent default and propagation when the item has disabled attribute
+        if (target.getAttribute('disabled')) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      };
+      const placeOrderButton = document.querySelectorAll(placeOrderButtonSelector);
+      placeOrderButton.forEach(button => {
+        if (disable) {
+          button.setAttribute('disabled', 'true');
+          // prevent the selector to perform default action when it's disabled
+          button.addEventListener('click', disableEvent);
+        }
+        else {
+          button.removeAttribute('disabled');
+          // clean up the event listener
+          button.removeEventListener('click', disableEvent);
+        }
+      });
+      // only auto enable if autoEnable is true and the state is enable
+      if (disable) {
+        setTimeout(() => {
+          // release it if zonos is not initialized after 5 seconds (this is to prevent the place order button from being disabled forever due to api)
+          placeOrderButton.forEach(button => {
+            button.removeAttribute('disabled');
+            // clean up the event listener if exists
+            button.removeEventListener('click', disableEvent);
+          });
+        }, 5000);
+      }
+    };
     this.config = undefined;
     this.zonosApiKey = undefined;
   }
@@ -23,6 +61,10 @@ export class ZonosController {
     stripeStore.stripe = stripe;
     void initCheckout(zonosStore.checkoutSettings);
     log('init checkout element');
+    // enable place order button after checkout is loaded
+    this.disablePlaceOrderButtons({
+      disable: false,
+    });
   }
   /**
    * Init zonos notification
@@ -45,6 +87,10 @@ export class ZonosController {
         log('Failed to load zonos settings. This domain may not have access', 'warn');
         return;
       }
+      // disable place order button until checkout is loaded
+      this.disablePlaceOrderButtons({
+        disable: true,
+      });
       // init zonos notification
       this.initZonosNotification();
       // load default setting if fail to load user setting

package/dist/collection/components/store/checkout/stripe.js

@@ -20,6 +20,7 @@ const { onChange, reset, state: stripeStore, } = createStore(() => ({
   stripeAddressEventData: null,
   stripeAddressUsedWhenFetchingLC: null,
   stripeElements: null,
+  stripeElementsOptions: null,
   stripeLinkElement: null,
   stripeLinkEventData: null,
   stripeLinkUsedWhenFetchingLC: null,
@@ -60,13 +61,22 @@ const initStripeElements = async (props) => {
       overridePrimaryColor: props === null || props === void 0 ? void 0 : props.overridePrimaryColor,
       overrideTheme: props === null || props === void 0 ? void 0 : props.overrideTheme,
     });
+    // compare with the previous options to see if we need to update
+    const isSameOptions = JSON.stringify(stripeOptions) ===
+      JSON.stringify(stripeStore.stripeElementsOptions);
     if (!stripeStore.stripeElements) {
       // init stripe elements if it doesn't exist
       stripeStore.stripeElements = (_a = stripeStore.stripe) === null || _a === void 0 ? void 0 : _a.elements(stripeOptions);
+      // save stripe elements options for later comparison
+      stripeStore.stripeElementsOptions = stripeOptions;
+      log('Stripe elements initialized');
+      return;
     }
-    else {
+    if (!isSameOptions) {
       // update elements with new option if it already exists
       stripeStore.stripeElements.update(stripeOptions);
+      // save stripe elements options for later comparison
+      stripeStore.stripeElementsOptions = stripeOptions;
     }
     log('Stripe elements initialized');
   }

package/dist/collection/components/utils/checkout/initCheckout.js

@@ -8,7 +8,7 @@ const injectCheckoutElement = () => {
     document.body.appendChild(newCheckoutElement);
   }
 };
-export const initCheckout = async (config) => {
+export const initCheckout = (config) => {
   if (!config.placeOrderButtonSelector) {
     // do nothing if checkout button anchor is not set
     return;

package/dist/collection/environment.js

@@ -3,6 +3,9 @@
 import { createEnv } from "@t3-oss/env-core";
 import { config } from "dotenv";
 import { z } from "zod";
+// rollup and ts somehow can't compile this with absolute path
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import { generateVercelDeployUrl } from "./utils/generateVercelDeployUrl";
 export const isClientSide = typeof window !== 'undefined';
 export const inProdEnvironment = process.env.NODE_ENV === 'production';
 export const inTestEnvironment = process.env.NODE_ENV === 'test';
@@ -15,7 +18,6 @@ let packageVersion = `${process.env.npm_package_version}` ||
   process.env.NEXT_PUBLIC_ZONOS_PACKAGE_VERSION;
 const UNPKG_ZONOS_URL = `https://unpkg.com/@zonos/elements@${packageVersion}`;
 export const formattedUrl = ({ packageVersion: _packageVersion, type = 'full', url, }) => {
-  var _a;
   if (!url) {
     // return origin value so t3 can throw error when it's empty
     return url;
@@ -29,17 +31,11 @@ export const formattedUrl = ({ packageVersion: _packageVersion, type = 'full', u
   // only run this in Vercel, ignore in CI
   if (isVercelPreview || (inVercel && type === 'vercel-git')) {
     // use vercel branch_url instead of the production url
-    const vercelGitBranchUrl = process.env.VERCEL_BRANCH_URL;
-    if (!vercelGitBranchUrl) {
-      throw new Error('Fail to get vercel branch url');
+    const vercelGitCommitMessage = process.env.VERCEL_GIT_COMMIT_MESSAGE;
+    const branchName = process.env.VERCEL_GIT_COMMIT_REF;
+    if (!vercelGitCommitMessage || !branchName) {
+      throw new Error('Fail to get vercel commit ref or branch name');
     }
-    // extract the git suffix from the vercel git branch url
-    // ex: zonos-elements-storybook-git-fix-e2e-cron-test-zonos.vercel.app => git-fix-e2e-cron-test-zonos.vercel.app
-    const gitSuffix = (_a = /.*-git-(.*)/g.exec(vercelGitBranchUrl)) === null || _a === void 0 ? void 0 : _a[1];
-    if (!gitSuffix) {
-      throw new Error(`Fail to get git suffix from url ${url}`);
-    }
-    // replace the git suffix with the project name
     // get project name based on the `${url}`
     const isStorybook = 
     // url: storybook.js.zonos.com
@@ -56,7 +52,12 @@ export const formattedUrl = ({ packageVersion: _packageVersion, type = 'full', u
       : isServerless
         ? 'zonos-elements-serverless'
         : 'zonos-elements';
-    return `https://${projectName}-git-${gitSuffix}`;
+    // generate generated deploy url based on the branch name
+    const vercelGitBranchSuffix = generateVercelDeployUrl({
+      branchName,
+      projectName,
+    });
+    return `https://${vercelGitBranchSuffix}`;
   }
   // only require package version in production and in CI, so that we still can use dev url (no version prefix).
   if (!_packageVersion && (isVercelProd || inCI)) {
@@ -140,8 +141,16 @@ export const env = createEnv({
  * Env object that has all of native env variable used in code to replace them with
  * actual values from .env
  */
-export const getReplaceEnv = () => Object.keys(env).reduce((prev, curr) => {
+export const getReplaceEnv = (props) => Object.keys(env).reduce((prev, curr) => {
   const currEnv = curr;
+  const override = props === null || props === void 0 ? void 0 : props.override;
+  const foundOverride = !!override && currEnv in override;
+  // return the override value if it's found
+  if (foundOverride) {
+    // @ts-expect-error
+    prev[`process.env.${currEnv}`] = `"${override[currEnv]}"`;
+    return prev;
+  }
   if (currEnv) {
     // @ts-expect-error
     prev[`process.env.${currEnv}`] = `"${env[currEnv] || ''}"`;

package/dist/collection/scripts/zonos.js

@@ -2,7 +2,42 @@ var _a;
 import { log } from "../components/utils/logging/log";
 import { logError } from "../components/utils/logging/logError";
 import { zonosLoadStripe } from "./loadStripe";
-const ZONOS_URL = process.env.NEXT_PUBLIC_ZONOS_CDN_URL;
+// 3 hours
+const EXPIRED_QA_TIME = 3 * 60 * 60 * 1000;
+// validate the time format (yyyymmddhhmmss) in the qa params if exceeds 1 hour, don't use qa
+const isZonosQa = (() => {
+  const zonosQaTime = window.location.search.match(/\?.*(&*)zonosQa=(\d+)/);
+  if (!zonosQaTime) {
+    return false;
+  }
+  const [, , zonosQaTimeExtracted] = zonosQaTime;
+  if (!zonosQaTimeExtracted) {
+    return false;
+  }
+  const zonosQaTimeValue = parseInt(zonosQaTimeExtracted, 10);
+  const now = new Date();
+  const nowTime = now.getTime();
+  const isValid = nowTime - zonosQaTimeValue < EXPIRED_QA_TIME;
+  if (isValid) {
+    // Zonos class is not available in here yet, so we use console.warn instead of log util
+    // eslint-disable-next-line no-console
+    console.warn(`[ZONOS-WARNING] USING DEBUG DOMAIN, THIS IS ONLY FOR ZONOS DEVELOPER TO DEBUG, PLEASE REMOVE zonosQa=xxx OUT OF URL IF YOU DON'T KNOW WHAT YOU'RE DOING`);
+  }
+  else {
+    // Zonos class is not available in here yet, so we use console.warn instead of log util
+    // eslint-disable-next-line no-console
+    console.warn(`[ZONOS-WARNING] QA DOMAIN IS EXPIRED, USING PRODUCTION DOMAIN NOW`);
+    // remove the zonosQa param from url
+    const urlSearchParams = new URLSearchParams(window.location.search);
+    urlSearchParams.delete('zonosQa');
+    const newUrl = `${window.location.pathname}?${urlSearchParams.toString()}`;
+    window.history.replaceState({}, '', newUrl);
+  }
+  return isValid;
+})();
+const ZONOS_URL = isZonosQa
+  ? 'https://debug.js.zonos.com'
+  : process.env.NEXT_PUBLIC_ZONOS_CDN_URL;
 const UNPKG_ZONOS_URL = process.env.NEXT_PUBLIC_ZONOS_UNPKG_CDN_URL;
 const INTER_FONT_URL = 'https://rsms.me';
 const INTER_FONT_REGEX = /^https:\/\/rsms\.me\/inter\/inter\.css(.*)$/;
@@ -15,6 +50,7 @@ Zonos.debug = !!window.location.search.match(/\?.*(&*)zonosDebug=1/);
 Zonos.isBigCommerce = false;
 Zonos.internationalHideSelector = '';
 Zonos.version = `v${process.env.NEXT_PUBLIC_ZONOS_PACKAGE_VERSION}`;
+Zonos.getCurrentTimestamp = () => new Date().getTime();
 Zonos.init = async ({ appearance, checkoutSettings, currencyConverter, helloSettings, zonosApiKey, }) => {
   if (Zonos.doneInit) {
     // do nothing if zonos is already initializeds
@@ -26,7 +62,6 @@ Zonos.init = async ({ appearance, checkoutSettings, currencyConverter, helloSett
     return;
   }
   _a.zonosApiKey = zonosApiKey;
-  // eslint-disable-next-line no-console
   log('init zonos');
   // inject zonos cdn
   Zonos.injectZonosCdn();
@@ -56,10 +91,56 @@ Zonos.showNotification = (notification) => {
   const zonosController = document.querySelector('zonos-controller');
   void (zonosController === null || zonosController === void 0 ? void 0 : zonosController.showNotification(notification));
 };
+Zonos.disablePlaceOrderButtons = ({ autoEnable = true, disable, placeOrderButtonSelector, }) => {
+  // if placeOrderAnchor is passed in the config for checkoutSettings, disable the place order button until zonos is initialized
+  if (placeOrderButtonSelector) {
+    const placeOrderButton = document.querySelectorAll(placeOrderButtonSelector);
+    const disableEvent = (e) => {
+      const target = e.target;
+      // prevent default and propagation when the item has disabled attribute
+      if (target.getAttribute('disabled')) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+    placeOrderButton.forEach(button => {
+      if (disable) {
+        button.setAttribute('disabled', 'true');
+        // prevent the selector to perform default action when it's disabled
+        button.addEventListener('click', disableEvent);
+      }
+      else {
+        button.removeAttribute('disabled');
+        // clean up the event listener
+        button.removeEventListener('click', disableEvent);
+      }
+    });
+    // only auto enable if autoEnable is true and we are setting button disable
+    if (autoEnable && disable) {
+      setTimeout(() => {
+        // release it if zonos is not initialized after 5 seconds (this is to prevent the place order button from being disabled forever due to api)
+        placeOrderButton.forEach(button => {
+          button.removeAttribute('disabled');
+          // clean up the event listener if exists
+          button.removeEventListener('click', disableEvent);
+        });
+      }, 5000);
+    }
+  }
+};
 Zonos.injectController = ({ config, zonosApiKey, }) => {
+  var _b;
   if (document.querySelector('zonos-controller')) {
     return;
   }
+  // if placeOrderAnchor is passed in the config for checkoutSettings, disable the place order button until zonos is initialized
+  if ((_b = config.checkoutSettings) === null || _b === void 0 ? void 0 : _b.placeOrderButtonSelector) {
+    const placeOrderButtonSelector = config.checkoutSettings.placeOrderButtonSelector;
+    _a.disablePlaceOrderButtons({
+      disable: true,
+      placeOrderButtonSelector,
+    });
+  }
   const zonosController = document.createElement('zonos-controller');
   zonosController.config = config;
   zonosController.zonosApiKey = zonosApiKey;
@@ -167,7 +248,7 @@ Zonos.injectStylesheet = ({ fallBackDomain, stylesheetDomain, theRestUrl, }) =>
 };
 Zonos.injectZonosCss = () => {
   const findStyleLink = () => {
-    return !!document.querySelector(`link[rel="stylesheet"][href^="${ZONOS_URL}/dist/zonos-elements/zonos-elements.css"]`);
+    return !!document.querySelector(`link[rel="stylesheet"][href*="/dist/zonos-elements/zonos-elements.css"]`);
   };
   if (findStyleLink()) {
     // eslint-disable-next-line no-console

package/dist/collection/utils/generateVercelDeployUrl.js

@@ -1,5 +1,6 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import sha256 from "crypto-js/sha256";
+// For some reason, rollup couldn't bundle this file without specifying .js extension
+// eslint-disable-next-line import/no-extraneous-dependencies, import/extensions
+import sha256 from "crypto-js/sha256.js";
 /**
  * Generate a Vercel deploy URL based on the branch name and project name
  * @note not including https://

package/dist/components/cart.js

@@ -90,6 +90,7 @@ const { onChange: onChange$1, reset: reset$1, state: stripeStore, } = createStor
   stripeAddressEventData: null,
   stripeAddressUsedWhenFetchingLC: null,
   stripeElements: null,
+  stripeElementsOptions: null,
   stripeLinkElement: null,
   stripeLinkEventData: null,
   stripeLinkUsedWhenFetchingLC: null,
@@ -130,13 +131,22 @@ const initStripeElements = async (props) => {
       overridePrimaryColor: props === null || props === void 0 ? void 0 : props.overridePrimaryColor,
       overrideTheme: props === null || props === void 0 ? void 0 : props.overrideTheme,
     });
+    // compare with the previous options to see if we need to update
+    const isSameOptions = JSON.stringify(stripeOptions) ===
+      JSON.stringify(stripeStore.stripeElementsOptions);
     if (!stripeStore.stripeElements) {
       // init stripe elements if it doesn't exist
       stripeStore.stripeElements = (_a = stripeStore.stripe) === null || _a === void 0 ? void 0 : _a.elements(stripeOptions);
+      // save stripe elements options for later comparison
+      stripeStore.stripeElementsOptions = stripeOptions;
+      log('Stripe elements initialized');
+      return;
     }
-    else {
+    if (!isSameOptions) {
       // update elements with new option if it already exists
       stripeStore.stripeElements.update(stripeOptions);
+      // save stripe elements options for later comparison
+      stripeStore.stripeElementsOptions = stripeOptions;
     }
     log('Stripe elements initialized');
   }

package/dist/components/zonos-checkout.js

@@ -155,6 +155,8 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
         e.preventDefault();
         e.stopPropagation();
         log('zonos checkout button clicked');
+        // start loading
+        stripeStore.isFetchingSession = true;
         this.open = true;
         try {
           // buildCartDetail need to be catch since it may throw error
@@ -165,6 +167,8 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
           submitGtag('zonos-checkout-start');
         }
         catch (err) {
+          // stop loading
+          stripeStore.isFetchingSession = false;
           cartStoreUpdateToErrorState({
             messages: [
               translate("There's been an error creating your checkout session. Please reload and try again or contact support if the error persists"),