@economist/web-apple-pay 0.1.3-beta.47 → 0.1.3-beta.48

package/dist/index.js

@@ -605,7 +605,7 @@ var getRecaptchaToken = async (action) => {
     });
   });
 };
-var getPurchaseRecaptchaTokens = () => {
+var getPurchaseRecaptchaToken = () => {
   return getRecaptchaToken("walletPurchase");
 };
 
@@ -834,7 +834,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
   #isClosed = false;
   /**
    * Callback invoked synchronously from the CTA click handler.
-   * Receives a Promise of reCAPTCHA tokens — the promise is already in-flight
+   * Receives a Promise of a reCAPTCHA token — the promise is already in-flight
    * by the time this is called. The caller (ApplePayButton) must call
    * new ApplePaySession() synchronously inside this callback to stay within
    * Safari's user-gesture window. The token promise resolves before
@@ -946,12 +946,12 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
       this.querySelector('[role="alert"]:not(#apple-pay-modal-error)')?.remove();
       cta.disabled = true;
       cta.setAttribute("aria-busy", "true");
-      const recaptchaTokensPromise = getPurchaseRecaptchaTokens();
+      const recaptchaTokenPromise = getPurchaseRecaptchaToken();
       if (!this.#isClosed && this.onConfirm) {
-        this.onConfirm(recaptchaTokensPromise);
+        this.onConfirm(recaptchaTokenPromise);
         this.close();
       }
-      recaptchaTokensPromise.catch(() => {
+      recaptchaTokenPromise.catch(() => {
         if (this.#isClosed) return;
         cta.disabled = false;
         cta.removeAttribute("aria-busy");
@@ -1006,7 +1006,10 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
 
 // src/templates/apple-pay-button.template.html
 var apple_pay_button_template_default = `<style>
-  /* Use CSS variables for layout so parent walls can easily override placement and sizing */
+  /*
+   * Entry CTA: \u201CSubscribe with\u201D + Apple Pay wordmark (Figma 1118:14088).
+   * \u201CSubscribe with\u201D matches Continue to checkout typography (EconomistSans Regular / 17 / 24 / 400).
+   */
   teg-apple-pay-button {
     display: block;
     margin: var(--apple-pay-margin, 0);
@@ -1026,25 +1029,50 @@ var apple_pay_button_template_default = `<style>
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 0.375rem;
     width: 100%;
     min-width: 0;
     height: 100%;
-    min-height: var(--apple-pay-height, 2.75rem);
-    background-color: var(--apple-pay-background-color, #000);
+    min-height: var(--apple-pay-height, 2.5rem);
+    padding: 0;
+    box-sizing: border-box;
+    background-color: var(--apple-pay-background-color, #1a1a1a);
     color: var(--apple-pay-foreground-color, #fff);
     border: none;
-    border-radius: var(--apple-pay-border-radius, 1.375rem);
+    border-radius: var(--apple-pay-border-radius, 0.25rem);
     cursor: pointer;
-    font-family: var(--mb-typeface-sans, var(--wall-type-system-sans));
-    font-size: 1.0625rem;
-    font-weight: 500;
+    /* Same as wall Continue to checkout / Marber button large */
+    font-family: var(
+      --mb-typeface-sans,
+      var(--wall-type-system-sans, 'EconomistSans', system-ui, sans-serif)
+    );
+    font-size: var(--mb-button-font-size, 1.0625rem);
+    font-weight: var(--mb-font-weight-regular, 400);
+    line-height: 1;
+  }
+
+  teg-apple-pay-button .apple-pay-btn__label {
+    display: inline-flex;
+    align-items: center;
+    /* No flex gap \u2014 spacing after \u201Cwith\u201D uses the same word-space as \u201CSubscribe with\u201D */
+    gap: 0;
+    white-space: nowrap;
   }
 
-  teg-apple-pay-button .apple-pay-btn svg {
+  teg-apple-pay-button .apple-pay-btn__caption {
+    /* One typographic word space after \u201Cwith\u201D, matching Subscribe\u2194with */
+    padding-right: 0.25em;
+  }
+
+  teg-apple-pay-button .apple-pay-btn__logo {
     flex-shrink: 0;
     display: block;
+    /* Match caption font-size so mark aligns with text metrics */
+    height: 1.05em;
+    width: auto;
+    aspect-ratio: 51 / 22;
     color: currentColor;
+    /* Optical nudge \u2014 SVG viewBox sits slightly high vs EconomistSans caps */
+    transform: translateY(0.06em);
   }
 
   teg-apple-pay-button .apple-pay-btn.wap-loading {
@@ -1052,6 +1080,10 @@ var apple_pay_button_template_default = `<style>
     cursor: default;
   }
 
+  teg-apple-pay-button .apple-pay-btn.wap-loading .apple-pay-btn__label {
+    visibility: hidden;
+  }
+
   teg-apple-pay-button .apple-pay-btn.wap-loading::before {
     content: '';
     position: absolute;
@@ -1065,11 +1097,6 @@ var apple_pay_button_template_default = `<style>
     animation: wap-button-spinner 0.8s linear infinite;
   }
 
-  teg-apple-pay-button .apple-pay-btn__logo {
-    display: inline-flex;
-    align-items: center;
-  }
-
   teg-apple-pay-button .apple-pay-btn__loading {
     display: none;
   }
@@ -1084,18 +1111,26 @@ var apple_pay_button_template_default = `<style>
   }
 </style>
 
-<div class="apple-pay-container" aria-label="Express checkout with Apple Pay">
+<div class="apple-pay-container" aria-label="Subscribe with Apple Pay">
   <button
     class="apple-pay-btn"
     type="button"
-    aria-label="Pay with Apple Pay"
+    aria-label="Subscribe with Apple Pay"
     data-analytics="paywall:apple-pay-checkout"
   >
-    <span class="apple-pay-btn__logo">
-      <svg width="51" height="22" aria-label="Apple Pay" role="img">
+    <span class="apple-pay-btn__label"
+      ><span class="apple-pay-btn__caption">Subscribe with</span
+      ><svg
+        class="apple-pay-btn__logo"
+        width="42"
+        height="18"
+        viewBox="0 0 51 22"
+        aria-hidden="true"
+        role="img"
+      >
         <use href="#apple-pay-logo" />
-      </svg>
-    </span>
+      </svg
+    ></span>
     <span class="apple-pay-btn__loading" aria-hidden="true">Loading...</span>
   </button>
 </div>
@@ -1902,6 +1937,19 @@ var getSupportedBillingCountries = (offerCountry, offerVariant) => {
   return [...zoneCountries];
 };
 
+// src/constants.ts
+var ApplePayEntryPoint = /* @__PURE__ */ ((ApplePayEntryPoint3) => {
+  ApplePayEntryPoint3["PAYWALL"] = "article_paywall";
+  ApplePayEntryPoint3["REGWALL"] = "article_regwall";
+  ApplePayEntryPoint3["DUAL_OFFER_BANNER"] = "dual_offer_banner";
+  return ApplePayEntryPoint3;
+})(ApplePayEntryPoint || {});
+var APPLE_PAY_EXPRESS_BANNERS_EXPERIMENT_KEY = "subscribe-experiment-calibration";
+var APPLE_PAY_EXPRESS_BANNERS_VARIANTS = {
+  CONTROL: "control",
+  TREATMENT: "treatment"
+};
+
 // src/apple-pay-button.ts
 var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
 var TOTAL_LABEL = "The Economist";
@@ -1919,7 +1967,23 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     define(_ApplePayButton.tag, _ApplePayButton);
   }
   /**
-   * Creates and configures an ApplePayButton if the feature flag is present.
+   * Creates and configures an ApplePayButton when the Amplitude experiment is enabled.
+   *
+   * Reads the experiment variant from `window.experimentIntegration.getVariant` using
+   * {@link APPLE_PAY_EXPRESS_BANNERS_EXPERIMENT_KEY}. The host page is responsible
+   * for setting up `window.experimentIntegration` before calling this method.
+   *
+   * - `treatment` → button created and returned
+   * - `control` / missing / anything else → returns null (button suppressed)
+   *
+   * **Transition period:** the legacy `FEATURE_APPLE_PAY_EXPRESS_CHECKOUT` URL param
+   * gate is also evaluated as a fallback until all host apps have integrated
+   * `window.experimentIntegration`. Once all consumers are migrated, the URL param
+   * fallback will be removed.
+   *
+   * @param offer - The offer to display in the Apple Pay flow.
+   * @param country - The user's country code.
+   * @param entryPoint - Where the button is being rendered (e.g. paywall, banner).
    */
   static createIfEnabled(offer, country, entryPoint) {
     if (!offer) {
@@ -1928,7 +1992,18 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant)) {
       return null;
     }
