@economist/web-apple-pay 1.7.0 → 1.7.1

package/dist/index.js

@@ -317,7 +317,6 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
     const offer = this.#offer;
     const country = this.#country;
     if (!offer) {
-      console.error("ApplePayModal: Missing or invalid offer data");
       this.remove();
       return;
     }
@@ -827,6 +826,38 @@ var MSG_EMAIL_COLLISION = "This email address is already linked to an account. P
 var MSG_CONTACT_VALIDATION_INTERNAL = "Could not validate Apple Pay contact";
 
 // src/clients/payment-checkout/apple-session.ts
+function redirectToFallbackCheckout(config) {
+  trackFallbackCheckout(config.skuId);
+  window.location.href = redirectToCheckoutFallback({
+    skuId: config.skuId,
+    returnUrl: config.returnUrl,
+    inlineError: MSG_PAYMENT_GENERIC_ERROR
+  });
+}
+async function handleMerchantValidation(event, session, config) {
+  try {
+    const validationHost = new URL(event.validationURL).host;
+    if (!validationHost.endsWith("apple.com")) {
+      session.abort();
+      redirectToFallbackCheckout(config);
+      return;
+    }
+    const recaptchaToken = await getRecaptchaToken("verifyMerchant");
+    const response = await validateAppleMerchant({
+      validationURL: event.validationURL,
+      recaptchaToken
+    });
+    if (!response?.merchantSession) {
+      session.abort();
+      redirectToFallbackCheckout(config);
+      return;
+    }
+    session.completeMerchantValidation(response.merchantSession);
+  } catch {
+    session.abort();
+    redirectToFallbackCheckout(config);
+  }
+}
 function startApplePaySession(config) {
   const paymentRequest = {
     countryCode: config.countryCode,
@@ -841,55 +872,23 @@ function startApplePaySession(config) {
     // Only request email from Apple Pay sheet if user is NOT logged in
     ...!config.userLoggedIn && { requiredShippingContactFields: ["email"] }
   };
-  const session = new ApplePaySession(3, paymentRequest);
-  session.onvalidatemerchant = async (event) => {
-    try {
-      const validationHost = new URL(event.validationURL).host;
-      if (!validationHost.endsWith("apple.com")) {
-        trackFallbackCheckout(config.skuId);
-        session.abort();
-        window.location.href = redirectToCheckoutFallback({
-          skuId: config.skuId,
-          returnUrl: config.returnUrl,
-          inlineError: MSG_PAYMENT_GENERIC_ERROR
-        });
-        return;
-      }
-      const recaptchaToken = await getRecaptchaToken("verifyMerchant");
-      const response = await validateAppleMerchant({
-        validationURL: event.validationURL,
-        recaptchaToken
-      });
-      if (!response?.merchantSession) {
-        trackFallbackCheckout(config.skuId);
-        session.abort();
-        window.location.href = redirectToCheckoutFallback({
-          skuId: config.skuId,
-          returnUrl: config.returnUrl,
-          inlineError: MSG_PAYMENT_GENERIC_ERROR
-        });
-        return;
-      }
-      session.completeMerchantValidation(response.merchantSession);
-    } catch {
-      trackFallbackCheckout(config.skuId);
-      session.abort();
-      window.location.href = redirectToCheckoutFallback({
-        skuId: config.skuId,
-        returnUrl: config.returnUrl,
-        inlineError: MSG_PAYMENT_GENERIC_ERROR
-      });
-    }
-  };
-  session.onpaymentauthorized = (event) => {
-    trackWalletPaymentAuthorised(config.skuId);
-    config.onPaymentAuthorized(event, session);
-  };
-  session.oncancel = () => {
-    config.onCancel?.();
-  };
-  trackWalletPaymentSheetOpen(config.skuId);
-  session.begin();
+  try {
+    const session = new ApplePaySession(3, paymentRequest);
+    session.onvalidatemerchant = async (event) => {
+      await handleMerchantValidation(event, session, config);
+    };
+    session.onpaymentauthorized = (event) => {
+      trackWalletPaymentAuthorised(config.skuId);
+      config.onPaymentAuthorized(event, session);
+    };
+    session.oncancel = () => {
+      config.onCancel?.();
+    };
+    trackWalletPaymentSheetOpen(config.skuId);
+    session.begin();
+  } catch {
+    redirectToFallbackCheckout(config);
+  }
 }
 
 // src/clients/payment-checkout/contact-validation.ts
@@ -1390,11 +1389,15 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    * Creates and configures an ApplePayButton if the feature flag is present.
    */
   static createIfEnabled(offer, country, entryPoint) {
-    if (!offer) return null;
-    if (APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant))
+    if (!offer) {
       return null;
-    if (!new URLSearchParams(window.location.search).has(FEATURE_APPLE_PAY_EXPRESS_CHECKOUT))
+    }
+    if (APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant)) {
+      return null;
+    }
+    if (!new URLSearchParams(window.location.search).has(FEATURE_APPLE_PAY_EXPRESS_CHECKOUT)) {
       return null;
+    }
     _ApplePayButton.define();
     const button = document.createElement(_ApplePayButton.tag);
     button.offer = offer;
@@ -1421,6 +1424,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   #returnUrl = "";
   #supportedBillingCountries = [];
   #entryPoint = "";
