@zonos/elements 1.3.261 → 1.3.262

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.261.js.zonos.com";
+    const cdnUrl = "https://v1.3.262.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.261.js.zonos.com";
-const JS_DELIVR_ZONOS_URL = zonosLoadUrl || "https://cdn.jsdelivr.net/npm/@zonos/elements@1.3.261";
-const UNPKG_ZONOS_URL = "https://unpkg.com/@zonos/elements@1.3.261";
-const CDNJS_ZONOS_URL = "https://cdnjs.cloudflare.com/ajax/libs/zonos-elements/1.3.261";
+const ZONOS_URL = "https://v1.3.262.js.zonos.com";
+const JS_DELIVR_ZONOS_URL = zonosLoadUrl || "https://cdn.jsdelivr.net/npm/@zonos/elements@1.3.262";
+const UNPKG_ZONOS_URL = "https://unpkg.com/@zonos/elements@1.3.262";
+const CDNJS_ZONOS_URL = "https://cdnjs.cloudflare.com/ajax/libs/zonos-elements/1.3.262";
 const GOOGLE_FONT_URL = 'https://fonts.googleapis.com';
 const GOOGLE_FONT_REGEX = /^https:\/\/fonts\.googleapis\.com/;
 class Zonos {
@@ -402,10 +402,12 @@ Zonos.iframeLogType = typeof window !== 'undefined'
     ? new URLSearchParams(window.location.search).get('iframeLogType')
     : null;
 Zonos.isBigCommerce = false;
-Zonos.releaseDate = "1777476611591";
+Zonos.releaseDate = "1777585626922";
 Zonos.isLegacyCheckout = false;
 Zonos.googleAnalyticId = null;
 Zonos.googleAnalyticReady = false;
+Zonos.facebookPixelId = null;
+Zonos.facebookPixelReady = false;
 Zonos.startLoadTime = startLoadTime;
 Zonos.domain = typeof window !== 'undefined'
     ? // domain that embeds the iframe
@@ -425,7 +427,7 @@ Zonos.isNpm = true;
 Zonos.zonosQaUrl = null;
 Zonos.zonosQaUrlApi = null;
 Zonos.trackEventLogs = [];
-Zonos.version = `v${"1.3.261"}`;
+Zonos.version = `v${"1.3.262"}`;
 Zonos.modeAlerted = false;
 Zonos.cartData = null;
 Zonos.paypal = null;
@@ -445,9 +447,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.
+    // When not in iframe, providers are ready (gtag/fbq work directly). When in iframe, relay sets these after parent configures.
     if (typeof window !== 'undefined' && window.parent === window) {
         _a.googleAnalyticReady = true;
+        _a.facebookPixelReady = true;
     }
     if (_a.isNpm) {
         VarianceTest.log('====== ZONOS LOADING FROM NPM ======');
@@ -553,7 +556,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
+    // googleAnalyticId / facebookPixelId are set by customHTML in checkoutSettings (e.g. <script>window.Zonos.googleAnalyticId = "G-XXX"; window.Zonos.facebookPixelId = "1234567890";</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/{paypal-73a542cb.js → paypal-e278f405.js}

@@ -6,7 +6,7 @@ const localization = require('./localization-a7fac4b4.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
 const isContrastColor = require('./isContrastColor-6a17f408.js');
 const VarianceTest = require('./VarianceTest-bec00ea8.js');
-const submitGtag = require('./submitGtag-9ac5a42e.js');
+const submitGtag = require('./submitGtag-4241212b.js');
 
 /*!
  * paypal-js v8.4.2 (2025-09-04T17:21:30.135Z)
@@ -41,7 +41,7 @@ PERFORMANCE OF THIS SOFTWARE.
 /* global Reflect, Promise, SuppressedError, Symbol */
 
 
-function __rest(s, e) {
+function __rest$1(s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -88,7 +88,7 @@ function insertScriptElement(_a) {
     document.head.insertBefore(newScript, document.head.firstElementChild);
 }
 function processOptions(_a) {
-    var customSdkBaseUrl = _a.sdkBaseUrl, environment = _a.environment, options = __rest(_a, ["sdkBaseUrl", "environment"]);
+    var customSdkBaseUrl = _a.sdkBaseUrl, environment = _a.environment, options = __rest$1(_a, ["sdkBaseUrl", "environment"]);
     var sdkBaseUrl = customSdkBaseUrl || processSdkBaseUrl(environment);
     var optionsWithStringIndex = options;
     var _b = Object.keys(optionsWithStringIndex)
@@ -258,6 +258,139 @@ const paypalCreateOrder = async ({ checkoutSessionId, intent, }) => {
     return { errors, json };
 };
 
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/**
+ * Mapping from our internal event names (GA-style) to Facebook Pixel standard event names.
+ * @see https://developers.facebook.com/docs/meta-pixel/reference#standard-events
+ *
+ * Events without an entry have no FB standard equivalent — they are still fired as a custom event
+ * via `fbq('trackCustom', ...)` so merchants can target them.
+ */
+const FB_STANDARD_EVENT_BY_INTERNAL_EVENT = {
+    purchase: 'Purchase',
+    'zonos-checkout-payment-info': 'AddPaymentInfo',
+    'zonos-checkout-start': 'InitiateCheckout',
+};
+const getFbStandardEventName = (event) => { var _a; return (_a = FB_STANDARD_EVENT_BY_INTERNAL_EVENT[event]) !== null && _a !== void 0 ? _a : null; };
+const isPurchaseMetadata = (metadata) => {
+    if (!metadata)
+        return false;
+    return Array.isArray(metadata.items);
+};
+/**
+ * Convert a GA-style event payload into a Facebook Pixel parameter object.
+ *
+ * GA `items: [{ item_id, item_name, price, quantity }]` is converted into FB's
+ * `contents: [{ id, quantity, item_price }]` with derived `content_ids`, `num_items`,
+ * and `content_type: 'product'`. Other primitive params (e.g. `checkoutSessionId`,
+ * `paymentMethod`, `serviceLevelId`) are forwarded as-is so merchants can build
+ * custom audiences on them.
+ */
+const buildFbqParams = (metadata) => {
+    if (!metadata)
+        return {};
+    if (!isPurchaseMetadata(metadata)) {
+        // Forward primitive metadata as-is for custom events
+        return Object.assign({}, metadata);
+    }
+    const { currency, items, transaction_id, value } = metadata, rest = __rest(metadata, ["currency", "items", "transaction_id", "value"]);
+    const contents = items.map(item => ({
+        id: item.item_id,
+        item_price: item.price,
+        quantity: item.quantity,
+    }));
+    const contentIds = items.map(item => item.item_id);
+    const numItems = items.reduce((acc, item) => acc + item.quantity, 0);
+    const params = Object.assign(Object.assign({}, rest), { content_ids: contentIds, content_type: 'product', contents, num_items: numItems });
+    if (transaction_id) {
+        params.order_id = transaction_id;
+    }
+    if (currency !== undefined) {
+        params.currency = currency;
+    }
+    if (value !== undefined) {
+        params.value = value;
+    }
+    return params;
+};
+
+const isFacebookPixelEnabled = () => {
+    const provider = zonosStore.zonosStore.checkoutSettings.analyticsProviders.find(item => item.type === 'FACEBOOK_PIXEL');
+    return !!provider && provider.status === 'ENABLED';
+};
+const fireFbq = (mode, event, params) => {
+    if (submitGtag.isAnalyticsRelayInIframe()) {
+        // fbq does not work in the iframe (Facebook Pixel must be on the parent for proper attribution).
+        // Relay to parent which will call fbq() once the FB Pixel script is ready.
+        submitGtag.enqueueRelayEvent({
+            event,
+            fbqMode: mode,
+            payload: params,
+            provider: 'fbq',
+        });
+        return;
+    }
+    if (typeof window.fbq === 'function') {
+        VarianceTest.log('Zonos submits fbq event', 'log', `${mode}:${event}`);
+        window.fbq(mode, event, params);
+    }
+};
+/**
+ * Submit a Facebook Pixel event matching the gtag event payload shape.
+ *
+ * Behavior:
+ * - Always fires `fbq('trackCustom', event, params)` so merchants see `zonos-xxx` events.
+ * - If the event has a Facebook standard equivalent (e.g. `purchase` → `Purchase`,
+ *   `zonos-checkout-start` → `InitiateCheckout`, `zonos-checkout-payment-info` →
+ *   `AddPaymentInfo`), additionally fires `fbq('track', standardEvent, params)` with
+ *   FB-formatted parameters.
+ *
+ * @see https://developers.facebook.com/docs/meta-pixel/reference
+ */
+const submitFbq = ({ event, metadata }) => {
+    if (!isFacebookPixelEnabled()) {
+        return;
+    }
+    const isTestMode = handleFetch.getIsTestMode();
+    const baseParams = buildFbqParams(metadata);
+    const params = Object.assign(Object.assign({}, baseParams), (isTestMode && { isTestMode: true }));
+    // filter null values
+    const filteredParams = Object.fromEntries(Object.entries(params).filter(([_, value]) => value !== null));
+    // 1) Always emit the original event as a custom event so merchants can target zonos-xxx names.
+    fireFbq('trackCustom', event, filteredParams);
+    // 2) Emit FB standard equivalent if one exists. Skipped when the event itself is the standard
+    //    name to avoid double-firing (e.g. 'purchase' -> 'Purchase').
+    const fbStandardEvent = getFbStandardEventName(event);
+    if (fbStandardEvent && fbStandardEvent !== event) {
+        fireFbq('track', fbStandardEvent, filteredParams);
+    }
+};
+
+/**
+ * Fan out an analytics event to every enabled provider.
+ *
+ * - Calls `submitGtag` (Google Analytics) — always sends the original event name.
+ * - Calls `submitFbq` (Facebook Pixel) — sends the original event name as a custom event,
+ *   and additionally fires the matching FB standard event when one exists
+ *   (e.g. `purchase` → `Purchase`, `zonos-checkout-start` → `InitiateCheckout`).
+ *
+ * Each submitter no-ops when its provider is disabled in `analyticsProviders` settings.
+ */
+const submitAnalytics = (input) => {
+    submitGtag.submitGtag(input);
+    submitFbq(input);
+};
+
 const { onChange: paypalStoreOnChange, reset: paypalStoreReset, state: paypalStore, } = zonosStore.createStore(() => ({
     intent: 'capture',
     orderIdCreated: null,
@@ -338,7 +471,7 @@ const paypalButtonOptions = ({ checkoutSessionId, onPaypalFail, onPaypalSessionD
                 // reset stripe error message
                 cart.stripeStore.hasPaymentError = false;
                 cart.stripeStore.customErrorMessage = null;
-                submitGtag.submitGtag({
+                submitAnalytics({
                     event: 'zonos-checkout-payment-fail',
                     metadata: {
                         checkoutSessionId,
@@ -403,7 +536,7 @@ const paypalButtonOptions = ({ checkoutSessionId, onPaypalFail, onPaypalSessionD
                 // reset stripe error message
                 cart.stripeStore.hasPaymentError = false;
                 cart.stripeStore.customErrorMessage = null;
-                submitGtag.submitGtag({
+                submitAnalytics({
                     event: 'zonos-checkout-payment-fail',
                     metadata: {
                         checkoutSessionId,
@@ -419,7 +552,7 @@ const paypalButtonOptions = ({ checkoutSessionId, onPaypalFail, onPaypalSessionD
                 // reset paypal error banner
                 paypalStore.paypalErrorMessage = null;
                 // submit google tag when the form is complete
-                submitGtag.submitGtag({
+                submitAnalytics({
                     event: 'zonos-checkout-payment-info',
                     metadata: {
                         checkoutSessionId,
@@ -546,3 +679,4 @@ exports.paypalStoreHasPaypalEnabled = paypalStoreHasPaypalEnabled;
 exports.paypalStoreInitButtons = paypalStoreInitButtons;
 exports.paypalStoreOnChange = paypalStoreOnChange;
 exports.paypalStoreReset = paypalStoreReset;
+exports.submitAnalytics = submitAnalytics;

package/dist/cjs/submitGtag-4241212b.js

@@ -0,0 +1,167 @@
+'use strict';
+
+const zonosStore = require('./zonosStore-1c517e55.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, FB Pixel) and get ready signal. */
+const RELAY_PING_TYPE = 'zonos-analytics-relay-ping';
+/** Response from parent when an analytics relay (e.g. gtag, fbq) is ready. */
+const RELAY_READY_TYPE = 'zonos-analytics-relay-ready';
+
+const providerReady = {
+    fbq: false,
+    gtag: false,
+};
+const queue = [];
+let listenerAdded = false;
+const isInIframe = () => typeof window !== 'undefined' && window.parent !== window;
+const flushQueue = () => {
+    // Walk a copy and rebuild to keep events whose provider isn't ready yet
+    const remaining = [];
+    while (queue.length > 0) {
+        const event = queue.shift();
+        if (!providerReady[event.provider]) {
+            remaining.push(event);
+            continue;
+        }
+        try {
+            window.parent.postMessage({
+                event: event.event,
+                fbqMode: event.fbqMode,
+                metadata: event.payload,
+                provider: event.provider,
+                type: ZONOS_ANALYTIC_TYPE,
+            }, '*');
+        }
+        catch (_a) {
+            // Ignore postMessage failures
+        }
+    }
+    queue.push(...remaining);
+};
+const ensureListener = () => {
+    if (listenerAdded)
+        return;
+    listenerAdded = true;
+    window.addEventListener('message', (e) => {
+        var _a;
+        if (((_a = e.data) === null || _a === void 0 ? void 0 : _a.type) !== RELAY_READY_TYPE)
+            return;
+        // Older parent scripts may omit `provider`; treat as gtag for backward compatibility.
+        const provider = e.data.provider || 'gtag';
+        providerReady[provider] = true;
+        if (typeof window.Zonos !== 'undefined') {
+            if (provider === 'gtag') {
+                window.Zonos.googleAnalyticReady = true;
+            }
+            else {
+                window.Zonos.facebookPixelReady = true;
+            }
+        }
+        flushQueue();
+    });
+};
+/**
+ * Send a ping to the parent so it can inject/configure analytics relays for the providers we care about.
+ * Picks up `googleAnalyticId` and `facebookPixelId` from `window.Zonos`, both of which may be set by `customHTML`.
+ */
+const sendRelayPing = () => {
+    if (!isInIframe())
+        return;
+    ensureListener();
+    try {
+        const z = typeof window.Zonos !== 'undefined' ? window.Zonos : undefined;
+        window.parent.postMessage({
+            facebookPixelId: z === null || z === void 0 ? void 0 : z.facebookPixelId,
+            googleAnalyticId: z === null || z === void 0 ? void 0 : z.googleAnalyticId,
+            type: RELAY_PING_TYPE,
+        }, '*');
+    }
+    catch (_a) {
+        // Ignore postMessage failures
+    }
+};
+/**
+ * Sends ping to parent so it can inject/configure analytics relays and respond with ready.
+ * Call after customHTML or custom script sets `window.Zonos.googleAnalyticId` / `window.Zonos.facebookPixelId`.
+ */
+const ensureAnalyticsRelayPing$1 = () => {
+    if (!isInIframe())
+        return;
+    // If both providers are already ready, no need to ping again
+    if (providerReady.gtag && providerReady.fbq)
+        return;
+    sendRelayPing();
+};
+/**
+ * Queue an analytic event for relay to parent. If the provider's relay is already ready,
+ * the event is forwarded immediately; otherwise it waits for the ready signal.
+ */
+const enqueueRelayEvent = (event) => {
+    ensureListener();
+    if (providerReady[event.provider]) {
+        try {
+            window.parent.postMessage({
+                event: event.event,
+                fbqMode: event.fbqMode,
+                metadata: event.payload,
+                provider: event.provider,
+                type: ZONOS_ANALYTIC_TYPE,
+            }, '*');
+        }
+        catch (_a) {
+            // Ignore postMessage failures
+        }
+        return;
+    }
+    queue.push(event);
+    // Re-ping in case the parent hasn't received the ID yet (e.g. customHTML set it after init)
+    sendRelayPing();
+};
+const isAnalyticsRelayInIframe = isInIframe;
+
+/**
+ * Re-export of the shared relay ping helper. Kept here for backward compatibility with
+ * existing import paths (e.g. `zonos-controller`).
+ */
+const ensureAnalyticsRelayPing = ensureAnalyticsRelayPing$1;
+const isGoogleAnalyticsEnabled = () => {
+    const provider = zonosStore.zonosStore.checkoutSettings.analyticsProviders.find(item => item.type === 'GOOGLE_ANALYTICS');
+    return !!provider && provider.status === 'ENABLED';
+};
+/**
+ * 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 }) => {
+    if (!isGoogleAnalyticsEnabled()) {
+        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));
+    if (isAnalyticsRelayInIframe()) {
+        // gtag does not work in iframe; must relay to parent via postMessage
+        enqueueRelayEvent({
+            event,
+            payload: filteredPayload,
+            provider: 'gtag',
+        });
+        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.enqueueRelayEvent = enqueueRelayEvent;
+exports.ensureAnalyticsRelayPing = ensureAnalyticsRelayPing;
+exports.isAnalyticsRelayInIframe = isAnalyticsRelayInIframe;
+exports.submitGtag = submitGtag;

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

@@ -9,11 +9,11 @@ const getBorderRadius = require('./getBorderRadius-db55a464.js');
 const cart = require('./cart-d08c87e2.js');
 const localization = require('./localization-a7fac4b4.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
-const paypal = require('./paypal-73a542cb.js');
+const paypal = require('./paypal-e278f405.js');
 const VarianceTest = require('./VarianceTest-bec00ea8.js');
 require('./isDarkColor-bfe6d1eb.js');
 require('./isContrastColor-6a17f408.js');
-require('./submitGtag-9ac5a42e.js');
+require('./submitGtag-4241212b.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;