@zonos/elements 1.3.29 → 1.3.31

package/dist/cjs/index.cjs.js

@@ -40,6 +40,19 @@ const checkIfLoadVersionDomain = ({ loadScriptSrc }) => {
     return { currentLoadScriptUrl, isForceLoadVersionDomain, isWhiteListed };
 };
 
+const fallbackList = ['jsdelivr', 'unpkg', 'vercel'];
+/**
+ * Get the next cdn type in the fallback list
+ * @param currentCdnType The current cdn type that want to get the next fallback url
+ */
+const getNextFallbackUrl = (currentCdnType) => {
+    // get current index of the current fail cdn type in the fallback list
+    const currentIndex = fallbackList.indexOf(currentCdnType);
+    // get the next fallback cdn type
+    const nextFallbackCdnType = fallbackList[currentIndex + 1];
+    return nextFallbackCdnType || null;
+};
+
 /**
  * Extracts the zonosQaUrl from the url
  *
@@ -236,8 +249,10 @@ const zonosLoadUrl = (() => {
     }
     return null;
 })();
-const ZONOS_URL = zonosLoadUrl || "https://v1.3.29.js.zonos.com";
-const JS_DELIVR_ZONOS_URL = "https://cdn.jsdelivr.net/npm/@zonos/elements@1.3.29";
+const ZONOS_URL = "https://v1.3.31.js.zonos.com";
+const JS_DELIVR_ZONOS_URL = zonosLoadUrl || "https://cdn.jsdelivr.net/npm/@zonos/elements@1.3.31";
+const UNPKG_ZONOS_URL = "https://unpkg.com/@zonos/elements@1.3.31";
+const MAIN_LOAD_CDN_TYPE = 'jsdelivr';
 const INTER_FONT_URL = 'https://rsms.me';
 const GOOGLE_FONT_URL = 'https://fonts.googleapis.com';
 const INTER_FONT_REGEX = /^https:\/\/rsms\.me\/inter\/inter\.css(.*)$/;
@@ -256,7 +271,7 @@ Zonos.isBigCommerce = false;
  */
 Zonos.isNpm = true;
 Zonos.zonosQaUrl = null;
-Zonos.version = `v${"1.3.29"}`;
+Zonos.version = `v${"1.3.31"}`;
 Zonos.modeAlerted = false;
 Zonos.tempCartData = null;
 Zonos.getCurrentTimestamp = () => new Date().getTime();
@@ -400,7 +415,8 @@ Zonos.injectController = ({ config, zonosApiKey, }) => {
     _a.zonosController = zonosController;
     logError.log('Zonos controller injected!');
 };
