@economist/web-apple-pay 0.1.3-beta.1 → 0.1.3-beta.3

package/dist/index.js

@@ -439,91 +439,7 @@ 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 */
-  teg-apple-pay-button {
-    display: block;
-    margin: var(--apple-pay-margin, 0);
-    width: 100%;
-    height: 100%;
-  }
-
-  teg-apple-pay-button .apple-pay-container {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    width: 100%;
-    height: 100%;
-  }
-
-  teg-apple-pay-button .apple-pay-btn {
-    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: #000;
-    color: #fff;
-    border: none;
-    border-radius: var(--apple-pay-border-radius, 1.375rem);
-    cursor: pointer;
-    font-family: var(--mb-typeface-sans, var(--wall-type-system-sans));
-    font-size: 1.0625rem;
-    font-weight: 500;
-  }
-
-  teg-apple-pay-button .apple-pay-btn svg {
-    flex-shrink: 0;
-    display: block;
-  }
-
-  teg-apple-pay-button .apple-pay-btn.wap-loading {
-    position: relative;
-    cursor: default;
-  }
-
-  teg-apple-pay-button .apple-pay-btn.wap-loading svg {
-    visibility: hidden;
-  }
-
-  teg-apple-pay-button .apple-pay-btn.wap-loading::after {
-    content: '';
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    margin-left: -0.625rem;
-    margin-top: -0.625rem;
-    width: 1.25rem;
-    height: 1.25rem;
-    border: 2px solid rgba(255, 255, 255, 0.2);
-    border-top-color: #fff;
-    border-radius: 50%;
-    animation: wap-button-spinner 0.8s linear infinite;
-  }
-
-  @keyframes wap-button-spinner {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-</style>
-
-<div class="apple-pay-container" aria-label="Express checkout with Apple Pay">
-  <button
-    class="apple-pay-btn"
-    type="button"
-    aria-label="Pay with Apple Pay"
-    data-analytics="paywall:apple-pay-checkout"
-  >
-    <svg width="51" height="22" aria-label="Apple Pay" role="img">
-      <use href="#apple-pay-logo" />
-    </svg>
-  </button>
-</div>
-`;
+var apple_pay_button_template_default = '<style>\n  /* Use CSS variables for layout so parent walls can easily override placement and sizing */\n  teg-apple-pay-button {\n    display: block;\n    margin: var(--apple-pay-margin, 0);\n    width: 100%;\n    height: 100%;\n  }\n\n  teg-apple-pay-button .apple-pay-container {\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n    width: 100%;\n    height: 100%;\n  }\n\n  teg-apple-pay-button .apple-pay-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.375rem;\n    width: 100%;\n    min-width: 0;\n    height: 100%;\n    min-height: var(--apple-pay-height, 2.75rem);\n    background-color: #000;\n    color: #fff;\n    border: none;\n    border-radius: var(--apple-pay-border-radius, 1.375rem);\n    cursor: pointer;\n    font-family: var(--mb-typeface-sans, var(--wall-type-system-sans));\n    font-size: 1.0625rem;\n    font-weight: 500;\n  }\n\n  teg-apple-pay-button .apple-pay-btn svg {\n    flex-shrink: 0;\n    display: block;\n  }\n</style>\n\n<div class="apple-pay-container" aria-label="Express checkout with Apple Pay">\n  <button\n    class="apple-pay-btn"\n    type="button"\n    aria-label="Pay with Apple Pay"\n    data-analytics="paywall:apple-pay-checkout"\n  >\n    <svg width="51" height="22" aria-label="Apple Pay" role="img">\n      <use href="#apple-pay-logo" />\n    </svg>\n  </button>\n</div>\n';
 
 // src/clients/payment-checkout/config.ts
 var runtimeConfig = null;
@@ -1075,6 +991,7 @@ async function handlePaymentAuthorized(event, session, sessionData, config) {
     const result = await performPurchase({
       applePayToken: event.payment.token,
       skuId: config.skuId,
+      currency: config.currency,
       billingContact: event.payment.billingContact,
       ...event.payment.shippingContact && {
         shippingContact: event.payment.shippingContact
@@ -1491,16 +1408,14 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   async #run() {
     try {
       if (await this.#checkAvailability()) return;
-      if (this.#checkOffer()) return;
-      this.#renderTemplate();
       if (await this.#checkSession()) return;
+      if (this.#checkOffer()) return;
       this.#captureReturnUrl();
       this.#computeBillingCountries();
       if (await this.#fetchAndCacheOptions()) return;
-      this.#finishLoading();
+      this.#renderTemplate();
     } catch {
       this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
     } finally {
       this.#rendering = false;
     }
@@ -1522,7 +1437,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     this.#sessionData = await this.#fetchSession();
     if (this.#sessionData?.loggedIn && (this.#sessionData.userType === "active-subscription" || this.#sessionData.userType === "b2b-user")) {
       this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
       return true;
     }
     return false;
@@ -1558,7 +1472,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     this.#paymentOptions = await this.#fetchPaymentOptions();
     if (!this.#paymentOptions?.apple_pay) {
       this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
       return true;
     }
     return false;
@@ -1570,13 +1483,13 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     const template = document.createElement("template");
     template.innerHTML = apple_pay_button_template_default;
     this.appendChild(template.content.cloneNode(true));
+    this.#updateDisabledState();
+    trackExpressWalletImpression(this.#offer.sku_id, {
+      entryPoint: this.#entryPoint,
+      country: this.#country
+    });
     const button = this.querySelector(SEL_BUTTON);
-    button.classList.add("wap-loading");
-    button.setAttribute("disabled", "");
-    button.setAttribute("aria-disabled", "true");
-    button.setAttribute("aria-busy", "true");
     button.addEventListener("click", () => {
-      if (button.classList.contains("wap-loading")) return;
       this.#openModal();
     });
     this.addEventListener("apple-pay-confirmed", (event) => {
@@ -1584,17 +1497,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       this.#initiateApplePay(skuId, country);
     });
   }
-  #finishLoading() {
-    const button = this.querySelector(SEL_BUTTON);
-    if (button) {
-      button.classList.remove("wap-loading");
-      this.#updateDisabledState();
-      trackExpressWalletImpression(this.#offer.sku_id, {
-        entryPoint: this.#entryPoint,
-        country: this.#country
-      });
-    }
-  }
   // ─── Private helpers ────────────────────────────────────────────────────────
   #updateDisabledState() {
     const button = this.querySelector(SEL_BUTTON);
@@ -1602,7 +1504,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (this.#offer) {
       button.removeAttribute("disabled");
       button.removeAttribute("aria-disabled");
-      button.removeAttribute("aria-busy");
       return;
     }
     button.setAttribute("disabled", "");
@@ -1654,6 +1555,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       onPaymentAuthorized: (event, session) => handlePaymentAuthorized(event, session, sessionData, {
         skuId,
         country,
+        currency: offer.price?.currency_code ?? DEFAULT_CURRENCY,
         returnUrl: this.#returnUrl,
         queryString: buildQueryString(),
         supportedBillingCountries: this.#supportedBillingCountries,

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

@@ -439,91 +439,7 @@ 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 */
-  teg-apple-pay-button {
-    display: block;
-    margin: var(--apple-pay-margin, 0);
-    width: 100%;
-    height: 100%;
-  }
-
-  teg-apple-pay-button .apple-pay-container {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    width: 100%;
-    height: 100%;
-  }
-
-  teg-apple-pay-button .apple-pay-btn {
-    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: #000;
-    color: #fff;
-    border: none;
-    border-radius: var(--apple-pay-border-radius, 1.375rem);
-    cursor: pointer;
-    font-family: var(--mb-typeface-sans, var(--wall-type-system-sans));
-    font-size: 1.0625rem;
-    font-weight: 500;
-  }
-
-  teg-apple-pay-button .apple-pay-btn svg {
-    flex-shrink: 0;
-    display: block;
-  }
-
-  teg-apple-pay-button .apple-pay-btn.wap-loading {
-    position: relative;
-    cursor: default;
-  }
-
-  teg-apple-pay-button .apple-pay-btn.wap-loading svg {
-    visibility: hidden;
-  }
-
-  teg-apple-pay-button .apple-pay-btn.wap-loading::after {
-    content: '';
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    margin-left: -0.625rem;
-    margin-top: -0.625rem;
-    width: 1.25rem;
-    height: 1.25rem;
-    border: 2px solid rgba(255, 255, 255, 0.2);
-    border-top-color: #fff;
-    border-radius: 50%;
-    animation: wap-button-spinner 0.8s linear infinite;
-  }
-
-  @keyframes wap-button-spinner {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-</style>
-
-<div class="apple-pay-container" aria-label="Express checkout with Apple Pay">
-  <button
-    class="apple-pay-btn"
-    type="button"
-    aria-label="Pay with Apple Pay"
-    data-analytics="paywall:apple-pay-checkout"
-  >
-    <svg width="51" height="22" aria-label="Apple Pay" role="img">
-      <use href="#apple-pay-logo" />
-    </svg>
-  </button>
-</div>
-`;
+var apple_pay_button_template_default = '<style>\n  /* Use CSS variables for layout so parent walls can easily override placement and sizing */\n  teg-apple-pay-button {\n    display: block;\n    margin: var(--apple-pay-margin, 0);\n    width: 100%;\n    height: 100%;\n  }\n\n  teg-apple-pay-button .apple-pay-container {\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n    width: 100%;\n    height: 100%;\n  }\n\n  teg-apple-pay-button .apple-pay-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.375rem;\n    width: 100%;\n    min-width: 0;\n    height: 100%;\n    min-height: var(--apple-pay-height, 2.75rem);\n    background-color: #000;\n    color: #fff;\n    border: none;\n    border-radius: var(--apple-pay-border-radius, 1.375rem);\n    cursor: pointer;\n    font-family: var(--mb-typeface-sans, var(--wall-type-system-sans));\n    font-size: 1.0625rem;\n    font-weight: 500;\n  }\n\n  teg-apple-pay-button .apple-pay-btn svg {\n    flex-shrink: 0;\n    display: block;\n  }\n</style>\n\n<div class="apple-pay-container" aria-label="Express checkout with Apple Pay">\n  <button\n    class="apple-pay-btn"\n    type="button"\n    aria-label="Pay with Apple Pay"\n    data-analytics="paywall:apple-pay-checkout"\n  >\n    <svg width="51" height="22" aria-label="Apple Pay" role="img">\n      <use href="#apple-pay-logo" />\n    </svg>\n  </button>\n</div>\n';
 
 // src/clients/payment-checkout/config.ts
 var runtimeConfig = null;
@@ -1070,6 +986,7 @@ async function handlePaymentAuthorized(event, session, sessionData, config) {
     const result = await performPurchase({
       applePayToken: event.payment.token,
       skuId: config.skuId,
+      currency: config.currency,
       billingContact: event.payment.billingContact,
       ...event.payment.shippingContact && {
         shippingContact: event.payment.shippingContact
@@ -1486,16 +1403,14 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   async #run() {
     try {
       if (await this.#checkAvailability()) return;
-      if (this.#checkOffer()) return;
-      this.#renderTemplate();
       if (await this.#checkSession()) return;
+      if (this.#checkOffer()) return;
       this.#captureReturnUrl();
       this.#computeBillingCountries();
       if (await this.#fetchAndCacheOptions()) return;
-      this.#finishLoading();
+      this.#renderTemplate();
     } catch {
       this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
     } finally {
       this.#rendering = false;
     }
@@ -1517,7 +1432,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     this.#sessionData = await this.#fetchSession();
     if (this.#sessionData?.loggedIn && (this.#sessionData.userType === "active-subscription" || this.#sessionData.userType === "b2b-user")) {
       this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
       return true;
     }
     return false;
@@ -1553,7 +1467,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     this.#paymentOptions = await this.#fetchPaymentOptions();
     if (!this.#paymentOptions?.apple_pay) {
       this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
       return true;
     }
     return false;
@@ -1565,13 +1478,13 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     const template = document.createElement("template");
     template.innerHTML = apple_pay_button_template_default;
     this.appendChild(template.content.cloneNode(true));
+    this.#updateDisabledState();
+    trackExpressWalletImpression(this.#offer.sku_id, {
+      entryPoint: this.#entryPoint,
+      country: this.#country
+    });
     const button = this.querySelector(SEL_BUTTON);
-    button.classList.add("wap-loading");
-    button.setAttribute("disabled", "");
-    button.setAttribute("aria-disabled", "true");
-    button.setAttribute("aria-busy", "true");
     button.addEventListener("click", () => {
-      if (button.classList.contains("wap-loading")) return;
       this.#openModal();
     });
     this.addEventListener("apple-pay-confirmed", (event) => {
@@ -1579,17 +1492,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       this.#initiateApplePay(skuId, country);
     });
   }
-  #finishLoading() {
-    const button = this.querySelector(SEL_BUTTON);
-    if (button) {
-      button.classList.remove("wap-loading");
-      this.#updateDisabledState();
-      trackExpressWalletImpression(this.#offer.sku_id, {
-        entryPoint: this.#entryPoint,
-        country: this.#country
-      });
-    }
-  }
   // ─── Private helpers ────────────────────────────────────────────────────────
   #updateDisabledState() {
     const button = this.querySelector(SEL_BUTTON);
@@ -1597,7 +1499,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (this.#offer) {
       button.removeAttribute("disabled");
       button.removeAttribute("aria-disabled");
-      button.removeAttribute("aria-busy");
       return;
     }
     button.setAttribute("disabled", "");
@@ -1649,6 +1550,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       onPaymentAuthorized: (event, session) => handlePaymentAuthorized(event, session, sessionData, {
         skuId,
         country,
+        currency: offer.price?.currency_code ?? DEFAULT_CURRENCY,
         returnUrl: this.#returnUrl,
         queryString: buildQueryString(),
         supportedBillingCountries: this.#supportedBillingCountries,

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

@@ -439,91 +439,7 @@ 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 */
-  teg-apple-pay-button {
-    display: block;
-    margin: var(--apple-pay-margin, 0);
-    width: 100%;
-    height: 100%;
-  }
-
-  teg-apple-pay-button .apple-pay-container {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    width: 100%;
-    height: 100%;
-  }
-
-  teg-apple-pay-button .apple-pay-btn {
-    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: #000;
-    color: #fff;
-    border: none;
-    border-radius: var(--apple-pay-border-radius, 1.375rem);
-    cursor: pointer;
-    font-family: var(--mb-typeface-sans, var(--wall-type-system-sans));
-    font-size: 1.0625rem;
-    font-weight: 500;
-  }
-
-  teg-apple-pay-button .apple-pay-btn svg {
-    flex-shrink: 0;
-    display: block;
-  }
-
-  teg-apple-pay-button .apple-pay-btn.wap-loading {
-    position: relative;
-    cursor: default;
-  }
-
-  teg-apple-pay-button .apple-pay-btn.wap-loading svg {
-    visibility: hidden;
-  }
-
-  teg-apple-pay-button .apple-pay-btn.wap-loading::after {
-    content: '';
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    margin-left: -0.625rem;
-    margin-top: -0.625rem;
-    width: 1.25rem;
-    height: 1.25rem;
-    border: 2px solid rgba(255, 255, 255, 0.2);
-    border-top-color: #fff;
-    border-radius: 50%;
-    animation: wap-button-spinner 0.8s linear infinite;
-  }
-
-  @keyframes wap-button-spinner {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-</style>
-
-<div class="apple-pay-container" aria-label="Express checkout with Apple Pay">
-  <button
-    class="apple-pay-btn"
-    type="button"
-    aria-label="Pay with Apple Pay"
-    data-analytics="paywall:apple-pay-checkout"
-  >
-    <svg width="51" height="22" aria-label="Apple Pay" role="img">
-      <use href="#apple-pay-logo" />
-    </svg>
-  </button>
-</div>
-`;
+var apple_pay_button_template_default = '<style>\n  /* Use CSS variables for layout so parent walls can easily override placement and sizing */\n  teg-apple-pay-button {\n    display: block;\n    margin: var(--apple-pay-margin, 0);\n    width: 100%;\n    height: 100%;\n  }\n\n  teg-apple-pay-button .apple-pay-container {\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n    width: 100%;\n    height: 100%;\n  }\n\n  teg-apple-pay-button .apple-pay-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.375rem;\n    width: 100%;\n    min-width: 0;\n    height: 100%;\n    min-height: var(--apple-pay-height, 2.75rem);\n    background-color: #000;\n    color: #fff;\n    border: none;\n    border-radius: var(--apple-pay-border-radius, 1.375rem);\n    cursor: pointer;\n    font-family: var(--mb-typeface-sans, var(--wall-type-system-sans));\n    font-size: 1.0625rem;\n    font-weight: 500;\n  }\n\n  teg-apple-pay-button .apple-pay-btn svg {\n    flex-shrink: 0;\n    display: block;\n  }\n</style>\n\n<div class="apple-pay-container" aria-label="Express checkout with Apple Pay">\n  <button\n    class="apple-pay-btn"\n    type="button"\n    aria-label="Pay with Apple Pay"\n    data-analytics="paywall:apple-pay-checkout"\n  >\n    <svg width="51" height="22" aria-label="Apple Pay" role="img">\n      <use href="#apple-pay-logo" />\n    </svg>\n  </button>\n</div>\n';
 
 // src/clients/payment-checkout/config.ts
 var runtimeConfig = null;
@@ -1078,6 +994,7 @@ async function handlePaymentAuthorized(event, session, sessionData, config) {
     const result = await performPurchase({
       applePayToken: event.payment.token,
       skuId: config.skuId,
+      currency: config.currency,
       billingContact: event.payment.billingContact,
       ...event.payment.shippingContact && {
         shippingContact: event.payment.shippingContact
@@ -1494,16 +1411,14 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   async #run() {
     try {
       if (await this.#checkAvailability()) return;
-      if (this.#checkOffer()) return;
-      this.#renderTemplate();
       if (await this.#checkSession()) return;
+      if (this.#checkOffer()) return;
       this.#captureReturnUrl();
       this.#computeBillingCountries();
       if (await this.#fetchAndCacheOptions()) return;
-      this.#finishLoading();
+      this.#renderTemplate();
     } catch {
       this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
     } finally {
       this.#rendering = false;
     }
@@ -1525,7 +1440,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     this.#sessionData = await this.#fetchSession();
     if (this.#sessionData?.loggedIn && (this.#sessionData.userType === "active-subscription" || this.#sessionData.userType === "b2b-user")) {
       this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
       return true;
     }
     return false;
@@ -1561,7 +1475,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     this.#paymentOptions = await this.#fetchPaymentOptions();
     if (!this.#paymentOptions?.apple_pay) {
       this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
       return true;
     }
     return false;
@@ -1573,13 +1486,13 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     const template = document.createElement("template");
     template.innerHTML = apple_pay_button_template_default;
     this.appendChild(template.content.cloneNode(true));
+    this.#updateDisabledState();
+    trackExpressWalletImpression(this.#offer.sku_id, {
+      entryPoint: this.#entryPoint,
+      country: this.#country
+    });
     const button = this.querySelector(SEL_BUTTON);
-    button.classList.add("wap-loading");
-    button.setAttribute("disabled", "");
-    button.setAttribute("aria-disabled", "true");
-    button.setAttribute("aria-busy", "true");
     button.addEventListener("click", () => {
-      if (button.classList.contains("wap-loading")) return;
       this.#openModal();
     });
     this.addEventListener("apple-pay-confirmed", (event) => {
@@ -1587,17 +1500,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       this.#initiateApplePay(skuId, country);
     });
   }
-  #finishLoading() {
-    const button = this.querySelector(SEL_BUTTON);
-    if (button) {
-      button.classList.remove("wap-loading");
-      this.#updateDisabledState();
-      trackExpressWalletImpression(this.#offer.sku_id, {
-        entryPoint: this.#entryPoint,
-        country: this.#country
-      });
-    }
-  }
   // ─── Private helpers ────────────────────────────────────────────────────────
   #updateDisabledState() {
     const button = this.querySelector(SEL_BUTTON);
@@ -1605,7 +1507,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (this.#offer) {
       button.removeAttribute("disabled");
       button.removeAttribute("aria-disabled");
-      button.removeAttribute("aria-busy");
       return;
     }
     button.setAttribute("disabled", "");
@@ -1657,6 +1558,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       onPaymentAuthorized: (event, session) => handlePaymentAuthorized(event, session, sessionData, {
         skuId,
         country,
+        currency: offer.price?.currency_code ?? DEFAULT_CURRENCY,
         returnUrl: this.#returnUrl,
         queryString: buildQueryString(),
         supportedBillingCountries: this.#supportedBillingCountries,

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

@@ -439,91 +439,7 @@ 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 */
-  teg-apple-pay-button {
-    display: block;
-    margin: var(--apple-pay-margin, 0);
-    width: 100%;
-    height: 100%;
-  }
-
-  teg-apple-pay-button .apple-pay-container {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    width: 100%;
-    height: 100%;
-  }
-
-  teg-apple-pay-button .apple-pay-btn {
-    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: #000;
-    color: #fff;
-    border: none;
-    border-radius: var(--apple-pay-border-radius, 1.375rem);
-    cursor: pointer;
-    font-family: var(--mb-typeface-sans, var(--wall-type-system-sans));
-    font-size: 1.0625rem;
-    font-weight: 500;
-  }
-
-  teg-apple-pay-button .apple-pay-btn svg {
-    flex-shrink: 0;
-    display: block;
-  }
-
-  teg-apple-pay-button .apple-pay-btn.wap-loading {
-    position: relative;
-    cursor: default;
-  }
-
-  teg-apple-pay-button .apple-pay-btn.wap-loading svg {
-    visibility: hidden;
-  }
-
-  teg-apple-pay-button .apple-pay-btn.wap-loading::after {
-    content: '';
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    margin-left: -0.625rem;
-    margin-top: -0.625rem;
-    width: 1.25rem;
-    height: 1.25rem;
-    border: 2px solid rgba(255, 255, 255, 0.2);
-    border-top-color: #fff;
-    border-radius: 50%;
-    animation: wap-button-spinner 0.8s linear infinite;
-  }
-
-  @keyframes wap-button-spinner {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-</style>
-
-<div class="apple-pay-container" aria-label="Express checkout with Apple Pay">
-  <button
-    class="apple-pay-btn"
-    type="button"
-    aria-label="Pay with Apple Pay"
-    data-analytics="paywall:apple-pay-checkout"
-  >
-    <svg width="51" height="22" aria-label="Apple Pay" role="img">
-      <use href="#apple-pay-logo" />
-    </svg>
-  </button>
-</div>
-`;
+var apple_pay_button_template_default = '<style>\n  /* Use CSS variables for layout so parent walls can easily override placement and sizing */\n  teg-apple-pay-button {\n    display: block;\n    margin: var(--apple-pay-margin, 0);\n    width: 100%;\n    height: 100%;\n  }\n\n  teg-apple-pay-button .apple-pay-container {\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n    width: 100%;\n    height: 100%;\n  }\n\n  teg-apple-pay-button .apple-pay-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.375rem;\n    width: 100%;\n    min-width: 0;\n    height: 100%;\n    min-height: var(--apple-pay-height, 2.75rem);\n    background-color: #000;\n    color: #fff;\n    border: none;\n    border-radius: var(--apple-pay-border-radius, 1.375rem);\n    cursor: pointer;\n    font-family: var(--mb-typeface-sans, var(--wall-type-system-sans));\n    font-size: 1.0625rem;\n    font-weight: 500;\n  }\n\n  teg-apple-pay-button .apple-pay-btn svg {\n    flex-shrink: 0;\n    display: block;\n  }\n</style>\n\n<div class="apple-pay-container" aria-label="Express checkout with Apple Pay">\n  <button\n    class="apple-pay-btn"\n    type="button"\n    aria-label="Pay with Apple Pay"\n    data-analytics="paywall:apple-pay-checkout"\n  >\n    <svg width="51" height="22" aria-label="Apple Pay" role="img">\n      <use href="#apple-pay-logo" />\n    </svg>\n  </button>\n</div>\n';
 
 // src/clients/payment-checkout/config.ts
 var runtimeConfig = null;
@@ -1070,6 +986,7 @@ async function handlePaymentAuthorized(event, session, sessionData, config) {
     const result = await performPurchase({
       applePayToken: event.payment.token,
       skuId: config.skuId,
+      currency: config.currency,
       billingContact: event.payment.billingContact,
       ...event.payment.shippingContact && {
         shippingContact: event.payment.shippingContact
@@ -1486,16 +1403,14 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   async #run() {
     try {
       if (await this.#checkAvailability()) return;
-      if (this.#checkOffer()) return;
-      this.#renderTemplate();
       if (await this.#checkSession()) return;
+      if (this.#checkOffer()) return;
       this.#captureReturnUrl();
       this.#computeBillingCountries();
       if (await this.#fetchAndCacheOptions()) return;
-      this.#finishLoading();
+      this.#renderTemplate();
     } catch {
       this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
     } finally {
       this.#rendering = false;
     }
@@ -1517,7 +1432,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     this.#sessionData = await this.#fetchSession();
     if (this.#sessionData?.loggedIn && (this.#sessionData.userType === "active-subscription" || this.#sessionData.userType === "b2b-user")) {
       this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
       return true;
     }
     return false;
@@ -1553,7 +1467,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     this.#paymentOptions = await this.#fetchPaymentOptions();
     if (!this.#paymentOptions?.apple_pay) {
       this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
       return true;
     }
     return false;
@@ -1565,13 +1478,13 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     const template = document.createElement("template");
     template.innerHTML = apple_pay_button_template_default;
     this.appendChild(template.content.cloneNode(true));
+    this.#updateDisabledState();
+    trackExpressWalletImpression(this.#offer.sku_id, {
+      entryPoint: this.#entryPoint,
+      country: this.#country
+    });
     const button = this.querySelector(SEL_BUTTON);
-    button.classList.add("wap-loading");
-    button.setAttribute("disabled", "");
-    button.setAttribute("aria-disabled", "true");
-    button.setAttribute("aria-busy", "true");
     button.addEventListener("click", () => {
-      if (button.classList.contains("wap-loading")) return;
       this.#openModal();
     });
     this.addEventListener("apple-pay-confirmed", (event) => {
@@ -1579,17 +1492,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       this.#initiateApplePay(skuId, country);
     });
   }
-  #finishLoading() {
-    const button = this.querySelector(SEL_BUTTON);
-    if (button) {
-      button.classList.remove("wap-loading");
-      this.#updateDisabledState();
-      trackExpressWalletImpression(this.#offer.sku_id, {
-        entryPoint: this.#entryPoint,
-        country: this.#country
-      });
-    }
-  }
   // ─── Private helpers ────────────────────────────────────────────────────────
   #updateDisabledState() {
     const button = this.querySelector(SEL_BUTTON);
@@ -1597,7 +1499,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (this.#offer) {
       button.removeAttribute("disabled");
       button.removeAttribute("aria-disabled");
-      button.removeAttribute("aria-busy");
       return;
     }
     button.setAttribute("disabled", "");
@@ -1649,6 +1550,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       onPaymentAuthorized: (event, session) => handlePaymentAuthorized(event, session, sessionData, {
         skuId,
         country,
+        currency: offer.price?.currency_code ?? DEFAULT_CURRENCY,
         returnUrl: this.#returnUrl,
         queryString: buildQueryString(),
         supportedBillingCountries: this.#supportedBillingCountries,

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

@@ -17,6 +17,7 @@ import type { SessionResponse } from './types';
 export type PaymentHandlerConfig = {
     skuId: string;
     country: string;
+    currency: string;
     returnUrl: string;
     /**
      * Optional `&country=` query param captured from the page URL at the moment

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

@@ -338,6 +338,7 @@ async function handlePaymentAuthorized(event, session, sessionData, config) {
     const result = await performPurchase({
       applePayToken: event.payment.token,
       skuId: config.skuId,
+      currency: config.currency,
       billingContact: event.payment.billingContact,
       ...event.payment.shippingContact && {
         shippingContact: event.payment.shippingContact

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

@@ -85,6 +85,7 @@ export type PurchaseRequest = {
      * only provide a `skuId`. Frontend uses `skuId` directly — BFF must be aligned.
      */
     skuId: string;
+    currency: string;
     billingContact: ApplePayPaymentContact;
     /** Required if loggedIn: false — contains emailAddress from Apple Pay sheet. */
     shippingContact?: ApplePayPaymentContact;

package/dist/src/index.js

@@ -439,91 +439,7 @@ 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 */
-  teg-apple-pay-button {
-    display: block;
-    margin: var(--apple-pay-margin, 0);
-    width: 100%;
-    height: 100%;
-  }
-
-  teg-apple-pay-button .apple-pay-container {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    width: 100%;
-    height: 100%;
-  }
-
-  teg-apple-pay-button .apple-pay-btn {
-    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: #000;
-    color: #fff;
-    border: none;
-    border-radius: var(--apple-pay-border-radius, 1.375rem);
-    cursor: pointer;
-    font-family: var(--mb-typeface-sans, var(--wall-type-system-sans));
-    font-size: 1.0625rem;
-    font-weight: 500;
-  }
-
-  teg-apple-pay-button .apple-pay-btn svg {
-    flex-shrink: 0;
-    display: block;
-  }
-
-  teg-apple-pay-button .apple-pay-btn.wap-loading {
-    position: relative;
-    cursor: default;
-  }
-
-  teg-apple-pay-button .apple-pay-btn.wap-loading svg {
-    visibility: hidden;
-  }
-
-  teg-apple-pay-button .apple-pay-btn.wap-loading::after {
-    content: '';
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    margin-left: -0.625rem;
-    margin-top: -0.625rem;
-    width: 1.25rem;
-    height: 1.25rem;
-    border: 2px solid rgba(255, 255, 255, 0.2);
-    border-top-color: #fff;
-    border-radius: 50%;
-    animation: wap-button-spinner 0.8s linear infinite;
-  }
-
-  @keyframes wap-button-spinner {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-</style>
-
-<div class="apple-pay-container" aria-label="Express checkout with Apple Pay">
-  <button
-    class="apple-pay-btn"
-    type="button"
-    aria-label="Pay with Apple Pay"
-    data-analytics="paywall:apple-pay-checkout"
-  >
-    <svg width="51" height="22" aria-label="Apple Pay" role="img">
-      <use href="#apple-pay-logo" />
-    </svg>
-  </button>
-</div>
-`;
+var apple_pay_button_template_default = '<style>\n  /* Use CSS variables for layout so parent walls can easily override placement and sizing */\n  teg-apple-pay-button {\n    display: block;\n    margin: var(--apple-pay-margin, 0);\n    width: 100%;\n    height: 100%;\n  }\n\n  teg-apple-pay-button .apple-pay-container {\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n    width: 100%;\n    height: 100%;\n  }\n\n  teg-apple-pay-button .apple-pay-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.375rem;\n    width: 100%;\n    min-width: 0;\n    height: 100%;\n    min-height: var(--apple-pay-height, 2.75rem);\n    background-color: #000;\n    color: #fff;\n    border: none;\n    border-radius: var(--apple-pay-border-radius, 1.375rem);\n    cursor: pointer;\n    font-family: var(--mb-typeface-sans, var(--wall-type-system-sans));\n    font-size: 1.0625rem;\n    font-weight: 500;\n  }\n\n  teg-apple-pay-button .apple-pay-btn svg {\n    flex-shrink: 0;\n    display: block;\n  }\n</style>\n\n<div class="apple-pay-container" aria-label="Express checkout with Apple Pay">\n  <button\n    class="apple-pay-btn"\n    type="button"\n    aria-label="Pay with Apple Pay"\n    data-analytics="paywall:apple-pay-checkout"\n  >\n    <svg width="51" height="22" aria-label="Apple Pay" role="img">\n      <use href="#apple-pay-logo" />\n    </svg>\n  </button>\n</div>\n';
 
 // src/clients/payment-checkout/config.ts
 var runtimeConfig = null;
@@ -1075,6 +991,7 @@ async function handlePaymentAuthorized(event, session, sessionData, config) {
     const result = await performPurchase({
       applePayToken: event.payment.token,
       skuId: config.skuId,
+      currency: config.currency,
       billingContact: event.payment.billingContact,
       ...event.payment.shippingContact && {
         shippingContact: event.payment.shippingContact
@@ -1491,16 +1408,14 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   async #run() {
     try {
       if (await this.#checkAvailability()) return;
-      if (this.#checkOffer()) return;
-      this.#renderTemplate();
       if (await this.#checkSession()) return;
+      if (this.#checkOffer()) return;
       this.#captureReturnUrl();
       this.#computeBillingCountries();
       if (await this.#fetchAndCacheOptions()) return;
-      this.#finishLoading();
+      this.#renderTemplate();
     } catch {
       this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
     } finally {
       this.#rendering = false;
     }
@@ -1522,7 +1437,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     this.#sessionData = await this.#fetchSession();
     if (this.#sessionData?.loggedIn && (this.#sessionData.userType === "active-subscription" || this.#sessionData.userType === "b2b-user")) {
       this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
       return true;
     }
     return false;
@@ -1558,7 +1472,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     this.#paymentOptions = await this.#fetchPaymentOptions();
     if (!this.#paymentOptions?.apple_pay) {
       this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
       return true;
     }
     return false;
@@ -1570,13 +1483,13 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     const template = document.createElement("template");
     template.innerHTML = apple_pay_button_template_default;
     this.appendChild(template.content.cloneNode(true));
+    this.#updateDisabledState();
+    trackExpressWalletImpression(this.#offer.sku_id, {
+      entryPoint: this.#entryPoint,
+      country: this.#country
+    });
     const button = this.querySelector(SEL_BUTTON);
-    button.classList.add("wap-loading");
-    button.setAttribute("disabled", "");
-    button.setAttribute("aria-disabled", "true");
-    button.setAttribute("aria-busy", "true");
     button.addEventListener("click", () => {
-      if (button.classList.contains("wap-loading")) return;
       this.#openModal();
     });
     this.addEventListener("apple-pay-confirmed", (event) => {
@@ -1584,17 +1497,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       this.#initiateApplePay(skuId, country);
     });
   }
-  #finishLoading() {
-    const button = this.querySelector(SEL_BUTTON);
-    if (button) {
-      button.classList.remove("wap-loading");
-      this.#updateDisabledState();
-      trackExpressWalletImpression(this.#offer.sku_id, {
-        entryPoint: this.#entryPoint,
-        country: this.#country
-      });
-    }
-  }
   // ─── Private helpers ────────────────────────────────────────────────────────
   #updateDisabledState() {
     const button = this.querySelector(SEL_BUTTON);
@@ -1602,7 +1504,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (this.#offer) {
       button.removeAttribute("disabled");
       button.removeAttribute("aria-disabled");
-      button.removeAttribute("aria-busy");
       return;
     }
     button.setAttribute("disabled", "");
@@ -1654,6 +1555,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       onPaymentAuthorized: (event, session) => handlePaymentAuthorized(event, session, sessionData, {
         skuId,
         country,
+        currency: offer.price?.currency_code ?? DEFAULT_CURRENCY,
         returnUrl: this.#returnUrl,
         queryString: buildQueryString(),
         supportedBillingCountries: this.#supportedBillingCountries,

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.1",
+  "version": "0.1.3-beta.3",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",