@zonos/elements 1.3.260 → 1.3.262

package/dist/cjs/zonos-invoice-finish_5.cjs.entry.js

@@ -4,14 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b1f95d96.js');
 const cart = require('./cart-d08c87e2.js');
-const paypal = require('./paypal-73a542cb.js');
+const paypal = require('./paypal-e278f405.js');
 const localization = require('./localization-a7fac4b4.js');
 const zonosStore = require('./zonosStore-1c517e55.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
 const createCustomEvent = require('./createCustomEvent-7b6fad95.js');
 const getBorderRadius = require('./getBorderRadius-db55a464.js');
 const VarianceTest = require('./VarianceTest-bec00ea8.js');
-const submitGtag = require('./submitGtag-9ac5a42e.js');
 const isInvoiceMobileTablet = require('./isInvoiceMobileTablet-dde41e4e.js');
 const classes = require('./classes-b7918f56.js');
 const ILanguage = require('./ILanguage-98b04442.js');
@@ -21,6 +20,7 @@ const placeTestOrder = require('./placeTestOrder-aefd31e8.js');
 const renderFallback = require('./renderFallback-bc20ee20.js');
 require('./isDarkColor-bfe6d1eb.js');
 require('./isContrastColor-6a17f408.js');
+require('./submitGtag-4241212b.js');
 
 const RemoveIcon = `<svg color="var(--zonos-elements-red-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" data-is-secondary-color="true" fill="var(--zonos-elements-red-200)" fill-rule="evenodd"></path><path clip-rule="evenodd" d="M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;
 
@@ -159,7 +159,7 @@ const ZonosInvoiceFinish = class {
                 window.history.replaceState({}, '', url.toString());
                 // Payment doesn't go through
                 if (error && (messages === null || messages === void 0 ? void 0 : messages.length)) {
-                    submitGtag.submitGtag({ event: 'zonos-checkout-payment-fail' });
+                    paypal.submitAnalytics({ event: 'zonos-checkout-payment-fail' });
                     void handleFetch.sendErrorLog({
                         endpoint: 'Stripe payment failed',
                         errors: [
@@ -172,7 +172,7 @@ const ZonosInvoiceFinish = class {
                     });
                 }
                 else {
-                    submitGtag.submitGtag({ event: 'zonos-checkout-success' });
+                    paypal.submitAnalytics({ event: 'zonos-checkout-success' });
                     const checkoutSessionId = localization.storageStore.checkoutSessionId;
                     void cart.trackConversionEvent({
                         checkoutSessionId,
@@ -217,7 +217,7 @@ const ZonosInvoiceFinish = class {
             // show success message right away when order id is already created
             this.isLoading = false;
             if (paypal.paypalStore.orderIdCreated) {
-                submitGtag.submitGtag({ event: 'zonos-checkout-success' });
+                paypal.submitAnalytics({ event: 'zonos-checkout-success' });
                 const checkoutSessionId = localization.storageStore.checkoutSessionId;
                 void cart.trackConversionEvent({
                     checkoutSessionId,
@@ -273,11 +273,11 @@ const ZonosInvoiceFinish = class {
     }
     render() {
         const cartId = window.Zonos.cartId;
-        return (index.h(index.Host, { key: '5d2fc87bc549fa2cb6d622e664043bbfe55f8b0e', class: "zonos--checkout-finish zonos--elements", style: {
+        return (index.h(index.Host, { key: '6c0363334a9e6602b93e83a0dfeb733285db7683', class: "zonos--checkout-finish zonos--elements", style: {
                 '--zonos--border-radius': getBorderRadius.getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, !this.isLoading && (index.h("div", { key: '1268de9e5be1edc4cbe2e7e2f1d2590b168d8c7b', class: "zonos--finish-details" }, index.h("div", { key: 'ce63ee565c176ea5687fc1c0f721932e26b93ebd', 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: 'a073858eac699426dc5947b85d3b3665868f164e', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), this.confirmationId && (index.h("zonos-badge", { key: 'a96c40f5cc977de82585f7827d6bc6aef55ba873', badgeColor: "gray" }, this.confirmationId)), index.h("zonos-text", { key: 'd97bc54085b9fe69eb05b44042deae25c379ee3a', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (index.h(index.Fragment, null, message, index.h("br", null))))), this.order && cartId && (index.h("div", { key: '488c3442e40fedf65caedbd3e098bd8b95976aab', class: "zonos--button-container" }, index.h("zonos-button", { key: '9a01b9cca0e3747548d386345015ecea80dc29d3', onClick: () => {
+            } }, !this.isLoading && (index.h("div", { key: '299a9afc37f5e1bbe828f2b68569a686b82baff1', class: "zonos--finish-details" }, index.h("div", { key: '24a827b96c4a74066b7701c70f6cdf980ff060f5', 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: '74bfa9e0126ea8b0a693fdc2e034cdd6ef352dcb', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), this.confirmationId && (index.h("zonos-badge", { key: '5cc0089225fac166cfa13cc11e72efeb34ad8567', badgeColor: "gray" }, this.confirmationId)), index.h("zonos-text", { key: 'fb101b1058adeafe38a03d2a915b6b7f80c44061', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (index.h(index.Fragment, null, message, index.h("br", null))))), this.order && cartId && (index.h("div", { key: '2ecc8d45967ccd720f0ec4d532aa266ac42acc14', class: "zonos--button-container" }, index.h("zonos-button", { key: '3f04711341f273a767d5109274f92eec424b1675', onClick: () => {
                 window.open(this.getReceiptUrl({ cartId }), '_blank');
             }, size: "lg", variant: "primary" }, localization.translate('View receipt')))))))));
     }
@@ -340,15 +340,15 @@ const ZonosInvoiceFooter = class {
         const languageLabel = (_a = ILanguage.languages.find(x => x.code === localization.localizationStore.selectedLocale)) === null || _a === void 0 ? void 0 : _a.label;
         // reverse color when on desktop. With the coversheet backdrop, the color should be white
         const colorDesktop = 'gray-1000';
-        return (index.h(index.Host, { key: 'c84163fd8ab0bc0f2c791028b6896379a4ae6a27', class: classes.classes([
+        return (index.h(index.Host, { key: 'a48dfe3c11d200e085864ed513cfb647c9ef3b5c', class: classes.classes([
                 'zonos--elements',
                 this.isMobile && 'mobile',
                 this.isTablet && 'tablet',
-            ]) }, index.h("div", { key: '099a3be332fa52c5e7551bdd2a618041c4a6eb22', class: "zonos--invoice-footer" }, index.h("div", { key: 'ab727f45f3a67bcdd51eb29b392462f15eb5fedd', class: "zonos--invoice-locale-wrapper" }, index.h("zonos-button", { key: '3d8431c78d54e0fe630677d0dd4ae2c975a208fa', buttonColor: colorDesktop, class: "zonos--invoice-footer-language-button", icon: index.h("zonos-icon", { "aria-label": "Language select", content: Globe, iconColor: colorDesktop }), onClick: () => this.toggleLanguageDialog(), variant: "subtle" }, languageLabel), index.h("div", { key: '2920b4105b6209c4177fc91651dc5d9397d6abf2', class: classes.classes([
+            ]) }, index.h("div", { key: 'de1f450a548eabe7bb1da9c9f2e23837a55827fc', class: "zonos--invoice-footer" }, index.h("div", { key: 'b30d47a885beaca3ec0dbdeff8e8facae994ef88', class: "zonos--invoice-locale-wrapper" }, index.h("zonos-button", { key: 'a0bece32119cbc5eddd8f99298ba7274f286cb6f', buttonColor: colorDesktop, class: "zonos--invoice-footer-language-button", icon: index.h("zonos-icon", { "aria-label": "Language select", content: Globe, iconColor: colorDesktop }), onClick: () => this.toggleLanguageDialog(), variant: "subtle" }, languageLabel), index.h("div", { key: '7ceb0c79d25f640bf23ac37a22c6c37292538d8f', class: classes.classes([
                 'zonos--invoice-language-dialog',
                 this.showLanguageDialog &&
                     'zonos--invoice-language-dialog-open',
-            ]) }, index.h("zonos-language-select", { key: '705e1a4243dc7ebc73c522a82f93c3d833240a95', handleOnClose: () => this.toggleLanguageDialog() }))), index.h("div", { key: '49c2d0ae1f587079b48f12d62d10eb422991255e', class: "zonos--invoice-footer-icon-wrapper" }, index.h("div", { key: '58a4da788527ddf4abd759b5e305e747aa96d540', class: "zonos--invoice-footer-logo" }, index.h("zonos-text", { key: '45bf1af64ec0f0a2e11e8d23361b71f4b4189881', textColor: colorDesktop }, localization.translate('Powered by')), index.h("a", { key: '1dd7224f3e126bcabe60a42c9529ab65c64f0063', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, index.h("zonos-icon", { key: '7dc21ce09b72bf37efd30e2c17b6d8b9328e8c3d', autoHeight: true, content: ZonosWordmark, size: 42 }))), index.h("div", { key: 'a0d053e6745733cd61868c109628a1835f4fe3ed', class: "dot" }), index.h("a", { key: 'fd467e88aa2ed10b707f88ed0d1a5af80af35539', href: "https://zonos.com/docs/legal/zonos-privacy-policy", target: "_blank" }, index.h("zonos-text", { key: '35db684368ff8abc05c2c7fab22500270b0b7e21', textColor: colorDesktop }, localization.translate('Privacy policy')))))));
+            ]) }, index.h("zonos-language-select", { key: '5c2d4164f38caecc7f3f99b98d1d504ee292b6bd', handleOnClose: () => this.toggleLanguageDialog() }))), index.h("div", { key: 'c255dabaf4a129b1d9074af3e7512a86859c4d81', class: "zonos--invoice-footer-icon-wrapper" }, index.h("div", { key: 'bc16e675a824ad6730e823226bdb872ad04d5b2e', class: "zonos--invoice-footer-logo" }, index.h("zonos-text", { key: '6292e7f1fce3325c7d264a946e1d8a6a4ec768c4', textColor: colorDesktop }, localization.translate('Powered by')), index.h("a", { key: '526f598cdb342f7816d78f7d1b24923d79be72fe', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, index.h("zonos-icon", { key: '8f96ac507a2250df8234dc9d0075dcac433b9630', autoHeight: true, content: ZonosWordmark, size: 42 }))), index.h("div", { key: 'd3fa74852d4bc1e679af3fe141a885f833d3aaef', class: "dot" }), index.h("a", { key: '30b4825365c55a31a1140ababfe3d2c88faa3b04', href: "https://zonos.com/docs/legal/zonos-privacy-policy", target: "_blank" }, index.h("zonos-text", { key: '42cbae5d1a6350844947210493f3945ee2085cd9', textColor: colorDesktop }, localization.translate('Privacy policy')))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -479,7 +479,7 @@ const ZonosInvoicePayment = class {
             }
             cart.stripeStore.checkoutSettlementCurrency = currencyCode;
             // submit google tag when the form is complete
-            submitGtag.submitGtag({ event: 'zonos-checkout-payment-info' });
+            paypal.submitAnalytics({ event: 'zonos-checkout-payment-info' });
             this.continueClicked.emit();
         };
         this.copyCardToClipboard = async (cardNumber) => {
@@ -661,13 +661,13 @@ const ZonosInvoiceReview = class {
     }
     render() {
         const titleTextColor = this.isMobile ? 'gray-1000' : 'gray-800';
-        return (index.h(index.Host, { key: '60da23c47f39a94478f1eb83e003b788aab3b98c', class: classes.classes([
+        return (index.h(index.Host, { key: 'dba979c1f8bb9f4ac5207eb2bc97296523c62fc1', class: classes.classes([
                 'zonos--invoice-review zonos--elements',
                 this.isMobile && 'mobile',
                 this.isTablet && 'tablet',
-            ]) }, index.h("div", { key: '70bbb1973ec1c7197da666ba30be6dc6a20bd386', class: "zonos--title" }, index.h("zonos-text", { key: '35ffffa411ccde7c702b5d5ac3f11d7a8d62916f', textColor: titleTextColor, type: 'semiBoldLabel' }, localization.translate('Pay [organizationName]', {
+            ]) }, index.h("div", { key: 'd9bbd435775f58d3934b9cc5d8658acf781d5090', class: "zonos--title" }, index.h("zonos-text", { key: '103859ee74d37fadd854d59cc852d71b8e23fe11', textColor: titleTextColor, type: 'semiBoldLabel' }, localization.translate('Pay [organizationName]', {
             organizationName: zonosStore.zonosStore.organizationName,
-        }))), index.h("div", { key: 'c965e47314d1c3178b1dd2e54e835c0b91966a81', class: "zonos--total-pay" }, renderFallback.renderFallback({
+        }))), index.h("div", { key: 'fcc9ade2fc63e53307659134a1763909ad66cc30', class: "zonos--total-pay" }, renderFallback.renderFallback({
             content: (index.h("zonos-text", { type: 'secondaryPageHeader' }, renderCheckoutCurrency.renderCheckoutCurrency({
                 amount: invoice.invoiceStore.amountTotalDue || 0,
                 isForeign: true,

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b1f95d96.js');
 const cart = require('./cart-d08c87e2.js');
 const invoice = require('./invoice-e64f97c6.js');
-const paypal = require('./paypal-73a542cb.js');
+const paypal = require('./paypal-e278f405.js');
 const localization = require('./localization-a7fac4b4.js');
 const zonosStore = require('./zonosStore-1c517e55.js');
 const buildCartItemsByTempCart = require('./buildCartItemsByTempCart-edddbf4b.js');
@@ -17,7 +17,7 @@ const ILanguage = require('./ILanguage-98b04442.js');
 require('./isDarkColor-bfe6d1eb.js');
 require('./getBorderRadius-db55a464.js');
 require('./isContrastColor-6a17f408.js');
-require('./submitGtag-9ac5a42e.js');
+require('./submitGtag-4241212b.js');
 
 const ChevronDownIcon = `<svg color="var(--zonos-elements-gray-400)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M6.293 9.293a1 1 0 0 1 1.414 0L12 13.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-4.93 4.93a1.1 1.1 0 0 1-1.555 0l-4.93-4.93a1 1 0 0 1 0-1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;
 

package/dist/cjs/zonos-language-select_2.cjs.entry.js

@@ -34,9 +34,9 @@ const ZonosLanguageSelect = class {
     }
     render() {
         const { selectedLocale } = localization.localizationStore;
-        return (index.h(index.Host, { key: '748efbe1de696c0e1f52cef03d86f211c1e5f505', class: "zonos--elements", style: {
+        return (index.h(index.Host, { key: 'ebe7e47d37019b9aa6e2a5ed77d9c82c71b3fa6c', class: "zonos--elements", style: {
                 '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: '97dd3f26dd5aff625b26a08125737f915bfbd112', class: "zonos--language-select" }, index.h("zonos-select-dialog-header", { key: '8c00e1cf6d7addf5b817e07c1fb1b492cfb5775f', handleOnClose: () => this.handleOnClose(), label: localization.translate('Select a language') }), index.h("div", { key: '0260631e4303d5cee5035f31667203e4e3417a76', class: "zonos--language-select-content" }, ILanguage.languages.map(language => (index.h("button", { class: "zonos--language-select-button", onClick: () => this.languageSelected(language.code) }, index.h("zonos-text", { textColor: "gray-800" }, language.translatedLabel), language.code === selectedLocale && (index.h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 16 })))))))));
+            } }, index.h("div", { key: '532b2664add5948ae9687049afc1fdaed8cc0890', class: "zonos--language-select" }, index.h("zonos-select-dialog-header", { key: '650adad0103c42f27e98bb3c2c6c8e2a122339df', handleOnClose: () => this.handleOnClose(), label: localization.translate('Select a language') }), index.h("div", { key: '84af0288f9911d4739c93388723230b165466908', class: "zonos--language-select-content" }, ILanguage.languages.map(language => (index.h("button", { class: "zonos--language-select-button", onClick: () => this.languageSelected(language.code) }, index.h("zonos-text", { textColor: "gray-800" }, language.translatedLabel), language.code === selectedLocale && (index.h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 16 })))))))));
     }
 };
 ZonosLanguageSelect.style = ZonosLanguageSelectStyle0;
@@ -60,9 +60,9 @@ const ZonosSelectDialogHeader = class {
         this.label = '';
     }
     render() {
-        return (index.h(index.Host, { key: 'a1b9179c608e89ae29416a7c1cb93a5e15c9b029', class: "zonos--elements", style: {
+        return (index.h(index.Host, { key: '6a667ac343eccf7298cbca49b58ccbca0ca6509d', class: "zonos--elements", style: {
                 '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("zonos-v-stack", { key: '736354e40352c79c5b1d27207c424fc6ee82f7f4', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, index.h("div", { key: '700c0321bb2ea565ff861b833f51f3418ad61e4f', class: "zonos--select-dialog-header" }, index.h("zonos-text", { key: 'a45fb7507453949a1f3c687ae73635bb8b3f9282', type: "boldLabel" }, this.label), index.h("zonos-button", { key: 'a6b210caedc6248d8ab112bb10d888455d6fc6da', class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close select dialog", content: RemoveIcon, size: 20 }), noBackground: true, onClick: () => this.handleOnClose() })), index.h("slot", { key: '3bfbcd7c5bab9f11e4ed936dcd3b99da553709a0' }))));
+            } }, index.h("zonos-v-stack", { key: '4f3958ab4700f1f6d1bfff92cf3c5593c97c536e', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, index.h("div", { key: '44d690590c6727b7d17ea96967a6929ea5d60a51', class: "zonos--select-dialog-header" }, index.h("zonos-text", { key: 'cd45b4d292f3487a442510918afe7c828cbdb939', type: "boldLabel" }, this.label), index.h("zonos-button", { key: '43e7887d8f11185ec7d6ff0895f922e8a5719865', class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close select dialog", content: RemoveIcon, size: 20 }), noBackground: true, onClick: () => this.handleOnClose() })), index.h("slot", { key: '2c6e66b98bfbc8d4c3fd1d8459d703a8006324d3' }))));
     }
 };
 ZonosSelectDialogHeader.style = ZonosSelectDialogHeaderStyle0;

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

@@ -16,7 +16,7 @@ const ZonosLink = class {
         this.href = '';
     }
     render() {
-        return (index.h(index.Host, { key: 'a6077a6f0105ec4be45de0cb548ef1e32a28deb6', class: "zonos--elements" }, index.h("a", { key: '7f3ec0258909c2da08f758165a93abd3ab497a42', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, index.h("slot", { key: '774e15fa5c093041ac06a0a9bcac0446d7ce54fc' }))));
+        return (index.h(index.Host, { key: 'b6d1debcb25cc43d1b4eb9fe41183a3190a4f6be', class: "zonos--elements" }, index.h("a", { key: '9c81e327e3021215a78bd7ce2a619f5764c012ac', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, index.h("slot", { key: '59c6fbbc8cf9b5e44e76a52dd6472bd6a28a852f' }))));
     }
 };
 ZonosLink.style = ZonosLinkStyle0;

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

@@ -26,11 +26,11 @@ const ZonosLogo = class {
         const filterColor = this.theme === 'DARK'
             ? 'invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%)'
             : 'whiteinvert(0%) sepia(100%) saturate(32%) hue-rotate(92deg) brightness(107%) contrast(107%)';
-        return (index.h(index.Host, { key: 'f7a7ecb8ea16dfec9df297e35a9618ad56d5e60a', class: classes.classes(['zonos--elements zonos--logo']), style: {
+        return (index.h(index.Host, { key: 'd45302a20adc0f2c9ad19a37c1c9e4578f129ddf', class: classes.classes(['zonos--elements zonos--logo']), style: {
                 '--zonos--filter-color': filterColor,
                 '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
                 '--zonos--width': this.width,
-            } }, index.h("img", { key: '70ea211dfc9973b17dd4b63763913190e70ca980', alt: "Zonos Logo", src: index.getAssetPath('./assets/ZonosLogo.png') })));
+            } }, index.h("img", { key: 'e82b14ece643a9037e57b6ce561f1eff3c3bd8fa', alt: "Zonos Logo", src: index.getAssetPath('./assets/ZonosLogo.png') })));
     }
     static get assetsDirs() { return ["assets"]; }
 };

package/dist/cjs/zonos-stripe-input.cjs.entry.js

@@ -77,7 +77,7 @@ const ZonosStripeInput = class {
             ? zonosStore.zonosStore.appearance.theme === 'DARK'
             : primaryColor && isDarkColor.isDarkColor(primaryColor);
         const fontSize = zonosStore.zonosStore.appearance.fontSizeInputValue || 16;
-        return (index.h(index.Host, { key: 'c97d6030d8c9c3ca051a9eb0dce85676245abeeb', class: classes.classes([
+        return (index.h(index.Host, { key: '90f2916175c8512bf24c235885dba82c8a82bc6d', class: classes.classes([
                 'zonos--input zonos--elements',
                 isDark && 'dark',
                 (this.isError || !!this.error) && 'has-error',
@@ -86,10 +86,10 @@ const ZonosStripeInput = class {
                 '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
                 '--zonos--font-size': `${fontSize}px`,
                 '--zonos--primary-color': secondaryColor,
-            } }, index.h("div", { key: '2517b55aa12ed4dd4772be3dbd48edf28e393697', class: classes.classes([
+            } }, index.h("div", { key: '95a6eeecfb1c8935ab5289b10a6d4330ba69d780', class: classes.classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, index.h("input", Object.assign({ key: '7853f3eafc7a926f88b21abfa8f59995b5c35cf3' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes.classes([
+            ]) }, index.h("input", Object.assign({ key: 'ebafe0cd341d3717914d1731c67aa961df1ed25b' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes.classes([
                 'zonos--floated-input',
                 !!this.inputLabel && 'has-label',
                 this.internalValue && 'has-content',
@@ -99,7 +99,7 @@ const ZonosStripeInput = class {
                 this.inputChange.emit(input.value);
                 this.el.inputValue = input.value;
                 this.el.dispatchEvent(new Event('change'));
-            }, placeholder: this.inputPlaceholder || '', required: this.required, type: "text", value: this.internalValue })), index.h("div", { key: '56c6339f420fd38d0c850a6ad10f2349bfe99d21', class: "zonos--floated-label" }, index.h("label", { key: '7cdd19ca39f09d105786a751fbd3434779c8958b', htmlFor: this.inputId }, this.inputLabel))), this.error && (index.h("zonos-text", { key: '784a4aca2d02d59c7a59e8579c88cdaba24f64af', textColor: "red-600", type: "caption" }, this.error))));
+            }, placeholder: this.inputPlaceholder || '', required: this.required, type: "text", value: this.internalValue })), index.h("div", { key: '4f9a9d698d64a16b20a9d2392c975f7ef7cefb43', class: "zonos--floated-label" }, index.h("label", { key: '8e90d3a8721703ca616dee5c8238ff01fcc7b631', htmlFor: this.inputId }, this.inputLabel))), this.error && (index.h("zonos-text", { key: '2fdbfa01afa0baa58a900d7303a82fac78483af9', textColor: "red-600", type: "caption" }, this.error))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -22,10 +22,10 @@ const ZonosTooltip = class {
         this.showTooltip = false;
     }
     render() {
-        return (index.h(index.Host, { key: '4cadca2c888b6729447e216785957ab580d29831', class: "zonos--elements" }, index.h("div", { key: '0d5045faa3a01d8fc5fb5c56328bfa68eb4ffab2', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, index.h("slot", { key: 'a2610a5b6405067eb50d6ad11385544fd740399a' }), index.h("div", { key: 'd319ec9d87d7b4b395d0256b3ecfdb3043927d00', class: classes.classes([
+        return (index.h(index.Host, { key: '3014faf5b26490a23b7735087dd69b05f785a2eb', class: "zonos--elements" }, index.h("div", { key: 'b7117e69a0f6f4ec28a7ccaf898567aeb886b418', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, index.h("slot", { key: 'bf995bf9de4497d32fd825e6a1382dc5eeb768e6' }), index.h("div", { key: '15c134b8aeed57ec2ad313c4316b2f5aa2c98dd0', class: classes.classes([
                 this.showTooltip && 'zonos--show-tooltip',
                 'zonos--tooltip-content',
-            ]) }, index.h("zonos-text", { key: '769dbf51121fd82d870824d22a15e0f8ba0c4c5f', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), index.h("zonos-text", { key: 'e80b2eab8f30e542ecbc87aac24a256fcd0c8cc0', size: "xs", textColor: "gray-0" }, this.subtitle)))));
+            ]) }, index.h("zonos-text", { key: '6d6a135a75e9cfa8f4c921755da4bd476dddf83e', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), index.h("zonos-text", { key: 'b166deb4b050d9a18699e1e3858449215d141726', size: "xs", textColor: "gray-0" }, this.subtitle)))));
     }
 };
 ZonosTooltip.style = ZonosTooltipStyle0;

package/dist/cjs/zonos-v-stack.cjs.entry.js

@@ -20,9 +20,9 @@ const VStack = class {
         this.spacing = 24;
     }
     render() {
-        return (index.h(index.Host, { key: 'fc34e62d3d9712120d2356f1bdc8ad42b26d122a', style: {
+        return (index.h(index.Host, { key: 'ddc85068e0fb28356f75caef81829f2820326701', style: {
                 '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: 'd246b49b618860f01c3f1b8c439c1be361ca656f', class: classes.classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, index.h("slot", { key: '043fde36321157373196c9120a774c78a0fc46ce' }))));
+            } }, index.h("div", { key: '6fd038cf714612f64aa2164ebac11ad0cd8acc77', class: classes.classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, index.h("slot", { key: 'e6519671bd7ac4742306d2d702d15c25d9c69af7' }))));
     }
 };
 VStack.style = ZonosVStackStyle0;

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

@@ -14,7 +14,7 @@ import { handleFetch } from "../../../utils/handleFetch";
 import { jsonParse } from "../../../utils/jsonParse";
 import { allLogs, log } from "../../../utils/logging/log";
 import { sendErrorLog } from "../../../utils/logging/sendErrorLog";
-import { submitGtag, } from "../../../utils/submitGtag";
+import { submitAnalytics } from "../../../utils/submitAnalytics";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
 import RemoveIcon from "./assets/RemoveIcon.svg";
 /* Need to use relative import because inline-svg-stencil couldn't resolve absolute path */
@@ -40,6 +40,13 @@ export class ZonosCheckoutFinish {
          * Is waiting to redirect to a different page
          */
         this.isWaitingToRedirect = true;
+        /**
+         * True when we are about to immediately redirect to the merchant's
+         * successRedirectUrl (CLOSE_MODAL + successRedirectUrl). Used by the
+         * render method to keep the dialog in a loading state instead of briefly
+         * showing the success notification before navigation.
+         */
+        this.isImmediateRedirecting = false;
         this.pullOrder = async () => {
             var _a, _b;
             const checkoutSessionId = storageStore.checkoutSessionId;
@@ -123,8 +130,9 @@ export class ZonosCheckoutFinish {
             window.location.href = url;
         };
         this.isRedirectBehavior = () => {
-            const { successBehavior } = zonosStore.checkoutSettings;
+            const { successBehavior, successRedirectUrl } = zonosStore.checkoutSettings;
             return (successBehavior === 'REDIRECT_TO_SUCCESS_PAGE' ||
+                (successBehavior === 'CLOSE_MODAL' && !!successRedirectUrl) ||
                 !!cartStore.externalConfirmationPageURL);
         };
         /**
@@ -161,13 +169,71 @@ export class ZonosCheckoutFinish {
                     `${redirectUrl}${hasQueryString ? '&' : '?'}${queryString}`
                 : redirectUrl);
         };
+        /**
+         * Immediately redirect to the merchant's successRedirectUrl with the
+         * zonosCheckoutSessionId query param, without polling for the order. Used
+         * by CLOSE_MODAL when a successRedirectUrl is provided, so the merchant
+         * can look up the order themselves using that query param. The
+         * `zonos` prefix avoids colliding with merchant query params.
+         */
+        this.redirectToCloseModalSuccessPage = () => {
+            const redirectUrl = zonosStore.checkoutSettings.successRedirectUrl;
+            const checkoutSessionId = storageStore.checkoutSessionId;
+            this.isWaitingToRedirect = true;
+            if (!checkoutSessionId) {
+                this.redirectToUrl(redirectUrl);
+                return;
+            }
+            // Use the URL API so that an existing query string is preserved and a
+            // `#fragment` (if any) keeps `zonosCheckoutSessionId` in the query
+            // rather than appending it after the fragment marker.
+            try {
+                const url = new URL(redirectUrl);
+                url.searchParams.set('zonosCheckoutSessionId', checkoutSessionId);
+                this.redirectToUrl(url.toString());
+            }
+            catch (_a) {
+                // Fallback for relative URLs (which `new URL(...)` rejects without a
+                // base): split on `#` first so the fragment stays at the end.
+                const fragmentIndex = redirectUrl.indexOf('#');
+                const base = fragmentIndex === -1
+                    ? redirectUrl
+                    : redirectUrl.slice(0, fragmentIndex);
+                const fragment = fragmentIndex === -1 ? '' : redirectUrl.slice(fragmentIndex);
+                const separator = base.includes('?') ? '&' : '?';
+                const query = `zonosCheckoutSessionId=${encodeURIComponent(checkoutSessionId)}`;
+                this.redirectToUrl(`${base}${separator}${query}${fragment}`);
+            }
+        };
         this.handleSuccessBehavior = async () => {
             /**
              * Save placed order info so we can show order info if they try to place the order again
              */
             this.saveOrderIdForDuplicationIssue();
-            const { successBehavior } = zonosStore.checkoutSettings;
+            const { successBehavior, successRedirectUrl } = zonosStore.checkoutSettings;
             switch (true) {
+                // CLOSE_MODAL + successRedirectUrl: redirect immediately with
+                // `zonosCheckoutSessionId`, without polling for the order — merchants
+                // look up the order on their success page using the query param.
+                // `externalConfirmationPageURL` (set per-cart on legacy facade flows)
+                // continues to take precedence and falls through to the polling-based
+                // REDIRECT branch below.
+                case successBehavior === 'CLOSE_MODAL' &&
+                    !!successRedirectUrl &&
+                    !cartStore.externalConfirmationPageURL:
+                    {
+                        // Keep the dialog in a steady loading state instead of briefly
+                        // flashing the success/finish screen — navigation happens
+                        // immediately, so flashing "Order complete!" for a few hundred ms
+                        // before the page changes is more confusing than a spinner. The
+                        // outer caller (`checkStripePaymentStatus` etc.) unconditionally
+                        // resets `isLoading` after this returns, so the render method keys
+                        // off `isImmediateRedirecting` instead.
+                        this.isWaitingToRedirect = true;
+                        this.isImmediateRedirecting = true;
+                        this.redirectToCloseModalSuccessPage();
+                        break;
+                    }
                 // If the merchant wants to redirect to a different page
                 case successBehavior === 'REDIRECT_TO_SUCCESS_PAGE':
                 case !!cartStore.externalConfirmationPageURL: {
@@ -320,7 +386,7 @@ export class ZonosCheckoutFinish {
                 window.history.replaceState({}, '', url.toString());
                 // Payment doesn't go through
                 if (error && (messages === null || messages === void 0 ? void 0 : messages.length)) {
-                    submitGtag({
+                    submitAnalytics({
                         event: 'zonos-checkout-payment-fail',
                         metadata: {
                             checkoutSessionId: storageStore.checkoutSessionId,
@@ -341,14 +407,14 @@ export class ZonosCheckoutFinish {
                     // Save new order info in case the user reloads before we get order info
                     this.saveOrderIdForDuplicationIssue();
                     const checkoutSessionId = storageStore.checkoutSessionId;
-                    submitGtag({
+                    submitAnalytics({
                         event: 'zonos-checkout-success',
                         metadata: this.buildPurchaseMetadata({
                             checkoutSessionId: checkoutSessionId || '',
                             currency: currency === null || currency === void 0 ? void 0 : currency.toUpperCase(),
                         }),
                     });
-                    submitGtag({
+                    submitAnalytics({
                         event: 'purchase',
                         metadata: this.buildPurchaseMetadata({
                             checkoutSessionId: checkoutSessionId || '',
@@ -400,13 +466,13 @@ export class ZonosCheckoutFinish {
             // show success message right away when order id is already created
             this.isLoading = false;
             if (paypalStore.orderIdCreated) {
-                submitGtag({
+                submitAnalytics({
                     event: 'zonos-checkout-success',
                     metadata: this.buildPurchaseMetadata({
                         checkoutSessionId: storageStore.checkoutSessionId || '',
                     }),
                 });
-                submitGtag({
+                submitAnalytics({
                     event: 'purchase',
                     metadata: this.buildPurchaseMetadata({
                         checkoutSessionId: storageStore.checkoutSessionId || '',
@@ -437,13 +503,13 @@ export class ZonosCheckoutFinish {
             this.isLoading = false;
             if (storeCreditStore.orderIdCreated) {
                 const checkoutSessionId = storageStore.checkoutSessionId;
-                submitGtag({
+                submitAnalytics({
                     event: 'zonos-checkout-success',
                     metadata: this.buildPurchaseMetadata({
                         checkoutSessionId: checkoutSessionId || '',
                     }),
                 });
-                submitGtag({
+                submitAnalytics({
                     event: 'purchase',
                     metadata: this.buildPurchaseMetadata({
                         checkoutSessionId: checkoutSessionId || '',
@@ -517,11 +583,11 @@ export class ZonosCheckoutFinish {
     }
     render() {
         const isTestMode = getIsTestMode();
-        return (h(Host, { key: 'c74f250bac797f8c000bac4892bc5ab56c0867bb', class: "zonos--checkout-finish zonos--elements", style: {
+        return (h(Host, { key: '97291e81aef62884ec0519d93dcc7ff184b2913d', class: "zonos--checkout-finish zonos--elements", style: {
                 '--zonos--border-radius': getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, !this.isLoading && (h("div", { key: '5ee705381b0246f5035f512c9d19beba6dc33d4f', class: "zonos--finish-details" }, h("div", { key: '1d1a54d8f73535aaada32601c5e771c9fd381104', 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: '68c898ee87166d08bd52702ae8f9bfe51c393076', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: '98b6eaff782fe34a8dbd258e4c7d0c81c3577bcc', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.shouldRenderCloseButtonForRedirectBehavior() && (h("zonos-button", { key: 'ccc5e7973b2e962e22ac56dcad6e33b048621036',
+            } }, this.isImmediateRedirecting && (h("div", { key: '40569271fb67acb22a4a0fa3c0fc8e1c0c641061', class: "loading-wrapper" }, h("zonos-spinner", { key: '8b431c7751e5e32fe97f4244151ece7de3c6d9bc', size: 48 }))), !this.isLoading && !this.isImmediateRedirecting && (h("div", { key: '0f5c89c285acf8c4f79e058c69cde9011df7e1a2', class: "zonos--finish-details" }, h("div", { key: '7491b15a90941476338ec6b1738312ffd4ebd2c0', 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: '87e0d022014596b02d813ee510917b7ec9b55e09', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: '456bd678d5ba6f5b74da34f906bbe9f4bed870ac', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.shouldRenderCloseButtonForRedirectBehavior() && (h("zonos-button", { key: 'ebde02a73e71ad88d7d68629f2cd8a34d961aa63',
             // Only show loading spinner if it's not an error notification
             loading: this.isWaitingToRedirect &&
                 this.notificationType !== 'error', onClick: () => {
@@ -533,9 +599,9 @@ export class ZonosCheckoutFinish {
                 }
                 this.closeClickHandler();
             }, size: "md", variant: "primary" }, translate('Close'))), !window.Zonos.isLegacyCheckout &&
-            this.shouldRenderKeepShoppingButton() && (h("zonos-button", { key: 'cd30bc010f2a3e935d9b80e56389581a9150b021', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))), isTestMode &&
+            this.shouldRenderKeepShoppingButton() && (h("zonos-button", { key: '2b86a3d9fb705ad080af532e645fd26aa844a14a', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))), isTestMode &&
             cartStore.step === 'finish' &&
-            this.notificationType === 'success' && (h("div", { key: '458809f316ac5129efbc7fe90d1549c042d477af', class: "zonos--finish-button-wrapper" }, h("zonos-button", { key: 'dcf0c595cb119a731c34c1aff09960db8a1fb251', backgroundColor: "gray-0", buttonColor: "gray-1000", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), h("zonos-button", { key: '76d55870370b4906970b3e2109617ba2230eee7e', onClick: () => {
+            this.notificationType === 'success' && (h("div", { key: '83a9dc9fb81baaf9e223dfa9fe0fc0fc4c106635', class: "zonos--finish-button-wrapper" }, h("zonos-button", { key: 'edf8057b0430e3e4bb8fd675554659781e1724ae', backgroundColor: "gray-0", buttonColor: "gray-1000", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), h("zonos-button", { key: '3c40eee58d8a2ad5951dfdfc7c8d485052b6ba73', onClick: () => {
                 const isZonosDashboard = window.location.hostname.includes('dashboard.zonos.com');
                 this.redirectToUrl(isZonosDashboard
                     ? '/orders/all'
@@ -635,7 +701,8 @@ export class ZonosCheckoutFinish {
             "notificationMessages": {},
             "notificationActionText": {},
             "order": {},
-            "isWaitingToRedirect": {}
+            "isWaitingToRedirect": {},
+            "isImmediateRedirecting": {}
         };
     }
     static get events() {

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

@@ -35,10 +35,10 @@ export class ZonosCheckoutFooter {
         const languageLabel = (_a = languages.find(x => x.code === localizationStore.selectedLocale)) === null || _a === void 0 ? void 0 : _a.label;
         // reverse color when on desktop. With the coversheet backdrop, the color should be white
         const colorDesktop = this.dataTheme === 'LIGHT' && !this.mobile ? 'gray-0' : 'gray-1000';
-        return (h(Host, { key: 'aa7fe5e0bb22626f590d93a6c8a52876523a2dfb', class: classes(['zonos--elements', this.isMobile && 'mobile']) }, h("div", { key: '5fb0fc90649a06e324935484d0c5c1dba31d792c', class: "zonos--checkout-footer" }, h("div", { key: 'e34ac7fda1d9a13830276313e4a36a7840497d7e', class: "zonos--checkout-locale-wrapper" }, h("zonos-button", { key: '775156c9f331715768b1bf9c36970d0c7da02fd2', buttonColor: colorDesktop, class: "zonos--checkout-footer-language-button", icon: h("zonos-icon", { "aria-label": "Language select", content: Globe, iconColor: colorDesktop }), onClick: () => this.toggleLanguageDialog(), variant: "subtle" }, languageLabel), h("div", { key: 'e2cc31362529661507811b9f5aa68586b3bf9ea5', class: classes([
+        return (h(Host, { key: '2200a14517d5d1dd81b68ecfb60ab6a691ebe581', class: classes(['zonos--elements', this.isMobile && 'mobile']) }, h("div", { key: 'bc77f1ea299fa151ba9d4628653d6a3800856e85', class: "zonos--checkout-footer" }, h("div", { key: 'e2e9f901e3546a48ba88aca9c0f422785d32f78d', class: "zonos--checkout-locale-wrapper" }, h("zonos-button", { key: '60df35f860aa3c59bfa6f470adab3c882301c529', buttonColor: colorDesktop, class: "zonos--checkout-footer-language-button", icon: h("zonos-icon", { "aria-label": "Language select", content: Globe, iconColor: colorDesktop }), onClick: () => this.toggleLanguageDialog(), variant: "subtle" }, languageLabel), h("div", { key: '3d4acf669d35fcbf4364fb56f7a18bb3a8f61e1b', class: classes([
                 'zonos--checkout-footer-dialog',
                 this.showLanguageDialog && 'zonos--checkout-footer-dialog-open',
-            ]) }, h("zonos-language-select", { key: 'ad43b0a6bb947a69ea970485ee8d9afb5c8d1adb', handleOnClose: () => this.toggleLanguageDialog() }))), h("div", { key: 'c652833a9ce05beb22b9530003863ac0e5e9f8ea', class: "zonos--checkout-footer-icon-wrapper" }, h("a", { key: 'f2f8fb4ef070fe6a59a8b787e9e3e6237c2cc395', href: "https://zonos.com/docs/legal/zonos-privacy-policy", target: "_blank" }, h("zonos-text", { key: '50b8962317bfc01bc7edbbe4c51f58476ca3c4ec', textColor: colorDesktop }, "Privacy policy")), h("div", { key: '7b4b70f7c0bd4ae5f385d6738f844a795261b9b9', class: "zonos--checkout-footer-logo" }, h("zonos-text", { key: '8a4279a6584a376cb10e8da6b33d8006ac896d5b', textColor: colorDesktop }, "Powered by"), h("a", { key: '523a822b1c5b80bcb1d5dde2a7d9fce5fe476d20', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '19753e93a7820765cf208916f53adebdcdf05cf9', autoHeight: true, content: ZonosIconDark, size: 108 })))))));
+            ]) }, h("zonos-language-select", { key: '5b32a3d11a725c7af0c358acf9a15c6ec17201ac', handleOnClose: () => this.toggleLanguageDialog() }))), h("div", { key: 'f678c6d76ad122ccbd3e18e6fa9deacd9ec76b93', class: "zonos--checkout-footer-icon-wrapper" }, h("a", { key: '08cc72da5cbc00bd927828ae1df960a80604519c', href: "https://zonos.com/docs/legal/zonos-privacy-policy", target: "_blank" }, h("zonos-text", { key: 'df8d1727117c28c694c8450d5268895f67b23dff', textColor: colorDesktop }, "Privacy policy")), h("div", { key: 'c75b73f3bd573aa2bdd60b7fd05e6b06c8ee8d62', class: "zonos--checkout-footer-logo" }, h("zonos-text", { key: 'b57bf8ed2b6498f9cd64d7ab066625376642abda', textColor: colorDesktop }, "Powered by"), h("a", { key: 'cd12e10b1e4acd43fea371aad6d74ee8a89f1fbe', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '06465fba84c0c05e330779f522fdcabed817d5de', autoHeight: true, content: ZonosIconDark, size: 108 })))))));
     }
     static get is() { return "zonos-checkout-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -95,4 +95,11 @@
 :host .zonos--test-cards {
   margin-top: auto;
   padding-top: 16px;
+}
+
+:host(.mobile.mobile) {
+  overscroll-behavior: auto;
+}
+:host(.mobile.mobile) .zonos--group {
+  overscroll-behavior: auto;
 }

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

@@ -10,9 +10,10 @@ import { placeTestOrder } from "../../../utils/api/placeTestOrder";
 import { getIsStagingMode } from "../../../utils/checkout/getIsStagingMode";
 import { getIsTestMode } from "../../../utils/checkout/getIsTestMode";
 import { renderCheckoutCurrency } from "../../../utils/checkout/renderCheckoutCurrency";
+import { classes } from "../../../utils/classes";
 import { isDarkColor } from "../../../utils/isDarkColor";
 import { log } from "../../../utils/logging/log";
-import { submitGtag } from "../../../utils/submitGtag";
+import { submitAnalytics } from "../../../utils/submitAnalytics";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
 import CheckmarkLineIcon from "./assets/CheckmarkLineIcon.svg";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
@@ -68,7 +69,7 @@ export class ZonosCheckoutPayment {
             }
             stripeStore.checkoutSettlementCurrency = currencyCode;
             // submit google tag when the form is complete
-            submitGtag({
+            submitAnalytics({
                 event: 'zonos-checkout-payment-info',
                 metadata: {
                     checkoutSessionId: storageStore.checkoutSessionId,
@@ -196,7 +197,10 @@ export class ZonosCheckoutPayment {
                     display: isPaypalTabSelected ? 'block' : 'none',
                 } }))), isTestMode && (h("zonos-card", { backgroundColor: "gray-100", borderRadius: 12, class: "zonos--test-cards" }, h("zonos-v-stack", { spacing: 16 }, h("div", null, h("zonos-text", { type: "semiBoldLabel" }, translate('Test cards')), h("zonos-text", { textColor: "gray-700" }, translate('Click to copy the card number. Use any future expiration date and three number CVC.'))), h("zonos-button", { icon: h("zonos-icon", { content: CheckmarkLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4242424242424242') }, translate('Success'), " (****4242)"), h("zonos-button", { icon: h("zonos-icon", { content: RemoveLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4000000000000002') }, translate('Failure'), " (****0002)")), h("zonos-notification", null)))));
         };
-        return (h(Host, { class: "zonos--checkout-payment zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Payment method')), renderPayment())));
+        return (h(Host, { class: classes([
+                'zonos--checkout-payment zonos--elements',
+                this.isMobile && 'mobile',
+            ]) }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Payment method')), renderPayment())));
     }
     static get is() { return "zonos-checkout-payment"; }
     static get encapsulation() { return "scoped"; }