@economist/web-apple-pay 0.1.3-beta.37 → 0.1.3-beta.39

package/dist/index.js

@@ -1120,52 +1120,32 @@ var isAppleDeviceOrSafari = () => {
   const isSafariBrowser = navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") === -1;
   return isIOSOrMacTouchDevice || isSafariBrowser;
 };
-var bypassApplePayChecks = () => new URLSearchParams(window.location.search).get("BYPASS_APPLE_PAY_CHECKS") !== null;
+var bypassApplePayChecks = () => new URLSearchParams(window.location.search).get("BYPASS_APPLE_PAY_CHECKS") !== null && getApplePayConfig()?.debugBypassEnabled === true;
 var isApplePayAvailable = async () => {
   if (bypassApplePayChecks()) {
-    console.log("[ApplePay] bypass active \u2014 displaying button");
     return true;
   }
-  const applePaySession = window.ApplePaySession;
-  const isAppleDevice = isAppleDeviceOrSafari();
-  console.log("[ApplePay] detection:", JSON.stringify({
-    applePaySessionExists: !!applePaySession,
-    isAppleDevice,
-    userAgent: navigator.userAgent,
-    maxTouchPoints: navigator.maxTouchPoints
-  }, null, 2));
-  if (!applePaySession && !isAppleDevice) {
-    console.log("[ApplePay] not available \u2014 no ApplePaySession and not Apple device");
+  if (!isAppleDeviceOrSafari()) {
     return false;
   }
+  const applePaySession = window.ApplePaySession;
   if (!applePaySession) {
-    console.log("[ApplePay] not available \u2014 Apple device but no ApplePaySession API");
     return false;
   }
   try {
     if (typeof applePaySession.canMakePayments !== "function") {
-      console.log("[ApplePay] not available \u2014 canMakePayments is not a function");
       return false;
     }
     if (!applePaySession.canMakePayments()) {
-      console.log("[ApplePay] not available \u2014 canMakePayments returned false");
       return false;
     }
     const merchantId = getApplePayConfig()?.merchantId;
     if (!merchantId) {
-      console.log("[ApplePay] not available \u2014 no merchantId configured");
       return false;
     }
     const hasActiveCard = await applePaySession.canMakePaymentsWithActiveCard(merchantId);
-    console.log("[ApplePay] canMakePaymentsWithActiveCard:", JSON.stringify({ merchantId, hasActiveCard }, null, 2));
-    if (!hasActiveCard) {
-      console.log("[ApplePay] not available \u2014 no active card for merchant");
-      return false;
-    }
-    console.log("[ApplePay] available \u2014 displaying button");
-    return true;
-  } catch (error) {
-    console.log("[ApplePay] not available \u2014 error:", JSON.stringify({ error: String(error) }, null, 2));
+    return hasActiveCard;
+  } catch {
     return false;
   }
 };
@@ -1338,17 +1318,21 @@ var track = (action, extra) => {
     ...extra
   });
 };
