@economist/web-apple-pay 1.7.6 → 1.7.7

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

@@ -71,7 +71,7 @@ function ensureApplePayLogoSymbol() {
     return;
   }
   const tmp = document.createElement("div");
-  tmp.innerHTML = `<svg aria-hidden="true" style="display:none" id="${LOGO_DEFS_ID}"><defs><symbol id="apple-pay-logo" viewBox="0 0 51 22"><path d="${LOGO_PATH}" fill="white"/></symbol></defs></svg>`;
+  tmp.innerHTML = `<svg aria-hidden="true" style="display:none" id="${LOGO_DEFS_ID}"><defs><symbol id="apple-pay-logo" viewBox="0 0 51 22"><path d="${LOGO_PATH}" fill="currentColor"/></symbol></defs></svg>`;
   document.body.prepend(tmp.firstElementChild);
 }
 
@@ -109,16 +109,32 @@ var apple_pay_modal_template_default = `<style>
     position: absolute;
     top: 1.5rem;
     right: 1.3125rem;
-    background: none;
+    background: transparent;
     border: none;
     cursor: pointer;
     padding: 0;
+    width: 1.5rem;
+    height: 1.5rem;
     display: flex;
     align-items: center;
     justify-content: center;
+    color: var(--mb-colour-greyscale-london-20, #1a1a1a);
+    transition:
+      background-color ease-in-out 0.2s,
+      color ease-in-out 0.2s;
+  }
+
+  .apm__close:hover {
+    color: var(--mb-colour-base-chicago-30, #333333);
+  }
+
+  .apm__close:active {
+    background-color: var(--mb-colour-base-chicago-90, #e6e6e6);
+    color: var(--mb-colour-base-chicago-30, #333333);
   }
 
   .apm__close:focus {
+    background-color: var(--mb-colour-base-chicago-90, #e6e6e6);
     outline: solid 0.125rem var(--focus-border-color, #121212);
     border-radius: 0.25rem;
   }
@@ -301,10 +317,6 @@ var apple_pay_modal_template_default = `<style>
     cursor: pointer;
     color: #fff;
     text-align: center;
-    font-family: var(
-      --mb-typeface-sans,
-      var(--wall-type-system-sans, system-ui, sans-serif)
-    );
     font-size: 1.25rem;
     font-style: normal;
     font-weight: 500;
