@zonos/elements 1.4.2 → 1.5.0

package/dist/cjs/index.cjs.js

@@ -131,7 +131,7 @@ const getZonosQaUrl = () => {
         return null;
     }
     const qaUrl = extractZonosQaUrl(window.location.href);
-    const cdnUrl = "https://v1.4.2.js.zonos.com";
+    const cdnUrl = "https://v1.5.0.js.zonos.com";
     // when the qaUrl is not set and the built URL is from the test domain, use the test domain for testing
     if (!qaUrl &&
         (cdnUrl.includes('test.') ||
@@ -420,10 +420,10 @@ const zonosLoadUrl = (() => {
     return null;
 })();
 const startLoadTime = Date.now();
-const ZONOS_URL = "https://v1.4.2.js.zonos.com";
-const JS_DELIVR_ZONOS_URL = zonosLoadUrl || "https://cdn.jsdelivr.net/npm/@zonos/elements@1.4.2";
-const UNPKG_ZONOS_URL = "https://unpkg.com/@zonos/elements@1.4.2";
-const CDNJS_ZONOS_URL = "https://cdnjs.cloudflare.com/ajax/libs/zonos-elements/1.4.2";
+const ZONOS_URL = "https://v1.5.0.js.zonos.com";
+const JS_DELIVR_ZONOS_URL = zonosLoadUrl || "https://cdn.jsdelivr.net/npm/@zonos/elements@1.5.0";
+const UNPKG_ZONOS_URL = "https://unpkg.com/@zonos/elements@1.5.0";
+const CDNJS_ZONOS_URL = "https://cdnjs.cloudflare.com/ajax/libs/zonos-elements/1.5.0";
 const GOOGLE_FONT_URL = 'https://fonts.googleapis.com';
 const GOOGLE_FONT_REGEX = /^https:\/\/fonts\.googleapis\.com/;
 class Zonos {
@@ -441,7 +441,7 @@ Zonos.iframeLogType = typeof window !== 'undefined'
     ? new URLSearchParams(window.location.search).get('iframeLogType')
     : null;
 Zonos.isBigCommerce = false;
-Zonos.releaseDate = "1792599810755";
+Zonos.releaseDate = "1792773585238";
 Zonos.isLegacyCheckout = false;
 Zonos.googleAnalyticId = null;
 Zonos.googleAnalyticReady = false;
@@ -466,7 +466,7 @@ Zonos.isNpm = true;
 Zonos.zonosQaUrl = null;
 Zonos.zonosQaUrlApi = null;
 Zonos.trackEventLogs = [];
-Zonos.version = `v${"1.4.2"}`;
+Zonos.version = `v${"1.5.0"}`;
 Zonos.modeAlerted = false;
 Zonos.cartData = null;
 Zonos.paypal = null;

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

@@ -30,7 +30,67 @@ require('./debounce-Cd2emZPn.js');
 require('./debounce-vY0QYT6o.js');
 require('./ShortAddressCode-C5l520-F.js');
 
-const zonosCartItemsCss = () => `:host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}: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 .zonos--cart-table{width:100%;border:none;border-collapse:collapse;overflow:auto;font-size:var(--zonos-elements-font-size-base)}:host .zonos--cart-table .zonos--column{padding:8px;font-size:var(--zonos-elements-font-size-base)}:host .zonos--cart-table .zonos--column:last-child{text-align:right}:host .zonos--cart-table .zonos--column:first-child{width:60px}:host .zonos--cart-table td{vertical-align:top}:host .zonos--cart-item-name{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:12px}:host .zonos--cart-item-name .zonos--cart-item-quantity>*{display:inline-block}:host .zonos--cart-item-price zonos-text{white-space:nowrap}:host img{min-width:40px;margin-top:6px}`;
+/**
+ * Import-free so `scripts/buildItemCustomization.mjs` can emit one module.
+ * demo-app imports the generated `item-customization.js`, not this file.
+ */
+const ITEM_CUSTOMIZATION_ATTRIBUTE_KEY = 'itemCustomization';
+const isRecord = (value) => typeof value === 'object' && value !== null && !Array.isArray(value);
+/** Drops an empty name, a non-string value, and the unselected value "0". */
+const readDisplayableItemCustomization = (value) => {
+    if (!isRecord(value)) {
+        return null;
+    }
+    const { name } = value;
+    if (typeof name !== 'string' || name === '') {
+        return null;
+    }
+    const choiceValue = value.value;
+    if (typeof choiceValue !== 'string' || choiceValue === '0') {
+        return null;
+    }
+    return {
+        name,
+        value: choiceValue,
+    };
+};
+const parseJson = (value) => {
+    try {
+        // The generated package entry cannot import the shared jsonParse helper.
+        // eslint-disable-next-line no-restricted-syntax
+        return JSON.parse(value);
+    }
+    catch (_a) {
+        return null;
+    }
+};
+/** Selected customization entries, with the original object for extra ids. */
+const readItemCustomizationEntries = (attributes) => {
+    var _a;
+    const rawValue = (_a = attributes === null || attributes === void 0 ? void 0 : attributes.find(attribute => (attribute === null || attribute === void 0 ? void 0 : attribute.key) === ITEM_CUSTOMIZATION_ATTRIBUTE_KEY)) === null || _a === void 0 ? void 0 : _a.value;
+    if (!rawValue) {
+        return [];
+    }
+    const parsed = parseJson(rawValue);
+    if (!Array.isArray(parsed)) {
+        return [];
+    }
+    return parsed.flatMap(entry => {
+        const choice = readDisplayableItemCustomization(entry);
+        if (!choice || !isRecord(entry)) {
+            return [];
+        }
+        return [{ choice, raw: entry }];
+    });
+};
+
+/**
+ * Reads a cart row's `itemCustomization` attribute into display pairs.
+ * Unreadable data is an empty list.
+ */
+const parseItemCustomizations = (attributes) => readItemCustomizationEntries(attributes).map(entry => entry.choice);
+
+const zonosCartItemsCss = () => `:host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}: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 .zonos--cart-table{width:100%;border:none;border-collapse:collapse;overflow:auto;font-size:var(--zonos-elements-font-size-base)}:host .zonos--cart-table .zonos--column{padding:8px;font-size:var(--zonos-elements-font-size-base)}:host .zonos--cart-table .zonos--column:last-child{text-align:right}:host .zonos--cart-table .zonos--column:first-child{width:60px}:host .zonos--cart-table td{vertical-align:top}:host .zonos--cart-item-name{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:12px}:host .zonos--cart-item-name .zonos--cart-item-choices{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:4px;min-width:0}:host .zonos--cart-item-name .zonos--cart-item-choices zonos-text{overflow-wrap:break-word;white-space:normal}:host .zonos--cart-item-name .zonos--cart-item-quantity>*{display:inline-block}:host .zonos--cart-item-price zonos-text{white-space:nowrap}:host img{min-width:40px;margin-top:6px}`;
 
 const ZonosCartItems = class {
     constructor(hostRef) {
@@ -40,15 +100,18 @@ const ZonosCartItems = class {
     render() {
         const emptyItemImg = index.getAssetPath('./assets/empty-item.jpeg');
         const nonRestrictedItems = cart.cartStore.items.filter(item => !item.isRestricted);
-        return (index.h(index.Host, { key: '2f81af1b6315853352a29bacaa230d782e76115a', class: "zonos--cart-items zonos--elements" }, index.h("table", { key: '7fe64f09729e0791605cdd8e66d7230ab162c7cf', class: "zonos--cart-table" }, index.h("tbody", { key: '49c17b5c7c68bfd41b2d8fabbbf4c3c764faba33' }, nonRestrictedItems.map(item => {
+        return (index.h(index.Host, { key: 'eeb10f76fbab43d256e6130fe2ab88a33c1598aa', class: "zonos--cart-items zonos--elements" }, index.h("table", { key: '61ae44a57c1386f5ca6afb17c388ae9fcf29d8a1', class: "zonos--cart-table" }, index.h("tbody", { key: '8471ae46186543cee754685e0182c4057d982967' }, nonRestrictedItems.map(item => {
             const itemImg = item.imageUrl;
             const cleanedItemNames = cleanHtmlMarkdown.cleanHtmlMarkdown(item.name);
+            const choices = parseItemCustomizations(item.attributes);
             const amount = item.amount * item.quantity;
             return (index.h("tr", { class: "zonos--cart-item" }, index.h("td", { class: "zonos--column zonos--cart-item-image" }, itemImg && !this.errorImages.includes(itemImg) ? (index.h("img", { alt: item.name, onError: () => {
                     this.errorImages = [...this.errorImages, itemImg];
                 }, src: item.imageUrl, style: {
                     'min-width': '40px',
-                }, width: 40 })) : (index.h("img", { alt: item.name, src: emptyItemImg, width: 40 }))), index.h("td", { class: "zonos--column zonos--cart-item-name" }, index.h("div", null, cleanedItemNames.map(name => (index.h("zonos-text", { type: "label" }, name)))), index.h("zonos-text", { textColor: "gray-600", type: "caption" }, localization.translate('Quantity'), ": ", item.quantity)), index.h("td", { class: "zonos--column zonos--cart-item-price" }, index.h("zonos-text", { type: "semiBoldLabel", weight: 600 }, renderCheckoutCurrency.renderCheckoutCurrency({
+                }, width: 40 })) : (index.h("img", { alt: item.name, src: emptyItemImg, width: 40 }))), index.h("td", { class: "zonos--column zonos--cart-item-name" }, index.h("div", null, cleanedItemNames.map(name => (index.h("zonos-text", { type: "label" }, name)))), choices.length > 0 && (index.h("div", { class: "zonos--cart-item-choices" }, choices.map(choice => (index.h("zonos-text", { textColor: "gray-600", type: "caption" }, choice.value === ''
+                ? choice.name
+                : `${choice.name}: ${choice.value}`))))), index.h("zonos-text", { textColor: "gray-600", type: "caption" }, localization.translate('Quantity'), ": ", item.quantity)), index.h("td", { class: "zonos--column zonos--cart-item-price" }, index.h("zonos-text", { type: "semiBoldLabel", weight: 600 }, renderCheckoutCurrency.renderCheckoutCurrency({
                 amount,
                 isForeign: false,
             })))));

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

@@ -675,6 +675,20 @@ const isDisabledCountry = (showLog = true) => {
     return false;
 };
 
+/**
+ * BigCommerce checkout depends on storefront callbacks (clear cart, inventory).
+ * The hosted variant leaves the storefront, so the test does not apply there.
+ */
+const isHostedVsNativeTestAllowed = ({ createCartId, enabledTestKeys, isBigCommerce, }) => {
+    if (isBigCommerce) {
+        return false;
+    }
+    if (typeof createCartId !== 'function') {
+        return false;
+    }
+    return enabledTestKeys.includes('hosted_vs_native');
+};
+
 const isShippableCountry = (showLog = true, 
 /**
  * If provided, will check if the country is shippable based on the provided country code instead of the Hello selected country code
@@ -1682,16 +1696,12 @@ const ZonosCheckout = class {
             };
         };
         this.shouldAllowHostedVsNativeTest = () => {
-            // This test is only applicable to checkout that's using createCartid callback
-            if (typeof zonosStore.zonosStore.checkoutSettings.createCartId !== 'function') {
-                return false;
-            }
-            const hostedVsNativeTest = zonosStore.zonosStore.enabledVariantTestKeys.includes('hosted_vs_native');
-            // Should not do anything if the test is not enabled
-            if (!hostedVsNativeTest) {
-                return false;
-            }
-            return true;
+            var _a;
+            return isHostedVsNativeTestAllowed({
+                createCartId: zonosStore.zonosStore.checkoutSettings.createCartId,
+                enabledTestKeys: zonosStore.zonosStore.enabledVariantTestKeys,
+                isBigCommerce: Boolean((_a = window.Zonos) === null || _a === void 0 ? void 0 : _a.isBigCommerce),
+            });
         };
         // Register test hosted vs native if needed to get the variant selection for this test
         this.registerTestHostedVsNative = async () => {

package/dist/collection/components/checkout/zonos-checkout/zonos-cart-items/zonos-cart-items.css

@@ -56,6 +56,16 @@
   flex-direction: column;
   gap: 12px;
 }
+:host .zonos--cart-item-name .zonos--cart-item-choices {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+:host .zonos--cart-item-name .zonos--cart-item-choices zonos-text {
+  overflow-wrap: break-word;
+  white-space: normal;
+}
 :host .zonos--cart-item-name .zonos--cart-item-quantity > * {
   display: inline-block;
 }

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

@@ -1,6 +1,7 @@
 import { getAssetPath, h, Host } from "@stencil/core";
 import { cartStore } from "../../../store/checkout/cart";
 import { translate } from "../../../store/translationStore";
+import { parseItemCustomizations } from "../../../utils/checkout/parseItemCustomizations";
 import { renderCheckoutCurrency } from "../../../utils/checkout/renderCheckoutCurrency";
 import { cleanHtmlMarkdown } from "../../../utils/cleanHtmlMarkdown";
 export class ZonosCartItems {
@@ -10,15 +11,18 @@ export class ZonosCartItems {
     render() {
         const emptyItemImg = getAssetPath('./assets/empty-item.jpeg');
         const nonRestrictedItems = cartStore.items.filter(item => !item.isRestricted);
-        return (h(Host, { key: '2f81af1b6315853352a29bacaa230d782e76115a', class: "zonos--cart-items zonos--elements" }, h("table", { key: '7fe64f09729e0791605cdd8e66d7230ab162c7cf', class: "zonos--cart-table" }, h("tbody", { key: '49c17b5c7c68bfd41b2d8fabbbf4c3c764faba33' }, nonRestrictedItems.map(item => {
+        return (h(Host, { key: 'eeb10f76fbab43d256e6130fe2ab88a33c1598aa', class: "zonos--cart-items zonos--elements" }, h("table", { key: '61ae44a57c1386f5ca6afb17c388ae9fcf29d8a1', class: "zonos--cart-table" }, h("tbody", { key: '8471ae46186543cee754685e0182c4057d982967' }, nonRestrictedItems.map(item => {
             const itemImg = item.imageUrl;
             const cleanedItemNames = cleanHtmlMarkdown(item.name);
+            const choices = parseItemCustomizations(item.attributes);
             const amount = item.amount * item.quantity;
             return (h("tr", { class: "zonos--cart-item" }, h("td", { class: "zonos--column zonos--cart-item-image" }, itemImg && !this.errorImages.includes(itemImg) ? (h("img", { alt: item.name, onError: () => {
                     this.errorImages = [...this.errorImages, itemImg];
                 }, src: item.imageUrl, style: {
                     'min-width': '40px',
-                }, width: 40 })) : (h("img", { alt: item.name, src: emptyItemImg, width: 40 }))), h("td", { class: "zonos--column zonos--cart-item-name" }, h("div", null, cleanedItemNames.map(name => (h("zonos-text", { type: "label" }, name)))), h("zonos-text", { textColor: "gray-600", type: "caption" }, translate('Quantity'), ": ", item.quantity)), h("td", { class: "zonos--column zonos--cart-item-price" }, h("zonos-text", { type: "semiBoldLabel", weight: 600 }, renderCheckoutCurrency({
+                }, width: 40 })) : (h("img", { alt: item.name, src: emptyItemImg, width: 40 }))), h("td", { class: "zonos--column zonos--cart-item-name" }, h("div", null, cleanedItemNames.map(name => (h("zonos-text", { type: "label" }, name)))), choices.length > 0 && (h("div", { class: "zonos--cart-item-choices" }, choices.map(choice => (h("zonos-text", { textColor: "gray-600", type: "caption" }, choice.value === ''
+                ? choice.name
+                : `${choice.name}: ${choice.value}`))))), h("zonos-text", { textColor: "gray-600", type: "caption" }, translate('Quantity'), ": ", item.quantity)), h("td", { class: "zonos--column zonos--cart-item-price" }, h("zonos-text", { type: "semiBoldLabel", weight: 600 }, renderCheckoutCurrency({
                 amount,
                 isForeign: false,
             })))));

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

@@ -27,6 +27,7 @@ import { getIsStagingMode } from "../../utils/checkout/getIsStagingMode";
 import { getIsTestMode } from "../../utils/checkout/getIsTestMode";
 import { isCheckoutMobile } from "../../utils/checkout/isCheckoutMobile";
 import { isDisabledCountry } from "../../utils/checkout/isDisabledCountry";
+import { isHostedVsNativeTestAllowed } from "../../utils/checkout/isHostedVsNativeTestAllowed";
 import { isShippableCountry } from "../../utils/checkout/isShippableCountry";
 import { watchImmediateBigcommerceDomesticCheckoutRedirect } from "../../utils/checkout/watchImmediateBigcommerceDomesticCheckoutRedirect";
 import { classes } from "../../utils/classes";
@@ -296,16 +297,12 @@ export class ZonosCheckout {
             };
         };
         this.shouldAllowHostedVsNativeTest = () => {
-            // This test is only applicable to checkout that's using createCartid callback
-            if (typeof zonosStore.checkoutSettings.createCartId !== 'function') {
-                return false;
-            }
-            const hostedVsNativeTest = zonosStore.enabledVariantTestKeys.includes('hosted_vs_native');
-            // Should not do anything if the test is not enabled
-            if (!hostedVsNativeTest) {
-                return false;
-            }
-            return true;
+            var _a;
+            return isHostedVsNativeTestAllowed({
+                createCartId: zonosStore.checkoutSettings.createCartId,
+                enabledTestKeys: zonosStore.enabledVariantTestKeys,
+                isBigCommerce: Boolean((_a = window.Zonos) === null || _a === void 0 ? void 0 : _a.isBigCommerce),
+            });
         };
         // Register test hosted vs native if needed to get the variant selection for this test
         this.registerTestHostedVsNative = async () => {

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

@@ -0,0 +1,13 @@
+/**
+ * BigCommerce checkout depends on storefront callbacks (clear cart, inventory).
+ * The hosted variant leaves the storefront, so the test does not apply there.
+ */
+export const isHostedVsNativeTestAllowed = ({ createCartId, enabledTestKeys, isBigCommerce, }) => {
+    if (isBigCommerce) {
+        return false;
+    }
+    if (typeof createCartId !== 'function') {
+        return false;
+    }
+    return enabledTestKeys.includes('hosted_vs_native');
+};

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

@@ -0,0 +1,53 @@
+/**
+ * Import-free so `scripts/buildItemCustomization.mjs` can emit one module.
+ * demo-app imports the generated `item-customization.js`, not this file.
+ */
+export const ITEM_CUSTOMIZATION_ATTRIBUTE_KEY = 'itemCustomization';
+const isRecord = (value) => typeof value === 'object' && value !== null && !Array.isArray(value);
+/** Drops an empty name, a non-string value, and the unselected value "0". */
+export const readDisplayableItemCustomization = (value) => {
+    if (!isRecord(value)) {
+        return null;
+    }
+    const { name } = value;
+    if (typeof name !== 'string' || name === '') {
+        return null;
+    }
+    const choiceValue = value.value;
+    if (typeof choiceValue !== 'string' || choiceValue === '0') {
+        return null;
+    }
+    return {
+        name,
+        value: choiceValue,
+    };
+};
+const parseJson = (value) => {
+    try {
+        // The generated package entry cannot import the shared jsonParse helper.
+        // eslint-disable-next-line no-restricted-syntax
+        return JSON.parse(value);
+    }
+    catch (_a) {
+        return null;
+    }
+};
+/** Selected customization entries, with the original object for extra ids. */
+export const readItemCustomizationEntries = (attributes) => {
+    var _a;
+    const rawValue = (_a = attributes === null || attributes === void 0 ? void 0 : attributes.find(attribute => (attribute === null || attribute === void 0 ? void 0 : attribute.key) === ITEM_CUSTOMIZATION_ATTRIBUTE_KEY)) === null || _a === void 0 ? void 0 : _a.value;
+    if (!rawValue) {
+        return [];
+    }
+    const parsed = parseJson(rawValue);
+    if (!Array.isArray(parsed)) {
+        return [];
+    }
+    return parsed.flatMap(entry => {
+        const choice = readDisplayableItemCustomization(entry);
+        if (!choice || !isRecord(entry)) {
+            return [];
+        }
+        return [{ choice, raw: entry }];
+    });
+};

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

@@ -0,0 +1,6 @@
+import { readItemCustomizationEntries, } from "./itemCustomization";
+/**
+ * Reads a cart row's `itemCustomization` attribute into display pairs.
+ * Unreadable data is an empty list.
+ */
+export const parseItemCustomizations = (attributes) => readItemCustomizationEntries(attributes).map(entry => entry.choice);

package/dist/collection/types/checkout/itemCustomization.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/types/index.js

@@ -14,6 +14,7 @@ export * from './checkout/api/StoreDiscountEnabled';
 export * from './checkout/api/ValidateAddress';
 export * from './checkout/api/VarianceTest';
 export * from './checkout/CheckoutConfig';
+export * from './checkout/itemCustomization';
 export * from './checkout/ShortAddressCode';
 export * from './checkout/TaxId';
 export * from './ConversionEvent';

package/dist/esm/index.js

@@ -131,7 +131,7 @@ const getZonosQaUrl = () => {
         return null;
     }
     const qaUrl = extractZonosQaUrl(window.location.href);
-    const cdnUrl = "https://v1.4.2.js.zonos.com";
+    const cdnUrl = "https://v1.5.0.js.zonos.com";
     // when the qaUrl is not set and the built URL is from the test domain, use the test domain for testing
     if (!qaUrl &&
         (cdnUrl.includes('test.') ||
@@ -420,10 +420,10 @@ const zonosLoadUrl = (() => {
     return null;
 })();
 const startLoadTime = Date.now();
-const ZONOS_URL = "https://v1.4.2.js.zonos.com";
-const JS_DELIVR_ZONOS_URL = zonosLoadUrl || "https://cdn.jsdelivr.net/npm/@zonos/elements@1.4.2";
-const UNPKG_ZONOS_URL = "https://unpkg.com/@zonos/elements@1.4.2";
-const CDNJS_ZONOS_URL = "https://cdnjs.cloudflare.com/ajax/libs/zonos-elements/1.4.2";
+const ZONOS_URL = "https://v1.5.0.js.zonos.com";
+const JS_DELIVR_ZONOS_URL = zonosLoadUrl || "https://cdn.jsdelivr.net/npm/@zonos/elements@1.5.0";
+const UNPKG_ZONOS_URL = "https://unpkg.com/@zonos/elements@1.5.0";
+const CDNJS_ZONOS_URL = "https://cdnjs.cloudflare.com/ajax/libs/zonos-elements/1.5.0";
 const GOOGLE_FONT_URL = 'https://fonts.googleapis.com';
 const GOOGLE_FONT_REGEX = /^https:\/\/fonts\.googleapis\.com/;
 class Zonos {
@@ -441,7 +441,7 @@ Zonos.iframeLogType = typeof window !== 'undefined'
     ? new URLSearchParams(window.location.search).get('iframeLogType')
     : null;
 Zonos.isBigCommerce = false;
-Zonos.releaseDate = "1792599810755";
+Zonos.releaseDate = "1792773585238";
 Zonos.isLegacyCheckout = false;
 Zonos.googleAnalyticId = null;
 Zonos.googleAnalyticReady = false;
@@ -466,7 +466,7 @@ Zonos.isNpm = true;
 Zonos.zonosQaUrl = null;
 Zonos.zonosQaUrlApi = null;
 Zonos.trackEventLogs = [];
-Zonos.version = `v${"1.4.2"}`;
+Zonos.version = `v${"1.5.0"}`;
 Zonos.modeAlerted = false;
 Zonos.cartData = null;
 Zonos.paypal = null;

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

@@ -28,7 +28,67 @@ import './debounce-CrmpwbEE.js';
 import './debounce-BR3PaG8X.js';
 import './ShortAddressCode-nJ6oI8-n.js';
 
-const zonosCartItemsCss = () => `:host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}: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 .zonos--cart-table{width:100%;border:none;border-collapse:collapse;overflow:auto;font-size:var(--zonos-elements-font-size-base)}:host .zonos--cart-table .zonos--column{padding:8px;font-size:var(--zonos-elements-font-size-base)}:host .zonos--cart-table .zonos--column:last-child{text-align:right}:host .zonos--cart-table .zonos--column:first-child{width:60px}:host .zonos--cart-table td{vertical-align:top}:host .zonos--cart-item-name{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:12px}:host .zonos--cart-item-name .zonos--cart-item-quantity>*{display:inline-block}:host .zonos--cart-item-price zonos-text{white-space:nowrap}:host img{min-width:40px;margin-top:6px}`;
+/**
+ * Import-free so `scripts/buildItemCustomization.mjs` can emit one module.
+ * demo-app imports the generated `item-customization.js`, not this file.
+ */
+const ITEM_CUSTOMIZATION_ATTRIBUTE_KEY = 'itemCustomization';
+const isRecord = (value) => typeof value === 'object' && value !== null && !Array.isArray(value);
+/** Drops an empty name, a non-string value, and the unselected value "0". */
+const readDisplayableItemCustomization = (value) => {
+    if (!isRecord(value)) {
+        return null;
+    }
+    const { name } = value;
+    if (typeof name !== 'string' || name === '') {
+        return null;
+    }
+    const choiceValue = value.value;
+    if (typeof choiceValue !== 'string' || choiceValue === '0') {
+        return null;
+    }
+    return {
+        name,
+        value: choiceValue,
+    };
+};
+const parseJson = (value) => {
+    try {
+        // The generated package entry cannot import the shared jsonParse helper.
+        // eslint-disable-next-line no-restricted-syntax
+        return JSON.parse(value);
+    }
+    catch (_a) {
+        return null;
+    }
+};
+/** Selected customization entries, with the original object for extra ids. */
+const readItemCustomizationEntries = (attributes) => {
+    var _a;
+    const rawValue = (_a = attributes === null || attributes === void 0 ? void 0 : attributes.find(attribute => (attribute === null || attribute === void 0 ? void 0 : attribute.key) === ITEM_CUSTOMIZATION_ATTRIBUTE_KEY)) === null || _a === void 0 ? void 0 : _a.value;
+    if (!rawValue) {
+        return [];
+    }
+    const parsed = parseJson(rawValue);
+    if (!Array.isArray(parsed)) {
+        return [];
+    }
+    return parsed.flatMap(entry => {
+        const choice = readDisplayableItemCustomization(entry);
+        if (!choice || !isRecord(entry)) {
+            return [];
+        }
+        return [{ choice, raw: entry }];
+    });
+};
+
+/**
+ * Reads a cart row's `itemCustomization` attribute into display pairs.
+ * Unreadable data is an empty list.
+ */
+const parseItemCustomizations = (attributes) => readItemCustomizationEntries(attributes).map(entry => entry.choice);
+
+const zonosCartItemsCss = () => `:host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}: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 .zonos--cart-table{width:100%;border:none;border-collapse:collapse;overflow:auto;font-size:var(--zonos-elements-font-size-base)}:host .zonos--cart-table .zonos--column{padding:8px;font-size:var(--zonos-elements-font-size-base)}:host .zonos--cart-table .zonos--column:last-child{text-align:right}:host .zonos--cart-table .zonos--column:first-child{width:60px}:host .zonos--cart-table td{vertical-align:top}:host .zonos--cart-item-name{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:12px}:host .zonos--cart-item-name .zonos--cart-item-choices{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:4px;min-width:0}:host .zonos--cart-item-name .zonos--cart-item-choices zonos-text{overflow-wrap:break-word;white-space:normal}:host .zonos--cart-item-name .zonos--cart-item-quantity>*{display:inline-block}:host .zonos--cart-item-price zonos-text{white-space:nowrap}:host img{min-width:40px;margin-top:6px}`;
 
 const ZonosCartItems = class {
     constructor(hostRef) {
@@ -38,15 +98,18 @@ const ZonosCartItems = class {
     render() {
         const emptyItemImg = getAssetPath('./assets/empty-item.jpeg');
         const nonRestrictedItems = cartStore.items.filter(item => !item.isRestricted);
-        return (h(Host, { key: '2f81af1b6315853352a29bacaa230d782e76115a', class: "zonos--cart-items zonos--elements" }, h("table", { key: '7fe64f09729e0791605cdd8e66d7230ab162c7cf', class: "zonos--cart-table" }, h("tbody", { key: '49c17b5c7c68bfd41b2d8fabbbf4c3c764faba33' }, nonRestrictedItems.map(item => {
+        return (h(Host, { key: 'eeb10f76fbab43d256e6130fe2ab88a33c1598aa', class: "zonos--cart-items zonos--elements" }, h("table", { key: '61ae44a57c1386f5ca6afb17c388ae9fcf29d8a1', class: "zonos--cart-table" }, h("tbody", { key: '8471ae46186543cee754685e0182c4057d982967' }, nonRestrictedItems.map(item => {
             const itemImg = item.imageUrl;
             const cleanedItemNames = cleanHtmlMarkdown(item.name);
+            const choices = parseItemCustomizations(item.attributes);
             const amount = item.amount * item.quantity;
             return (h("tr", { class: "zonos--cart-item" }, h("td", { class: "zonos--column zonos--cart-item-image" }, itemImg && !this.errorImages.includes(itemImg) ? (h("img", { alt: item.name, onError: () => {
                     this.errorImages = [...this.errorImages, itemImg];
                 }, src: item.imageUrl, style: {
                     'min-width': '40px',
-                }, width: 40 })) : (h("img", { alt: item.name, src: emptyItemImg, width: 40 }))), h("td", { class: "zonos--column zonos--cart-item-name" }, h("div", null, cleanedItemNames.map(name => (h("zonos-text", { type: "label" }, name)))), h("zonos-text", { textColor: "gray-600", type: "caption" }, translate('Quantity'), ": ", item.quantity)), h("td", { class: "zonos--column zonos--cart-item-price" }, h("zonos-text", { type: "semiBoldLabel", weight: 600 }, renderCheckoutCurrency({
+                }, width: 40 })) : (h("img", { alt: item.name, src: emptyItemImg, width: 40 }))), h("td", { class: "zonos--column zonos--cart-item-name" }, h("div", null, cleanedItemNames.map(name => (h("zonos-text", { type: "label" }, name)))), choices.length > 0 && (h("div", { class: "zonos--cart-item-choices" }, choices.map(choice => (h("zonos-text", { textColor: "gray-600", type: "caption" }, choice.value === ''
+                ? choice.name
+                : `${choice.name}: ${choice.value}`))))), h("zonos-text", { textColor: "gray-600", type: "caption" }, translate('Quantity'), ": ", item.quantity)), h("td", { class: "zonos--column zonos--cart-item-price" }, h("zonos-text", { type: "semiBoldLabel", weight: 600 }, renderCheckoutCurrency({
                 amount,
                 isForeign: false,
             })))));

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

@@ -673,6 +673,20 @@ const isDisabledCountry = (showLog = true) => {
     return false;
 };
 
+/**
+ * BigCommerce checkout depends on storefront callbacks (clear cart, inventory).
+ * The hosted variant leaves the storefront, so the test does not apply there.
+ */
+const isHostedVsNativeTestAllowed = ({ createCartId, enabledTestKeys, isBigCommerce, }) => {
+    if (isBigCommerce) {
+        return false;
+    }
+    if (typeof createCartId !== 'function') {
+        return false;
+    }
+    return enabledTestKeys.includes('hosted_vs_native');
+};
+
 const isShippableCountry = (showLog = true, 
 /**
  * If provided, will check if the country is shippable based on the provided country code instead of the Hello selected country code
@@ -1680,16 +1694,12 @@ const ZonosCheckout = class {
             };
         };
         this.shouldAllowHostedVsNativeTest = () => {
-            // This test is only applicable to checkout that's using createCartid callback
-            if (typeof zonosStore.checkoutSettings.createCartId !== 'function') {
-                return false;
-            }
-            const hostedVsNativeTest = zonosStore.enabledVariantTestKeys.includes('hosted_vs_native');
-            // Should not do anything if the test is not enabled
-            if (!hostedVsNativeTest) {
-                return false;
-            }
-            return true;
+            var _a;
+            return isHostedVsNativeTestAllowed({
+                createCartId: zonosStore.checkoutSettings.createCartId,
+                enabledTestKeys: zonosStore.enabledVariantTestKeys,
+                isBigCommerce: Boolean((_a = window.Zonos) === null || _a === void 0 ? void 0 : _a.isBigCommerce),
+            });
         };
         // Register test hosted vs native if needed to get the variant selection for this test
         this.registerTestHostedVsNative = async () => {

package/dist/esm-es5/index.js

@@ -54,7 +54,7 @@ var n=new URL(e).searchParams;var o=n.get("zonosQaUrl");if(!o){return null}var t
      * When developing, if the script load is from `dev.elements.zonos.com`,
      * it would load script from that same domain instead of loading from cdn
      */
-var e=window&&window.location.href.includes("forceLoadCdn");if(typeof window==="undefined"||e){return null}var n=extractZonosQaUrl(window.location.href);var o="https://v1.4.2.js.zonos.com";
+var e=window&&window.location.href.includes("forceLoadCdn");if(typeof window==="undefined"||e){return null}var n=extractZonosQaUrl(window.location.href);var o="https://v1.5.0.js.zonos.com";
 // when the qaUrl is not set and the built URL is from the test domain, use the test domain for testing
 if(!n&&(o.includes("test.")||
 // Vercel git domain
@@ -99,15 +99,15 @@ return[4/*yield*/,new Promise((function(e){return setTimeout(e,500)}))];case 2:
 e.sent();return[2/*return*/,getCartInfoById({cartId:l,retries:d-1})];case 3:if(c){return[2/*return*/,null]}return[2/*return*/,Object.assign(Object.assign({},s),{zonosMode:u})]}}))}))};var setupCartDataWithSettings=function(e){return __awaiter(void 0,void 0,void 0,(function(){var n,o,t,r;return __generator(this,(function(i){switch(i.label){case 0:n=_getIsValidCartId(e),o=n.isDgsCartId,t=n.isLegacyCartId;if(!t&&!o){logError("[ZONOS - loadZonos] invalid cart id");return[2/*return*/,null]}return[4/*yield*/,getCartInfoById({cartId:e,retries:5})];case 1:r=i.sent();log("[ZONOS - loadZonos] getting temp cart data","info",r);if(!r){logError("[ZONOS - loadZonos] Error getting temp cart data, stop checkout process.");return[2/*return*/,null]}window.Zonos.storeId=r.cartData.storeId;window.Zonos.zonosApiKey=r.cartData.credentialToken;window.Zonos.zonosMode=r.zonosMode;return[2/*return*/,{cartData:r.cartData,settings:r.settings,storeFavicon:r.storeFaviconUrl,storeId:r.cartData.storeId,storeLogo:r.storeLogoUrl,zonosApiKey:r.cartData.credentialToken}]}}))}))};var _a;
 /**
  * Get the load version and url based on the loadScriptSrc, if the domain that used to load `zonos.js` is in white listed domains, use currentLoadScriptUrl as the load url instead, if zonosQaUrl exists, it would also fall under the white listed domain
- */var zonosLoadUrl=function(){if(typeof document==="undefined"){return null}var e=document.querySelector('script[src*="/zonos.js"]');var n=checkIfLoadVersionDomain({loadScriptSrc:e===null||e===void 0?void 0:e.src}),o=n.currentLoadScriptUrl,t=n.isWhiteListed;if(t){return o}return null}();var startLoadTime=Date.now();var ZONOS_URL="https://v1.4.2.js.zonos.com";var JS_DELIVR_ZONOS_URL=zonosLoadUrl||"https://cdn.jsdelivr.net/npm/@zonos/elements@1.4.2";var UNPKG_ZONOS_URL="https://unpkg.com/@zonos/elements@1.4.2";var CDNJS_ZONOS_URL="https://cdnjs.cloudflare.com/ajax/libs/zonos-elements/1.4.2";var GOOGLE_FONT_URL="https://fonts.googleapis.com";var GOOGLE_FONT_REGEX=/^https:\/\/fonts\.googleapis\.com/;var Zonos=/** @class */function(){function e(){}return e}();_a=Zonos;Zonos.doneInit=false;Zonos.cartSettings=null;
+ */var zonosLoadUrl=function(){if(typeof document==="undefined"){return null}var e=document.querySelector('script[src*="/zonos.js"]');var n=checkIfLoadVersionDomain({loadScriptSrc:e===null||e===void 0?void 0:e.src}),o=n.currentLoadScriptUrl,t=n.isWhiteListed;if(t){return o}return null}();var startLoadTime=Date.now();var ZONOS_URL="https://v1.5.0.js.zonos.com";var JS_DELIVR_ZONOS_URL=zonosLoadUrl||"https://cdn.jsdelivr.net/npm/@zonos/elements@1.5.0";var UNPKG_ZONOS_URL="https://unpkg.com/@zonos/elements@1.5.0";var CDNJS_ZONOS_URL="https://cdnjs.cloudflare.com/ajax/libs/zonos-elements/1.5.0";var GOOGLE_FONT_URL="https://fonts.googleapis.com";var GOOGLE_FONT_REGEX=/^https:\/\/fonts\.googleapis\.com/;var Zonos=/** @class */function(){function e(){}return e}();_a=Zonos;Zonos.doneInit=false;Zonos.cartSettings=null;
 // if query 'zonosDebug=1' param from url, debug mode is on
-Zonos.debug=typeof window!=="undefined"&&!!window.location.search.match(/\?.*(&*)zonosDebug=1/);Zonos.zonosConversionTest=typeof window!=="undefined"&&!!window.location.search.match(/\?.*(&*)zonosConversionTest/);Zonos._paypalMockResponse=null;Zonos.iframeLogType=typeof window!=="undefined"?new URLSearchParams(window.location.search).get("iframeLogType"):null;Zonos.isBigCommerce=false;Zonos.releaseDate="1792599810755";Zonos.isLegacyCheckout=false;Zonos.googleAnalyticId=null;Zonos.googleAnalyticReady=false;Zonos.facebookPixelId=null;Zonos.facebookPixelReady=false;Zonos.startLoadTime=startLoadTime;Zonos.domain=typeof window!=="undefined"?// domain that embeds the iframe
+Zonos.debug=typeof window!=="undefined"&&!!window.location.search.match(/\?.*(&*)zonosDebug=1/);Zonos.zonosConversionTest=typeof window!=="undefined"&&!!window.location.search.match(/\?.*(&*)zonosConversionTest/);Zonos._paypalMockResponse=null;Zonos.iframeLogType=typeof window!=="undefined"?new URLSearchParams(window.location.search).get("iframeLogType"):null;Zonos.isBigCommerce=false;Zonos.releaseDate="1792773585238";Zonos.isLegacyCheckout=false;Zonos.googleAnalyticId=null;Zonos.googleAnalyticReady=false;Zonos.facebookPixelId=null;Zonos.facebookPixelReady=false;Zonos.startLoadTime=startLoadTime;Zonos.domain=typeof window!=="undefined"?// domain that embeds the iframe
 window.location!=window.parent.location&&document.referrer||
 // current domain
 document.location.hostname:"";Zonos.showBaseForeign=typeof window!=="undefined"&&window.location.search.includes("zonosShowBaseForeign");Zonos.overrideUseCustomAddressForm=false;Zonos.isCollect=false;Zonos.isInvoice=false;
 /**
  * By default, the package will load from npm
- */Zonos.isNpm=true;Zonos.zonosQaUrl=null;Zonos.zonosQaUrlApi=null;Zonos.trackEventLogs=[];Zonos.version="v".concat("1.4.2");Zonos.modeAlerted=false;Zonos.cartData=null;Zonos.paypal=null;Zonos.zonosMode=null;Zonos.IframeService=IframeService;Zonos.getCurrentTimestamp=function(){return(new Date).getTime()};Zonos.zonosController=null;Zonos.loadTimeApiInfoList=[];Zonos.logIntervalId=null;Zonos.init=function(e){return __awaiter(void 0,void 0,void 0,(function(){var n,o,t,r,i,a,s,u,c,l,d,f,v,m,_;return __generator(this,(function(p){switch(p.label){case 0:n=e.appearance,o=e.checkoutSettings,t=e.currencyConverter,r=e.helloSettings,i=e.onCountryChange,a=e.overrideCurrencyFormat,s=e.storeId,u=e.zonosApiKey;_a.cartId=getCartIdFromQueryParam();
+ */Zonos.isNpm=true;Zonos.zonosQaUrl=null;Zonos.zonosQaUrlApi=null;Zonos.trackEventLogs=[];Zonos.version="v".concat("1.5.0");Zonos.modeAlerted=false;Zonos.cartData=null;Zonos.paypal=null;Zonos.zonosMode=null;Zonos.IframeService=IframeService;Zonos.getCurrentTimestamp=function(){return(new Date).getTime()};Zonos.zonosController=null;Zonos.loadTimeApiInfoList=[];Zonos.logIntervalId=null;Zonos.init=function(e){return __awaiter(void 0,void 0,void 0,(function(){var n,o,t,r,i,a,s,u,c,l,d,f,v,m,_;return __generator(this,(function(p){switch(p.label){case 0:n=e.appearance,o=e.checkoutSettings,t=e.currencyConverter,r=e.helloSettings,i=e.onCountryChange,a=e.overrideCurrencyFormat,s=e.storeId,u=e.zonosApiKey;_a.cartId=getCartIdFromQueryParam();
 // Expose the checkout cart callbacks on the global so Stripe loading can be
 // gated on whether at least one of them is configured.
 _a.createCartId=o===null||o===void 0?void 0:o.createCartId;