-    if (!new URLSearchParams(window.location.search).has(FEATURE_APPLE_PAY_EXPRESS_CHECKOUT)) {
+    const experimentValue = window.experimentIntegration?.getVariant?.(
+      APPLE_PAY_EXPRESS_BANNERS_EXPERIMENT_KEY
+    );
+    const isTreatment = experimentValue === APPLE_PAY_EXPRESS_BANNERS_VARIANTS.TREATMENT;
+    const hasUrlParamFlag = new URLSearchParams(window.location.search).has(
+      FEATURE_APPLE_PAY_EXPRESS_CHECKOUT
+    );
+    console.log(`Apple Pay button experiment: variant="${experimentValue}`);
+    if (!isTreatment && !hasUrlParamFlag) {
+      console.log(
+        `Apple Pay button suppressed: experiment variant is "${experimentValue}" and URL param "${FEATURE_APPLE_PAY_EXPRESS_CHECKOUT}" is not present.`
+      );
       return null;
     }
     _ApplePayButton.define();
@@ -2161,8 +2236,8 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     }
     const skuId = this.#offer.sku_id;
     const country = this.#country;
-    modal.onConfirm = (recaptchaTokensPromise) => {
-      this.#initiateApplePay(skuId, country, recaptchaTokensPromise);
+    modal.onConfirm = (recaptchaTokenPromise) => {
+      this.#initiateApplePay(skuId, country, recaptchaTokenPromise);
     };
     modal.open();
   }