@@ -421,7 +433,7 @@ var apple_pay_modal_template_default = `<style>
             fill-rule="evenodd"
             clip-rule="evenodd"
             d="M18.75 6.60964L17.3904 5.25L12 10.6404L6.60964 5.25L5.25 6.60964L10.6404 12L5.25 17.3904L6.60964 18.75L12 13.3596L17.3904 18.75L18.75 17.3904L13.3596 12L18.75 6.60964Z"
-            fill="#333333"
+            fill="currentColor"
           />
         </g>
         <defs>
@@ -687,6 +699,8 @@ function renewalPeriodText(unit, duration) {
       return "";
   }
 }
+var LI_SEPARATOR = "\0LI_SEP\0";
+var P_SEPARATOR = "\0P_SEP\0";
 function buildTermsContext(offer, country) {
   const isUS = country === "US";
   const isCA = country === "CA";
@@ -723,19 +737,19 @@ function freeTrialTerms(offer, ctx) {
   const trialDuration = offer.subscription_options?.trial_period?.duration ?? 1;
   const trialDateStr = `on ${getRenewalDateText(trialUnit, trialDuration)}${ctx.verificationText}`;
   if (ctx.isUS) {
-    return `Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${trialDateStr} when your free trial ends, until cancelled{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal until cancelled. ${ctx.usCancelNote}${ctx.taxFootnote}`;
+    return `Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${trialDateStr} when your free trial ends, until cancelled${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal until cancelled. ${ctx.usCancelNote}${ctx.taxFootnote}`;
   }
-  return `Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${trialDateStr} when your free trial ends, until cancelled{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}${ctx.taxFootnote}`;
+  return `Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${trialDateStr} when your free trial ends, until cancelled${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}${ctx.taxFootnote}`;
 }
 function nytTerms(ctx) {
   const nytAccessText = "Your complimentary access to The New York Times is for one year only and does not auto-renew. We will send your instructions on how to redeem access to The New York Times by email.";
   if (ctx.isUS) {
-    return `Your subscription to <em>The Economist</em> auto-renews ${ctx.periodText} until cancelled{{liSeparator}}Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.renewalDateStr}{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal until cancelled. ${ctx.usCancelNote}${ctx.taxFootnote}{{pSeparator}}${nytAccessText}`;
+    return `Your subscription to <em>The Economist</em> auto-renews ${ctx.periodText} until cancelled${LI_SEPARATOR}Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.renewalDateStr}${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal until cancelled. ${ctx.usCancelNote}${ctx.taxFootnote}${P_SEPARATOR}${nytAccessText}`;
   }
   if (ctx.isCA) {
-    return `Your subscription to <em>The Economist</em> auto-renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.periodText} ${ctx.renewalDateStr} until cancelled.{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}${ctx.taxFootnote}{{pSeparator}}${nytAccessText}`;
+    return `Your subscription to <em>The Economist</em> auto-renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.periodText} ${ctx.renewalDateStr} until cancelled.${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}${ctx.taxFootnote}${P_SEPARATOR}${nytAccessText}`;
   }
-  return `Your subscription to <em>The Economist</em> auto-renews at ${ctx.renewalPriceText} ${ctx.periodText} ${ctx.renewalDateStr} until cancelled{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime} ${nytAccessText}`;
+  return `Your subscription to <em>The Economist</em> auto-renews at ${ctx.renewalPriceText} ${ctx.periodText} ${ctx.renewalDateStr} until cancelled${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime} ${nytAccessText}`;
 }
 function minTermContractTerms(offer, ctx) {
   const duePrice = formatPrice(offer.price.purchase, offer.price.currency_code);
@@ -745,28 +759,28 @@ function minTermContractTerms(offer, ctx) {
   const contractLength = mtDuration && mtUnit ? `${mtDuration} ${mtUnit}` : "";
   const initialContractText = contractLength ? `your initial ${contractLength} contract` : "your initial contract";
   const mtRenewalDateText = mtUnit && mtDuration ? getRenewalDateText(mtUnit, Number(mtDuration)) : ctx.renewalDateText;
-  return `You\u2019ll be charged ${duePrice} a month for the duration of ${initialContractText}{{liSeparator}}Your subscription auto-renews annually at ${ctx.renewalPriceText} a month on ${mtRenewalDateText} until cancelled{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}`;
+  return `You\u2019ll be charged ${duePrice} a month for the duration of ${initialContractText}${LI_SEPARATOR}Your subscription auto-renews annually at ${ctx.renewalPriceText} a month on ${mtRenewalDateText} until cancelled${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}`;
 }
 function paidTrialTerms(offer, ctx) {
   const trialUnit = offer.subscription_options?.trial_period?.unit ?? ctx.unit;
   const trialDuration = offer.subscription_options?.trial_period?.duration ?? ctx.duration;
   const trialDateText = getRenewalDateText(trialUnit, trialDuration);
   if (ctx.isUS) {
-    return `Your subscription auto-renews ${ctx.periodText} until cancelled{{liSeparator}}Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} on ${trialDateText} when your paid trial ends{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal. ${ctx.usCancelNote}${ctx.taxFootnote}`;
+    return `Your subscription auto-renews ${ctx.periodText} until cancelled${LI_SEPARATOR}Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} on ${trialDateText} when your paid trial ends${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal. ${ctx.usCancelNote}${ctx.taxFootnote}`;
   }
-  return `Your subscription auto-renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.periodText} on ${trialDateText} when your paid trial ends, until cancelled{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}${ctx.taxFootnote}`;
+  return `Your subscription auto-renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.periodText} on ${trialDateText} when your paid trial ends, until cancelled${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}${ctx.taxFootnote}`;
 }
 function autoRenewalTerms(ctx) {
   if (ctx.isUS) {
-    return `Your subscription auto-renews ${ctx.periodText} until cancelled{{liSeparator}}Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.renewalDateStr}{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal until cancelled. ${ctx.usCancelNote}${ctx.taxFootnote}`;
+    return `Your subscription auto-renews ${ctx.periodText} until cancelled${LI_SEPARATOR}Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.renewalDateStr}${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal until cancelled. ${ctx.usCancelNote}${ctx.taxFootnote}`;
   }
-  return `Your subscription auto-renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.periodText} ${ctx.renewalDateStr} until cancelled{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}${ctx.taxFootnote}`;
+  return `Your subscription auto-renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.periodText} ${ctx.renewalDateStr} until cancelled${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}${ctx.taxFootnote}`;
 }
 function noAutoRenewalTerms(ctx) {
   if (ctx.isUS || ctx.isCA) {
-    return `Your subscription does not renew automatically${ctx.taxFootnote}{{liSeparator}}`;
+    return `Your subscription does not renew automatically${ctx.taxFootnote}${LI_SEPARATOR}`;
   }
-  return `Your subscription does not renew automatically{{liSeparator}}`;
+  return `Your subscription does not renew automatically${LI_SEPARATOR}`;
 }
 function generateApplePayModalTerms(offer, country) {
   const ctx = buildTermsContext(offer, country);
@@ -789,9 +803,9 @@ function generateApplePayModalTerms(offer, country) {
   return noAutoRenewalTerms(ctx);
 }
 function renderTermsHtml(termsText) {
-  const renewalTextLists = termsText.split("{{liSeparator}}");
+  const renewalTextLists = termsText.split(LI_SEPARATOR);
   const lastPart = renewalTextLists.pop() || "";
-  const renewalTextParagraphs = lastPart.split("{{pSeparator}}");
+  const renewalTextParagraphs = lastPart.split(P_SEPARATOR);
   const ulHtml = `<ul class="apm__terms-bullets">${renewalTextLists.map((value) => `<li>${value}</li>`).join("")}</ul>`;
   const paragraphHtml = renewalTextParagraphs.filter(Boolean).map((value) => `<p class="apm__terms-legal">${value}</p>`).join("");
   return ulHtml + paragraphHtml;
@@ -1034,8 +1048,8 @@ var apple_pay_button_template_default = `<style>
     min-width: 0;
     height: 100%;
     min-height: var(--apple-pay-height, 2.75rem);