-var trackExpressWalletImpression = (skuId, { entryPoint, country }) => {
+var trackExpressWalletImpression = (skuId, { entryPoint, country }, buttonLoadDurationMs) => {
   track(EXPRESS_CHECKOUT_EVENTS.IMPRESSION, {
     wallet_type: "apple_pay",
     entry_point: entryPoint,
     sku_id: skuId,
     country,
-    device: getDevice()
+    device: getDevice(),
+    ...buttonLoadDurationMs !== void 0 && { button_load_duration_ms: buttonLoadDurationMs }
   });
 };
-var trackExpressWalletClick = (skuId) => {
-  track(EXPRESS_CHECKOUT_EVENTS.BUTTON_CLICK, { sku_id: skuId });
+var trackExpressWalletClick = (skuId, modalRenderDurationMs) => {
+  track(EXPRESS_CHECKOUT_EVENTS.BUTTON_CLICK, {
+    sku_id: skuId,
+    ...modalRenderDurationMs !== void 0 && { modal_render_duration_ms: modalRenderDurationMs }
+  });
 };
 var trackWalletPaymentSheetOpen = (skuId) => {
   track(EXPRESS_CHECKOUT_EVENTS.SHEET_OPEN, { sku_id: skuId });
@@ -1356,16 +1340,18 @@ var trackWalletPaymentSheetOpen = (skuId) => {
 var trackWalletPaymentAuthorised = (skuId) => {
   track(EXPRESS_CHECKOUT_EVENTS.AUTHORISED, { sku_id: skuId });
 };
-var trackWalletPaymentSuccess = (skuId, basketId) => {
+var trackWalletPaymentSuccess = (skuId, basketId, purchaseDurationMs) => {
   track(EXPRESS_CHECKOUT_EVENTS.SUCCESS, {
     sku_id: skuId,
-    basket_id: basketId
+    basket_id: basketId,
+    ...purchaseDurationMs !== void 0 && { purchase_duration_ms: purchaseDurationMs }
   });
 };
-var trackWalletPaymentFailure = (skuId, reason) => {
+var trackWalletPaymentFailure = (skuId, reason, purchaseDurationMs) => {
   track(EXPRESS_CHECKOUT_EVENTS.FAILURE, {
     sku_id: skuId,
-    failure_reason: reason
+    failure_reason: reason,
+    ...purchaseDurationMs !== void 0 && { purchase_duration_ms: purchaseDurationMs }
   });
 };
 var trackFallbackCheckout = (skuId) => {
@@ -1627,12 +1613,14 @@ function handleStructuredError(ctx) {
 async function handlePaymentAuthorized(event, session, sessionData, config) {
   const { skuId, returnUrl, country } = config;
   let validatedEmail;
+  let purchaseStartTime;
   try {
     validatedEmail = validateContacts(
       event,
       sessionData,
       config.supportedBillingCountries
     );
+    purchaseStartTime = Date.now();
     const result = await performPurchase({
       applePayToken: event.payment.token,
       skuId: config.skuId,
@@ -1643,7 +1631,8 @@ async function handlePaymentAuthorized(event, session, sessionData, config) {
       },
       recaptchaTokens: config.recaptchaTokens
     });
-    trackWalletPaymentSuccess(skuId, result.basketId);
+    const purchaseDurationMs = Date.now() - purchaseStartTime;
+    trackWalletPaymentSuccess(skuId, result.basketId, purchaseDurationMs);
     session.completePayment({ status: ApplePaySession.STATUS_SUCCESS });
     const successEmail = sessionData.loggedIn ? sessionData.emailAddress : validatedEmail;
     const userStatus = sessionData.loggedIn ? "lex" : "nex";
@@ -1661,7 +1650,8 @@ async function handlePaymentAuthorized(event, session, sessionData, config) {
       return;
     }
     const walletError = parseWalletApiError(err);
-    trackWalletPaymentFailure(skuId, walletError?.errorType ?? "UNKNOWN");
+    const purchaseDurationMs = purchaseStartTime !== void 0 ? Date.now() - purchaseStartTime : void 0;
+    trackWalletPaymentFailure(skuId, walletError?.errorType ?? "UNKNOWN", purchaseDurationMs);
     failApplePaySession(session);
     if (!walletError) {
       redirectFallback(skuId, returnUrl, country, { inlineError: MSG_PAYMENT_GENERIC_ERROR });
@@ -1984,6 +1974,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   #country = "";
   #rendering = false;
   #readyPromise = null;
+  #loadStartTime = 0;
   #sessionData = null;
   #paymentOptions = null;
   #returnUrl = "";
@@ -2059,6 +2050,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
   // ─── Render pipeline ────────────────────────────────────────────────────────
   async #run() {
+    this.#loadStartTime = Date.now();
     try {
       this.#renderTemplate();
       if (await this.#checkAvailability()) return;
@@ -2158,10 +2150,12 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       button.classList.remove("wap-loading");
       this.#updateDisabledState();
       this.#scheduleRecaptchaTokens();
-      trackExpressWalletImpression(this.#offer.sku_id, {
-        entryPoint: this.#entryPoint,
-        country: this.#country
-      });
+      const buttonLoadDurationMs = Date.now() - this.#loadStartTime;
+      trackExpressWalletImpression(
+        this.#offer.sku_id,
+        { entryPoint: this.#entryPoint, country: this.#country },
+        buttonLoadDurationMs
+      );
     }
   }
   // ─── Private helpers ────────────────────────────────────────────────────────
@@ -2184,7 +2178,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (document.querySelector(ApplePayModal.tag)) {
       return;
     }
-    trackExpressWalletClick(this.#offer.sku_id);
+    const modalOpenStart = Date.now();
     ApplePayModal.define();
     const modal = document.createElement(ApplePayModal.tag);
     modal.offer = this.#offer;
@@ -2199,6 +2193,8 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       this.#scheduleRecaptchaTokens();
     };
     modal.open(this.#recaptchaTokensPromise);
+    const modalRenderDurationMs = Date.now() - modalOpenStart;
+    trackExpressWalletClick(skuId, modalRenderDurationMs);
   }
   /**
    * Starts a fresh reCAPTCHA token pre-fetch and stores its promise.

package/dist/src/apple-pay-button.js

@@ -1115,52 +1115,32 @@ var isAppleDeviceOrSafari = () => {
   const isSafariBrowser = navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") === -1;
   return isIOSOrMacTouchDevice || isSafariBrowser;
 };
-var bypassApplePayChecks = () => new URLSearchParams(window.location.search).get("BYPASS_APPLE_PAY_CHECKS") !== null;
+var bypassApplePayChecks = () => new URLSearchParams(window.location.search).get("BYPASS_APPLE_PAY_CHECKS") !== null && getApplePayConfig()?.debugBypassEnabled === true;
 var isApplePayAvailable = async () => {
   if (bypassApplePayChecks()) {
-    console.log("[ApplePay] bypass active \u2014 displaying button");
     return true;
   }
-  const applePaySession = window.ApplePaySession;
-  const isAppleDevice = isAppleDeviceOrSafari();
-  console.log("[ApplePay] detection:", JSON.stringify({
-    applePaySessionExists: !!applePaySession,
-    isAppleDevice,
-    userAgent: navigator.userAgent,
-    maxTouchPoints: navigator.maxTouchPoints
-  }, null, 2));
-  if (!applePaySession && !isAppleDevice) {
-    console.log("[ApplePay] not available \u2014 no ApplePaySession and not Apple device");
+  if (!isAppleDeviceOrSafari()) {
     return false;
   }
+  const applePaySession = window.ApplePaySession;
   if (!applePaySession) {
-    console.log("[ApplePay] not available \u2014 Apple device but no ApplePaySession API");
     return false;
   }
   try {
     if (typeof applePaySession.canMakePayments !== "function") {
-      console.log("[ApplePay] not available \u2014 canMakePayments is not a function");
       return false;
     }
     if (!applePaySession.canMakePayments()) {
-      console.log("[ApplePay] not available \u2014 canMakePayments returned false");
       return false;
     }
     const merchantId = getApplePayConfig()?.merchantId;
     if (!merchantId) {
-      console.log("[ApplePay] not available \u2014 no merchantId configured");
       return false;
     }
     const hasActiveCard = await applePaySession.canMakePaymentsWithActiveCard(merchantId);
-    console.log("[ApplePay] canMakePaymentsWithActiveCard:", JSON.stringify({ merchantId, hasActiveCard }, null, 2));
-    if (!hasActiveCard) {
-      console.log("[ApplePay] not available \u2014 no active card for merchant");
-      return false;
-    }
-    console.log("[ApplePay] available \u2014 displaying button");
-    return true;
-  } catch (error) {
-    console.log("[ApplePay] not available \u2014 error:", JSON.stringify({ error: String(error) }, null, 2));
+    return hasActiveCard;
+  } catch {
     return false;
   }
 };
@@ -1333,17 +1313,21 @@ var track = (action, extra) => {
     ...extra
   });
 };
-var trackExpressWalletImpression = (skuId, { entryPoint, country }) => {
+var trackExpressWalletImpression = (skuId, { entryPoint, country }, buttonLoadDurationMs) => {
   track(EXPRESS_CHECKOUT_EVENTS.IMPRESSION, {
     wallet_type: "apple_pay",
     entry_point: entryPoint,
     sku_id: skuId,
     country,
-    device: getDevice()
+    device: getDevice(),
+    ...buttonLoadDurationMs !== void 0 && { button_load_duration_ms: buttonLoadDurationMs }
   });
 };
-var trackExpressWalletClick = (skuId) => {
-  track(EXPRESS_CHECKOUT_EVENTS.BUTTON_CLICK, { sku_id: skuId });
+var trackExpressWalletClick = (skuId, modalRenderDurationMs) => {
+  track(EXPRESS_CHECKOUT_EVENTS.BUTTON_CLICK, {
+    sku_id: skuId,
+    ...modalRenderDurationMs !== void 0 && { modal_render_duration_ms: modalRenderDurationMs }
+  });
 };
 var trackWalletPaymentSheetOpen = (skuId) => {
   track(EXPRESS_CHECKOUT_EVENTS.SHEET_OPEN, { sku_id: skuId });
@@ -1351,16 +1335,18 @@ var trackWalletPaymentSheetOpen = (skuId) => {
 var trackWalletPaymentAuthorised = (skuId) => {
   track(EXPRESS_CHECKOUT_EVENTS.AUTHORISED, { sku_id: skuId });
 };
-var trackWalletPaymentSuccess = (skuId, basketId) => {
+var trackWalletPaymentSuccess = (skuId, basketId, purchaseDurationMs) => {
   track(EXPRESS_CHECKOUT_EVENTS.SUCCESS, {
     sku_id: skuId,
-    basket_id: basketId
+    basket_id: basketId,
+    ...purchaseDurationMs !== void 0 && { purchase_duration_ms: purchaseDurationMs }
   });
 };
-var trackWalletPaymentFailure = (skuId, reason) => {
+var trackWalletPaymentFailure = (skuId, reason, purchaseDurationMs) => {
   track(EXPRESS_CHECKOUT_EVENTS.FAILURE, {
     sku_id: skuId,
-    failure_reason: reason
+    failure_reason: reason,
+    ...purchaseDurationMs !== void 0 && { purchase_duration_ms: purchaseDurationMs }
   });
 };
 var trackFallbackCheckout = (skuId) => {
@@ -1622,12 +1608,14 @@ function handleStructuredError(ctx) {
 async function handlePaymentAuthorized(event, session, sessionData, config) {
   const { skuId, returnUrl, country } = config;
   let validatedEmail;
+  let purchaseStartTime;
   try {
     validatedEmail = validateContacts(
       event,
       sessionData,
       config.supportedBillingCountries
     );
+    purchaseStartTime = Date.now();
     const result = await performPurchase({
       applePayToken: event.payment.token,
       skuId: config.skuId,
@@ -1638,7 +1626,8 @@ async function handlePaymentAuthorized(event, session, sessionData, config) {
       },
       recaptchaTokens: config.recaptchaTokens
     });
-    trackWalletPaymentSuccess(skuId, result.basketId);
+    const purchaseDurationMs = Date.now() - purchaseStartTime;
+    trackWalletPaymentSuccess(skuId, result.basketId, purchaseDurationMs);
     session.completePayment({ status: ApplePaySession.STATUS_SUCCESS });
     const successEmail = sessionData.loggedIn ? sessionData.emailAddress : validatedEmail;
     const userStatus = sessionData.loggedIn ? "lex" : "nex";
@@ -1656,7 +1645,8 @@ async function handlePaymentAuthorized(event, session, sessionData, config) {
       return;
     }
     const walletError = parseWalletApiError(err);
-    trackWalletPaymentFailure(skuId, walletError?.errorType ?? "UNKNOWN");
+    const purchaseDurationMs = purchaseStartTime !== void 0 ? Date.now() - purchaseStartTime : void 0;
+    trackWalletPaymentFailure(skuId, walletError?.errorType ?? "UNKNOWN", purchaseDurationMs);
     failApplePaySession(session);
     if (!walletError) {
       redirectFallback(skuId, returnUrl, country, { inlineError: MSG_PAYMENT_GENERIC_ERROR });
@@ -1979,6 +1969,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   #country = "";
   #rendering = false;
   #readyPromise = null;
+  #loadStartTime = 0;
   #sessionData = null;
   #paymentOptions = null;
   #returnUrl = "";
@@ -2054,6 +2045,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
   // ─── Render pipeline ────────────────────────────────────────────────────────
   async #run() {
+    this.#loadStartTime = Date.now();
     try {
       this.#renderTemplate();
       if (await this.#checkAvailability()) return;
@@ -2153,10 +2145,12 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       button.classList.remove("wap-loading");
       this.#updateDisabledState();
       this.#scheduleRecaptchaTokens();
-      trackExpressWalletImpression(this.#offer.sku_id, {
-        entryPoint: this.#entryPoint,
-        country: this.#country
-      });
+      const buttonLoadDurationMs = Date.now() - this.#loadStartTime;
+      trackExpressWalletImpression(
+        this.#offer.sku_id,
+        { entryPoint: this.#entryPoint, country: this.#country },
+        buttonLoadDurationMs
+      );
     }
   }
   // ─── Private helpers ────────────────────────────────────────────────────────
@@ -2179,7 +2173,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (document.querySelector(ApplePayModal.tag)) {
       return;
     }
-    trackExpressWalletClick(this.#offer.sku_id);
+    const modalOpenStart = Date.now();
     ApplePayModal.define();
     const modal = document.createElement(ApplePayModal.tag);
     modal.offer = this.#offer;
@@ -2194,6 +2188,8 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       this.#scheduleRecaptchaTokens();
     };
     modal.open(this.#recaptchaTokensPromise);
+    const modalRenderDurationMs = Date.now() - modalOpenStart;
+    trackExpressWalletClick(skuId, modalRenderDurationMs);
   }
   /**
    * Starts a fresh reCAPTCHA token pre-fetch and stores its promise.

package/dist/src/apple-pay-button.stories.js

@@ -1123,52 +1123,32 @@ var isAppleDeviceOrSafari = () => {
   const isSafariBrowser = navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") === -1;
   return isIOSOrMacTouchDevice || isSafariBrowser;
 };
-var bypassApplePayChecks = () => new URLSearchParams(window.location.search).get("BYPASS_APPLE_PAY_CHECKS") !== null;
+var bypassApplePayChecks = () => new URLSearchParams(window.location.search).get("BYPASS_APPLE_PAY_CHECKS") !== null && getApplePayConfig()?.debugBypassEnabled === true;
 var isApplePayAvailable = async () => {
   if (bypassApplePayChecks()) {
-    console.log("[ApplePay] bypass active \u2014 displaying button");
     return true;
   }
-  const applePaySession = window.ApplePaySession;
-  const isAppleDevice = isAppleDeviceOrSafari();
-  console.log("[ApplePay] detection:", JSON.stringify({
-    applePaySessionExists: !!applePaySession,
-    isAppleDevice,
-    userAgent: navigator.userAgent,
-    maxTouchPoints: navigator.maxTouchPoints
-  }, null, 2));
-  if (!applePaySession && !isAppleDevice) {
-    console.log("[ApplePay] not available \u2014 no ApplePaySession and not Apple device");
+  if (!isAppleDeviceOrSafari()) {
     return false;
   }
+  const applePaySession = window.ApplePaySession;
   if (!applePaySession) {
-    console.log("[ApplePay] not available \u2014 Apple device but no ApplePaySession API");
     return false;
   }
   try {
     if (typeof applePaySession.canMakePayments !== "function") {
-      console.log("[ApplePay] not available \u2014 canMakePayments is not a function");
       return false;
     }
     if (!applePaySession.canMakePayments()) {
-      console.log("[ApplePay] not available \u2014 canMakePayments returned false");
       return false;
     }
     const merchantId = getApplePayConfig()?.merchantId;
     if (!merchantId) {
-      console.log("[ApplePay] not available \u2014 no merchantId configured");
       return false;
     }
     const hasActiveCard = await applePaySession.canMakePaymentsWithActiveCard(merchantId);
-    console.log("[ApplePay] canMakePaymentsWithActiveCard:", JSON.stringify({ merchantId, hasActiveCard }, null, 2));
-    if (!hasActiveCard) {
-      console.log("[ApplePay] not available \u2014 no active card for merchant");
-      return false;
-    }
-    console.log("[ApplePay] available \u2014 displaying button");
-    return true;
-  } catch (error) {
-    console.log("[ApplePay] not available \u2014 error:", JSON.stringify({ error: String(error) }, null, 2));
+    return hasActiveCard;
+  } catch {
     return false;
   }
 };
@@ -1341,17 +1321,21 @@ var track = (action, extra) => {
     ...extra
   });
 };
-var trackExpressWalletImpression = (skuId, { entryPoint, country }) => {
+var trackExpressWalletImpression = (skuId, { entryPoint, country }, buttonLoadDurationMs) => {
   track(EXPRESS_CHECKOUT_EVENTS.IMPRESSION, {
     wallet_type: "apple_pay",
     entry_point: entryPoint,
     sku_id: skuId,
     country,
-    device: getDevice()
+    device: getDevice(),
+    ...buttonLoadDurationMs !== void 0 && { button_load_duration_ms: buttonLoadDurationMs }
   });
 };
-var trackExpressWalletClick = (skuId) => {
-  track(EXPRESS_CHECKOUT_EVENTS.BUTTON_CLICK, { sku_id: skuId });
+var trackExpressWalletClick = (skuId, modalRenderDurationMs) => {
+  track(EXPRESS_CHECKOUT_EVENTS.BUTTON_CLICK, {
+    sku_id: skuId,
+    ...modalRenderDurationMs !== void 0 && { modal_render_duration_ms: modalRenderDurationMs }
+  });
 };
 var trackWalletPaymentSheetOpen = (skuId) => {
   track(EXPRESS_CHECKOUT_EVENTS.SHEET_OPEN, { sku_id: skuId });
@@ -1359,16 +1343,18 @@ var trackWalletPaymentSheetOpen = (skuId) => {
 var trackWalletPaymentAuthorised = (skuId) => {
   track(EXPRESS_CHECKOUT_EVENTS.AUTHORISED, { sku_id: skuId });
 };
-var trackWalletPaymentSuccess = (skuId, basketId) => {
+var trackWalletPaymentSuccess = (skuId, basketId, purchaseDurationMs) => {
   track(EXPRESS_CHECKOUT_EVENTS.SUCCESS, {
     sku_id: skuId,
-    basket_id: basketId
+    basket_id: basketId,
+    ...purchaseDurationMs !== void 0 && { purchase_duration_ms: purchaseDurationMs }
   });
 };
-var trackWalletPaymentFailure = (skuId, reason) => {
+var trackWalletPaymentFailure = (skuId, reason, purchaseDurationMs) => {
   track(EXPRESS_CHECKOUT_EVENTS.FAILURE, {
     sku_id: skuId,
-    failure_reason: reason
+    failure_reason: reason,
+    ...purchaseDurationMs !== void 0 && { purchase_duration_ms: purchaseDurationMs }
   });
 };
 var trackFallbackCheckout = (skuId) => {
@@ -1630,12 +1616,14 @@ function handleStructuredError(ctx) {
 async function handlePaymentAuthorized(event, session, sessionData, config) {
   const { skuId, returnUrl, country } = config;
   let validatedEmail;
+  let purchaseStartTime;
   try {
     validatedEmail = validateContacts(
       event,
       sessionData,
       config.supportedBillingCountries
     );
+    purchaseStartTime = Date.now();
     const result = await performPurchase({
       applePayToken: event.payment.token,
       skuId: config.skuId,
@@ -1646,7 +1634,8 @@ async function handlePaymentAuthorized(event, session, sessionData, config) {
       },
       recaptchaTokens: config.recaptchaTokens
     });
-    trackWalletPaymentSuccess(skuId, result.basketId);
+    const purchaseDurationMs = Date.now() - purchaseStartTime;
+    trackWalletPaymentSuccess(skuId, result.basketId, purchaseDurationMs);
     session.completePayment({ status: ApplePaySession.STATUS_SUCCESS });
     const successEmail = sessionData.loggedIn ? sessionData.emailAddress : validatedEmail;
     const userStatus = sessionData.loggedIn ? "lex" : "nex";
@@ -1664,7 +1653,8 @@ async function handlePaymentAuthorized(event, session, sessionData, config) {
       return;
     }
     const walletError = parseWalletApiError(err);
-    trackWalletPaymentFailure(skuId, walletError?.errorType ?? "UNKNOWN");
+    const purchaseDurationMs = purchaseStartTime !== void 0 ? Date.now() - purchaseStartTime : void 0;
+    trackWalletPaymentFailure(skuId, walletError?.errorType ?? "UNKNOWN", purchaseDurationMs);
     failApplePaySession(session);
     if (!walletError) {
       redirectFallback(skuId, returnUrl, country, { inlineError: MSG_PAYMENT_GENERIC_ERROR });
@@ -1987,6 +1977,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   #country = "";
   #rendering = false;
   #readyPromise = null;
+  #loadStartTime = 0;
   #sessionData = null;
   #paymentOptions = null;
   #returnUrl = "";
@@ -2062,6 +2053,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
   // ─── Render pipeline ────────────────────────────────────────────────────────
   async #run() {
+    this.#loadStartTime = Date.now();
     try {
       this.#renderTemplate();
       if (await this.#checkAvailability()) return;
@@ -2161,10 +2153,12 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       button.classList.remove("wap-loading");
       this.#updateDisabledState();
       this.#scheduleRecaptchaTokens();
-      trackExpressWalletImpression(this.#offer.sku_id, {
-        entryPoint: this.#entryPoint,
-        country: this.#country
-      });
+      const buttonLoadDurationMs = Date.now() - this.#loadStartTime;
+      trackExpressWalletImpression(
+        this.#offer.sku_id,
+        { entryPoint: this.#entryPoint, country: this.#country },
+        buttonLoadDurationMs
+      );
     }
   }
   // ─── Private helpers ────────────────────────────────────────────────────────
@@ -2187,7 +2181,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (document.querySelector(ApplePayModal.tag)) {
       return;
     }
-    trackExpressWalletClick(this.#offer.sku_id);
+    const modalOpenStart = Date.now();
     ApplePayModal.define();
     const modal = document.createElement(ApplePayModal.tag);
     modal.offer = this.#offer;
@@ -2202,6 +2196,8 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       this.#scheduleRecaptchaTokens();
     };
     modal.open(this.#recaptchaTokensPromise);
+    const modalRenderDurationMs = Date.now() - modalOpenStart;
+    trackExpressWalletClick(skuId, modalRenderDurationMs);
   }
   /**
    * Starts a fresh reCAPTCHA token pre-fetch and stores its promise.

package/dist/src/apple-pay-modal.stories.js

@@ -1115,52 +1115,32 @@ var isAppleDeviceOrSafari = () => {
   const isSafariBrowser = navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") === -1;
   return isIOSOrMacTouchDevice || isSafariBrowser;
 };
-var bypassApplePayChecks = () => new URLSearchParams(window.location.search).get("BYPASS_APPLE_PAY_CHECKS") !== null;
+var bypassApplePayChecks = () => new URLSearchParams(window.location.search).get("BYPASS_APPLE_PAY_CHECKS") !== null && getApplePayConfig()?.debugBypassEnabled === true;
 var isApplePayAvailable = async () => {
   if (bypassApplePayChecks()) {
-    console.log("[ApplePay] bypass active \u2014 displaying button");
     return true;
   }
-  const applePaySession = window.ApplePaySession;
-  const isAppleDevice = isAppleDeviceOrSafari();
-  console.log("[ApplePay] detection:", JSON.stringify({
-    applePaySessionExists: !!applePaySession,
-    isAppleDevice,
-    userAgent: navigator.userAgent,
-    maxTouchPoints: navigator.maxTouchPoints
-  }, null, 2));
-  if (!applePaySession && !isAppleDevice) {
-    console.log("[ApplePay] not available \u2014 no ApplePaySession and not Apple device");
+  if (!isAppleDeviceOrSafari()) {
     return false;
   }
+  const applePaySession = window.ApplePaySession;
   if (!applePaySession) {
-    console.log("[ApplePay] not available \u2014 Apple device but no ApplePaySession API");
     return false;
   }
   try {
     if (typeof applePaySession.canMakePayments !== "function") {
-      console.log("[ApplePay] not available \u2014 canMakePayments is not a function");
       return false;
     }
     if (!applePaySession.canMakePayments()) {
-      console.log("[ApplePay] not available \u2014 canMakePayments returned false");
       return false;
     }
     const merchantId = getApplePayConfig()?.merchantId;
     if (!merchantId) {
-      console.log("[ApplePay] not available \u2014 no merchantId configured");
       return false;
     }
     const hasActiveCard = await applePaySession.canMakePaymentsWithActiveCard(merchantId);
-    console.log("[ApplePay] canMakePaymentsWithActiveCard:", JSON.stringify({ merchantId, hasActiveCard }, null, 2));
-    if (!hasActiveCard) {
-      console.log("[ApplePay] not available \u2014 no active card for merchant");
-      return false;
-    }
-    console.log("[ApplePay] available \u2014 displaying button");
-    return true;
-  } catch (error) {
-    console.log("[ApplePay] not available \u2014 error:", JSON.stringify({ error: String(error) }, null, 2));
+    return hasActiveCard;
+  } catch {
     return false;
   }
 };
@@ -1333,17 +1313,21 @@ var track = (action, extra) => {
     ...extra
   });
 };
-var trackExpressWalletImpression = (skuId, { entryPoint, country }) => {
+var trackExpressWalletImpression = (skuId, { entryPoint, country }, buttonLoadDurationMs) => {
   track(EXPRESS_CHECKOUT_EVENTS.IMPRESSION, {
     wallet_type: "apple_pay",
     entry_point: entryPoint,
     sku_id: skuId,
     country,
-    device: getDevice()
+    device: getDevice(),
+    ...buttonLoadDurationMs !== void 0 && { button_load_duration_ms: buttonLoadDurationMs }
   });
 };
-var trackExpressWalletClick = (skuId) => {
-  track(EXPRESS_CHECKOUT_EVENTS.BUTTON_CLICK, { sku_id: skuId });
+var trackExpressWalletClick = (skuId, modalRenderDurationMs) => {
+  track(EXPRESS_CHECKOUT_EVENTS.BUTTON_CLICK, {
+    sku_id: skuId,
+    ...modalRenderDurationMs !== void 0 && { modal_render_duration_ms: modalRenderDurationMs }
+  });
 };
 var trackWalletPaymentSheetOpen = (skuId) => {
   track(EXPRESS_CHECKOUT_EVENTS.SHEET_OPEN, { sku_id: skuId });
@@ -1351,16 +1335,18 @@ var trackWalletPaymentSheetOpen = (skuId) => {
 var trackWalletPaymentAuthorised = (skuId) => {
   track(EXPRESS_CHECKOUT_EVENTS.AUTHORISED, { sku_id: skuId });
 };
-var trackWalletPaymentSuccess = (skuId, basketId) => {
+var trackWalletPaymentSuccess = (skuId, basketId, purchaseDurationMs) => {
   track(EXPRESS_CHECKOUT_EVENTS.SUCCESS, {
     sku_id: skuId,
-    basket_id: basketId
+    basket_id: basketId,
+    ...purchaseDurationMs !== void 0 && { purchase_duration_ms: purchaseDurationMs }
   });
 };
-var trackWalletPaymentFailure = (skuId, reason) => {
+var trackWalletPaymentFailure = (skuId, reason, purchaseDurationMs) => {
   track(EXPRESS_CHECKOUT_EVENTS.FAILURE, {
     sku_id: skuId,
-    failure_reason: reason
+    failure_reason: reason,
+    ...purchaseDurationMs !== void 0 && { purchase_duration_ms: purchaseDurationMs }
   });
 };
 var trackFallbackCheckout = (skuId) => {
@@ -1622,12 +1608,14 @@ function handleStructuredError(ctx) {
 async function handlePaymentAuthorized(event, session, sessionData, config) {
   const { skuId, returnUrl, country } = config;
   let validatedEmail;
+  let purchaseStartTime;
   try {
     validatedEmail = validateContacts(
       event,
       sessionData,
       config.supportedBillingCountries
     );
+    purchaseStartTime = Date.now();
     const result = await performPurchase({
       applePayToken: event.payment.token,
       skuId: config.skuId,
@@ -1638,7 +1626,8 @@ async function handlePaymentAuthorized(event, session, sessionData, config) {
       },
       recaptchaTokens: config.recaptchaTokens
     });
-    trackWalletPaymentSuccess(skuId, result.basketId);
+    const purchaseDurationMs = Date.now() - purchaseStartTime;
+    trackWalletPaymentSuccess(skuId, result.basketId, purchaseDurationMs);
     session.completePayment({ status: ApplePaySession.STATUS_SUCCESS });
     const successEmail = sessionData.loggedIn ? sessionData.emailAddress : validatedEmail;
     const userStatus = sessionData.loggedIn ? "lex" : "nex";
@@ -1656,7 +1645,8 @@ async function handlePaymentAuthorized(event, session, sessionData, config) {
       return;
     }
     const walletError = parseWalletApiError(err);
-    trackWalletPaymentFailure(skuId, walletError?.errorType ?? "UNKNOWN");
+    const purchaseDurationMs = purchaseStartTime !== void 0 ? Date.now() - purchaseStartTime : void 0;
+    trackWalletPaymentFailure(skuId, walletError?.errorType ?? "UNKNOWN", purchaseDurationMs);
     failApplePaySession(session);
     if (!walletError) {
       redirectFallback(skuId, returnUrl, country, { inlineError: MSG_PAYMENT_GENERIC_ERROR });
@@ -1979,6 +1969,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   #country = "";
   #rendering = false;
   #readyPromise = null;
+  #loadStartTime = 0;
   #sessionData = null;
   #paymentOptions = null;
   #returnUrl = "";
@@ -2054,6 +2045,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
   // ─── Render pipeline ────────────────────────────────────────────────────────
   async #run() {
+    this.#loadStartTime = Date.now();
     try {
       this.#renderTemplate();
       if (await this.#checkAvailability()) return;
@@ -2153,10 +2145,12 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       button.classList.remove("wap-loading");
       this.#updateDisabledState();
       this.#scheduleRecaptchaTokens();
-      trackExpressWalletImpression(this.#offer.sku_id, {
-        entryPoint: this.#entryPoint,
-        country: this.#country
-      });
+      const buttonLoadDurationMs = Date.now() - this.#loadStartTime;
+      trackExpressWalletImpression(
+        this.#offer.sku_id,
+        { entryPoint: this.#entryPoint, country: this.#country },
+        buttonLoadDurationMs
+      );
     }
   }
   // ─── Private helpers ────────────────────────────────────────────────────────
@@ -2179,7 +2173,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (document.querySelector(ApplePayModal.tag)) {
       return;
     }
-    trackExpressWalletClick(this.#offer.sku_id);
+    const modalOpenStart = Date.now();
     ApplePayModal.define();
     const modal = document.createElement(ApplePayModal.tag);
     modal.offer = this.#offer;
@@ -2194,6 +2188,8 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       this.#scheduleRecaptchaTokens();
     };
     modal.open(this.#recaptchaTokensPromise);
+    const modalRenderDurationMs = Date.now() - modalOpenStart;
+    trackExpressWalletClick(skuId, modalRenderDurationMs);
   }
   /**
    * Starts a fresh reCAPTCHA token pre-fetch and stores its promise.

package/dist/src/clients/payment-checkout/detects.js

@@ -8,52 +8,32 @@ var isAppleDeviceOrSafari = () => {
   const isSafariBrowser = navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") === -1;
   return isIOSOrMacTouchDevice || isSafariBrowser;
 };
-var bypassApplePayChecks = () => new URLSearchParams(window.location.search).get("BYPASS_APPLE_PAY_CHECKS") !== null;
+var bypassApplePayChecks = () => new URLSearchParams(window.location.search).get("BYPASS_APPLE_PAY_CHECKS") !== null && getApplePayConfig()?.debugBypassEnabled === true;
 var isApplePayAvailable = async () => {
   if (bypassApplePayChecks()) {
-    console.log("[ApplePay] bypass active \u2014 displaying button");
     return true;
   }
-  const applePaySession = window.ApplePaySession;
-  const isAppleDevice = isAppleDeviceOrSafari();
-  console.log("[ApplePay] detection:", JSON.stringify({
-    applePaySessionExists: !!applePaySession,
-    isAppleDevice,
-    userAgent: navigator.userAgent,
-    maxTouchPoints: navigator.maxTouchPoints
-  }, null, 2));
-  if (!applePaySession && !isAppleDevice) {
-    console.log("[ApplePay] not available \u2014 no ApplePaySession and not Apple device");
+  if (!isAppleDeviceOrSafari()) {
     return false;
   }
+  const applePaySession = window.ApplePaySession;
   if (!applePaySession) {
-    console.log("[ApplePay] not available \u2014 Apple device but no ApplePaySession API");
     return false;
   }
   try {
     if (typeof applePaySession.canMakePayments !== "function") {
-      console.log("[ApplePay] not available \u2014 canMakePayments is not a function");
       return false;
     }
     if (!applePaySession.canMakePayments()) {
-      console.log("[ApplePay] not available \u2014 canMakePayments returned false");
       return false;
     }
     const merchantId = getApplePayConfig()?.merchantId;
     if (!merchantId) {
-      console.log("[ApplePay] not available \u2014 no merchantId configured");
       return false;
     }
     const hasActiveCard = await applePaySession.canMakePaymentsWithActiveCard(merchantId);
-    console.log("[ApplePay] canMakePaymentsWithActiveCard:", JSON.stringify({ merchantId, hasActiveCard }, null, 2));
-    if (!hasActiveCard) {
-      console.log("[ApplePay] not available \u2014 no active card for merchant");
-      return false;
-    }
-    console.log("[ApplePay] available \u2014 displaying button");
-    return true;
-  } catch (error) {
-    console.log("[ApplePay] not available \u2014 error:", JSON.stringify({ error: String(error) }, null, 2));
+    return hasActiveCard;
+  } catch {
     return false;
   }
 };

package/dist/src/clients/payment-checkout/payment-handler.js

@@ -93,16 +93,18 @@ var track = (action, extra) => {
     ...extra
   });
 };
-var trackWalletPaymentSuccess = (skuId, basketId) => {
+var trackWalletPaymentSuccess = (skuId, basketId, purchaseDurationMs) => {
   track(EXPRESS_CHECKOUT_EVENTS.SUCCESS, {
     sku_id: skuId,
-    basket_id: basketId
+    basket_id: basketId,
+    ...purchaseDurationMs !== void 0 && { purchase_duration_ms: purchaseDurationMs }
   });
 };
-var trackWalletPaymentFailure = (skuId, reason) => {
+var trackWalletPaymentFailure = (skuId, reason, purchaseDurationMs) => {
   track(EXPRESS_CHECKOUT_EVENTS.FAILURE, {
     sku_id: skuId,
-    failure_reason: reason
+    failure_reason: reason,
+    ...purchaseDurationMs !== void 0 && { purchase_duration_ms: purchaseDurationMs }
   });
 };
 var trackFallbackCheckout = (skuId) => {
@@ -345,12 +347,14 @@ function handleStructuredError(ctx) {
 async function handlePaymentAuthorized(event, session, sessionData, config) {
   const { skuId, returnUrl, country } = config;
   let validatedEmail;
+  let purchaseStartTime;
   try {
     validatedEmail = validateContacts(
       event,
       sessionData,
       config.supportedBillingCountries
     );
+    purchaseStartTime = Date.now();
     const result = await performPurchase({
       applePayToken: event.payment.token,
       skuId: config.skuId,
@@ -361,7 +365,8 @@ async function handlePaymentAuthorized(event, session, sessionData, config) {
       },
       recaptchaTokens: config.recaptchaTokens
     });
-    trackWalletPaymentSuccess(skuId, result.basketId);
+    const purchaseDurationMs = Date.now() - purchaseStartTime;
+    trackWalletPaymentSuccess(skuId, result.basketId, purchaseDurationMs);
     session.completePayment({ status: ApplePaySession.STATUS_SUCCESS });
     const successEmail = sessionData.loggedIn ? sessionData.emailAddress : validatedEmail;
     const userStatus = sessionData.loggedIn ? "lex" : "nex";
@@ -379,7 +384,8 @@ async function handlePaymentAuthorized(event, session, sessionData, config) {
       return;
     }
     const walletError = parseWalletApiError(err);
-    trackWalletPaymentFailure(skuId, walletError?.errorType ?? "UNKNOWN");
+    const purchaseDurationMs = purchaseStartTime !== void 0 ? Date.now() - purchaseStartTime : void 0;
+    trackWalletPaymentFailure(skuId, walletError?.errorType ?? "UNKNOWN", purchaseDurationMs);
     failApplePaySession(session);
     if (!walletError) {
       redirectFallback(skuId, returnUrl, country, { inlineError: MSG_PAYMENT_GENERIC_ERROR });

package/dist/src/index.js

@@ -1120,52 +1120,32 @@ var isAppleDeviceOrSafari = () => {
   const isSafariBrowser = navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") === -1;
   return isIOSOrMacTouchDevice || isSafariBrowser;
 };
-var bypassApplePayChecks = () => new URLSearchParams(window.location.search).get("BYPASS_APPLE_PAY_CHECKS") !== null;
+var bypassApplePayChecks = () => new URLSearchParams(window.location.search).get("BYPASS_APPLE_PAY_CHECKS") !== null && getApplePayConfig()?.debugBypassEnabled === true;
 var isApplePayAvailable = async () => {
   if (bypassApplePayChecks()) {
-    console.log("[ApplePay] bypass active \u2014 displaying button");
     return true;
   }
-  const applePaySession = window.ApplePaySession;
-  const isAppleDevice = isAppleDeviceOrSafari();
-  console.log("[ApplePay] detection:", JSON.stringify({
-    applePaySessionExists: !!applePaySession,
-    isAppleDevice,
-    userAgent: navigator.userAgent,
-    maxTouchPoints: navigator.maxTouchPoints
-  }, null, 2));
-  if (!applePaySession && !isAppleDevice) {
-    console.log("[ApplePay] not available \u2014 no ApplePaySession and not Apple device");
+  if (!isAppleDeviceOrSafari()) {
     return false;
   }
+  const applePaySession = window.ApplePaySession;
   if (!applePaySession) {
-    console.log("[ApplePay] not available \u2014 Apple device but no ApplePaySession API");
     return false;
   }
   try {
     if (typeof applePaySession.canMakePayments !== "function") {
-      console.log("[ApplePay] not available \u2014 canMakePayments is not a function");
       return false;
     }
     if (!applePaySession.canMakePayments()) {
-      console.log("[ApplePay] not available \u2014 canMakePayments returned false");
       return false;
     }
     const merchantId = getApplePayConfig()?.merchantId;
     if (!merchantId) {
-      console.log("[ApplePay] not available \u2014 no merchantId configured");
       return false;
     }
     const hasActiveCard = await applePaySession.canMakePaymentsWithActiveCard(merchantId);
-    console.log("[ApplePay] canMakePaymentsWithActiveCard:", JSON.stringify({ merchantId, hasActiveCard }, null, 2));
-    if (!hasActiveCard) {
-      console.log("[ApplePay] not available \u2014 no active card for merchant");
-      return false;
-    }
-    console.log("[ApplePay] available \u2014 displaying button");
-    return true;
-  } catch (error) {
-    console.log("[ApplePay] not available \u2014 error:", JSON.stringify({ error: String(error) }, null, 2));
+    return hasActiveCard;
+  } catch {
     return false;
   }
 };
@@ -1338,17 +1318,21 @@ var track = (action, extra) => {
     ...extra
   });
 };
-var trackExpressWalletImpression = (skuId, { entryPoint, country }) => {
+var trackExpressWalletImpression = (skuId, { entryPoint, country }, buttonLoadDurationMs) => {
   track(EXPRESS_CHECKOUT_EVENTS.IMPRESSION, {
     wallet_type: "apple_pay",
     entry_point: entryPoint,
     sku_id: skuId,
     country,
-    device: getDevice()
+    device: getDevice(),
+    ...buttonLoadDurationMs !== void 0 && { button_load_duration_ms: buttonLoadDurationMs }
   });
 };
-var trackExpressWalletClick = (skuId) => {
-  track(EXPRESS_CHECKOUT_EVENTS.BUTTON_CLICK, { sku_id: skuId });
+var trackExpressWalletClick = (skuId, modalRenderDurationMs) => {
+  track(EXPRESS_CHECKOUT_EVENTS.BUTTON_CLICK, {
+    sku_id: skuId,
+    ...modalRenderDurationMs !== void 0 && { modal_render_duration_ms: modalRenderDurationMs }
+  });
 };
 var trackWalletPaymentSheetOpen = (skuId) => {
   track(EXPRESS_CHECKOUT_EVENTS.SHEET_OPEN, { sku_id: skuId });
@@ -1356,16 +1340,18 @@ var trackWalletPaymentSheetOpen = (skuId) => {
 var trackWalletPaymentAuthorised = (skuId) => {
   track(EXPRESS_CHECKOUT_EVENTS.AUTHORISED, { sku_id: skuId });
 };
-var trackWalletPaymentSuccess = (skuId, basketId) => {
+var trackWalletPaymentSuccess = (skuId, basketId, purchaseDurationMs) => {
   track(EXPRESS_CHECKOUT_EVENTS.SUCCESS, {
     sku_id: skuId,
-    basket_id: basketId
+    basket_id: basketId,
+    ...purchaseDurationMs !== void 0 && { purchase_duration_ms: purchaseDurationMs }
   });
 };
-var trackWalletPaymentFailure = (skuId, reason) => {
+var trackWalletPaymentFailure = (skuId, reason, purchaseDurationMs) => {
   track(EXPRESS_CHECKOUT_EVENTS.FAILURE, {
     sku_id: skuId,
-    failure_reason: reason
+    failure_reason: reason,
+    ...purchaseDurationMs !== void 0 && { purchase_duration_ms: purchaseDurationMs }
   });
 };
 var trackFallbackCheckout = (skuId) => {
@@ -1627,12 +1613,14 @@ function handleStructuredError(ctx) {
 async function handlePaymentAuthorized(event, session, sessionData, config) {
   const { skuId, returnUrl, country } = config;
   let validatedEmail;
+  let purchaseStartTime;
   try {
     validatedEmail = validateContacts(
       event,
       sessionData,
       config.supportedBillingCountries
     );
+    purchaseStartTime = Date.now();
     const result = await performPurchase({
       applePayToken: event.payment.token,
       skuId: config.skuId,
@@ -1643,7 +1631,8 @@ async function handlePaymentAuthorized(event, session, sessionData, config) {
       },
       recaptchaTokens: config.recaptchaTokens
     });
-    trackWalletPaymentSuccess(skuId, result.basketId);
+    const purchaseDurationMs = Date.now() - purchaseStartTime;
+    trackWalletPaymentSuccess(skuId, result.basketId, purchaseDurationMs);
     session.completePayment({ status: ApplePaySession.STATUS_SUCCESS });
     const successEmail = sessionData.loggedIn ? sessionData.emailAddress : validatedEmail;
     const userStatus = sessionData.loggedIn ? "lex" : "nex";
@@ -1661,7 +1650,8 @@ async function handlePaymentAuthorized(event, session, sessionData, config) {
       return;
     }
     const walletError = parseWalletApiError(err);
-    trackWalletPaymentFailure(skuId, walletError?.errorType ?? "UNKNOWN");
+    const purchaseDurationMs = purchaseStartTime !== void 0 ? Date.now() - purchaseStartTime : void 0;
+    trackWalletPaymentFailure(skuId, walletError?.errorType ?? "UNKNOWN", purchaseDurationMs);
     failApplePaySession(session);
     if (!walletError) {
       redirectFallback(skuId, returnUrl, country, { inlineError: MSG_PAYMENT_GENERIC_ERROR });
@@ -1984,6 +1974,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   #country = "";
   #rendering = false;
   #readyPromise = null;
+  #loadStartTime = 0;
   #sessionData = null;
   #paymentOptions = null;
   #returnUrl = "";
@@ -2059,6 +2050,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
   // ─── Render pipeline ────────────────────────────────────────────────────────
   async #run() {
+    this.#loadStartTime = Date.now();
     try {
       this.#renderTemplate();
       if (await this.#checkAvailability()) return;
@@ -2158,10 +2150,12 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       button.classList.remove("wap-loading");
       this.#updateDisabledState();
       this.#scheduleRecaptchaTokens();
-      trackExpressWalletImpression(this.#offer.sku_id, {
-        entryPoint: this.#entryPoint,
-        country: this.#country
-      });
+      const buttonLoadDurationMs = Date.now() - this.#loadStartTime;
+      trackExpressWalletImpression(
+        this.#offer.sku_id,
+        { entryPoint: this.#entryPoint, country: this.#country },
+        buttonLoadDurationMs
+      );
     }
   }
   // ─── Private helpers ────────────────────────────────────────────────────────
@@ -2184,7 +2178,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (document.querySelector(ApplePayModal.tag)) {
       return;
     }
-    trackExpressWalletClick(this.#offer.sku_id);
+    const modalOpenStart = Date.now();
     ApplePayModal.define();
     const modal = document.createElement(ApplePayModal.tag);
     modal.offer = this.#offer;
@@ -2199,6 +2193,8 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       this.#scheduleRecaptchaTokens();
     };
     modal.open(this.#recaptchaTokensPromise);
+    const modalRenderDurationMs = Date.now() - modalOpenStart;
+    trackExpressWalletClick(skuId, modalRenderDurationMs);
   }
   /**
    * Starts a fresh reCAPTCHA token pre-fetch and stores its promise.

package/dist/src/utils/expressCheckoutTracking.d.ts

@@ -47,17 +47,17 @@ export type ImpressionMetadata = {
     country: string;
 };
 /** Wallet button displayed — emits all 5 required analytics dimensions. */
-export declare const trackExpressWalletImpression: (skuId: string, { entryPoint, country }: ImpressionMetadata) => void;
+export declare const trackExpressWalletImpression: (skuId: string, { entryPoint, country }: ImpressionMetadata, buttonLoadDurationMs?: number) => void;
 /** Wallet button clicked */
-export declare const trackExpressWalletClick: (skuId: string) => void;
+export declare const trackExpressWalletClick: (skuId: string, modalRenderDurationMs?: number) => void;
 /** Apple Pay sheet opened (session.begin() called) */
 export declare const trackWalletPaymentSheetOpen: (skuId: string) => void;
 /** Payment authorised by the user in the Apple Pay sheet */
 export declare const trackWalletPaymentAuthorised: (skuId: string) => void;
 /** Purchase completed — BFF returned success */
-export declare const trackWalletPaymentSuccess: (skuId: string, basketId: string) => void;
+export declare const trackWalletPaymentSuccess: (skuId: string, basketId: string, purchaseDurationMs?: number) => void;
 /** Payment failed — BFF returned an error */
-export declare const trackWalletPaymentFailure: (skuId: string, reason: string) => void;
+export declare const trackWalletPaymentFailure: (skuId: string, reason: string, purchaseDurationMs?: number) => void;
 /** Redirect to standard checkout triggered */
 export declare const trackFallbackCheckout: (skuId: string) => void;
 /** Billing/shipping field failed validation (emitted per-field when Apple Pay sheet stays open) */

package/dist/src/utils/expressCheckoutTracking.js

@@ -35,17 +35,21 @@ var track = (action, extra) => {
     ...extra
   });
 };
-var trackExpressWalletImpression = (skuId, { entryPoint, country }) => {
+var trackExpressWalletImpression = (skuId, { entryPoint, country }, buttonLoadDurationMs) => {
   track(EXPRESS_CHECKOUT_EVENTS.IMPRESSION, {
     wallet_type: "apple_pay",
     entry_point: entryPoint,
     sku_id: skuId,
     country,
-    device: getDevice()
+    device: getDevice(),
+    ...buttonLoadDurationMs !== void 0 && { button_load_duration_ms: buttonLoadDurationMs }
   });
 };
-var trackExpressWalletClick = (skuId) => {
-  track(EXPRESS_CHECKOUT_EVENTS.BUTTON_CLICK, { sku_id: skuId });
+var trackExpressWalletClick = (skuId, modalRenderDurationMs) => {
+  track(EXPRESS_CHECKOUT_EVENTS.BUTTON_CLICK, {
+    sku_id: skuId,
+    ...modalRenderDurationMs !== void 0 && { modal_render_duration_ms: modalRenderDurationMs }
+  });
 };
 var trackWalletPaymentSheetOpen = (skuId) => {
   track(EXPRESS_CHECKOUT_EVENTS.SHEET_OPEN, { sku_id: skuId });
@@ -53,16 +57,18 @@ var trackWalletPaymentSheetOpen = (skuId) => {
 var trackWalletPaymentAuthorised = (skuId) => {
   track(EXPRESS_CHECKOUT_EVENTS.AUTHORISED, { sku_id: skuId });
 };
-var trackWalletPaymentSuccess = (skuId, basketId) => {
+var trackWalletPaymentSuccess = (skuId, basketId, purchaseDurationMs) => {
   track(EXPRESS_CHECKOUT_EVENTS.SUCCESS, {
     sku_id: skuId,
-    basket_id: basketId
+    basket_id: basketId,
+    ...purchaseDurationMs !== void 0 && { purchase_duration_ms: purchaseDurationMs }
   });
 };
-var trackWalletPaymentFailure = (skuId, reason) => {
+var trackWalletPaymentFailure = (skuId, reason, purchaseDurationMs) => {
   track(EXPRESS_CHECKOUT_EVENTS.FAILURE, {
     sku_id: skuId,
-    failure_reason: reason
+    failure_reason: reason,
+    ...purchaseDurationMs !== void 0 && { purchase_duration_ms: purchaseDurationMs }
   });
 };
 var trackFallbackCheckout = (skuId) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@economist/web-apple-pay",
   "description": "Web component package for Apple Pay checkout UI",
-  "version": "0.1.3-beta.37",
+  "version": "0.1.3-beta.39",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",