@@ -2185,7 +2260,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       return null;
     }
   }
-  #buildSessionParams(skuId, country, sessionData, paymentOptions, recaptchaTokensPromise) {
+  #buildSessionParams(skuId, country, sessionData, paymentOptions, recaptchaTokenPromise) {
     const offer = this.#offer;
     const totalAmount = offer.price?.purchase ? `${offer.price.purchase}` : DEFAULT_TOTAL;
     return {
@@ -2198,7 +2273,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       returnUrl: this.#returnUrl,
       userLoggedIn: sessionData.loggedIn,
       onPaymentAuthorized: async (event, session) => {
-        const recaptchaToken = await recaptchaTokensPromise;
+        const recaptchaToken = await recaptchaTokenPromise;
         return handlePaymentAuthorized(event, session, sessionData, {
           skuId,
           country,
@@ -2210,7 +2285,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       }
     };
   }
-  #initiateApplePay(skuId, country, recaptchaTokensPromise) {
+  #initiateApplePay(skuId, country, recaptchaTokenPromise) {
     try {
       const sessionData = this.#sessionData ?? _ApplePayButton.#ANONYMOUS_SESSION;
       const paymentOptions = this.#paymentOptions;
@@ -2223,7 +2298,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
           country,
           sessionData,
           paymentOptions,
-          recaptchaTokensPromise
+          recaptchaTokenPromise
         )
       );
     } catch {
@@ -2236,14 +2311,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
 };
 