+  #recaptchaTokens = null;
   // ─── Public API ─────────────────────────────────────────────────────────────
   get offer() {
     return this.#offer;
@@ -1556,7 +1560,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    */
   async #fetchAndCacheOptions() {
     this.#paymentOptions = await this.#fetchPaymentOptions();
-    if (!this.#paymentOptions?.apple_pay) {
+    if (!this.#paymentOptions?.options?.apple_pay) {
       this.style.display = "none";
       this.querySelector(SEL_CONTAINER)?.remove();
       return true;
@@ -1579,10 +1583,10 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       if (button.classList.contains("wap-loading")) return;
       this.#openModal();
     });
-    this.addEventListener("apple-pay-confirmed", (event) => {
+    document.addEventListener("apple-pay-confirmed", (event) => {
       const { skuId, country } = event.detail;
       this.#initiateApplePay(skuId, country);
-    });
+    }, { once: true });
   }
   #finishLoading() {
     const button = this.querySelector(SEL_BUTTON);
@@ -1609,8 +1613,17 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     button.setAttribute("aria-disabled", "true");
   }
   #openModal() {
-    if (!this.#offer || document.querySelector(ApplePayModal.tag)) return;
+    if (!this.#offer) {
+      return;
+    }
+    if (document.querySelector(ApplePayModal.tag)) {
+      return;
+    }
     trackExpressWalletClick(this.#offer.sku_id);
+    getPurchaseRecaptchaTokens().then((tokens) => {
+      this.#recaptchaTokens = tokens;
+    }).catch(() => {
+    });
     ApplePayModal.define();
     const modal = document.createElement(ApplePayModal.tag);
     modal.offer = this.#offer;
@@ -1645,7 +1658,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     return {
       countryCode: country,
       currencyCode: offer.price?.currency_code ?? DEFAULT_CURRENCY,
-      supportedNetworks: paymentOptions.apple_pay.settings.supported_networks,
+      supportedNetworks: paymentOptions.options.apple_pay.settings.supported_networks,
       totalAmount,
       totalLabel: TOTAL_LABEL,
       skuId,
@@ -1665,7 +1678,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     try {
       const sessionData = this.#sessionData ?? _ApplePayButton.#ANONYMOUS_SESSION;
       const paymentOptions = this.#paymentOptions;
-      const recaptchaTokens = await getPurchaseRecaptchaTokens();
+      const recaptchaTokens = this.#recaptchaTokens ?? await getPurchaseRecaptchaTokens();
       startApplePaySession(
         this.#buildSessionParams(
           skuId,

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

@@ -317,7 +317,6 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
     const offer = this.#offer;
     const country = this.#country;
     if (!offer) {
-      console.error("ApplePayModal: Missing or invalid offer data");
       this.remove();
       return;
     }
@@ -822,6 +821,38 @@ var MSG_EMAIL_COLLISION = "This email address is already linked to an account. P
 var MSG_CONTACT_VALIDATION_INTERNAL = "Could not validate Apple Pay contact";
 
 // src/clients/payment-checkout/apple-session.ts
+function redirectToFallbackCheckout(config) {
+  trackFallbackCheckout(config.skuId);
+  window.location.href = redirectToCheckoutFallback({
+    skuId: config.skuId,
+    returnUrl: config.returnUrl,
+    inlineError: MSG_PAYMENT_GENERIC_ERROR
+  });
+}
+async function handleMerchantValidation(event, session, config) {
+  try {
+    const validationHost = new URL(event.validationURL).host;
+    if (!validationHost.endsWith("apple.com")) {
+      session.abort();
+      redirectToFallbackCheckout(config);
+      return;
+    }
+    const recaptchaToken = await getRecaptchaToken("verifyMerchant");
+    const response = await validateAppleMerchant({
+      validationURL: event.validationURL,
+      recaptchaToken
+    });
+    if (!response?.merchantSession) {
+      session.abort();
+      redirectToFallbackCheckout(config);
+      return;
+    }
+    session.completeMerchantValidation(response.merchantSession);
+  } catch {
+    session.abort();
+    redirectToFallbackCheckout(config);
+  }
+}
 function startApplePaySession(config) {
   const paymentRequest = {
     countryCode: config.countryCode,
@@ -836,55 +867,23 @@ function startApplePaySession(config) {
     // Only request email from Apple Pay sheet if user is NOT logged in
     ...!config.userLoggedIn && { requiredShippingContactFields: ["email"] }
   };
-  const session = new ApplePaySession(3, paymentRequest);
-  session.onvalidatemerchant = async (event) => {
-    try {
-      const validationHost = new URL(event.validationURL).host;
-      if (!validationHost.endsWith("apple.com")) {
-        trackFallbackCheckout(config.skuId);
-        session.abort();
-        window.location.href = redirectToCheckoutFallback({
-          skuId: config.skuId,
-          returnUrl: config.returnUrl,
-          inlineError: MSG_PAYMENT_GENERIC_ERROR
-        });
-        return;
-      }
-      const recaptchaToken = await getRecaptchaToken("verifyMerchant");
-      const response = await validateAppleMerchant({
-        validationURL: event.validationURL,
-        recaptchaToken
-      });
-      if (!response?.merchantSession) {
-        trackFallbackCheckout(config.skuId);
-        session.abort();
-        window.location.href = redirectToCheckoutFallback({
-          skuId: config.skuId,
-          returnUrl: config.returnUrl,
-          inlineError: MSG_PAYMENT_GENERIC_ERROR
-        });
-        return;
-      }
-      session.completeMerchantValidation(response.merchantSession);
-    } catch {
-      trackFallbackCheckout(config.skuId);
-      session.abort();
-      window.location.href = redirectToCheckoutFallback({
-        skuId: config.skuId,
-        returnUrl: config.returnUrl,
-        inlineError: MSG_PAYMENT_GENERIC_ERROR
-      });
-    }
-  };
-  session.onpaymentauthorized = (event) => {
-    trackWalletPaymentAuthorised(config.skuId);
-    config.onPaymentAuthorized(event, session);
-  };
-  session.oncancel = () => {
-    config.onCancel?.();
-  };
-  trackWalletPaymentSheetOpen(config.skuId);
-  session.begin();
+  try {
+    const session = new ApplePaySession(3, paymentRequest);
+    session.onvalidatemerchant = async (event) => {
+      await handleMerchantValidation(event, session, config);
+    };
+    session.onpaymentauthorized = (event) => {
+      trackWalletPaymentAuthorised(config.skuId);
+      config.onPaymentAuthorized(event, session);
+    };
+    session.oncancel = () => {
+      config.onCancel?.();
+    };
+    trackWalletPaymentSheetOpen(config.skuId);
+    session.begin();
+  } catch {
+    redirectToFallbackCheckout(config);
+  }
 }
 
 // src/clients/payment-checkout/contact-validation.ts
@@ -1385,11 +1384,15 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    * Creates and configures an ApplePayButton if the feature flag is present.
    */
   static createIfEnabled(offer, country, entryPoint) {
-    if (!offer) return null;
-    if (APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant))
+    if (!offer) {
       return null;
-    if (!new URLSearchParams(window.location.search).has(FEATURE_APPLE_PAY_EXPRESS_CHECKOUT))
+    }
+    if (APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant)) {
+      return null;
+    }
+    if (!new URLSearchParams(window.location.search).has(FEATURE_APPLE_PAY_EXPRESS_CHECKOUT)) {
       return null;
+    }
     _ApplePayButton.define();
     const button = document.createElement(_ApplePayButton.tag);
     button.offer = offer;
@@ -1416,6 +1419,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   #returnUrl = "";
   #supportedBillingCountries = [];
   #entryPoint = "";
+  #recaptchaTokens = null;
   // ─── Public API ─────────────────────────────────────────────────────────────
   get offer() {
     return this.#offer;
@@ -1551,7 +1555,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    */
   async #fetchAndCacheOptions() {
     this.#paymentOptions = await this.#fetchPaymentOptions();
-    if (!this.#paymentOptions?.apple_pay) {
+    if (!this.#paymentOptions?.options?.apple_pay) {
       this.style.display = "none";
       this.querySelector(SEL_CONTAINER)?.remove();
       return true;
@@ -1574,10 +1578,10 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       if (button.classList.contains("wap-loading")) return;
       this.#openModal();
     });
-    this.addEventListener("apple-pay-confirmed", (event) => {
+    document.addEventListener("apple-pay-confirmed", (event) => {
       const { skuId, country } = event.detail;
       this.#initiateApplePay(skuId, country);
-    });
+    }, { once: true });
   }
   #finishLoading() {
     const button = this.querySelector(SEL_BUTTON);
@@ -1604,8 +1608,17 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     button.setAttribute("aria-disabled", "true");
   }
   #openModal() {
-    if (!this.#offer || document.querySelector(ApplePayModal.tag)) return;
+    if (!this.#offer) {
+      return;
+    }
+    if (document.querySelector(ApplePayModal.tag)) {
+      return;
+    }
     trackExpressWalletClick(this.#offer.sku_id);
+    getPurchaseRecaptchaTokens().then((tokens) => {
+      this.#recaptchaTokens = tokens;
+    }).catch(() => {
+    });
     ApplePayModal.define();
     const modal = document.createElement(ApplePayModal.tag);
     modal.offer = this.#offer;
@@ -1640,7 +1653,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     return {
       countryCode: country,
       currencyCode: offer.price?.currency_code ?? DEFAULT_CURRENCY,
-      supportedNetworks: paymentOptions.apple_pay.settings.supported_networks,
+      supportedNetworks: paymentOptions.options.apple_pay.settings.supported_networks,
       totalAmount,
       totalLabel: TOTAL_LABEL,
       skuId,
@@ -1660,7 +1673,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     try {
       const sessionData = this.#sessionData ?? _ApplePayButton.#ANONYMOUS_SESSION;
       const paymentOptions = this.#paymentOptions;
-      const recaptchaTokens = await getPurchaseRecaptchaTokens();
+      const recaptchaTokens = this.#recaptchaTokens ?? await getPurchaseRecaptchaTokens();
       startApplePaySession(
         this.#buildSessionParams(
           skuId,

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

@@ -317,7 +317,6 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
     const offer = this.#offer;
     const country = this.#country;
     if (!offer) {
-      console.error("ApplePayModal: Missing or invalid offer data");
       this.remove();
       return;
     }
@@ -830,6 +829,38 @@ var MSG_EMAIL_COLLISION = "This email address is already linked to an account. P
 var MSG_CONTACT_VALIDATION_INTERNAL = "Could not validate Apple Pay contact";
 
 // src/clients/payment-checkout/apple-session.ts
+function redirectToFallbackCheckout(config) {
+  trackFallbackCheckout(config.skuId);
+  window.location.href = redirectToCheckoutFallback({
+    skuId: config.skuId,
+    returnUrl: config.returnUrl,
+    inlineError: MSG_PAYMENT_GENERIC_ERROR
+  });
+}
+async function handleMerchantValidation(event, session, config) {
+  try {
+    const validationHost = new URL(event.validationURL).host;
+    if (!validationHost.endsWith("apple.com")) {
+      session.abort();
+      redirectToFallbackCheckout(config);
+      return;
+    }
+    const recaptchaToken = await getRecaptchaToken("verifyMerchant");
+    const response = await validateAppleMerchant({
+      validationURL: event.validationURL,
+      recaptchaToken
+    });
+    if (!response?.merchantSession) {
+      session.abort();
+      redirectToFallbackCheckout(config);
+      return;
+    }
+    session.completeMerchantValidation(response.merchantSession);
+  } catch {
+    session.abort();
+    redirectToFallbackCheckout(config);
+  }
+}
 function startApplePaySession(config) {
   const paymentRequest = {
     countryCode: config.countryCode,
@@ -844,55 +875,23 @@ function startApplePaySession(config) {
     // Only request email from Apple Pay sheet if user is NOT logged in
     ...!config.userLoggedIn && { requiredShippingContactFields: ["email"] }
   };
-  const session = new ApplePaySession(3, paymentRequest);
-  session.onvalidatemerchant = async (event) => {
-    try {
-      const validationHost = new URL(event.validationURL).host;
-      if (!validationHost.endsWith("apple.com")) {
-        trackFallbackCheckout(config.skuId);
-        session.abort();
-        window.location.href = redirectToCheckoutFallback({
-          skuId: config.skuId,
-          returnUrl: config.returnUrl,
-          inlineError: MSG_PAYMENT_GENERIC_ERROR
-        });
-        return;
-      }
-      const recaptchaToken = await getRecaptchaToken("verifyMerchant");
-      const response = await validateAppleMerchant({
-        validationURL: event.validationURL,
-        recaptchaToken
-      });
-      if (!response?.merchantSession) {
-        trackFallbackCheckout(config.skuId);
-        session.abort();
-        window.location.href = redirectToCheckoutFallback({
-          skuId: config.skuId,
-          returnUrl: config.returnUrl,
-          inlineError: MSG_PAYMENT_GENERIC_ERROR
-        });
-        return;
-      }
-      session.completeMerchantValidation(response.merchantSession);
-    } catch {
-      trackFallbackCheckout(config.skuId);
-      session.abort();
-      window.location.href = redirectToCheckoutFallback({
-        skuId: config.skuId,
-        returnUrl: config.returnUrl,
-        inlineError: MSG_PAYMENT_GENERIC_ERROR
-      });
-    }
-  };
-  session.onpaymentauthorized = (event) => {
-    trackWalletPaymentAuthorised(config.skuId);
-    config.onPaymentAuthorized(event, session);
-  };
-  session.oncancel = () => {
-    config.onCancel?.();
-  };
-  trackWalletPaymentSheetOpen(config.skuId);
-  session.begin();
+  try {
+    const session = new ApplePaySession(3, paymentRequest);
+    session.onvalidatemerchant = async (event) => {
+      await handleMerchantValidation(event, session, config);
+    };
+    session.onpaymentauthorized = (event) => {
+      trackWalletPaymentAuthorised(config.skuId);
+      config.onPaymentAuthorized(event, session);
+    };
+    session.oncancel = () => {
+      config.onCancel?.();
+    };
+    trackWalletPaymentSheetOpen(config.skuId);
+    session.begin();
+  } catch {
+    redirectToFallbackCheckout(config);
+  }
 }
 
 // src/clients/payment-checkout/contact-validation.ts
@@ -1393,11 +1392,15 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    * Creates and configures an ApplePayButton if the feature flag is present.
    */
   static createIfEnabled(offer, country, entryPoint) {
-    if (!offer) return null;
-    if (APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant))
+    if (!offer) {
       return null;
-    if (!new URLSearchParams(window.location.search).has(FEATURE_APPLE_PAY_EXPRESS_CHECKOUT))
+    }
+    if (APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant)) {
+      return null;
+    }
+    if (!new URLSearchParams(window.location.search).has(FEATURE_APPLE_PAY_EXPRESS_CHECKOUT)) {
       return null;
+    }
     _ApplePayButton.define();
     const button = document.createElement(_ApplePayButton.tag);
     button.offer = offer;
@@ -1424,6 +1427,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   #returnUrl = "";
   #supportedBillingCountries = [];
   #entryPoint = "";
+  #recaptchaTokens = null;
   // ─── Public API ─────────────────────────────────────────────────────────────
   get offer() {
     return this.#offer;
@@ -1559,7 +1563,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    */
   async #fetchAndCacheOptions() {
     this.#paymentOptions = await this.#fetchPaymentOptions();
-    if (!this.#paymentOptions?.apple_pay) {
+    if (!this.#paymentOptions?.options?.apple_pay) {
       this.style.display = "none";
       this.querySelector(SEL_CONTAINER)?.remove();
       return true;
@@ -1582,10 +1586,10 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       if (button.classList.contains("wap-loading")) return;
       this.#openModal();
     });
-    this.addEventListener("apple-pay-confirmed", (event) => {
+    document.addEventListener("apple-pay-confirmed", (event) => {
       const { skuId, country } = event.detail;
       this.#initiateApplePay(skuId, country);
-    });
+    }, { once: true });
   }
   #finishLoading() {
     const button = this.querySelector(SEL_BUTTON);
@@ -1612,8 +1616,17 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     button.setAttribute("aria-disabled", "true");
   }
   #openModal() {
-    if (!this.#offer || document.querySelector(ApplePayModal.tag)) return;
+    if (!this.#offer) {
+      return;
+    }
+    if (document.querySelector(ApplePayModal.tag)) {
+      return;
+    }
     trackExpressWalletClick(this.#offer.sku_id);
+    getPurchaseRecaptchaTokens().then((tokens) => {
+      this.#recaptchaTokens = tokens;
+    }).catch(() => {
+    });
     ApplePayModal.define();
     const modal = document.createElement(ApplePayModal.tag);
     modal.offer = this.#offer;
@@ -1648,7 +1661,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     return {
       countryCode: country,
       currencyCode: offer.price?.currency_code ?? DEFAULT_CURRENCY,
-      supportedNetworks: paymentOptions.apple_pay.settings.supported_networks,
+      supportedNetworks: paymentOptions.options.apple_pay.settings.supported_networks,
       totalAmount,
       totalLabel: TOTAL_LABEL,
       skuId,
@@ -1668,7 +1681,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     try {
       const sessionData = this.#sessionData ?? _ApplePayButton.#ANONYMOUS_SESSION;
       const paymentOptions = this.#paymentOptions;
-      const recaptchaTokens = await getPurchaseRecaptchaTokens();
+      const recaptchaTokens = this.#recaptchaTokens ?? await getPurchaseRecaptchaTokens();
       startApplePaySession(
         this.#buildSessionParams(
           skuId,

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

@@ -317,7 +317,6 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
     const offer = this.#offer;
     const country = this.#country;
     if (!offer) {
-      console.error("ApplePayModal: Missing or invalid offer data");
       this.remove();
       return;
     }

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

@@ -317,7 +317,6 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
     const offer = this.#offer;
     const country = this.#country;
     if (!offer) {
-      console.error("ApplePayModal: Missing or invalid offer data");
       this.remove();
       return;
     }
@@ -822,6 +821,38 @@ var MSG_EMAIL_COLLISION = "This email address is already linked to an account. P
 var MSG_CONTACT_VALIDATION_INTERNAL = "Could not validate Apple Pay contact";
 
 // src/clients/payment-checkout/apple-session.ts
+function redirectToFallbackCheckout(config) {
+  trackFallbackCheckout(config.skuId);
+  window.location.href = redirectToCheckoutFallback({
+    skuId: config.skuId,
+    returnUrl: config.returnUrl,
+    inlineError: MSG_PAYMENT_GENERIC_ERROR
+  });
+}
+async function handleMerchantValidation(event, session, config) {
+  try {
+    const validationHost = new URL(event.validationURL).host;
+    if (!validationHost.endsWith("apple.com")) {
+      session.abort();
+      redirectToFallbackCheckout(config);
+      return;
+    }
+    const recaptchaToken = await getRecaptchaToken("verifyMerchant");
+    const response = await validateAppleMerchant({
+      validationURL: event.validationURL,
+      recaptchaToken
+    });
+    if (!response?.merchantSession) {
+      session.abort();
+      redirectToFallbackCheckout(config);
+      return;
+    }
+    session.completeMerchantValidation(response.merchantSession);
+  } catch {
+    session.abort();
+    redirectToFallbackCheckout(config);
+  }
+}
 function startApplePaySession(config) {
   const paymentRequest = {
     countryCode: config.countryCode,
@@ -836,55 +867,23 @@ function startApplePaySession(config) {
     // Only request email from Apple Pay sheet if user is NOT logged in
     ...!config.userLoggedIn && { requiredShippingContactFields: ["email"] }
   };
-  const session = new ApplePaySession(3, paymentRequest);
-  session.onvalidatemerchant = async (event) => {
-    try {
-      const validationHost = new URL(event.validationURL).host;
-      if (!validationHost.endsWith("apple.com")) {
-        trackFallbackCheckout(config.skuId);
-        session.abort();
-        window.location.href = redirectToCheckoutFallback({
-          skuId: config.skuId,
-          returnUrl: config.returnUrl,
-          inlineError: MSG_PAYMENT_GENERIC_ERROR
-        });
-        return;
-      }
-      const recaptchaToken = await getRecaptchaToken("verifyMerchant");
-      const response = await validateAppleMerchant({
-        validationURL: event.validationURL,
-        recaptchaToken
-      });
-      if (!response?.merchantSession) {
-        trackFallbackCheckout(config.skuId);
-        session.abort();
-        window.location.href = redirectToCheckoutFallback({
-          skuId: config.skuId,
-          returnUrl: config.returnUrl,
-          inlineError: MSG_PAYMENT_GENERIC_ERROR
-        });
-        return;
-      }
-      session.completeMerchantValidation(response.merchantSession);
-    } catch {
-      trackFallbackCheckout(config.skuId);
-      session.abort();
-      window.location.href = redirectToCheckoutFallback({
-        skuId: config.skuId,
-        returnUrl: config.returnUrl,
-        inlineError: MSG_PAYMENT_GENERIC_ERROR
-      });
-    }
-  };
-  session.onpaymentauthorized = (event) => {
-    trackWalletPaymentAuthorised(config.skuId);
-    config.onPaymentAuthorized(event, session);
-  };
-  session.oncancel = () => {
-    config.onCancel?.();
-  };
-  trackWalletPaymentSheetOpen(config.skuId);
-  session.begin();
+  try {
+    const session = new ApplePaySession(3, paymentRequest);
+    session.onvalidatemerchant = async (event) => {
+      await handleMerchantValidation(event, session, config);
+    };
+    session.onpaymentauthorized = (event) => {
+      trackWalletPaymentAuthorised(config.skuId);
+      config.onPaymentAuthorized(event, session);
+    };
+    session.oncancel = () => {
+      config.onCancel?.();
+    };
+    trackWalletPaymentSheetOpen(config.skuId);
+    session.begin();
+  } catch {
+    redirectToFallbackCheckout(config);
+  }
 }
 
 // src/clients/payment-checkout/contact-validation.ts
@@ -1385,11 +1384,15 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    * Creates and configures an ApplePayButton if the feature flag is present.
    */
   static createIfEnabled(offer, country, entryPoint) {
-    if (!offer) return null;
-    if (APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant))
+    if (!offer) {
       return null;
-    if (!new URLSearchParams(window.location.search).has(FEATURE_APPLE_PAY_EXPRESS_CHECKOUT))
+    }
+    if (APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant)) {
+      return null;
+    }
+    if (!new URLSearchParams(window.location.search).has(FEATURE_APPLE_PAY_EXPRESS_CHECKOUT)) {
       return null;
+    }
     _ApplePayButton.define();
     const button = document.createElement(_ApplePayButton.tag);
     button.offer = offer;
@@ -1416,6 +1419,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   #returnUrl = "";
   #supportedBillingCountries = [];
   #entryPoint = "";
+  #recaptchaTokens = null;
   // ─── Public API ─────────────────────────────────────────────────────────────
   get offer() {
     return this.#offer;
@@ -1551,7 +1555,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    */
   async #fetchAndCacheOptions() {
     this.#paymentOptions = await this.#fetchPaymentOptions();
-    if (!this.#paymentOptions?.apple_pay) {
+    if (!this.#paymentOptions?.options?.apple_pay) {
       this.style.display = "none";
       this.querySelector(SEL_CONTAINER)?.remove();
       return true;
@@ -1574,10 +1578,10 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       if (button.classList.contains("wap-loading")) return;
       this.#openModal();
     });
-    this.addEventListener("apple-pay-confirmed", (event) => {
+    document.addEventListener("apple-pay-confirmed", (event) => {
       const { skuId, country } = event.detail;
       this.#initiateApplePay(skuId, country);
-    });
+    }, { once: true });
   }
   #finishLoading() {
     const button = this.querySelector(SEL_BUTTON);
@@ -1604,8 +1608,17 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     button.setAttribute("aria-disabled", "true");
   }
   #openModal() {
-    if (!this.#offer || document.querySelector(ApplePayModal.tag)) return;
+    if (!this.#offer) {
+      return;
+    }
+    if (document.querySelector(ApplePayModal.tag)) {
+      return;
+    }
     trackExpressWalletClick(this.#offer.sku_id);
+    getPurchaseRecaptchaTokens().then((tokens) => {
+      this.#recaptchaTokens = tokens;
+    }).catch(() => {
+    });
     ApplePayModal.define();
     const modal = document.createElement(ApplePayModal.tag);
     modal.offer = this.#offer;
@@ -1640,7 +1653,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     return {
       countryCode: country,
       currencyCode: offer.price?.currency_code ?? DEFAULT_CURRENCY,
-      supportedNetworks: paymentOptions.apple_pay.settings.supported_networks,
+      supportedNetworks: paymentOptions.options.apple_pay.settings.supported_networks,
       totalAmount,
       totalLabel: TOTAL_LABEL,
       skuId,
@@ -1660,7 +1673,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     try {
       const sessionData = this.#sessionData ?? _ApplePayButton.#ANONYMOUS_SESSION;
       const paymentOptions = this.#paymentOptions;
-      const recaptchaTokens = await getPurchaseRecaptchaTokens();
+      const recaptchaTokens = this.#recaptchaTokens ?? await getPurchaseRecaptchaTokens();
       startApplePaySession(
         this.#buildSessionParams(
           skuId,

package/dist/src/clients/payment-checkout/apple-session.js

@@ -158,6 +158,38 @@ var trackFallbackCheckout = (skuId) => {
 var MSG_PAYMENT_GENERIC_ERROR = "Something went wrong. Please check your payment and billing details and try again or contact us.";
 
 // src/clients/payment-checkout/apple-session.ts
+function redirectToFallbackCheckout(config) {
+  trackFallbackCheckout(config.skuId);
+  window.location.href = redirectToCheckoutFallback({
+    skuId: config.skuId,
+    returnUrl: config.returnUrl,
+    inlineError: MSG_PAYMENT_GENERIC_ERROR
+  });
+}
+async function handleMerchantValidation(event, session, config) {
+  try {
+    const validationHost = new URL(event.validationURL).host;
+    if (!validationHost.endsWith("apple.com")) {
+      session.abort();
+      redirectToFallbackCheckout(config);
+      return;
+    }
+    const recaptchaToken = await getRecaptchaToken("verifyMerchant");
+    const response = await validateAppleMerchant({
+      validationURL: event.validationURL,
+      recaptchaToken
+    });
+    if (!response?.merchantSession) {
+      session.abort();
+      redirectToFallbackCheckout(config);
+      return;
+    }
+    session.completeMerchantValidation(response.merchantSession);
+  } catch {
+    session.abort();
+    redirectToFallbackCheckout(config);
+  }
+}
 function startApplePaySession(config) {
   const paymentRequest = {
     countryCode: config.countryCode,
@@ -172,55 +204,23 @@ function startApplePaySession(config) {
     // Only request email from Apple Pay sheet if user is NOT logged in
     ...!config.userLoggedIn && { requiredShippingContactFields: ["email"] }
   };
-  const session = new ApplePaySession(3, paymentRequest);
-  session.onvalidatemerchant = async (event) => {
-    try {
-      const validationHost = new URL(event.validationURL).host;
-      if (!validationHost.endsWith("apple.com")) {
-        trackFallbackCheckout(config.skuId);
-        session.abort();
-        window.location.href = redirectToCheckoutFallback({
-          skuId: config.skuId,
-          returnUrl: config.returnUrl,
-          inlineError: MSG_PAYMENT_GENERIC_ERROR
-        });
-        return;
-      }
-      const recaptchaToken = await getRecaptchaToken("verifyMerchant");
-      const response = await validateAppleMerchant({
-        validationURL: event.validationURL,
-        recaptchaToken
-      });
-      if (!response?.merchantSession) {
-        trackFallbackCheckout(config.skuId);
-        session.abort();
-        window.location.href = redirectToCheckoutFallback({
-          skuId: config.skuId,
-          returnUrl: config.returnUrl,
-          inlineError: MSG_PAYMENT_GENERIC_ERROR
-        });
-        return;
-      }
-      session.completeMerchantValidation(response.merchantSession);
-    } catch {
-      trackFallbackCheckout(config.skuId);
-      session.abort();
-      window.location.href = redirectToCheckoutFallback({
-        skuId: config.skuId,
-        returnUrl: config.returnUrl,
-        inlineError: MSG_PAYMENT_GENERIC_ERROR
-      });
-    }
-  };
-  session.onpaymentauthorized = (event) => {
-    trackWalletPaymentAuthorised(config.skuId);
-    config.onPaymentAuthorized(event, session);
-  };
-  session.oncancel = () => {
-    config.onCancel?.();
-  };
-  trackWalletPaymentSheetOpen(config.skuId);
-  session.begin();
+  try {
+    const session = new ApplePaySession(3, paymentRequest);
+    session.onvalidatemerchant = async (event) => {
+      await handleMerchantValidation(event, session, config);
+    };
+    session.onpaymentauthorized = (event) => {
+      trackWalletPaymentAuthorised(config.skuId);
+      config.onPaymentAuthorized(event, session);
+    };
+    session.oncancel = () => {
+      config.onCancel?.();
+    };
+    trackWalletPaymentSheetOpen(config.skuId);
+    session.begin();
+  } catch {
+    redirectToFallbackCheckout(config);
+  }
 }
 export {
   startApplePaySession

package/dist/src/clients/payment-checkout/types.d.ts

@@ -14,10 +14,12 @@ export type PaymentOptionsRequest = {
  * Only the apple_pay field is consumed by this package.
  */
 export type PaymentOptionsResponse = {
-    apple_pay?: {
-        provider: string;
-        settings: {
-            supported_networks: string[];
+    options: {
+        apple_pay?: {
+            provider: string;
+            settings: {
+                supported_networks: string[];
+            };
         };
     };
 };

package/dist/src/index.js

@@ -317,7 +317,6 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
     const offer = this.#offer;
     const country = this.#country;
     if (!offer) {
-      console.error("ApplePayModal: Missing or invalid offer data");
       this.remove();
       return;
     }
@@ -827,6 +826,38 @@ var MSG_EMAIL_COLLISION = "This email address is already linked to an account. P
 var MSG_CONTACT_VALIDATION_INTERNAL = "Could not validate Apple Pay contact";
 
 // src/clients/payment-checkout/apple-session.ts
+function redirectToFallbackCheckout(config) {
+  trackFallbackCheckout(config.skuId);
+  window.location.href = redirectToCheckoutFallback({
+    skuId: config.skuId,
+    returnUrl: config.returnUrl,
+    inlineError: MSG_PAYMENT_GENERIC_ERROR
+  });
+}
+async function handleMerchantValidation(event, session, config) {
+  try {
+    const validationHost = new URL(event.validationURL).host;
+    if (!validationHost.endsWith("apple.com")) {
+      session.abort();
+      redirectToFallbackCheckout(config);
+      return;
+    }
+    const recaptchaToken = await getRecaptchaToken("verifyMerchant");
+    const response = await validateAppleMerchant({
+      validationURL: event.validationURL,
+      recaptchaToken
+    });
+    if (!response?.merchantSession) {
+      session.abort();
+      redirectToFallbackCheckout(config);
+      return;
+    }
+    session.completeMerchantValidation(response.merchantSession);
+  } catch {
+    session.abort();
+    redirectToFallbackCheckout(config);
+  }
+}
 function startApplePaySession(config) {
   const paymentRequest = {
     countryCode: config.countryCode,
@@ -841,55 +872,23 @@ function startApplePaySession(config) {
     // Only request email from Apple Pay sheet if user is NOT logged in
     ...!config.userLoggedIn && { requiredShippingContactFields: ["email"] }
   };
-  const session = new ApplePaySession(3, paymentRequest);
-  session.onvalidatemerchant = async (event) => {
-    try {
-      const validationHost = new URL(event.validationURL).host;
-      if (!validationHost.endsWith("apple.com")) {
-        trackFallbackCheckout(config.skuId);
-        session.abort();
-        window.location.href = redirectToCheckoutFallback({
-          skuId: config.skuId,
-          returnUrl: config.returnUrl,
-          inlineError: MSG_PAYMENT_GENERIC_ERROR
-        });
-        return;
-      }
-      const recaptchaToken = await getRecaptchaToken("verifyMerchant");
-      const response = await validateAppleMerchant({
-        validationURL: event.validationURL,
-        recaptchaToken
-      });
-      if (!response?.merchantSession) {
-        trackFallbackCheckout(config.skuId);
-        session.abort();
-        window.location.href = redirectToCheckoutFallback({
-          skuId: config.skuId,
-          returnUrl: config.returnUrl,
-          inlineError: MSG_PAYMENT_GENERIC_ERROR
-        });
-        return;
-      }
-      session.completeMerchantValidation(response.merchantSession);
-    } catch {
-      trackFallbackCheckout(config.skuId);
-      session.abort();
-      window.location.href = redirectToCheckoutFallback({
-        skuId: config.skuId,
-        returnUrl: config.returnUrl,
-        inlineError: MSG_PAYMENT_GENERIC_ERROR
-      });
-    }
-  };
-  session.onpaymentauthorized = (event) => {
-    trackWalletPaymentAuthorised(config.skuId);
-    config.onPaymentAuthorized(event, session);
-  };
-  session.oncancel = () => {
-    config.onCancel?.();
-  };
-  trackWalletPaymentSheetOpen(config.skuId);
-  session.begin();
+  try {
+    const session = new ApplePaySession(3, paymentRequest);
+    session.onvalidatemerchant = async (event) => {
+      await handleMerchantValidation(event, session, config);
+    };
+    session.onpaymentauthorized = (event) => {
+      trackWalletPaymentAuthorised(config.skuId);
+      config.onPaymentAuthorized(event, session);
+    };
+    session.oncancel = () => {
+      config.onCancel?.();
+    };
+    trackWalletPaymentSheetOpen(config.skuId);
+    session.begin();
+  } catch {
+    redirectToFallbackCheckout(config);
+  }
 }
 
 // src/clients/payment-checkout/contact-validation.ts
@@ -1390,11 +1389,15 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    * Creates and configures an ApplePayButton if the feature flag is present.
    */
   static createIfEnabled(offer, country, entryPoint) {
-    if (!offer) return null;
-    if (APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant))
+    if (!offer) {
       return null;
-    if (!new URLSearchParams(window.location.search).has(FEATURE_APPLE_PAY_EXPRESS_CHECKOUT))
+    }
+    if (APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant)) {
+      return null;
+    }
+    if (!new URLSearchParams(window.location.search).has(FEATURE_APPLE_PAY_EXPRESS_CHECKOUT)) {
       return null;
+    }
     _ApplePayButton.define();
     const button = document.createElement(_ApplePayButton.tag);
     button.offer = offer;
@@ -1421,6 +1424,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   #returnUrl = "";
   #supportedBillingCountries = [];
   #entryPoint = "";
+  #recaptchaTokens = null;
   // ─── Public API ─────────────────────────────────────────────────────────────
   get offer() {
     return this.#offer;
@@ -1556,7 +1560,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    */
   async #fetchAndCacheOptions() {
     this.#paymentOptions = await this.#fetchPaymentOptions();
-    if (!this.#paymentOptions?.apple_pay) {
+    if (!this.#paymentOptions?.options?.apple_pay) {
       this.style.display = "none";
       this.querySelector(SEL_CONTAINER)?.remove();
       return true;
@@ -1579,10 +1583,10 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       if (button.classList.contains("wap-loading")) return;
       this.#openModal();
     });
-    this.addEventListener("apple-pay-confirmed", (event) => {
+    document.addEventListener("apple-pay-confirmed", (event) => {
       const { skuId, country } = event.detail;
       this.#initiateApplePay(skuId, country);
-    });
+    }, { once: true });
   }
   #finishLoading() {
     const button = this.querySelector(SEL_BUTTON);
@@ -1609,8 +1613,17 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     button.setAttribute("aria-disabled", "true");
   }
   #openModal() {
-    if (!this.#offer || document.querySelector(ApplePayModal.tag)) return;
+    if (!this.#offer) {
+      return;
+    }
+    if (document.querySelector(ApplePayModal.tag)) {
+      return;
+    }
     trackExpressWalletClick(this.#offer.sku_id);
+    getPurchaseRecaptchaTokens().then((tokens) => {
+      this.#recaptchaTokens = tokens;
+    }).catch(() => {
+    });
     ApplePayModal.define();
     const modal = document.createElement(ApplePayModal.tag);
     modal.offer = this.#offer;
@@ -1645,7 +1658,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     return {
       countryCode: country,
       currencyCode: offer.price?.currency_code ?? DEFAULT_CURRENCY,
-      supportedNetworks: paymentOptions.apple_pay.settings.supported_networks,
+      supportedNetworks: paymentOptions.options.apple_pay.settings.supported_networks,
       totalAmount,
       totalLabel: TOTAL_LABEL,
       skuId,
@@ -1665,7 +1678,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     try {
       const sessionData = this.#sessionData ?? _ApplePayButton.#ANONYMOUS_SESSION;
       const paymentOptions = this.#paymentOptions;
-      const recaptchaTokens = await getPurchaseRecaptchaTokens();
+      const recaptchaTokens = this.#recaptchaTokens ?? await getPurchaseRecaptchaTokens();
       startApplePaySession(
         this.#buildSessionParams(
           skuId,

package/package.json

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