@zonos/elements 1.3.247 → 1.3.248

package/dist/cjs/{cart-97a2d20a.js → cart-28310848.js}

@@ -1423,6 +1423,8 @@ const stripeStoreRetrievePayment = async ({ clientSecret: _clientSecret, storybo
     const status = paymentIntent === null || paymentIntent === void 0 ? void 0 : paymentIntent.status;
     const { isError, messages } = stripeStoreMessageBasedOnStatus(status);
     return {
+        amount: paymentIntent === null || paymentIntent === void 0 ? void 0 : paymentIntent.amount,
+        currency: paymentIntent === null || paymentIntent === void 0 ? void 0 : paymentIntent.currency,
         error: isError,
         messages,
         paymentIntentId: paymentIntent === null || paymentIntent === void 0 ? void 0 : paymentIntent.id,

package/dist/cjs/index.cjs.js

@@ -133,7 +133,7 @@ const getZonosQaUrl = () => {
         return null;
     }
     const qaUrl = extractZonosQaUrl(window.location.href);
-    const cdnUrl = "https://v1.3.247.js.zonos.com";
+    const cdnUrl = "https://v1.3.248.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.') ||
@@ -381,10 +381,10 @@ const zonosLoadUrl = (() => {
     return null;
 })();
 const startLoadTime = Date.now();
-const ZONOS_URL = "https://v1.3.247.js.zonos.com";
-const JS_DELIVR_ZONOS_URL = zonosLoadUrl || "https://cdn.jsdelivr.net/npm/@zonos/elements@1.3.247";
-const UNPKG_ZONOS_URL = "https://unpkg.com/@zonos/elements@1.3.247";
-const CDNJS_ZONOS_URL = "https://cdnjs.cloudflare.com/ajax/libs/zonos-elements/1.3.247";
+const ZONOS_URL = "https://v1.3.248.js.zonos.com";
+const JS_DELIVR_ZONOS_URL = zonosLoadUrl || "https://cdn.jsdelivr.net/npm/@zonos/elements@1.3.248";
+const UNPKG_ZONOS_URL = "https://unpkg.com/@zonos/elements@1.3.248";
+const CDNJS_ZONOS_URL = "https://cdnjs.cloudflare.com/ajax/libs/zonos-elements/1.3.248";
 const GOOGLE_FONT_URL = 'https://fonts.googleapis.com';
 const GOOGLE_FONT_REGEX = /^https:\/\/fonts\.googleapis\.com/;
 class Zonos {
@@ -402,8 +402,10 @@ Zonos.iframeLogType = typeof window !== 'undefined'
     ? new URLSearchParams(window.location.search).get('iframeLogType')
     : null;
 Zonos.isBigCommerce = false;
-Zonos.releaseDate = "1769706838597";
+Zonos.releaseDate = "1772221080993";
 Zonos.isLegacyCheckout = false;
+Zonos.googleAnalyticId = null;
+Zonos.googleAnalyticReady = false;
 Zonos.startLoadTime = startLoadTime;
 Zonos.domain = typeof window !== 'undefined'
     ? // domain that embeds the iframe
@@ -423,7 +425,7 @@ Zonos.isNpm = true;
 Zonos.zonosQaUrl = null;
 Zonos.zonosQaUrlApi = null;
 Zonos.trackEventLogs = [];
-Zonos.version = `v${"1.3.247"}`;
+Zonos.version = `v${"1.3.248"}`;
 Zonos.modeAlerted = false;
 Zonos.cartData = null;
 Zonos.paypal = null;
@@ -443,6 +445,10 @@ Zonos.init = async (params) => {
     VarianceTest.log(`====== ZONOS DEBUG MODE: on (${_a.version}) ======`);
     _a.zonosApiKey = zonosApiKey;
     _a.storeId = storeId;
+    // When not in iframe, GA is ready (gtag works directly). When in iframe, relay will set this after parent configures.
+    if (typeof window !== 'undefined' && window.parent === window) {
+        _a.googleAnalyticReady = true;
+    }
     if (_a.isNpm) {
         VarianceTest.log('====== ZONOS LOADING FROM NPM ======');
         const zonosQaUrl = getZonosQaUrl();
@@ -547,6 +553,7 @@ Zonos.injectCustomScriptForHostedCheckout = () => {
     const metadata = (cartData === null || cartData === void 0 ? void 0 : cartData.metadata) || [];
     const headerScript = metadata.find(meta => meta.key === 'customHeaderScript');
     const footerScript = metadata.find(meta => meta.key === 'customFooterScript');
+    // googleAnalyticId is set by customHTML in checkoutSettings (e.g. <script>window.Zonos.googleAnalyticId = "G-XXX";</script>), injected by zonos-controller
     // Only inject the script if checkout is on Zonos hosted checkout and custom script is available
     if (!window.Zonos.isLegacyCheckout || (!headerScript && !footerScript)) {
         VarianceTest.log('Skip injecting custom script for hosted checkout', 'info', {

package/dist/cjs/{invoice-05a10ee1.js → invoice-2e8e5879.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const zonosStore = require('./zonosStore-37a4b4f4.js');
-const cart = require('./cart-97a2d20a.js');
+const cart = require('./cart-28310848.js');
 const localization = require('./localization-00e73920.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
 const VarianceTest = require('./VarianceTest-bec00ea8.js');

package/dist/cjs/{isCollectMobileTablet-edd4804c.js → isCollectMobileTablet-bd0f4556.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const zonosStore = require('./zonosStore-37a4b4f4.js');
-const cart = require('./cart-97a2d20a.js');
+const cart = require('./cart-28310848.js');
 const localization = require('./localization-00e73920.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
 const VarianceTest = require('./VarianceTest-bec00ea8.js');

package/dist/cjs/{paypal-0b4b352b.js → paypal-3019ae94.js}

@@ -1,11 +1,12 @@
 'use strict';
 
 const zonosStore = require('./zonosStore-37a4b4f4.js');
-const cart = require('./cart-97a2d20a.js');
+const cart = require('./cart-28310848.js');
 const localization = require('./localization-00e73920.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
 const isContrastColor = require('./isContrastColor-09f5924a.js');
 const VarianceTest = require('./VarianceTest-bec00ea8.js');
+const submitGtag = require('./submitGtag-a50ab32e.js');
 
 /*!
  * paypal-js v8.1.0 (2024-06-07T16:55:00.122Z)
@@ -226,21 +227,6 @@ const paypalCreateOrder = async ({ checkoutSessionId, intent, }) => {
     return { errors, json };
 };
 
-/**
- * Submit a gtag event if the gtag function is available.
- */
-const submitGtag = (event) => {
-    const googleAnalyticSetting = zonosStore.zonosStore.checkoutSettings.analyticsProviders.find(item => item.type === 'GOOGLE_ANALYTICS');
-    // only submit if googleAnalytic in checkout setting is on.
-    if (!googleAnalyticSetting || (googleAnalyticSetting === null || googleAnalyticSetting === void 0 ? void 0 : googleAnalyticSetting.status) === 'DISABLED') {
-        return;
-    }
-    if (typeof window.gtag === 'function') {
-        VarianceTest.log('Zonos submits gtag event', 'log', event);
-        window.gtag('event', event, {});
-    }
-};
-
 const { onChange: paypalStoreOnChange, reset: paypalStoreReset, state: paypalStore, } = zonosStore.createStore(() => ({
     intent: 'capture',
     orderIdCreated: null,
@@ -321,6 +307,12 @@ const paypalButtonOptions = ({ checkoutSessionId, onPaypalFail, onPaypalSessionD
                 // reset stripe error message
                 cart.stripeStore.hasPaymentError = false;
                 cart.stripeStore.customErrorMessage = null;
+                submitGtag.submitGtag({
+                    event: 'zonos-checkout-payment-fail',
+                    metadata: {
+                        checkoutSessionId,
+                    },
+                });
                 onPaypalFail === null || onPaypalFail === void 0 ? void 0 : onPaypalFail();
                 return '';
             }
@@ -353,6 +345,12 @@ const paypalButtonOptions = ({ checkoutSessionId, onPaypalFail, onPaypalSessionD
                 // reset stripe error message
                 cart.stripeStore.hasPaymentError = false;
                 cart.stripeStore.customErrorMessage = null;
+                submitGtag.submitGtag({
+                    event: 'zonos-checkout-payment-fail',
+                    metadata: {
+                        checkoutSessionId,
+                    },
+                });
                 // trigger fail event
                 onPaypalFail === null || onPaypalFail === void 0 ? void 0 : onPaypalFail();
                 return '';
@@ -363,7 +361,13 @@ const paypalButtonOptions = ({ checkoutSessionId, onPaypalFail, onPaypalSessionD
                 // reset paypal error banner
                 paypalStore.paypalErrorMessage = null;
                 // submit google tag when the form is complete
-                submitGtag('zonos-checkout-payment-info');
+                submitGtag.submitGtag({
+                    event: 'zonos-checkout-payment-info',
+                    metadata: {
+                        checkoutSessionId,
+                        paymentMethod: 'paypal',
+                    },
+                });
                 const orderId = await paypalStoreCaptureOrder({
                     checkoutSessionId,
                     paypalMockResponse: window.Zonos._paypalMockResponse,
@@ -484,4 +488,3 @@ exports.paypalStoreHasPaypalEnabled = paypalStoreHasPaypalEnabled;
 exports.paypalStoreInitButtons = paypalStoreInitButtons;
 exports.paypalStoreOnChange = paypalStoreOnChange;
 exports.paypalStoreReset = paypalStoreReset;
-exports.submitGtag = submitGtag;

package/dist/cjs/{placeTestOrder-07b46688.js → placeTestOrder-b0369cfd.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const cart = require('./cart-97a2d20a.js');
+const cart = require('./cart-28310848.js');
 const localization = require('./localization-00e73920.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
 

package/dist/cjs/{renderCheckoutCurrency-dd3b0609.js → renderCheckoutCurrency-9e919b9f.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const cart = require('./cart-97a2d20a.js');
+const cart = require('./cart-28310848.js');
 const localization = require('./localization-00e73920.js');
 
 const getDisplayCurrency = () => {

package/dist/cjs/submitGtag-a50ab32e.js

@@ -0,0 +1,116 @@
+'use strict';
+
+const zonosStore = require('./zonosStore-37a4b4f4.js');
+const handleFetch = require('./handleFetch-954f30e1.js');
+const VarianceTest = require('./VarianceTest-bec00ea8.js');
+
+/** Message type for zonos-analytic events sent from iframe to parent. */
+const ZONOS_ANALYTIC_TYPE = 'zonos-analytic';
+/** Ping sent by iframe to configure parent's analytics relay (e.g. GA) and get ready signal. */
+const RELAY_PING_TYPE = 'zonos-analytics-relay-ping';
+/** Response from parent when analytics relay (e.g. gtag) is ready. */
+const RELAY_READY_TYPE = 'zonos-analytics-relay-ready';
+
+let parentGtagReady = false;
+let relayListenerAdded = false;
+const queuedEvents = [];
+function flushQueuedEvents() {
+    while (queuedEvents.length > 0) {
+        const { event, payload } = queuedEvents.shift();
+        try {
+            window.parent.postMessage({
+                event,
+                metadata: payload,
+                type: ZONOS_ANALYTIC_TYPE,
+            }, '*');
+        }
+        catch (_a) {
+            // Ignore postMessage failures
+        }
+    }
+}
+function ensureRelayListener() {
+    if (relayListenerAdded)
+        return;
+    relayListenerAdded = true;
+    window.addEventListener('message', (e) => {
+        var _a;
+        if (((_a = e.data) === null || _a === void 0 ? void 0 : _a.type) === RELAY_READY_TYPE) {
+            parentGtagReady = true;
+            if (typeof window.Zonos !== 'undefined') {
+                window.Zonos.googleAnalyticReady = true;
+            }
+            flushQueuedEvents();
+        }
+    });
+}
+function sendPingToParent() {
+    try {
+        const googleAnalyticId = typeof window.Zonos !== 'undefined'
+            ? window.Zonos.googleAnalyticId
+            : undefined;
+        window.parent.postMessage({ googleAnalyticId, type: RELAY_PING_TYPE }, '*');
+    }
+    catch (_a) {
+        // Ignore postMessage failures
+    }
+}
+/**
+ * Sends ping to parent with googleAnalyticId so parent can inject/configure GA and respond with ready.
+ * Call after customHTML or custom script sets window.Zonos.googleAnalyticId.
+ */
+function ensureAnalyticsRelayPing() {
+    if (typeof window === 'undefined' ||
+        window.parent === window ||
+        parentGtagReady) {
+        return;
+    }
+    ensureRelayListener();
+    sendPingToParent();
+}
+/**
+ * Submit a gtag event if the gtag function is available.
+ * When running inside an iframe, only posts to parent after the parent has
+ * confirmed (via analyticsRelayOnInit) that gtag is available.
+ */
+const submitGtag = ({ event, metadata }) => {
+    const googleAnalyticSetting = zonosStore.zonosStore.checkoutSettings.analyticsProviders.find(item => item.type === 'GOOGLE_ANALYTICS');
+    // only submit if googleAnalytic in checkout setting is on.
+    if (!googleAnalyticSetting || (googleAnalyticSetting === null || googleAnalyticSetting === void 0 ? void 0 : googleAnalyticSetting.status) === 'DISABLED') {
+        return;
+    }
+    const isTestMode = handleFetch.getIsTestMode();
+    const payload = Object.assign(Object.assign({}, metadata), (isTestMode && { isTestMode: true }));
+    // filter null key
+    const filteredPayload = Object.fromEntries(Object.entries(payload).filter(([_, value]) => value !== null));
+    const isInIframe = typeof window !== 'undefined' && window.parent !== window;
+    if (isInIframe) {
+        // gtag does not work in iframe; must relay to parent via postMessage
+        ensureRelayListener();
+        if (parentGtagReady) {
+            try {
+                window.parent.postMessage({
+                    event,
+                    metadata: filteredPayload,
+                    type: ZONOS_ANALYTIC_TYPE,
+                }, '*');
+            }
+            catch (_a) {
+                // Ignore postMessage failures
+            }
+        }
+        else {
+            queuedEvents.push({ event, payload: filteredPayload });
+            sendPingToParent();
+        }
+        return;
+    }
+    // Not in iframe: call gtag directly
+    if (typeof window.gtag === 'function') {
+        VarianceTest.log('Zonos submits gtag event', 'log', event);
+        window.gtag('event', event, filteredPayload);
+    }
+};
+
+exports.ensureAnalyticsRelayPing = ensureAnalyticsRelayPing;
+exports.submitGtag = submitGtag;

package/dist/cjs/zonos-address-display_9.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-69fa8852.js');
 const localization = require('./localization-00e73920.js');
 const containsNonLatinChars = require('./containsNonLatinChars-2be5129b.js');
-const cart = require('./cart-97a2d20a.js');
+const cart = require('./cart-28310848.js');
 const classes = require('./classes-b7918f56.js');
 const getBorderRadius = require('./getBorderRadius-2ef1170d.js');
 const zonosStore = require('./zonosStore-37a4b4f4.js');

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-69fa8852.js');
 const throttle = require('./throttle-7dd64984.js');
-const cart = require('./cart-97a2d20a.js');
+const cart = require('./cart-28310848.js');
 const localization = require('./localization-00e73920.js');
 const zonosStore = require('./zonosStore-37a4b4f4.js');
 const handleFetch = require('./handleFetch-954f30e1.js');

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

@@ -6,13 +6,14 @@ const index = require('./index-69fa8852.js');
 const zonosStore = require('./zonosStore-37a4b4f4.js');
 const classes = require('./classes-b7918f56.js');
 const getBorderRadius = require('./getBorderRadius-2ef1170d.js');
-const cart = require('./cart-97a2d20a.js');
+const cart = require('./cart-28310848.js');
 const localization = require('./localization-00e73920.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
-const paypal = require('./paypal-0b4b352b.js');
+const paypal = require('./paypal-3019ae94.js');
 const VarianceTest = require('./VarianceTest-bec00ea8.js');
 require('./isDarkColor-878e600e.js');
 require('./isContrastColor-09f5924a.js');
+require('./submitGtag-a50ab32e.js');
 
 const zonosCardCss = ":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 .styled-card{border:var(--zonos-elements-border);border-radius:var(--zonos--border-radius, var(--zonos-elements-radius-6));padding:var(--spacing, 24px);text-align:left;background-color:var(--zonos--background-color);overflow:hidden}:host .styled-card hr{margin-left:calc(var(--spacing, 24px) * -1);margin-right:calc(var(--spacing, 24px) * -1)}:host .styled-card .card-header{margin:calc(var(--spacing, 24px) * -1);padding:var(--spacing, 24px);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-bottom:var(--spacing, 24px);border-bottom:var(--zonos-elements-border);height:65px;line-height:65px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .styled-card .card-header h5{margin-bottom:0;-ms-flex:1;flex:1}:host .styled-card .card-footer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;margin:calc(var(--spacing, 24px) * -1);padding:var(--spacing, 24px);border-top:var(--zonos-elements-border);background:var(--zonos-elements-surface-color-secondary);margin-top:var(--spacing, 24px);border-bottom-left-radius:var(--zonos-elements-radius-8);border-bottom-right-radius:var(--zonos-elements-radius-8);height:var(--footerHeight)}";
 const ZonosCardStyle0 = zonosCardCss;

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

@@ -3,20 +3,21 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-69fa8852.js');
-const cart = require('./cart-97a2d20a.js');
+const cart = require('./cart-28310848.js');
 const localization = require('./localization-00e73920.js');
-const renderCheckoutCurrency = require('./renderCheckoutCurrency-dd3b0609.js');
+const renderCheckoutCurrency = require('./renderCheckoutCurrency-9e919b9f.js');
 const cleanHtmlMarkdown = require('./cleanHtmlMarkdown-577d0a77.js');
 const classes = require('./classes-b7918f56.js');
 const zonosStore = require('./zonosStore-37a4b4f4.js');
 const hasInclusivePrice = require('./hasInclusivePrice-134b0250.js');
-const paypal = require('./paypal-0b4b352b.js');
+const paypal = require('./paypal-3019ae94.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
 const createCustomEvent = require('./createCustomEvent-7b6fad95.js');
 const getBorderRadius = require('./getBorderRadius-2ef1170d.js');
 const VarianceTest = require('./VarianceTest-bec00ea8.js');
+const submitGtag = require('./submitGtag-a50ab32e.js');
 const ILanguage = require('./ILanguage-98b04442.js');
-const placeTestOrder = require('./placeTestOrder-07b46688.js');
+const placeTestOrder = require('./placeTestOrder-b0369cfd.js');
 const isDarkColor = require('./isDarkColor-878e600e.js');
 const getContrastColor = require('./getContrastColor-30848800.js');
 const isColorVariable = require('./isColorVariable-525dbfa7.js');
@@ -359,6 +360,56 @@ const ZonosCheckoutFinish = class {
                 order: json,
             };
         };
+        /**
+         * Metadata for purchase event in GA4
+         */
+        this.buildPurchaseMetadata = ({ checkoutSessionId, currency, }) => {
+            var _a, _b, _c, _d, _e, _f;
+            const items = cart.cartStore.items
+                .filter(item => item.amount >= 0)
+                .map(item => ({
+                item_id: item.sku || item.productId || item.name,
+                item_name: item.name,
+                price: item.amount,
+                quantity: item.quantity,
+            }));
+            /**
+             * The value of this parameter should be the sum of all item amounts in the transaction (without shipping and tax).
+             * @ref https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtag#parameters_22
+             */
+            const subtotal = ((_a = cart.cartStore.checkoutSession) === null || _a === void 0 ? void 0 : _a.subtotals.items) ||
+                ((_b = this.order) === null || _b === void 0 ? void 0 : _b.amountSubtotals.items);
+            const currencyCode = ((_c = cart.cartStore.checkoutSession) === null || _c === void 0 ? void 0 : _c.subtotals.presentmentCurrencyCode) ||
+                ((_d = this.order) === null || _d === void 0 ? void 0 : _d.currencyCode) ||
+                (currency === null || currency === void 0 ? void 0 : currency.toUpperCase());
+            // Cart subtotal amount, can be different on the final checkout session/payment intent, therefore only use it if the order/checkout session can not be found.
+            const cartSubtotal = items.reduce((acc, item) => acc + item.price * item.quantity, 0);
+            const cartCurrency = (_e = cart.cartStore.items.find(Boolean)) === null || _e === void 0 ? void 0 : _e.currencyCode;
+            const transactionId = ((_f = this.order) === null || _f === void 0 ? void 0 : _f.id) || checkoutSessionId || new Date().getTime().toString();
+            if (currencyCode && subtotal) {
+                return {
+                    currency: currencyCode,
+                    items,
+                    transaction_id: transactionId,
+                    value: subtotal,
+                };
+            }
+            // Use cart currency and subtotal if the order/checkout session can not be found
+            if (cartCurrency && cartSubtotal) {
+                return {
+                    currency: cartCurrency,
+                    items,
+                    transaction_id: transactionId,
+                    value: cartSubtotal,
+                };
+            }
+            return {
+                currency: undefined,
+                items,
+                transaction_id: transactionId,
+                value: undefined,
+            };
+        };
         this.redirectToUrl = (url) => {
             // reset store and checkout session id before redirecting
             cart.stripeStoreReset();
@@ -541,7 +592,7 @@ const ZonosCheckoutFinish = class {
         this.checkStripePaymentStatus = async () => {
             const clientSecret = new URLSearchParams(window.location.search).get('payment_intent_client_secret') || cart.stripeStore.clientSecret;
             if (clientSecret || this.storybookForceStatus) {
-                const { error, messages, status } = await cart.stripeStoreRetrievePayment({
+                const { currency, error, messages, status } = await cart.stripeStoreRetrievePayment({
                     clientSecret,
                     storybookForceStatus: this.storybookForceStatus,
                 });
@@ -567,7 +618,12 @@ const ZonosCheckoutFinish = class {
                 window.history.replaceState({}, '', url.toString());
                 // Payment doesn't go through
                 if (error && (messages === null || messages === void 0 ? void 0 : messages.length)) {
-                    paypal.submitGtag('zonos-checkout-payment-fail');
+                    submitGtag.submitGtag({
+                        event: 'zonos-checkout-payment-fail',
+                        metadata: {
+                            checkoutSessionId: localization.storageStore.checkoutSessionId,
+                        },
+                    });
                     void handleFetch.sendErrorLog({
                         endpoint: 'Stripe payment failed',
                         errors: [
@@ -582,8 +638,21 @@ const ZonosCheckoutFinish = class {
                 else {
                     // Save new order info in case the user reloads before we get order info
                     this.saveOrderIdForDuplicationIssue();
-                    paypal.submitGtag('zonos-checkout-success');
                     const checkoutSessionId = localization.storageStore.checkoutSessionId;
+                    submitGtag.submitGtag({
+                        event: 'zonos-checkout-success',
+                        metadata: this.buildPurchaseMetadata({
+                            checkoutSessionId: checkoutSessionId || '',
+                            currency: currency === null || currency === void 0 ? void 0 : currency.toUpperCase(),
+                        }),
+                    });
+                    submitGtag.submitGtag({
+                        event: 'purchase',
+                        metadata: this.buildPurchaseMetadata({
+                            checkoutSessionId: checkoutSessionId || '',
+                            currency: currency === null || currency === void 0 ? void 0 : currency.toUpperCase(),
+                        }),
+                    });
                     void cart.trackConversionEvent({
                         checkoutSessionId,
                         eventName: 'checkout_orderCompleted',
@@ -629,7 +698,18 @@ const ZonosCheckoutFinish = class {
             // show success message right away when order id is already created
             this.isLoading = false;
             if (paypal.paypalStore.orderIdCreated) {
-                paypal.submitGtag('zonos-checkout-success');
+                submitGtag.submitGtag({
+                    event: 'zonos-checkout-success',
+                    metadata: this.buildPurchaseMetadata({
+                        checkoutSessionId: localization.storageStore.checkoutSessionId || '',
+                    }),
+                });
+                submitGtag.submitGtag({
+                    event: 'purchase',
+                    metadata: this.buildPurchaseMetadata({
+                        checkoutSessionId: localization.storageStore.checkoutSessionId || '',
+                    }),
+                });
                 const checkoutSessionId = localization.storageStore.checkoutSessionId;
                 void cart.trackConversionEvent({
                     checkoutSessionId,
@@ -691,11 +771,11 @@ const ZonosCheckoutFinish = class {
     }
     render() {
         const isTestMode = handleFetch.getIsTestMode();
-        return (index.h(index.Host, { key: '7b18913d8ebe7be5cbe9ee7d520b643c342c409d', class: "zonos--checkout-finish zonos--elements", style: {
+        return (index.h(index.Host, { key: '80a543fca5dbc63dde41806702b2f6dd4fa849ab', class: "zonos--checkout-finish zonos--elements", style: {
                 '--zonos--border-radius': getBorderRadius.getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, !this.isLoading && (index.h("div", { key: 'afb522b8b3b769817c00312fc9c14b4c032873ca', class: "zonos--finish-details" }, index.h("div", { key: 'c8cd43bc5269f7f252abaeb25dc98929f52b89bb', 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: '1a7ead411d64fc8edf2de0383049bfd60660a315', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), index.h("zonos-text", { key: '0c63714bbefc4e9beb1d2cf7414e5774bab4eabe', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (index.h(index.Fragment, null, message, index.h("br", null))))), this.shouldRenderCloseButtonForRedirectBehavior() && (index.h("zonos-button", { key: '06304d9815e2199108dfcb3dade1494f17b76137',
+            } }, !this.isLoading && (index.h("div", { key: '6cab293041902e156563f37db6f0e77caaeeaaf9', class: "zonos--finish-details" }, index.h("div", { key: '6bf32844fa9d38eae6e9f337e56b7918e49bf793', 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: 'bf13e59b7bc2380609ffba879fa2b1d8c5d9a9e0', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), index.h("zonos-text", { key: 'c246affb94a9799e0c556affb73b2ebfb69a9c7f', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (index.h(index.Fragment, null, message, index.h("br", null))))), this.shouldRenderCloseButtonForRedirectBehavior() && (index.h("zonos-button", { key: '61fa4fa0e09c0ce2905281b2696f42172c7a2bcd',
             // Only show loading spinner if it's not an error notification
             loading: this.isWaitingToRedirect &&
                 this.notificationType !== 'error', onClick: () => {
@@ -707,9 +787,9 @@ const ZonosCheckoutFinish = class {
                 }
                 this.closeClickHandler();
             }, size: "md", variant: "primary" }, localization.translate('Close'))), !window.Zonos.isLegacyCheckout &&
-            this.shouldRenderKeepShoppingButton() && (index.h("zonos-button", { key: '9b809e21052fddb2149a2a1d0c22db4b10808403', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))), isTestMode &&
+            this.shouldRenderKeepShoppingButton() && (index.h("zonos-button", { key: '9227d7832ed477be556cb6d59c644a74c293c740', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))), isTestMode &&
             cart.cartStore.step === 'finish' &&
-            this.notificationType === 'success' && (index.h("div", { key: '4a278c7c4270d265c61b6b36d20864c55e1b42f1', class: "zonos--finish-button-wrapper" }, index.h("zonos-button", { key: 'fd8a876a0c5b76edd3be2d9b28da9c3963aee714', backgroundColor: "gray-0", buttonColor: "gray-1000", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), index.h("zonos-button", { key: '7882981c1fe01ab6f78d8f84bcfc9aab94bffb74', onClick: () => {
+            this.notificationType === 'success' && (index.h("div", { key: '9107be1ef7895b0a5e3fe0a985036a11de7011d3', class: "zonos--finish-button-wrapper" }, index.h("zonos-button", { key: 'b0de8743bea8dd9ac7099bd5b77811f80d80a380', backgroundColor: "gray-0", buttonColor: "gray-1000", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), index.h("zonos-button", { key: 'f90749b9af4c17eac554efb6d3d12cc41ac6e3c8', onClick: () => {
                 const isZonosDashboard = window.location.hostname.includes('dashboard.zonos.com');
                 this.redirectToUrl(isZonosDashboard
                     ? '/orders/all'
@@ -827,7 +907,7 @@ const ZonosCheckoutPayment = class {
          * handler for continue button click
          */
         this.continueClickHandler = async ({ currencyCode, }) => {
-            var _a;
+            var _a, _b;
             if (!this.handleValidate()) {
                 this.showErrorBanner = true;
                 // Attempt to submit the form so the missing input error will be shown in Stripe
@@ -842,7 +922,13 @@ const ZonosCheckoutPayment = class {
             }
             cart.stripeStore.checkoutSettlementCurrency = currencyCode;
             // submit google tag when the form is complete
-            paypal.submitGtag('zonos-checkout-payment-info');
+            submitGtag.submitGtag({
+                event: 'zonos-checkout-payment-info',
+                metadata: {
+                    checkoutSessionId: localization.storageStore.checkoutSessionId,
+                    paymentMethod: (_b = cart.stripeStore.stripePaymentEventData) === null || _b === void 0 ? void 0 : _b.value.type,
+                },
+            });
             this.continueClicked.emit();
         };
         this.copyCardToClipboard = async (cardNumber) => {
@@ -1949,20 +2035,26 @@ const ZonosShipping = class {
          * handler for continue button click
          */
         this.continueClickHandler = () => {
-            var _a;
+            var _a, _b;
             // show error banner if the form is not complete
             if (!this.handleValidate()) {
                 this.showErrorBanner = true;
                 return;
             }
             // submit google tag when the form is complete
-            paypal.submitGtag('zonos-checkout-shipping-info');
+            submitGtag.submitGtag({
+                event: 'zonos-checkout-shipping-info',
+                metadata: {
+                    checkoutSessionId: localization.storageStore.checkoutSessionId,
+                    serviceLevelId: (_a = this.selectedShippingMethod) === null || _a === void 0 ? void 0 : _a.value,
+                },
+            });
             const checkoutSessionId = localization.storageStore.checkoutSessionId;
             void cart.trackConversionEvent({
                 checkoutSessionId,
                 eventName: 'checkout_shippingInfoCompleted',
                 metadata: {
-                    serviceLevelId: (_a = this.selectedShippingMethod) === null || _a === void 0 ? void 0 : _a.value,
+                    serviceLevelId: (_b = this.selectedShippingMethod) === null || _b === void 0 ? void 0 : _b.value,
                 },
             });
             this.showErrorBanner = false;