-// src/constants.ts
-var ApplePayEntryPoint = /* @__PURE__ */ ((ApplePayEntryPoint2) => {
-  ApplePayEntryPoint2["PAYWALL"] = "article_paywall";
-  ApplePayEntryPoint2["REGWALL"] = "article_regwall";
-  ApplePayEntryPoint2["DUAL_OFFER_BANNER"] = "dual_offer_banner";
-  return ApplePayEntryPoint2;
-})(ApplePayEntryPoint || {});
-
 // src/index.ts
 function defineApplePayElements() {
   ApplePayButton.define();

package/dist/src/apple-pay-button.d.ts

@@ -1,12 +1,40 @@
 import type { Offer, ProductVariant } from './types/offer.types';
 import { ApplePayEntryPoint } from './constants';
+/**
+ * The host page is responsible for setting up `window.experimentIntegration`
+ * with a `getVariant` method that returns the variant value for a given flag key.
+ * web-apple-pay reads the experiment variant from here to decide whether to show or hide the button.
+ */
+declare global {
+    interface Window {
+        experimentIntegration?: {
+            getVariant: (flagKey: string) => string | undefined;
+        };
+    }
+}
 export declare const APPLE_PAY_EXCLUDED_VARIANTS: readonly ProductVariant[];
 export declare class ApplePayButton extends HTMLElement {
     #private;
     static readonly tag = "teg-apple-pay-button";
     static define(): void;
     /**
-     * Creates and configures an ApplePayButton if the feature flag is present.
+     * Creates and configures an ApplePayButton when the Amplitude experiment is enabled.
+     *
+     * Reads the experiment variant from `window.experimentIntegration.getVariant` using
+     * {@link APPLE_PAY_EXPRESS_BANNERS_EXPERIMENT_KEY}. The host page is responsible
+     * for setting up `window.experimentIntegration` before calling this method.
+     *
+     * - `treatment` → button created and returned
+     * - `control` / missing / anything else → returns null (button suppressed)
+     *
+     * **Transition period:** the legacy `FEATURE_APPLE_PAY_EXPRESS_CHECKOUT` URL param
+     * gate is also evaluated as a fallback until all host apps have integrated
+     * `window.experimentIntegration`. Once all consumers are migrated, the URL param
+     * fallback will be removed.
+     *
+     * @param offer - The offer to display in the Apple Pay flow.
+     * @param country - The user's country code.
+     * @param entryPoint - Where the button is being rendered (e.g. paywall, banner).
      */
     static createIfEnabled(offer: Offer | undefined, country: string, entryPoint?: ApplePayEntryPoint): ApplePayButton | null;
     get offer(): Offer | null;

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

@@ -600,7 +600,7 @@ var getRecaptchaToken = async (action) => {
     });
   });
 };
