@zonos/elements 1.2.4-alpha.1 → 1.2.4-alpha.10

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

@@ -1,6 +1,7 @@
 :host {
   font-family: var(--font-family, Inter), Inter;
   display: block;
+  white-space: normal;
 }
 :host * {
   font-family: var(--font-family, Inter), Inter;

package/dist/collection/components/common/zonos-spinner/zonos-spinner.css

@@ -1,6 +1,7 @@
 :host {
   font-family: var(--font-family, Inter), Inter;
   display: block;
+  white-space: normal;
 }
 :host * {
   font-family: var(--font-family, Inter), Inter;

package/dist/collection/components/common/zonos-text/zonos-text.css

@@ -1,6 +1,7 @@
 :host {
   font-family: var(--font-family, Inter), Inter;
   display: block;
+  white-space: normal;
 }
 :host * {
   font-family: var(--font-family, Inter), Inter;

package/dist/collection/components/common/zonos-v-stack/zonos-v-stack.css

@@ -1,6 +1,7 @@
 :host {
   font-family: var(--font-family, Inter), Inter;
   display: block;
+  white-space: normal;
 }
 :host * {
   font-family: var(--font-family, Inter), Inter;

package/dist/collection/components/component-template/zonos-component/zonos-component.css

@@ -1,6 +1,7 @@
 :host {
   font-family: var(--font-family, Inter), Inter;
   display: block;
+  white-space: normal;
 }
 :host * {
   font-family: var(--font-family, Inter), Inter;

package/dist/collection/components/hello/zonos-hello/zonos-hello.css

@@ -1,6 +1,7 @@
 :host {
   font-family: var(--font-family, Inter), Inter;
   display: block;
+  white-space: normal;
 }
 :host * {
   font-family: var(--font-family, Inter), Inter;

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

@@ -396,8 +396,9 @@ export class ZonosHello {
                 "complexType": {
                     "signature": "(value: number) => Promise<void>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "value",
+                            "type": "number",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -419,8 +420,9 @@ export class ZonosHello {
                 "complexType": {
                     "signature": "(value: number) => Promise<void>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "value",
+                            "type": "number",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -442,8 +444,9 @@ export class ZonosHello {
                 "complexType": {
                     "signature": "(value: number) => Promise<void>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "value",
+                            "type": "number",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {

package/dist/collection/components/hello/zonos-hello-dialog/zonos-hello-dialog-footer/zonos-hello-dialog-footer.css

@@ -1,6 +1,7 @@
 :host {
   font-family: var(--font-family, Inter), Inter;
   display: block;
+  white-space: normal;
 }
 :host * {
   font-family: var(--font-family, Inter), Inter;

package/dist/collection/components/hello/zonos-hello-dialog/zonos-hello-dialog.css

@@ -1,6 +1,7 @@
 :host {
   font-family: var(--font-family, Inter), Inter;
   display: block;
+  white-space: normal;
 }
 :host * {
   font-family: var(--font-family, Inter), Inter;

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

@@ -1,6 +1,7 @@
 :host {
   font-family: var(--font-family, Inter), Inter;
   display: block;
+  white-space: normal;
 }
 :host * {
   font-family: var(--font-family, Inter), Inter;

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

@@ -2,7 +2,7 @@ import { h, Host, } from "@stencil/core";
 import { stripeStore } from "../store/checkout/stripe";
 import { initLocalizationStore, localizationStoreUpdateSelectedCountryCode, } from "../store/hello/localization";
 import { zonosStore, zonosStoreFontFamily, zonosStoreInitSetting, } from "../store/zonosStore";
-import { getZonosSetting } from "../utils/api/getZonosSetting";
+import { getZonosSettings } from "../utils/api/getZonosSettings";
 import { initCheckout } from "../utils/checkout/initCheckout";
 import { handleFetch } from "../utils/handleFetch";
 import { initHello } from "../utils/hello/initHello";
@@ -94,7 +94,7 @@ export class ZonosController {
             zonosStore.appearance = Object.assign(Object.assign({}, zonosStore.appearance), { fontFamily: overrideFont });
         }
         const routeUrl = process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL;
-        const { errors, json } = await handleFetch(`${routeUrl}/api/get-font-detail?family=${fontSelected}`);
+        const { errors, json } = await handleFetch(`${routeUrl}/api/zonos-elements/get-font-detail?family=${fontSelected}`);
         if (errors.length > 0 || !json) {
             log(`Failed to load font ${fontSelected}`, 'warn');
             return;
@@ -113,7 +113,7 @@ export class ZonosController {
         // running with scope async function to avoid blocking the main thread
         (async () => {
             var _a, _b;
-            const { errors, json } = await getZonosSetting();
+            const { errors, json } = await getZonosSettings();
             if (((_a = errors[0]) === null || _a === void 0 ? void 0 : _a.type.toString()) === '403') {
                 log('Failed to load zonos settings. This domain may not have access', 'warn');
                 return;
@@ -273,8 +273,9 @@ export class ZonosController {
                 "complexType": {
                     "signature": "(stripe: Stripe) => Promise<void>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "stripe",
+                            "type": "Stripe",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -298,8 +299,9 @@ export class ZonosController {
                 "complexType": {
                     "signature": "(overrideFont?: string) => Promise<void>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "overrideFont",
+                            "type": "string | undefined",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -318,8 +320,9 @@ export class ZonosController {
                 "complexType": {
                     "signature": "(notification: NotificationInit) => Promise<void>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "notification",
+                            "type": "{ message: string; timeout?: number | undefined; type?: \"error\" | \"success\" | \"warning\" | undefined; }",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -343,11 +346,9 @@ export class ZonosController {
                 "complexType": {
                     "signature": "(config: LoadZonosParamsConfig) => Promise<void>",
                     "parameters": [{
-                            "tags": [{
-                                    "name": "param",
-                                    "text": "config config that need to override the default setting"
-                                }],
-                            "text": "config that need to override the default setting"
+                            "name": "config",
+                            "type": "{ appearance?: Partial<AppearanceConfig> | undefined; checkoutSettings?: Partial<CheckoutConfig> | undefined; currencyConverter?: CurrencyConverter | undefined; helloSettings?: Partial<HelloConfig> | undefined; onlineStoreSettings?: Partial<OnlineStoreConfig> | undefined; }",
+                            "docs": "config that need to override the default setting"
                         }],
                     "references": {
                         "Promise": {
@@ -374,8 +375,9 @@ export class ZonosController {
                 "complexType": {
                     "signature": "(countryCode: CountryCode) => Promise<void>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "countryCode",
+                            "type": "\"CI\" | \"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AQ\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BR\" | \"BS\" | \"BT\" | \"BV\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CF\" | \"CG\" | \"CH\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CV\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB\" | \"GD\" | \"GE\" | \"GF\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GP\" | \"GQ\" | \"GR\" | \"GS\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HM\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"IC\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MF\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NC\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PM\" | \"PN\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RE\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SD\" | \"SE\" | \"SG\" | \"SH\" | \"SI\" | \"SJ\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TC\" | \"TD\" | \"TF\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"UM\" | \"US\" | \"UY\" | \"UZ\" | \"VA\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WF\" | \"WS\" | \"YE\" | \"YT\" | \"ZA\" | \"ZM\" | \"ZW\"",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {

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

@@ -80,7 +80,7 @@ const cartStoreReCalculateTotal = async ({ currency, itemsAmount, landedCostId,
     }
     // update checkout session
     if (!cartStore.checkoutSessionId) {
-        logError('Could update cart total without checkout session id');
+        logError('Could not update cart total without checkout session id');
         return false;
     }
     const { json } = await stripeStoreUpdateCheckoutSession({

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

@@ -19,6 +19,7 @@ const { onChange, reset, state: stripeStore, } = createStore(() => ({
     stripeAddressElement: null,
     stripeAddressEventData: null,
     stripeAddressUsedWhenFetchingLC: null,
+    stripeBillingAddressElement: null,
     stripeElements: null,
     stripeElementsOptions: null,
     stripeLinkElement: null,
@@ -264,7 +265,7 @@ const stripeStoreInitCheckoutSession = async () => {
         return false;
     }
     stripeStore.isFetchingSession = true;
-    const { errors, json } = await handleFetch(`${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/create-checkout-session`, {
+    const { errors, json } = await handleFetch(`${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/create-checkout-session`, {
         body: {
             currency: ((_a = cartStore.items.find(Boolean)) === null || _a === void 0 ? void 0 : _a.currencyCode) || '',
             itemsAmount: total,
@@ -292,7 +293,7 @@ const stripeStoreInitCheckoutSession = async () => {
 const stripeStoreUpdateCheckoutSession = async ({ currency, id, itemsAmount, landedCostId, presentmentCountryCode, }) => {
     // No need to set loading state here because this function will be called under the hood to update
     // landed cost id for the section.
-    const { errors, json } = await handleFetch(`${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/update-checkout-session`, {
+    const { errors, json } = await handleFetch(`${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/update-checkout-session`, {
         body: {
             currency,
             id,

package/dist/collection/components/stripe/zonos-address/zonos-address.css

@@ -1,6 +1,7 @@
 :host {
   font-family: var(--font-family, Inter), Inter;
   display: block;
+  white-space: normal;
 }
 :host * {
   font-family: var(--font-family, Inter), Inter;

package/dist/collection/components/stripe/zonos-link-authentication/zonos-link-authentication.css

@@ -1,6 +1,7 @@
 :host {
   font-family: var(--font-family, Inter), Inter;
   display: block;
+  white-space: normal;
 }
 :host * {
   font-family: var(--font-family, Inter), Inter;

package/dist/collection/components/stripe/zonos-payment/zonos-payment.css

@@ -1,6 +1,7 @@
 :host {
   font-family: var(--font-family, Inter), Inter;
   display: block;
+  white-space: normal;
 }
 :host * {
   font-family: var(--font-family, Inter), Inter;

package/dist/collection/components/utils/api/calculateLandedCost.js

@@ -1,8 +1,16 @@
+import { zonosStore } from "../../store/zonosStore";
 import { prepCalculateLandedCost } from "./prepCalculateLandedCost";
+import { triggerBuildLandedCost } from "./triggerBuildLandedCost";
 import { handleFetch } from "../handleFetch";
 export const calculateLandedCost = async (abortController) => {
+    // If buildLandedCost callback is supplied, use that instead of our regular request to '/calculate-landed-cost'
+    const buildLandedCost = zonosStore.checkoutSettings.buildLandedCost;
+    if (buildLandedCost) {
+        const json = await triggerBuildLandedCost(buildLandedCost);
+        return json;
+    }
     // request to get landed cost info
-    const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/calculate-landed-cost`;
+    const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/calculate-landed-cost`;
     const { errors, json } = await handleFetch(url, {
         body: prepCalculateLandedCost(),
         method: 'POST',

package/dist/collection/components/utils/api/checkItemRestrictions.js

@@ -2,7 +2,7 @@ import { handleFetch } from "../handleFetch";
 import { logError } from "../logging/logError";
 export const checkItemRestrictions = async ({ items, shipFrom, shipTo, }) => {
     var _a;
-    const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/check-item-restrictions`;
+    const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/check-item-restrictions`;
     const body = {
         items,
         shipFrom,

package/dist/collection/components/utils/api/getCountries.js

@@ -1,7 +1,7 @@
 import { handleFetch } from "../handleFetch";
 export const getCountries = async () => {
     try {
-        const { errors, json } = await handleFetch(`${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/get-countries`, {
+        const { errors, json } = await handleFetch(`${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/get-countries`, {
             method: 'GET',
         });
         if (errors.length || !json) {

package/dist/collection/components/utils/api/getCountryLandedCost.js

@@ -5,7 +5,7 @@ export const getCountryLandedCost = async (countryCode) => {
     if (!countryCode) {
         return null;
     }
-    const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/country-landed-cost/${countryCode}`;
+    const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/country-landed-cost/${countryCode}`;
     const { errors, json } = await handleFetch(url);
     if (errors.length || !json) {
         logError(`Error fetching country landed cost: ${(_a = errors.find(Boolean)) === null || _a === void 0 ? void 0 : _a.message}`);

package/dist/collection/components/utils/api/getExchangeRate.js

@@ -6,7 +6,7 @@ export const getExchangeRate = async ({ country, isGuaranteed, sourceCurrency, t
     if (sourceCurrency === targetCurrency && !isGuaranteed) {
         return { exchangeRate: null, maxAge: null };
     }
-    const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/exchange-rates?sourceCurrency=${sourceCurrency}&targetCurrency=${targetCurrency}&isGuaranteed=${isGuaranteed}&country=${country}}`;
+    const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/exchange-rates?sourceCurrency=${sourceCurrency}&targetCurrency=${targetCurrency}&isGuaranteed=${isGuaranteed}&country=${country}`;
     const { errors, json } = await handleFetch(url);
     if (errors.length || !json) {
         logError(`Error fetching country landed cost: ${(_a = errors.find(Boolean)) === null || _a === void 0 ? void 0 : _a.message}`);

package/dist/collection/components/utils/api/getLocaleMessages.js

@@ -1,7 +1,7 @@
 import { handleFetch } from "../handleFetch";
 export const getLocaleMessages = async ({ countryCode, localeTo, storeId, }) => {
     var _a;
-    const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/locale-messages?countryCode=${countryCode}&storeId=${storeId}&localeTo=${localeTo}`;
+    const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/locale-messages?countryCode=${countryCode}&storeId=${storeId}&localeTo=${localeTo}`;
     const { errors, json } = await handleFetch(url);
     if (errors.length || !json) {
         // eslint-disable-next-line no-console

package/dist/collection/components/utils/api/getLocalization.js

@@ -6,7 +6,7 @@ export const getLocalization = async () => {
         // load and use country from session storage when zCountry query param is not present
         const countryLoadedSession = window.sessionStorage.getItem('zonos--country');
         const zCountry = getZCountryUrlParam(currentUrl.searchParams) || countryLoadedSession;
-        const localizationUrl = new URL(`${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/localization`);
+        const localizationUrl = new URL(`${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/localization`);
         if (zCountry) {
             localizationUrl.searchParams.set('zCountry', zCountry);
         }

package/dist/collection/components/utils/api/getShippingZones.js

@@ -2,7 +2,7 @@ import { handleFetch } from "../handleFetch";
 import { logError } from "../logging/logError";
 export const getShippingZones = async () => {
     var _a, _b;
-    const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/shipping-zones`;
+    const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/shipping-zones`;
     const { errors, json } = await handleFetch(url);
     if (errors.length || !json) {
         logError(`Error fetching shipping zones: ${(_a = errors.find(Boolean)) === null || _a === void 0 ? void 0 : _a.message}`);

package/dist/collection/components/utils/api/{getZonosSetting.js → getZonosSettings.js}

@@ -1,10 +1,10 @@
 import { handleFetch } from "../handleFetch";
 import { logError } from "../logging/logError";
-export const getZonosSetting = async () => {
-    const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-setting`;
+export const getZonosSettings = async () => {
+    const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/zonos-settings`;
     const { errors, json } = await handleFetch(url);
     if (errors.length) {
-        logError(`Error occurs when getting zonos settings. If this is not an unauthorized error, it will use user setting or default setting`);
+        logError(`Error occurred when getting zonos settings. If this is not an unauthorized error, it will use user settings or default settings`);
         return { errors, json: null };
     }
     return { errors: [], json };

package/dist/collection/components/utils/api/triggerBuildLandedCost.js

@@ -0,0 +1,22 @@
+import { prepCalculateLandedCost } from "./prepCalculateLandedCost";
+import { handleFetch } from "../handleFetch";
+export const triggerBuildLandedCost = async (buildLandedCost) => {
+    var _a;
+    const data = prepCalculateLandedCost();
+    const landedCost = await buildLandedCost(data.checkoutSessionId, data.contact, data.shippingAddress);
+    if (!landedCost) {
+        throw new Error('Failed to build landed cost');
+    }
+    // Validate the landed cost object to make sure the returned value from buildLandedCost has a valid schema
+    const { errors, json } = await handleFetch(`${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/validate-landed-cost`, {
+        body: landedCost,
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        method: 'POST',
+    });
+    if (!json || errors.length) {
+        throw new Error(`Invalid landed cost object: ${((_a = errors.find(Boolean)) === null || _a === void 0 ? void 0 : _a.message) || 'Unknown error'}`);
+    }
+    return landedCost;
+};

package/dist/collection/components/utils/handleFetch.js

@@ -88,13 +88,31 @@ const handleRequest = async (url, options) => {
         };
     }
 };
+function encodeString(text) {
+    try {
+        // encode the string, remove the "=" at the end of the encoded string
+        const encodedString = btoa(text).replace(/=/g, '');
+        return encodedString;
+    }
+    catch (error) {
+        // return the reverse string if the encoding failed
+        return text
+            .replace(/[^A-Za-z0-9]/g, '')
+            .split('')
+            .reverse()
+            .join('');
+    }
+}
 export const handleFetch = async (url, _opts) => {
     const opts = __rest(_opts || {}, []);
     const body = opts.body ? JSON.stringify(opts.body) : undefined;
     const method = opts.method || 'GET';
+    // adding credentialtoken to the url so that the request will be cached differently for each store
+    const modifiedUrl = new URL(url);
+    modifiedUrl.searchParams.set('zToken', encodeString(window.location.hostname));
     // headers content type
     const headers = Object.assign({ 'Content-Type': 'application/json', 'Zonos-Is-BigCommerce': window.Zonos.isBigCommerce.toString(), 'Zonos-Referer': window.location.hostname, 'Zonos-Version': window.Zonos.version, credentialtoken: window.Zonos.zonosApiKey }, opts.headers);
     const options = Object.assign(Object.assign({}, opts), { body: method === 'GET' ? undefined : body, headers,
         method });
-    return handleRequest(url, options);
+    return handleRequest(modifiedUrl.toString(), options);
 };

package/dist/collection/components/utils/logging/log.js

@@ -1,8 +1,28 @@
 export const log = (message, type, ...additionalInfo) => {
+    var _a;
     // if type is error and debug is false, do not log
     if (!window.Zonos.debug) {
         return;
     }
+    let loggingIframe = document.querySelector('iframe#zonos---debug-logging-iframe');
+    if (!loggingIframe) {
+        // add a hidden iframe
+        loggingIframe = document.createElement('iframe');
+        loggingIframe.id = 'zonos---debug-logging-iframe';
+        loggingIframe.style.display = 'none';
+        loggingIframe.style.opacity = '0';
+        loggingIframe.style.position = 'absolute';
+        loggingIframe.style.top = '-9999px';
+        loggingIframe.style.left = '-9999px';
+        loggingIframe.style.width = '1px';
+        loggingIframe.style.height = '1px';
+        loggingIframe.style.border = 'none';
+        loggingIframe.style.overflow = 'hidden';
+        loggingIframe.style.visibility = 'hidden';
+        document.body.appendChild(loggingIframe);
+    }
+    // use the logging iframe's console to log just in case the console is disabled (overriden) by the site owner
+    const console = ((_a = loggingIframe.contentWindow) === null || _a === void 0 ? void 0 : _a.window.console) || window.console;
     switch (type) {
         case 'warn':
             // eslint-disable-next-line no-console

package/dist/collection/environment.js

@@ -36,11 +36,19 @@ export const formattedUrl = ({ branchName, inCI: _inCI, inVercel: _inVercel, isV
         // url: zonos-elements-serverless-git-something
         domainOnlyUrl.includes('serverless-git');
     if (branchName === 'qa' && isServerless) {
-        // qa branch for the API is not versioned, should always use the latest version
-        return `https://${domainOnlyUrl}`;
+        // qa branch for the API is not versioned, should always has alpha prefix
+        return `https://alpha.${domainOnlyUrl}`;
     }
-    // only run this in Vercel (not production and alpha/qa branch)
+    const isTest = 
+    // url: test.js.zonos.com
+    domainOnlyUrl.includes('test.') ||
+        // url: zonos-elements-test-git-something
+        domainOnlyUrl.includes('test-git') ||
+        // url: something.preview.js.zonos.com (this is only applicable on preview deployment of `zonos-elements` and `zonos-elements-test`)
+        domainOnlyUrl.includes('preview.js.zonos.com');
+    // always use vercel url if in vercel env, non-production branch (not qa or main branch) or the domain using is a test url
     if ((_isVercelPreview && !isProdBranch) ||
+        isTest ||
         (_inVercel && type === 'vercel-git')) {
         // use vercel branch_url instead of the production url
         if (!branchName) {
@@ -52,13 +60,6 @@ export const formattedUrl = ({ branchName, inCI: _inCI, inVercel: _inVercel, isV
         domainOnlyUrl.includes('storybook.js') ||
             // url: zonos-elements-storybook-git-something
             domainOnlyUrl.includes('storybook-git');
-        const isTest = 
-        // url: test.js.zonos.com
-        domainOnlyUrl.includes('test.') ||
-            // url: zonos-elements-test-git-something
-            domainOnlyUrl.includes('test-git') ||
-            // url: something.preview.js.zonos.com (this is only applicable on preview deployment of `zonos-elements` and `zonos-elements-test`)
-            domainOnlyUrl.includes('preview.js.zonos.com');
         const projectName = isStorybook
             ? 'zonos-elements-storybook'
             : isServerless

package/dist/collection/scripts/zonos.js

@@ -63,6 +63,8 @@ Zonos.init = async ({ appearance, checkoutSettings, currencyConverter, helloSett
     }
     _a.zonosApiKey = zonosApiKey;
     log('init zonos');
+    // add sentry to the project
+    _a.injectSentryScript();
     // inject zonos cdn
     _a.injectZonosCdn();
     // inject css for zonos elements
@@ -160,6 +162,56 @@ Zonos.injectController = ({ config, zonosApiKey, }) => {
     _a.zonosController = zonosController;
     log('Zonos controller injected!');
 };
+Zonos.injectSentryScript = () => {
+    const scriptUrl = 'https://browser.sentry-cdn.com/7.88.0/bundle.tracing.min.js';
+    const findScript = () => {
+        const script = document.querySelector(`script[src="${scriptUrl}"]`);
+        return !!script;
+    };
+    if (findScript()) {
+        // eslint-disable-next-line no-console
+        log('Sentry script already exists in the document', 'warn');
+        return;
+    }
+    const headOrBody = document.head || document.body;
+    // init zonos elements when the zonosKey is valid
+    // inject esmodule cdn for zonos elements
+    const script = document.createElement('script');
+    script.crossOrigin = 'anonymous';
+    script.src = scriptUrl;
+    script.integrity =
+        'sha384-z/aQww1Fr6Mes0MO/2wlzQd2nXBCdDcKPXDTsMDMNPgTGRPqii3a4bzH79I+Vo8l';
+    script.setAttribute('data-lazy', 'no');
+    script.onerror = () => {
+        logError(`Failed to load ${script.src}`);
+    };
+    script.onload = () => {
+        var _b;
+        (_b = window.Sentry) === null || _b === void 0 ? void 0 : _b.init({
+            denyUrls: [
+                // Facebook flakiness
+                /graph\.facebook\.com/i,
+                // Facebook blocked
+                /connect\.facebook\.net\/en_US\/all\.js/i,
+                // Woopra flakiness
+                /eatdifferent\.com\.woopra-ns\.com/i,
+                /static\.woopra\.com\/js\/woopra\.js/i,
+                // Chrome extensions
+                /extensions\//i,
+                /^chrome:\/\//i,
+                /^chrome-extension:\/\//i,
+                // Other plugins
+                /webappstoolbarba\.texthelp\.com\//i,
+                /metrics\.itunes\.apple\.com\.edgesuite\.net\//i,
+                /dev.elements.zonos.com/i,
+                /js.zonos.com/,
+            ],
+            dsn: 'https://19168bd05af0e2e0e7520ad58953e4f2@o446983.ingest.sentry.io/4506400622837760',
+            release: `zonos-elements@${_a.version}`,
+        });
+    };
+    headOrBody.appendChild(script);
+};
 Zonos.injectScript = ({ fallBackDomain, isModule, scriptDomain, theRestUrl, }) => {
     const fullScriptUrl = `${scriptDomain}/${theRestUrl}`;
     const findScript = () => {
@@ -182,6 +234,7 @@ Zonos.injectScript = ({ fallBackDomain, isModule, scriptDomain, theRestUrl, }) =
         script.noModule = true;
     }
     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);