-    background-color: #000;
-    color: #fff;
+    background-color: var(--apple-pay-background-color, #000);
+    color: var(--apple-pay-foreground-color, #fff);
     border: none;
     border-radius: var(--apple-pay-border-radius, 1.375rem);
     cursor: pointer;
@@ -1047,6 +1061,7 @@ var apple_pay_button_template_default = `<style>
   teg-apple-pay-button .apple-pay-btn svg {
     flex-shrink: 0;
     display: block;
+    color: currentColor;
   }
 
   teg-apple-pay-button .apple-pay-btn.wap-loading {
@@ -1061,8 +1076,8 @@ var apple_pay_button_template_default = `<style>
     left: 50%;
     width: 1.25rem;
     height: 1.25rem;
-    border: 2px solid rgba(255, 255, 255, 0.25);
-    border-top-color: #fff;
+    border: 2px solid var(--apple-pay-spinner-track-color, rgba(255, 255, 255, 0.25));
+    border-top-color: var(--apple-pay-spinner-head-color, currentColor);
     border-radius: 50%;
     animation: wap-button-spinner 0.8s linear infinite;
   }
@@ -1226,13 +1241,25 @@ var getExpressCheckoutSession = () => {
 };
 
 // src/utils/expressCheckoutRedirect.ts
-var captureOriginUrl = () => window.location.href;
-var buildQueryString = () => {
-  const countryCode = new URLSearchParams(window.location.search).get(
-    "country"
-  );
-  return countryCode ? `&country=${encodeURIComponent(countryCode)}` : "";
+var CHECKOUT_REDIRECT_KEY = "checkout-redirect";
+var ALLOWED_REDIRECT_HOSTNAME = "economist.com";
+function isAllowedRedirectUrl(url) {
+  if (url.startsWith("/")) return !url.startsWith("//");
+  try {
+    const { hostname } = new URL(url);
+    return hostname === ALLOWED_REDIRECT_HOSTNAME || hostname.endsWith(`.${ALLOWED_REDIRECT_HOSTNAME}`);
+  } catch {
+    return false;
+  }
+}
+var writeCheckoutRedirect = (originUrl) => {
+  if (!isAllowedRedirectUrl(originUrl)) return;
+  try {
+    localStorage.setItem(CHECKOUT_REDIRECT_KEY, originUrl);
+  } catch {
+  }
 };
+var captureOriginUrl = () => window.location.href;
 var decodeSku = (sku) => {
   try {
     return atob(sku.substring(sku.indexOf("-") + 1));
@@ -1243,14 +1270,11 @@ var decodeSku = (sku) => {
 var redirectToCheckoutComplete = (params) => {
   const url = new URL("/checkout/complete", window.location.origin);
   url.searchParams.set("basketId", params.basketId);
-  if (params.queryString) {
-    const qs = params.queryString.startsWith("?") ? params.queryString.slice(1) : params.queryString;
-    new URLSearchParams(qs).forEach((v, k) => url.searchParams.set(k, v));
-  }
   url.searchParams.set("lmo_offer", params.skuId);
   url.searchParams.set("status", params.status);
   url.searchParams.set("redirectToCheckout", "true");
-  url.searchParams.set("returnUrl", params.returnUrl);
+  if (params.email) url.searchParams.set("email", params.email);
+  if (params.country) url.searchParams.set("country", params.country);
   return url.pathname + url.search;
 };
 var redirectToCheckoutFallback = (params) => {
@@ -1261,7 +1285,7 @@ var redirectToCheckoutFallback = (params) => {
     url.searchParams.set("inlineError", params.inlineError);
   if (params.email) url.searchParams.set("email", params.email);
   if (params.emailError) url.searchParams.set("emailError", params.emailError);
-  url.searchParams.set("returnUrl", params.returnUrl);
+  if (params.country) url.searchParams.set("country", params.country);
   return url.pathname + url.search;
 };
 
@@ -1345,17 +1369,16 @@ var MSG_EMAIL_WRONG_FORMAT = "That email doesn\u2019t look right. Please enter a
 var MSG_EMAIL_TOO_LONG = "This field must be 80 characters or less.";
 var MSG_UNSUPPORTED_BILLING_COUNTRY = "Billing country does not match offer price zone";
 var MSG_PAYMENT_GENERIC_ERROR = "Something went wrong. Please check your payment and billing details and try again or contact us.";
-var MSG_RECAPTCHA_VALIDATION_FAILED = "Security check failed. Please try again.";
-var MSG_EMAIL_COLLISION = "This email address is already linked to an account. Please log in, or try a different email address.";
 var MSG_CONTACT_VALIDATION_INTERNAL = "Could not validate Apple Pay contact";
 
 // src/clients/payment-checkout/apple-session.ts
 function redirectToFallbackCheckout(config) {
+  writeCheckoutRedirect(config.returnUrl);
   trackFallbackCheckout(config.skuId);
   window.location.href = redirectToCheckoutFallback({
     skuId: config.skuId,
-    returnUrl: config.returnUrl,
-    inlineError: MSG_PAYMENT_GENERIC_ERROR
+    inlineError: MSG_PAYMENT_GENERIC_ERROR,
+    country: config.countryCode
   });
 }
 async function handleMerchantValidation(event, session, config) {
@@ -1534,8 +1557,6 @@ var shippingContactDetails = (shippingContact) => {
 };
 
 // src/clients/payment-checkout/payment-handler.ts
-var MSG_ELIGIBILITY = "Something went wrong, please try again";
-var MSG_REGISTRATION = "We couldn't create your account. Please enter your email or try a different login method.";
 var failApplePaySession = (session, errors = []) => {
   session.completePayment({
     status: ApplePaySession.STATUS_FAILURE,
@@ -1559,37 +1580,42 @@ function validateContacts(event, sessionData, supportedBillingCountries) {
   }
   return void 0;
 }
-function redirectFallback(skuId, returnUrl, options) {
+function redirectFallback(skuId, returnUrl, country, options) {
+  writeCheckoutRedirect(returnUrl);
   trackFallbackCheckout(skuId);
   window.location.href = redirectToCheckoutFallback({
     skuId,
-    returnUrl,
+    country,
     ...options
   });
 }
 var ERROR_HANDLERS = {
-  EMAIL_COLLISION: ({ skuId, returnUrl, validatedEmail }) => redirectFallback(skuId, returnUrl, {
-    emailError: MSG_EMAIL_COLLISION,
+  // emailError flows as an inline field error on the email input.
+  // email pre-populates the input so the user doesn't have to retype it.
+  EMAIL_COLLISION: ({ skuId, returnUrl, country, validatedEmail, walletError }) => redirectFallback(skuId, returnUrl, country, {
+    emailError: walletError.message,
+    email: validatedEmail
+  }),
+  PAYMENT_DECLINED: ({ skuId, returnUrl, country, walletError }) => redirectFallback(skuId, returnUrl, country, { inlineError: walletError.message }),
+  ELIGIBILITY_REJECTED: ({ skuId, returnUrl, country, walletError }) => redirectFallback(skuId, returnUrl, country, { inlineError: walletError.message }),
+  REGISTRATION_FAILED: ({ skuId, returnUrl, country, walletError }) => redirectFallback(skuId, returnUrl, country, { inlineError: walletError.message }),
+  ACCOUNT_CREATION_FAILED: ({ skuId, returnUrl, country, validatedEmail, walletError }) => redirectFallback(skuId, returnUrl, country, {
+    emailError: walletError.message,
     email: validatedEmail
   }),
-  PAYMENT_DECLINED: ({ skuId, returnUrl }) => (
-    // Matches sma-checkout catch-all: always redirect with generic inlineError.
-    redirectFallback(skuId, returnUrl, { inlineError: MSG_PAYMENT_GENERIC_ERROR })
-  ),
-  ELIGIBILITY_REJECTED: ({ skuId, returnUrl }) => redirectFallback(skuId, returnUrl, { inlineError: MSG_ELIGIBILITY }),
-  REGISTRATION_FAILED: ({ skuId, returnUrl }) => redirectFallback(skuId, returnUrl, { inlineError: MSG_REGISTRATION }),
-  VALIDATION_ERROR: ({ skuId, returnUrl }) => redirectFallback(skuId, returnUrl, { inlineError: MSG_RECAPTCHA_VALIDATION_FAILED })
+  VALIDATION_ERROR: ({ skuId, returnUrl, country, walletError }) => redirectFallback(skuId, returnUrl, country, { inlineError: walletError.message }),
+  RECAPTCHA_FAILED: ({ skuId, returnUrl, country, walletError }) => redirectFallback(skuId, returnUrl, country, { inlineError: walletError.message })
 };
 function handleStructuredError(ctx) {
   const handler = ERROR_HANDLERS[ctx.walletError.errorType];
   if (handler) {
     handler(ctx);
   } else {
-    redirectFallback(ctx.skuId, ctx.returnUrl, { inlineError: MSG_PAYMENT_GENERIC_ERROR });
+    redirectFallback(ctx.skuId, ctx.returnUrl, ctx.country, { inlineError: MSG_PAYMENT_GENERIC_ERROR });
   }
 }
 async function handlePaymentAuthorized(event, session, sessionData, config) {
-  const { skuId, returnUrl, queryString } = config;
+  const { skuId, returnUrl, country } = config;
   let validatedEmail;
   try {
     validatedEmail = validateContacts(
@@ -1609,13 +1635,15 @@ async function handlePaymentAuthorized(event, session, sessionData, config) {
     });
     trackWalletPaymentSuccess(skuId, result.basketId);
     session.completePayment({ status: ApplePaySession.STATUS_SUCCESS });
+    const successEmail = sessionData.loggedIn ? sessionData.emailAddress : validatedEmail;
     const userStatus = sessionData.loggedIn ? "lex" : "nex";
+    writeCheckoutRedirect(returnUrl);
     window.location.href = redirectToCheckoutComplete({
       basketId: result.basketId,
       status: userStatus,
       skuId: decodeSku(skuId),
-      returnUrl,
-      queryString
+      email: successEmail,
+      country
     });
   } catch (err) {
     if (err instanceof ContactValidationError) {
@@ -1627,10 +1655,10 @@ async function handlePaymentAuthorized(event, session, sessionData, config) {
     trackWalletPaymentFailure(skuId, walletError?.errorType ?? "UNKNOWN");
     failApplePaySession(session);
     if (!walletError) {
-      redirectFallback(skuId, returnUrl, { inlineError: MSG_PAYMENT_GENERIC_ERROR });
+      redirectFallback(skuId, returnUrl, country, { inlineError: MSG_PAYMENT_GENERIC_ERROR });
       return;
     }
-    handleStructuredError({ skuId, returnUrl, validatedEmail, walletError });
+    handleStructuredError({ skuId, returnUrl, country, validatedEmail, walletError });
   }
 }
 
@@ -2216,7 +2244,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
         country,
         currency: offer.price?.currency_code ?? DEFAULT_CURRENCY,
         returnUrl: this.#returnUrl,
-        queryString: buildQueryString(),
         supportedBillingCountries: this.#supportedBillingCountries,
         recaptchaTokens
       })

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

@@ -6,7 +6,7 @@ function ensureApplePayLogoSymbol() {
     return;
   }
   const tmp = document.createElement("div");
-  tmp.innerHTML = `<svg aria-hidden="true" style="display:none" id="${LOGO_DEFS_ID}"><defs><symbol id="apple-pay-logo" viewBox="0 0 51 22"><path d="${LOGO_PATH}" fill="white"/></symbol></defs></svg>`;
+  tmp.innerHTML = `<svg aria-hidden="true" style="display:none" id="${LOGO_DEFS_ID}"><defs><symbol id="apple-pay-logo" viewBox="0 0 51 22"><path d="${LOGO_PATH}" fill="currentColor"/></symbol></defs></svg>`;
   document.body.prepend(tmp.firstElementChild);
 }
 export {

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

@@ -71,7 +71,7 @@ function ensureApplePayLogoSymbol() {
     return;
   }
   const tmp = document.createElement("div");
-  tmp.innerHTML = `<svg aria-hidden="true" style="display:none" id="${LOGO_DEFS_ID}"><defs><symbol id="apple-pay-logo" viewBox="0 0 51 22"><path d="${LOGO_PATH}" fill="white"/></symbol></defs></svg>`;
+  tmp.innerHTML = `<svg aria-hidden="true" style="display:none" id="${LOGO_DEFS_ID}"><defs><symbol id="apple-pay-logo" viewBox="0 0 51 22"><path d="${LOGO_PATH}" fill="currentColor"/></symbol></defs></svg>`;
   document.body.prepend(tmp.firstElementChild);
 }
 
@@ -109,16 +109,32 @@ var apple_pay_modal_template_default = `<style>
     position: absolute;
     top: 1.5rem;
     right: 1.3125rem;
-    background: none;
+    background: transparent;
     border: none;
     cursor: pointer;
     padding: 0;
+    width: 1.5rem;
+    height: 1.5rem;
     display: flex;
     align-items: center;
     justify-content: center;
+    color: var(--mb-colour-greyscale-london-20, #1a1a1a);
+    transition:
+      background-color ease-in-out 0.2s,
+      color ease-in-out 0.2s;
+  }
+
+  .apm__close:hover {
+    color: var(--mb-colour-base-chicago-30, #333333);
+  }
+
+  .apm__close:active {
+    background-color: var(--mb-colour-base-chicago-90, #e6e6e6);
+    color: var(--mb-colour-base-chicago-30, #333333);
   }
 
   .apm__close:focus {
+    background-color: var(--mb-colour-base-chicago-90, #e6e6e6);
     outline: solid 0.125rem var(--focus-border-color, #121212);
     border-radius: 0.25rem;
   }
@@ -301,10 +317,6 @@ var apple_pay_modal_template_default = `<style>
     cursor: pointer;
     color: #fff;
     text-align: center;
-    font-family: var(
-      --mb-typeface-sans,
-      var(--wall-type-system-sans, system-ui, sans-serif)
-    );
     font-size: 1.25rem;
     font-style: normal;
     font-weight: 500;
@@ -421,7 +433,7 @@ var apple_pay_modal_template_default = `<style>
             fill-rule="evenodd"
             clip-rule="evenodd"
             d="M18.75 6.60964L17.3904 5.25L12 10.6404L6.60964 5.25L5.25 6.60964L10.6404 12L5.25 17.3904L6.60964 18.75L12 13.3596L17.3904 18.75L18.75 17.3904L13.3596 12L18.75 6.60964Z"
-            fill="#333333"
+            fill="currentColor"
           />
         </g>
         <defs>
@@ -679,6 +691,8 @@ function renewalPeriodText(unit, duration) {
       return "";
   }
 }
+var LI_SEPARATOR = "\0LI_SEP\0";
+var P_SEPARATOR = "\0P_SEP\0";
 function buildTermsContext(offer, country) {
   const isUS = country === "US";
   const isCA = country === "CA";
@@ -715,19 +729,19 @@ function freeTrialTerms(offer, ctx) {
   const trialDuration = offer.subscription_options?.trial_period?.duration ?? 1;
   const trialDateStr = `on ${getRenewalDateText(trialUnit, trialDuration)}${ctx.verificationText}`;
   if (ctx.isUS) {
-    return `Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${trialDateStr} when your free trial ends, until cancelled{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal until cancelled. ${ctx.usCancelNote}${ctx.taxFootnote}`;
+    return `Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${trialDateStr} when your free trial ends, until cancelled${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal until cancelled. ${ctx.usCancelNote}${ctx.taxFootnote}`;
   }
-  return `Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${trialDateStr} when your free trial ends, until cancelled{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}${ctx.taxFootnote}`;
+  return `Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${trialDateStr} when your free trial ends, until cancelled${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}${ctx.taxFootnote}`;
 }
 function nytTerms(ctx) {
   const nytAccessText = "Your complimentary access to The New York Times is for one year only and does not auto-renew. We will send your instructions on how to redeem access to The New York Times by email.";
   if (ctx.isUS) {
-    return `Your subscription to <em>The Economist</em> auto-renews ${ctx.periodText} until cancelled{{liSeparator}}Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.renewalDateStr}{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal until cancelled. ${ctx.usCancelNote}${ctx.taxFootnote}{{pSeparator}}${nytAccessText}`;
+    return `Your subscription to <em>The Economist</em> auto-renews ${ctx.periodText} until cancelled${LI_SEPARATOR}Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.renewalDateStr}${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal until cancelled. ${ctx.usCancelNote}${ctx.taxFootnote}${P_SEPARATOR}${nytAccessText}`;
   }
   if (ctx.isCA) {
-    return `Your subscription to <em>The Economist</em> auto-renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.periodText} ${ctx.renewalDateStr} until cancelled.{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}${ctx.taxFootnote}{{pSeparator}}${nytAccessText}`;
+    return `Your subscription to <em>The Economist</em> auto-renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.periodText} ${ctx.renewalDateStr} until cancelled.${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}${ctx.taxFootnote}${P_SEPARATOR}${nytAccessText}`;
   }
-  return `Your subscription to <em>The Economist</em> auto-renews at ${ctx.renewalPriceText} ${ctx.periodText} ${ctx.renewalDateStr} until cancelled{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime} ${nytAccessText}`;
+  return `Your subscription to <em>The Economist</em> auto-renews at ${ctx.renewalPriceText} ${ctx.periodText} ${ctx.renewalDateStr} until cancelled${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime} ${nytAccessText}`;
 }
 function minTermContractTerms(offer, ctx) {
   const duePrice = formatPrice(offer.price.purchase, offer.price.currency_code);
@@ -737,28 +751,28 @@ function minTermContractTerms(offer, ctx) {
   const contractLength = mtDuration && mtUnit ? `${mtDuration} ${mtUnit}` : "";
   const initialContractText = contractLength ? `your initial ${contractLength} contract` : "your initial contract";
   const mtRenewalDateText = mtUnit && mtDuration ? getRenewalDateText(mtUnit, Number(mtDuration)) : ctx.renewalDateText;
-  return `You\u2019ll be charged ${duePrice} a month for the duration of ${initialContractText}{{liSeparator}}Your subscription auto-renews annually at ${ctx.renewalPriceText} a month on ${mtRenewalDateText} until cancelled{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}`;
+  return `You\u2019ll be charged ${duePrice} a month for the duration of ${initialContractText}${LI_SEPARATOR}Your subscription auto-renews annually at ${ctx.renewalPriceText} a month on ${mtRenewalDateText} until cancelled${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}`;
 }
 function paidTrialTerms(offer, ctx) {
   const trialUnit = offer.subscription_options?.trial_period?.unit ?? ctx.unit;
   const trialDuration = offer.subscription_options?.trial_period?.duration ?? ctx.duration;
   const trialDateText = getRenewalDateText(trialUnit, trialDuration);
   if (ctx.isUS) {
-    return `Your subscription auto-renews ${ctx.periodText} until cancelled{{liSeparator}}Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} on ${trialDateText} when your paid trial ends{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal. ${ctx.usCancelNote}${ctx.taxFootnote}`;
+    return `Your subscription auto-renews ${ctx.periodText} until cancelled${LI_SEPARATOR}Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} on ${trialDateText} when your paid trial ends${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal. ${ctx.usCancelNote}${ctx.taxFootnote}`;
   }
-  return `Your subscription auto-renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.periodText} on ${trialDateText} when your paid trial ends, until cancelled{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}${ctx.taxFootnote}`;
+  return `Your subscription auto-renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.periodText} on ${trialDateText} when your paid trial ends, until cancelled${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}${ctx.taxFootnote}`;
 }
 function autoRenewalTerms(ctx) {
   if (ctx.isUS) {
-    return `Your subscription auto-renews ${ctx.periodText} until cancelled{{liSeparator}}Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.renewalDateStr}{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal until cancelled. ${ctx.usCancelNote}${ctx.taxFootnote}`;
+    return `Your subscription auto-renews ${ctx.periodText} until cancelled${LI_SEPARATOR}Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.renewalDateStr}${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal until cancelled. ${ctx.usCancelNote}${ctx.taxFootnote}`;
   }
-  return `Your subscription auto-renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.periodText} ${ctx.renewalDateStr} until cancelled{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}${ctx.taxFootnote}`;
+  return `Your subscription auto-renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.periodText} ${ctx.renewalDateStr} until cancelled${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}${ctx.taxFootnote}`;
 }
 function noAutoRenewalTerms(ctx) {
   if (ctx.isUS || ctx.isCA) {
-    return `Your subscription does not renew automatically${ctx.taxFootnote}{{liSeparator}}`;
+    return `Your subscription does not renew automatically${ctx.taxFootnote}${LI_SEPARATOR}`;
   }
-  return `Your subscription does not renew automatically{{liSeparator}}`;
+  return `Your subscription does not renew automatically${LI_SEPARATOR}`;
 }
 function generateApplePayModalTerms(offer, country) {
   const ctx = buildTermsContext(offer, country);
@@ -781,9 +795,9 @@ function generateApplePayModalTerms(offer, country) {
   return noAutoRenewalTerms(ctx);
 }
 function renderTermsHtml(termsText) {
-  const renewalTextLists = termsText.split("{{liSeparator}}");
+  const renewalTextLists = termsText.split(LI_SEPARATOR);
   const lastPart = renewalTextLists.pop() || "";
-  const renewalTextParagraphs = lastPart.split("{{pSeparator}}");
+  const renewalTextParagraphs = lastPart.split(P_SEPARATOR);
   const ulHtml = `<ul class="apm__terms-bullets">${renewalTextLists.map((value) => `<li>${value}</li>`).join("")}</ul>`;
   const paragraphHtml = renewalTextParagraphs.filter(Boolean).map((value) => `<p class="apm__terms-legal">${value}</p>`).join("");
   return ulHtml + paragraphHtml;