-var getPurchaseRecaptchaTokens = () => {
+var getPurchaseRecaptchaToken = () => {
   return getRecaptchaToken("walletPurchase");
 };
 
@@ -829,7 +829,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
   #isClosed = false;
   /**
    * Callback invoked synchronously from the CTA click handler.
-   * Receives a Promise of reCAPTCHA tokens — the promise is already in-flight
+   * Receives a Promise of a reCAPTCHA token — the promise is already in-flight
    * by the time this is called. The caller (ApplePayButton) must call
    * new ApplePaySession() synchronously inside this callback to stay within
    * Safari's user-gesture window. The token promise resolves before
@@ -941,12 +941,12 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
       this.querySelector('[role="alert"]:not(#apple-pay-modal-error)')?.remove();
       cta.disabled = true;
       cta.setAttribute("aria-busy", "true");
-      const recaptchaTokensPromise = getPurchaseRecaptchaTokens();
+      const recaptchaTokenPromise = getPurchaseRecaptchaToken();
       if (!this.#isClosed && this.onConfirm) {
-        this.onConfirm(recaptchaTokensPromise);
+        this.onConfirm(recaptchaTokenPromise);
         this.close();
       }
-      recaptchaTokensPromise.catch(() => {
+      recaptchaTokenPromise.catch(() => {
         if (this.#isClosed) return;
         cta.disabled = false;
         cta.removeAttribute("aria-busy");
@@ -1001,7 +1001,10 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
 
 // src/templates/apple-pay-button.template.html
 var apple_pay_button_template_default = `<style>
-  /* Use CSS variables for layout so parent walls can easily override placement and sizing */
+  /*
+   * Entry CTA: \u201CSubscribe with\u201D + Apple Pay wordmark (Figma 1118:14088).
+   * \u201CSubscribe with\u201D matches Continue to checkout typography (EconomistSans Regular / 17 / 24 / 400).
+   */
   teg-apple-pay-button {
     display: block;
     margin: var(--apple-pay-margin, 0);
@@ -1021,25 +1024,50 @@ var apple_pay_button_template_default = `<style>
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 0.375rem;
     width: 100%;
     min-width: 0;
     height: 100%;
-    min-height: var(--apple-pay-height, 2.75rem);
-    background-color: var(--apple-pay-background-color, #000);
+    min-height: var(--apple-pay-height, 2.5rem);
+    padding: 0;
+    box-sizing: border-box;
+    background-color: var(--apple-pay-background-color, #1a1a1a);
     color: var(--apple-pay-foreground-color, #fff);
     border: none;
-    border-radius: var(--apple-pay-border-radius, 1.375rem);
+    border-radius: var(--apple-pay-border-radius, 0.25rem);
     cursor: pointer;
-    font-family: var(--mb-typeface-sans, var(--wall-type-system-sans));
-    font-size: 1.0625rem;
-    font-weight: 500;
+    /* Same as wall Continue to checkout / Marber button large */
+    font-family: var(
+      --mb-typeface-sans,
+      var(--wall-type-system-sans, 'EconomistSans', system-ui, sans-serif)
+    );
+    font-size: var(--mb-button-font-size, 1.0625rem);
+    font-weight: var(--mb-font-weight-regular, 400);
+    line-height: 1;
   }
 
-  teg-apple-pay-button .apple-pay-btn svg {
+  teg-apple-pay-button .apple-pay-btn__label {
+    display: inline-flex;
+    align-items: center;
+    /* No flex gap \u2014 spacing after \u201Cwith\u201D uses the same word-space as \u201CSubscribe with\u201D */
+    gap: 0;
+    white-space: nowrap;
+  }
+
+  teg-apple-pay-button .apple-pay-btn__caption {
+    /* One typographic word space after \u201Cwith\u201D, matching Subscribe\u2194with */
+    padding-right: 0.25em;
+  }
+
+  teg-apple-pay-button .apple-pay-btn__logo {
     flex-shrink: 0;
     display: block;
+    /* Match caption font-size so mark aligns with text metrics */
+    height: 1.05em;
+    width: auto;
+    aspect-ratio: 51 / 22;
     color: currentColor;
+    /* Optical nudge \u2014 SVG viewBox sits slightly high vs EconomistSans caps */
+    transform: translateY(0.06em);
   }
 
   teg-apple-pay-button .apple-pay-btn.wap-loading {
@@ -1047,6 +1075,10 @@ var apple_pay_button_template_default = `<style>
     cursor: default;
   }
 
+  teg-apple-pay-button .apple-pay-btn.wap-loading .apple-pay-btn__label {
+    visibility: hidden;
+  }
+
   teg-apple-pay-button .apple-pay-btn.wap-loading::before {
     content: '';
     position: absolute;
@@ -1060,11 +1092,6 @@ var apple_pay_button_template_default = `<style>
     animation: wap-button-spinner 0.8s linear infinite;
   }
 
-  teg-apple-pay-button .apple-pay-btn__logo {
-    display: inline-flex;
-    align-items: center;
-  }
-
   teg-apple-pay-button .apple-pay-btn__loading {
     display: none;
   }
@@ -1079,18 +1106,26 @@ var apple_pay_button_template_default = `<style>
   }
 </style>
 
-<div class="apple-pay-container" aria-label="Express checkout with Apple Pay">
+<div class="apple-pay-container" aria-label="Subscribe with Apple Pay">
   <button
     class="apple-pay-btn"
     type="button"
-    aria-label="Pay with Apple Pay"
+    aria-label="Subscribe with Apple Pay"
     data-analytics="paywall:apple-pay-checkout"
   >
-    <span class="apple-pay-btn__logo">
-      <svg width="51" height="22" aria-label="Apple Pay" role="img">
+    <span class="apple-pay-btn__label"
+      ><span class="apple-pay-btn__caption">Subscribe with</span
+      ><svg
+        class="apple-pay-btn__logo"
+        width="42"
+        height="18"
+        viewBox="0 0 51 22"
+        aria-hidden="true"
+        role="img"
+      >
         <use href="#apple-pay-logo" />
-      </svg>
-    </span>
+      </svg
+    ></span>
     <span class="apple-pay-btn__loading" aria-hidden="true">Loading...</span>
   </button>
 </div>
@@ -1897,6 +1932,13 @@ var getSupportedBillingCountries = (offerCountry, offerVariant) => {
   return [...zoneCountries];
 };
 
+// src/constants.ts
+var APPLE_PAY_EXPRESS_BANNERS_EXPERIMENT_KEY = "subscribe-experiment-calibration";
+var APPLE_PAY_EXPRESS_BANNERS_VARIANTS = {
+  CONTROL: "control",
+  TREATMENT: "treatment"
+};
+
 // src/apple-pay-button.ts
 var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
 var TOTAL_LABEL = "The Economist";
@@ -1914,7 +1956,23 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     define(_ApplePayButton.tag, _ApplePayButton);
   }
   /**
-   * Creates and configures an ApplePayButton if the feature flag is present.
+   * Creates and configures an ApplePayButton when the Amplitude experiment is enabled.
+   *
+   * Reads the experiment variant from `window.experimentIntegration.getVariant` using
+   * {@link APPLE_PAY_EXPRESS_BANNERS_EXPERIMENT_KEY}. The host page is responsible
+   * for setting up `window.experimentIntegration` before calling this method.
+   *
+   * - `treatment` → button created and returned
+   * - `control` / missing / anything else → returns null (button suppressed)
+   *
+   * **Transition period:** the legacy `FEATURE_APPLE_PAY_EXPRESS_CHECKOUT` URL param
+   * gate is also evaluated as a fallback until all host apps have integrated
+   * `window.experimentIntegration`. Once all consumers are migrated, the URL param
+   * fallback will be removed.
+   *
+   * @param offer - The offer to display in the Apple Pay flow.
+   * @param country - The user's country code.
+   * @param entryPoint - Where the button is being rendered (e.g. paywall, banner).
    */
   static createIfEnabled(offer, country, entryPoint) {
     if (!offer) {
@@ -1923,7 +1981,18 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant)) {
       return null;
     }