-Zonos.injectScript = ({ fallBackDomain, isModule, scriptDomain, theRestUrl, }) => {
+Zonos.injectScript = ({ cdnType, isModule, theRestUrl, }) => {
+    const scriptDomain = _a.getZonosUrl(cdnType);
     const fullScriptUrl = `${scriptDomain}/${theRestUrl}`;
     const findScript = () => {
         const script = document.querySelector(`script[src="${fullScriptUrl}"]`);
@@ -423,55 +439,60 @@ Zonos.injectScript = ({ fallBackDomain, isModule, scriptDomain, theRestUrl, }) =
     script.src = fullScriptUrl;
     script.crossOrigin = 'anonymous';
     script.onerror = () => {
-        // only fallback if the stylesheetDomain is versioned. (https://v1.2.3.something.com || https://v1.something.com)
-        const isVersioned = /\/\/v\d+\./g.test(scriptDomain);
-        if (!isVersioned) {
-            logError.log('No need to fallback since this is not a versioned domain', 'warn');
+        logError.logError(`Failed to load ${script.src}`);
+        const nextFallbackCdnType = getNextFallbackUrl(cdnType);
+        // if next fallback cdn type exists, inject the script with the next fallback cdn type
+        if (!nextFallbackCdnType) {
             return;
         }
-        if (fallBackDomain) {
-            _a.injectScript({
-                isModule,
-                scriptDomain: fallBackDomain,
-                theRestUrl,
-            });
-        }
-        logError.logError(`Failed to load ${script.src}`);
+        _a.injectScript({
+            cdnType: nextFallbackCdnType,
+            isModule,
+            theRestUrl,
+        });
     };
     headOrBody.appendChild(script);
 };
 /**
  * We now support loading Zonos via npm. For clients using npm, `zonosBase` will always load from the server side. Therefore, the `zonosLoadUrl` defined earlier won't work since it lacks access to client-side APIs such as `window` and `document`.
  */
-Zonos.getZonosUrl = () => {
+Zonos.getZonosUrl = (type) => {
+    const getUrl = () => {
+        switch (type) {
+            case 'jsdelivr':
+                return JS_DELIVR_ZONOS_URL;
+            case 'unpkg':
+                return UNPKG_ZONOS_URL;
+            default:
+                return ZONOS_URL;
+        }
+    };
     // To ensure that sites using zonos-elements load the script from a specific domain when using npm, we need to check for zonosQaUrl and use it if available. Otherwise it will always load from the compiled versioned domain
     if (_a.isNpm) {
         const zonosQaUrl = getZonosQaUrl();
         // Default to hard coded domain if zonosQaUrl is not available
-        return zonosQaUrl || ZONOS_URL;
+        return zonosQaUrl || getUrl();
     }
-    return ZONOS_URL;
+    return getUrl();
 };
 Zonos.injectZonosCdn = () => {
-    const ZONOS_LOAD_URL = _a.getZonosUrl();
     // init zonos elements when the zonosKey is valid
     // inject esmodule cdn for zonos elements
     _a.injectScript({
-        fallBackDomain: JS_DELIVR_ZONOS_URL,
+        cdnType: MAIN_LOAD_CDN_TYPE,
         isModule: true,
-        scriptDomain: ZONOS_LOAD_URL,
         theRestUrl: 'dist/zonos-elements/zonos-elements.esm.js',
     });
     // inject non module cdn for zonos elements
     _a.injectScript({
-        fallBackDomain: JS_DELIVR_ZONOS_URL,
+        cdnType: MAIN_LOAD_CDN_TYPE,
         isModule: false,
-        scriptDomain: ZONOS_LOAD_URL,
         theRestUrl: 'dist/zonos-elements/zonos-elements.js',
     });
     logError.log('Zonos cdn script injected!');
 };
-Zonos.injectStylesheet = ({ fallBackDomain, stylesheetDomain, theRestUrl, }) => {
+Zonos.injectStylesheet = ({ cdnType, theRestUrl, }) => {
+    const stylesheetDomain = _a.getZonosUrl(cdnType);
     const headOrBody = document.head || document.body;
     // inject preconnect css for zonos elements
     const zonosCssPreconnect = document.createElement('link');
@@ -483,19 +504,16 @@ Zonos.injectStylesheet = ({ fallBackDomain, stylesheetDomain, theRestUrl, }) =>
     zonosCss.rel = 'stylesheet';
     zonosCss.href = `${stylesheetDomain}/${theRestUrl}`;
     zonosCss.onerror = () => {
-        // only fallback if the stylesheetDomain is versioned. (https://v1.2.3.something.com || https://v1.something.com)
-        const isVersioned = /\/\/v\d+\./g.test(stylesheetDomain);
-        if (!isVersioned) {
-            logError.log('No need to fallback since this is not a versioned domain', 'warn');
+        logError.logError(`Failed to load ${zonosCss.href}`);
+        const nextFallbackCdnType = getNextFallbackUrl(cdnType);
+        // if the css failed to load, try to load the next fallback cdn if exists
+        if (!nextFallbackCdnType) {
             return;
         }
-        if (fallBackDomain && isVersioned) {
-            _a.injectStylesheet({
-                stylesheetDomain: fallBackDomain,
-                theRestUrl,
-            });
-        }
-        logError.logError(`Failed to load ${zonosCss.href}`);
+        _a.injectStylesheet({
+            cdnType: nextFallbackCdnType,
+            theRestUrl,
+        });
     };
     headOrBody.appendChild(zonosCss);
 };
@@ -509,8 +527,7 @@ Zonos.injectZonosCss = () => {
     }
     // inject css for zonos elements
     _a.injectStylesheet({
-        fallBackDomain: JS_DELIVR_ZONOS_URL,
-        stylesheetDomain: ZONOS_URL,
+        cdnType: MAIN_LOAD_CDN_TYPE,
         theRestUrl: 'dist/zonos-elements/zonos-elements.css',
     });
     logError.log('Zonos style css injected!');

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

@@ -279,7 +279,6 @@ const ZonosCheckoutFinish = class {
                 this.notificationTitle = error
                     ? cart.translate('Payment failed')
                     : cart.translate("You're all set!");
-                this.notificationActionText = cart.translate('Keep shopping');
                 // override title if notification type is success
                 this.useOverrideSuccessNotification();
                 if (error) {
@@ -320,7 +319,7 @@ const ZonosCheckoutFinish = class {
         this.notificationType = 'success';
         this.notificationTitle = '';
         this.notificationMessages = [];
-        this.notificationActionText = '';
+        this.notificationActionText = cart.translate('Keep shopping');
         this.order = null;
     }
     componentDidLoad() {
@@ -342,11 +341,11 @@ const ZonosCheckoutFinish = class {
         // const totalItems = this.order?.items?.reduce((acc, item) => {
         //   return acc + item.quantity;
         // }, 0);
-        return (index.h(index.Host, { key: '24b1aac6cd07e3981e29bb401a8e1afeba45bf4a', class: "zonos--checkout-finish zonos--elements", style: {
+        return (index.h(index.Host, { key: 'c6a7067f7f9c0c58605dbf7e1ac3cc7c469d2688', class: "zonos--checkout-finish zonos--elements", style: {
                 '--border-radius': getBorderRadius.getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, this.isLoading && (index.h("div", { key: '8ddf7d87472a65b9e48504459a67b904611a6207', class: "loading-wrapper" }, index.h("zonos-spinner", { key: '01106349e974c8dccfab50c97875b5031c7becec' }))), !this.isLoading && (index.h(index.Fragment, null, index.h("div", { key: '9a274bcc2ce21bd5e14b22f0bb17cc75519bf67e', class: "zonos--group" }, this.notificationType === 'success' ? (index.h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (index.h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), index.h("zonos-text", { key: '6b8e0ff98659d87a474142766e8debd84bbcf357', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), index.h("zonos-text", { key: '204c517f0cb91a2a7f029cbb51ec4dbc73f7fbdb' }, this.notificationMessages.map(message => (index.h(index.Fragment, null, message, index.h("br", null))))), index.h("zonos-button", { key: '540dbea2ab328655fccdd7ac24ee996b1041c222', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))))));
+            } }, this.isLoading && (index.h("div", { key: '5d21e038191edb2135af4fa888c092f35d7d4d13', class: "loading-wrapper" }, index.h("zonos-spinner", { key: 'c2159b75682659e42f22f944a656a55d20e7268e' }))), !this.isLoading && (index.h(index.Fragment, null, index.h("div", { key: 'c51c81e44edad85e69468666a114021ebbd91a64', class: "zonos--group" }, this.notificationType === 'success' ? (index.h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (index.h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), index.h("zonos-text", { key: '5ce3ef22c69de3a56af46541e7f768369378328a', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), index.h("zonos-text", { key: '1bf1911133314aa6b8dd20b7da91f84be2161b86' }, this.notificationMessages.map(message => (index.h(index.Fragment, null, message, index.h("br", null))))), index.h("zonos-button", { key: 'b5a2311dcca4852b7bee7f9abfa8de868a44fc4c', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))))));
     }
     static get assetsDirs() { return ["assets"]; }
 };

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

@@ -110,7 +110,6 @@ export class ZonosCheckoutFinish {
                 this.notificationTitle = error
                     ? translate('Payment failed')
                     : translate("You're all set!");
-                this.notificationActionText = translate('Keep shopping');
                 // override title if notification type is success
                 this.useOverrideSuccessNotification();
                 if (error) {
@@ -151,7 +150,7 @@ export class ZonosCheckoutFinish {
         this.notificationType = 'success';
         this.notificationTitle = '';
         this.notificationMessages = [];
-        this.notificationActionText = '';
+        this.notificationActionText = translate('Keep shopping');
         this.order = null;
     }
     componentDidLoad() {
@@ -173,11 +172,11 @@ export class ZonosCheckoutFinish {
         // const totalItems = this.order?.items?.reduce((acc, item) => {
         //   return acc + item.quantity;
         // }, 0);
-        return (h(Host, { key: '24b1aac6cd07e3981e29bb401a8e1afeba45bf4a', class: "zonos--checkout-finish zonos--elements", style: {
+        return (h(Host, { key: 'c6a7067f7f9c0c58605dbf7e1ac3cc7c469d2688', class: "zonos--checkout-finish zonos--elements", style: {
                 '--border-radius': getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, this.isLoading && (h("div", { key: '8ddf7d87472a65b9e48504459a67b904611a6207', class: "loading-wrapper" }, h("zonos-spinner", { key: '01106349e974c8dccfab50c97875b5031c7becec' }))), !this.isLoading && (h(Fragment, null, h("div", { key: '9a274bcc2ce21bd5e14b22f0bb17cc75519bf67e', class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { key: '6b8e0ff98659d87a474142766e8debd84bbcf357', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: '204c517f0cb91a2a7f029cbb51ec4dbc73f7fbdb' }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), h("zonos-button", { key: '540dbea2ab328655fccdd7ac24ee996b1041c222', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))))));
+            } }, this.isLoading && (h("div", { key: '5d21e038191edb2135af4fa888c092f35d7d4d13', class: "loading-wrapper" }, h("zonos-spinner", { key: 'c2159b75682659e42f22f944a656a55d20e7268e' }))), !this.isLoading && (h(Fragment, null, h("div", { key: 'c51c81e44edad85e69468666a114021ebbd91a64', class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { key: '5ce3ef22c69de3a56af46541e7f768369378328a', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: '1bf1911133314aa6b8dd20b7da91f84be2161b86' }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), h("zonos-button", { key: 'b5a2311dcca4852b7bee7f9abfa8de868a44fc4c', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))))));
     }
     static get is() { return "zonos-checkout-finish"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/environment.js

@@ -17,6 +17,10 @@ export const isVercelProd = inVercel && process.env.VERCEL_ENV === 'production';
 const packageVersion = `${process.env.npm_package_version}` ||
     process.env.NEXT_PUBLIC_ZONOS_PACKAGE_VERSION;
 const JS_DELIVR_ZONOS_URL = `https://cdn.jsdelivr.net/npm/@zonos/elements@${packageVersion}`;
+/**
+ * @example https://unpkg.com/@zonos/elements@1.3.15/dist/scripts/zonos.js
+ */
+const UNPKG_ZONOS_URL = `https://unpkg.com/@zonos/elements@${packageVersion}`;
 const currentBranch = process.env.VERCEL_GIT_COMMIT_REF || process.env.BRANCH_NAME;
 export const formattedUrl = ({ branchName, inCI: _inCI, inVercel: _inVercel, isVercelPreview: _isVercelPreview, packageVersion: _packageVersion, type = 'full', url, }) => {
     if (!url) {
@@ -122,6 +126,7 @@ const envClient = {
     NEXT_PUBLIC_ZONOS_JS_DELIVR_CDN_URL: z.string(),
     NEXT_PUBLIC_ZONOS_PACKAGE_VERSION: z.string(),
     NEXT_PUBLIC_ZONOS_ROUTE_URL: z.string(),
+    NEXT_PUBLIC_ZONOS_UNPKG_CDN_URL: z.string(),
 };
 const envClientSchema = z.object(envClient);
 export const env = createEnv({
@@ -169,6 +174,7 @@ export const env = createEnv({
             type: 'major',
             url: process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL,
         }),
+        NEXT_PUBLIC_ZONOS_UNPKG_CDN_URL: UNPKG_ZONOS_URL,
     },
 });
 /**

package/dist/collection/scripts/_getNextFallbackUrl.js

@@ -0,0 +1,12 @@
+export const fallbackList = ['jsdelivr', 'unpkg', 'vercel'];
+/**
+ * Get the next cdn type in the fallback list
+ * @param currentCdnType The current cdn type that want to get the next fallback url
+ */
+export const getNextFallbackUrl = (currentCdnType) => {
+    // get current index of the current fail cdn type in the fallback list
+    const currentIndex = fallbackList.indexOf(currentCdnType);
+    // get the next fallback cdn type
+    const nextFallbackCdnType = fallbackList[currentIndex + 1];
+    return nextFallbackCdnType || null;
+};

package/dist/collection/scripts/_zonosBase.js

@@ -2,6 +2,7 @@ var _a;
 import { log } from "../components/utils/logging/log";
 import { logError } from "../components/utils/logging/logError";
 import { checkIfLoadVersionDomain } from "./_checkIfLoadVersionDomain";
+import { getNextFallbackUrl, } from "./_getNextFallbackUrl";
 import { getZonosQaUrl } from "./_getZonosQaUrl";
 import { zonosLoadStripe } from "./_loadStripe";
 /**
@@ -20,8 +21,10 @@ const zonosLoadUrl = (() => {
     }
     return null;
 })();
-const ZONOS_URL = zonosLoadUrl || process.env.NEXT_PUBLIC_ZONOS_CDN_URL;
-const JS_DELIVR_ZONOS_URL = process.env.NEXT_PUBLIC_ZONOS_JS_DELIVR_CDN_URL;
+const ZONOS_URL = process.env.NEXT_PUBLIC_ZONOS_CDN_URL;
+const JS_DELIVR_ZONOS_URL = zonosLoadUrl || process.env.NEXT_PUBLIC_ZONOS_JS_DELIVR_CDN_URL;
+const UNPKG_ZONOS_URL = process.env.NEXT_PUBLIC_ZONOS_UNPKG_CDN_URL;
+export const MAIN_LOAD_CDN_TYPE = 'jsdelivr';
 const INTER_FONT_URL = 'https://rsms.me';
 const GOOGLE_FONT_URL = 'https://fonts.googleapis.com';
 const INTER_FONT_REGEX = /^https:\/\/rsms\.me\/inter\/inter\.css(.*)$/;
@@ -184,7 +187,8 @@ Zonos.injectController = ({ config, zonosApiKey, }) => {
     _a.zonosController = zonosController;
     log('Zonos controller injected!');
 };
-Zonos.injectScript = ({ fallBackDomain, isModule, scriptDomain, theRestUrl, }) => {
+Zonos.injectScript = ({ cdnType, isModule, theRestUrl, }) => {
+    const scriptDomain = _a.getZonosUrl(cdnType);
     const fullScriptUrl = `${scriptDomain}/${theRestUrl}`;
     const findScript = () => {
         const script = document.querySelector(`script[src="${fullScriptUrl}"]`);
@@ -207,55 +211,60 @@ Zonos.injectScript = ({ fallBackDomain, isModule, scriptDomain, theRestUrl, }) =
     script.src = fullScriptUrl;
     script.crossOrigin = 'anonymous';
     script.onerror = () => {
-        // only fallback if the stylesheetDomain is versioned. (https://v1.2.3.something.com || https://v1.something.com)
-        const isVersioned = /\/\/v\d+\./g.test(scriptDomain);
-        if (!isVersioned) {
-            log('No need to fallback since this is not a versioned domain', 'warn');
+        logError(`Failed to load ${script.src}`);
+        const nextFallbackCdnType = getNextFallbackUrl(cdnType);
+        // if next fallback cdn type exists, inject the script with the next fallback cdn type
+        if (!nextFallbackCdnType) {
             return;
         }
-        if (fallBackDomain) {
-            _a.injectScript({
-                isModule,
-                scriptDomain: fallBackDomain,
-                theRestUrl,
-            });
-        }
-        logError(`Failed to load ${script.src}`);
+        _a.injectScript({
+            cdnType: nextFallbackCdnType,
+            isModule,
+            theRestUrl,
+        });
     };
     headOrBody.appendChild(script);
 };
 /**
  * We now support loading Zonos via npm. For clients using npm, `zonosBase` will always load from the server side. Therefore, the `zonosLoadUrl` defined earlier won't work since it lacks access to client-side APIs such as `window` and `document`.
  */
-Zonos.getZonosUrl = () => {
+Zonos.getZonosUrl = (type) => {
+    const getUrl = () => {
+        switch (type) {
+            case 'jsdelivr':
+                return JS_DELIVR_ZONOS_URL;
+            case 'unpkg':
+                return UNPKG_ZONOS_URL;
+            default:
+                return ZONOS_URL;
+        }
+    };
     // To ensure that sites using zonos-elements load the script from a specific domain when using npm, we need to check for zonosQaUrl and use it if available. Otherwise it will always load from the compiled versioned domain
     if (_a.isNpm) {
         const zonosQaUrl = getZonosQaUrl();
         // Default to hard coded domain if zonosQaUrl is not available
-        return zonosQaUrl || ZONOS_URL;
+        return zonosQaUrl || getUrl();
     }
-    return ZONOS_URL;
+    return getUrl();
 };
 Zonos.injectZonosCdn = () => {
-    const ZONOS_LOAD_URL = _a.getZonosUrl();
     // init zonos elements when the zonosKey is valid
     // inject esmodule cdn for zonos elements
     _a.injectScript({
-        fallBackDomain: JS_DELIVR_ZONOS_URL,
+        cdnType: MAIN_LOAD_CDN_TYPE,
         isModule: true,
-        scriptDomain: ZONOS_LOAD_URL,
         theRestUrl: 'dist/zonos-elements/zonos-elements.esm.js',
     });
     // inject non module cdn for zonos elements
     _a.injectScript({
-        fallBackDomain: JS_DELIVR_ZONOS_URL,
+        cdnType: MAIN_LOAD_CDN_TYPE,
         isModule: false,
-        scriptDomain: ZONOS_LOAD_URL,
         theRestUrl: 'dist/zonos-elements/zonos-elements.js',
     });
     log('Zonos cdn script injected!');
 };
-Zonos.injectStylesheet = ({ fallBackDomain, stylesheetDomain, theRestUrl, }) => {
+Zonos.injectStylesheet = ({ cdnType, theRestUrl, }) => {
+    const stylesheetDomain = _a.getZonosUrl(cdnType);
     const headOrBody = document.head || document.body;
     // inject preconnect css for zonos elements
     const zonosCssPreconnect = document.createElement('link');
@@ -267,19 +276,16 @@ Zonos.injectStylesheet = ({ fallBackDomain, stylesheetDomain, theRestUrl, }) =>
     zonosCss.rel = 'stylesheet';
     zonosCss.href = `${stylesheetDomain}/${theRestUrl}`;
     zonosCss.onerror = () => {
-        // only fallback if the stylesheetDomain is versioned. (https://v1.2.3.something.com || https://v1.something.com)
-        const isVersioned = /\/\/v\d+\./g.test(stylesheetDomain);
-        if (!isVersioned) {
-            log('No need to fallback since this is not a versioned domain', 'warn');
+        logError(`Failed to load ${zonosCss.href}`);
+        const nextFallbackCdnType = getNextFallbackUrl(cdnType);
+        // if the css failed to load, try to load the next fallback cdn if exists
+        if (!nextFallbackCdnType) {
             return;
         }
-        if (fallBackDomain && isVersioned) {
-            _a.injectStylesheet({
-                stylesheetDomain: fallBackDomain,
-                theRestUrl,
-            });
-        }
-        logError(`Failed to load ${zonosCss.href}`);
+        _a.injectStylesheet({
+            cdnType: nextFallbackCdnType,
+            theRestUrl,
+        });
     };
     headOrBody.appendChild(zonosCss);
 };
@@ -293,8 +299,7 @@ Zonos.injectZonosCss = () => {
     }
     // inject css for zonos elements
     _a.injectStylesheet({
-        fallBackDomain: JS_DELIVR_ZONOS_URL,
-        stylesheetDomain: ZONOS_URL,
+        cdnType: MAIN_LOAD_CDN_TYPE,
         theRestUrl: 'dist/zonos-elements/zonos-elements.css',
     });
     log('Zonos style css injected!');

package/dist/esm/index.js

@@ -36,6 +36,19 @@ const checkIfLoadVersionDomain = ({ loadScriptSrc }) => {
     return { currentLoadScriptUrl, isForceLoadVersionDomain, isWhiteListed };
 };
 
+const fallbackList = ['jsdelivr', 'unpkg', 'vercel'];
+/**
+ * Get the next cdn type in the fallback list
+ * @param currentCdnType The current cdn type that want to get the next fallback url
+ */
+const getNextFallbackUrl = (currentCdnType) => {
+    // get current index of the current fail cdn type in the fallback list
+    const currentIndex = fallbackList.indexOf(currentCdnType);
+    // get the next fallback cdn type
+    const nextFallbackCdnType = fallbackList[currentIndex + 1];
+    return nextFallbackCdnType || null;
+};
+
 /**
  * Extracts the zonosQaUrl from the url
  *
@@ -232,8 +245,10 @@ const zonosLoadUrl = (() => {
     }
     return null;
 })();
-const ZONOS_URL = zonosLoadUrl || "https://v1.3.29.js.zonos.com";
-const JS_DELIVR_ZONOS_URL = "https://cdn.jsdelivr.net/npm/@zonos/elements@1.3.29";
+const ZONOS_URL = "https://v1.3.31.js.zonos.com";
+const JS_DELIVR_ZONOS_URL = zonosLoadUrl || "https://cdn.jsdelivr.net/npm/@zonos/elements@1.3.31";
+const UNPKG_ZONOS_URL = "https://unpkg.com/@zonos/elements@1.3.31";
+const MAIN_LOAD_CDN_TYPE = 'jsdelivr';
 const INTER_FONT_URL = 'https://rsms.me';
 const GOOGLE_FONT_URL = 'https://fonts.googleapis.com';
 const INTER_FONT_REGEX = /^https:\/\/rsms\.me\/inter\/inter\.css(.*)$/;
@@ -252,7 +267,7 @@ Zonos.isBigCommerce = false;
  */
 Zonos.isNpm = true;
 Zonos.zonosQaUrl = null;
-Zonos.version = `v${"1.3.29"}`;
+Zonos.version = `v${"1.3.31"}`;
 Zonos.modeAlerted = false;
 Zonos.tempCartData = null;
 Zonos.getCurrentTimestamp = () => new Date().getTime();
@@ -396,7 +411,8 @@ Zonos.injectController = ({ config, zonosApiKey, }) => {
     _a.zonosController = zonosController;
     log('Zonos controller injected!');
 };
-Zonos.injectScript = ({ fallBackDomain, isModule, scriptDomain, theRestUrl, }) => {
+Zonos.injectScript = ({ cdnType, isModule, theRestUrl, }) => {
+    const scriptDomain = _a.getZonosUrl(cdnType);
     const fullScriptUrl = `${scriptDomain}/${theRestUrl}`;
     const findScript = () => {
         const script = document.querySelector(`script[src="${fullScriptUrl}"]`);
@@ -419,55 +435,60 @@ Zonos.injectScript = ({ fallBackDomain, isModule, scriptDomain, theRestUrl, }) =
     script.src = fullScriptUrl;
     script.crossOrigin = 'anonymous';
     script.onerror = () => {
-        // only fallback if the stylesheetDomain is versioned. (https://v1.2.3.something.com || https://v1.something.com)
-        const isVersioned = /\/\/v\d+\./g.test(scriptDomain);
-        if (!isVersioned) {
-            log('No need to fallback since this is not a versioned domain', 'warn');
+        logError(`Failed to load ${script.src}`);
+        const nextFallbackCdnType = getNextFallbackUrl(cdnType);
+        // if next fallback cdn type exists, inject the script with the next fallback cdn type
+        if (!nextFallbackCdnType) {
             return;
         }
-        if (fallBackDomain) {
-            _a.injectScript({
-                isModule,
-                scriptDomain: fallBackDomain,
-                theRestUrl,
-            });
-        }
-        logError(`Failed to load ${script.src}`);
+        _a.injectScript({
+            cdnType: nextFallbackCdnType,
+            isModule,
+            theRestUrl,
+        });
     };
     headOrBody.appendChild(script);
 };
 /**
  * We now support loading Zonos via npm. For clients using npm, `zonosBase` will always load from the server side. Therefore, the `zonosLoadUrl` defined earlier won't work since it lacks access to client-side APIs such as `window` and `document`.
  */
-Zonos.getZonosUrl = () => {
+Zonos.getZonosUrl = (type) => {
+    const getUrl = () => {
+        switch (type) {
+            case 'jsdelivr':
+                return JS_DELIVR_ZONOS_URL;
+            case 'unpkg':
+                return UNPKG_ZONOS_URL;
+            default:
+                return ZONOS_URL;
+        }
+    };
     // To ensure that sites using zonos-elements load the script from a specific domain when using npm, we need to check for zonosQaUrl and use it if available. Otherwise it will always load from the compiled versioned domain
     if (_a.isNpm) {
         const zonosQaUrl = getZonosQaUrl();
         // Default to hard coded domain if zonosQaUrl is not available
-        return zonosQaUrl || ZONOS_URL;
+        return zonosQaUrl || getUrl();
     }
-    return ZONOS_URL;
+    return getUrl();
 };
 Zonos.injectZonosCdn = () => {
-    const ZONOS_LOAD_URL = _a.getZonosUrl();
     // init zonos elements when the zonosKey is valid
     // inject esmodule cdn for zonos elements
     _a.injectScript({
-        fallBackDomain: JS_DELIVR_ZONOS_URL,
+        cdnType: MAIN_LOAD_CDN_TYPE,
         isModule: true,
-        scriptDomain: ZONOS_LOAD_URL,
         theRestUrl: 'dist/zonos-elements/zonos-elements.esm.js',
     });
     // inject non module cdn for zonos elements
     _a.injectScript({
-        fallBackDomain: JS_DELIVR_ZONOS_URL,
+        cdnType: MAIN_LOAD_CDN_TYPE,
         isModule: false,
-        scriptDomain: ZONOS_LOAD_URL,
         theRestUrl: 'dist/zonos-elements/zonos-elements.js',
     });
     log('Zonos cdn script injected!');
 };
-Zonos.injectStylesheet = ({ fallBackDomain, stylesheetDomain, theRestUrl, }) => {
+Zonos.injectStylesheet = ({ cdnType, theRestUrl, }) => {
+    const stylesheetDomain = _a.getZonosUrl(cdnType);
     const headOrBody = document.head || document.body;
     // inject preconnect css for zonos elements
     const zonosCssPreconnect = document.createElement('link');
@@ -479,19 +500,16 @@ Zonos.injectStylesheet = ({ fallBackDomain, stylesheetDomain, theRestUrl, }) =>
     zonosCss.rel = 'stylesheet';
     zonosCss.href = `${stylesheetDomain}/${theRestUrl}`;
     zonosCss.onerror = () => {
-        // only fallback if the stylesheetDomain is versioned. (https://v1.2.3.something.com || https://v1.something.com)
-        const isVersioned = /\/\/v\d+\./g.test(stylesheetDomain);
-        if (!isVersioned) {
-            log('No need to fallback since this is not a versioned domain', 'warn');
+        logError(`Failed to load ${zonosCss.href}`);
+        const nextFallbackCdnType = getNextFallbackUrl(cdnType);
+        // if the css failed to load, try to load the next fallback cdn if exists
+        if (!nextFallbackCdnType) {
             return;
         }
-        if (fallBackDomain && isVersioned) {
-            _a.injectStylesheet({
-                stylesheetDomain: fallBackDomain,
-                theRestUrl,
-            });
-        }
-        logError(`Failed to load ${zonosCss.href}`);
+        _a.injectStylesheet({
+            cdnType: nextFallbackCdnType,
+            theRestUrl,
+        });
     };
     headOrBody.appendChild(zonosCss);
 };
@@ -505,8 +523,7 @@ Zonos.injectZonosCss = () => {
     }
     // inject css for zonos elements
     _a.injectStylesheet({
-        fallBackDomain: JS_DELIVR_ZONOS_URL,
-        stylesheetDomain: ZONOS_URL,
+        cdnType: MAIN_LOAD_CDN_TYPE,
         theRestUrl: 'dist/zonos-elements/zonos-elements.css',
     });
     log('Zonos style css injected!');

package/dist/esm/zonos-cart-items_12.entry.js

@@ -275,7 +275,6 @@ const ZonosCheckoutFinish = class {
                 this.notificationTitle = error
                     ? translate('Payment failed')
                     : translate("You're all set!");
-                this.notificationActionText = translate('Keep shopping');
                 // override title if notification type is success
                 this.useOverrideSuccessNotification();
                 if (error) {
@@ -316,7 +315,7 @@ const ZonosCheckoutFinish = class {
         this.notificationType = 'success';
         this.notificationTitle = '';
         this.notificationMessages = [];
-        this.notificationActionText = '';
+        this.notificationActionText = translate('Keep shopping');
         this.order = null;
     }
     componentDidLoad() {
@@ -338,11 +337,11 @@ const ZonosCheckoutFinish = class {
         // const totalItems = this.order?.items?.reduce((acc, item) => {
         //   return acc + item.quantity;
         // }, 0);
-        return (h(Host, { key: '24b1aac6cd07e3981e29bb401a8e1afeba45bf4a', class: "zonos--checkout-finish zonos--elements", style: {
+        return (h(Host, { key: 'c6a7067f7f9c0c58605dbf7e1ac3cc7c469d2688', class: "zonos--checkout-finish zonos--elements", style: {
                 '--border-radius': getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, this.isLoading && (h("div", { key: '8ddf7d87472a65b9e48504459a67b904611a6207', class: "loading-wrapper" }, h("zonos-spinner", { key: '01106349e974c8dccfab50c97875b5031c7becec' }))), !this.isLoading && (h(Fragment, null, h("div", { key: '9a274bcc2ce21bd5e14b22f0bb17cc75519bf67e', class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { key: '6b8e0ff98659d87a474142766e8debd84bbcf357', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: '204c517f0cb91a2a7f029cbb51ec4dbc73f7fbdb' }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), h("zonos-button", { key: '540dbea2ab328655fccdd7ac24ee996b1041c222', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))))));
+            } }, this.isLoading && (h("div", { key: '5d21e038191edb2135af4fa888c092f35d7d4d13', class: "loading-wrapper" }, h("zonos-spinner", { key: 'c2159b75682659e42f22f944a656a55d20e7268e' }))), !this.isLoading && (h(Fragment, null, h("div", { key: 'c51c81e44edad85e69468666a114021ebbd91a64', class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { key: '5ce3ef22c69de3a56af46541e7f768369378328a', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: '1bf1911133314aa6b8dd20b7da91f84be2161b86' }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), h("zonos-button", { key: 'b5a2311dcca4852b7bee7f9abfa8de868a44fc4c', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))))));
     }
     static get assetsDirs() { return ["assets"]; }
 };