-    if (!new URLSearchParams(window.location.search).has(FEATURE_APPLE_PAY_EXPRESS_CHECKOUT)) {
+    const experimentValue = window.experimentIntegration?.getVariant?.(
+      APPLE_PAY_EXPRESS_BANNERS_EXPERIMENT_KEY
+    );
+    const isTreatment = experimentValue === APPLE_PAY_EXPRESS_BANNERS_VARIANTS.TREATMENT;
+    const hasUrlParamFlag = new URLSearchParams(window.location.search).has(
+      FEATURE_APPLE_PAY_EXPRESS_CHECKOUT
+    );
+    console.log(`Apple Pay button experiment: variant="${experimentValue}`);
+    if (!isTreatment && !hasUrlParamFlag) {
+      console.log(
+        `Apple Pay button suppressed: experiment variant is "${experimentValue}" and URL param "${FEATURE_APPLE_PAY_EXPRESS_CHECKOUT}" is not present.`
+      );
       return null;
     }
     _ApplePayButton.define();
@@ -2156,8 +2225,8 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     }
     const skuId = this.#offer.sku_id;
     const country = this.#country;
-    modal.onConfirm = (recaptchaTokensPromise) => {
-      this.#initiateApplePay(skuId, country, recaptchaTokensPromise);
+    modal.onConfirm = (recaptchaTokenPromise) => {
+      this.#initiateApplePay(skuId, country, recaptchaTokenPromise);
     };
     modal.open();
   }
@@ -2180,7 +2249,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       return null;
     }
   }
-  #buildSessionParams(skuId, country, sessionData, paymentOptions, recaptchaTokensPromise) {
+  #buildSessionParams(skuId, country, sessionData, paymentOptions, recaptchaTokenPromise) {
     const offer = this.#offer;
     const totalAmount = offer.price?.purchase ? `${offer.price.purchase}` : DEFAULT_TOTAL;
     return {
@@ -2193,7 +2262,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       returnUrl: this.#returnUrl,
       userLoggedIn: sessionData.loggedIn,
       onPaymentAuthorized: async (event, session) => {
-        const recaptchaToken = await recaptchaTokensPromise;
+        const recaptchaToken = await recaptchaTokenPromise;
         return handlePaymentAuthorized(event, session, sessionData, {
           skuId,
           country,
@@ -2205,7 +2274,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       }
     };
   }
-  #initiateApplePay(skuId, country, recaptchaTokensPromise) {
+  #initiateApplePay(skuId, country, recaptchaTokenPromise) {
     try {
       const sessionData = this.#sessionData ?? _ApplePayButton.#ANONYMOUS_SESSION;
       const paymentOptions = this.#paymentOptions;
@@ -2218,7 +2287,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
           country,
           sessionData,
           paymentOptions,
-          recaptchaTokensPromise
+          recaptchaTokenPromise
         )
       );
     } catch {