@economist/web-apple-pay 1.5.0 → 1.6.0

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

@@ -76,322 +76,7 @@ function ensureApplePayLogoSymbol() {
 }
 
 // src/templates/apple-pay-modal.template.html
-var apple_pay_modal_template_default = `<style>
-  .apm-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 97;
-    background: rgba(13, 13, 13, 0.7);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: var(--wall-gutter);
-    box-sizing: border-box;
-  }
-
-  .apm {
-    position: relative;
-    background: #fff;
-    border-radius: 8px 8px 0 0;
-    border: 1px solid #d9d9d9;
-    padding: 24px;
-    width: 400px;
-    max-width: 400px;
-    box-sizing: border-box;
-    font-family: var(--wall-type-system-sans);
-    box-shadow: 0 4px 16px 0 rgba(13, 13, 13, 0.15);
-  }
-
-  .apm__close {
-    position: absolute;
-    top: 24px;
-    right: 21px;
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .apm__close:focus {
-    outline: solid 2px var(--focus-border-color, #121212);
-    border-radius: 0.25rem;
-  }
-
-  .apm__offer-name {
-    font-family: var(--wall-type-system-sans);
-    font-size: 1.4375rem;
-    font-weight: 500;
-    color: #0d0d0d;
-    line-height: 28px;
-    font-style: normal;
-    margin: 0 1.5rem 0.5rem 0;
-  }
-
-  .apm__due-today {
-    color: #1a1a1a;
-    font-family: var(--wall-type-system-sans);
-    font-size: 15px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px;
-    margin: 0 0 1rem 0;
-  }
-
-  .apm__rule {
-    border: none;
-    border-top: 1px solid #d9d9d9;
-    margin: 0 0 1rem 0;
-  }
-
-  .apm__terms {
-    color: #1a1a1a;
-    font-family: var(--wall-type-system-sans);
-    font-size: 15px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 1.333;
-    margin: 0 0 1rem 0;
-  }
-
-  .apm__terms-bullets {
-    list-style: disc outside;
-    padding-left: 1.25rem;
-    margin: 0 0 0.75rem 0;
-  }
-
-  .apm__terms-bullets li {
-    margin-bottom: 0.375rem;
-  }
-
-  .apm__terms-legal {
-    margin: 0;
-  }
-
-  .apm__checkbox-label {
-    display: flex;
-    align-items: flex-start;
-    gap: 12px;
-    font-family: var(--wall-type-system-sans);
-    font-size: 0.9375rem;
-    color: #0d0d0d;
-    line-height: 1.4;
-    cursor: pointer;
-    margin: 0 0 8px 0;
-  }
-
-  .apm__checkbox-wrapper {
-    position: relative;
-    flex-shrink: 0;
-    width: 20px;
-    height: 20px;
-    margin-top: 1px;
-  }
-
-  .apm__checkbox-input {
-    position: absolute;
-    opacity: 0;
-    width: 100%;
-    height: 100%;
-    cursor: pointer;
-    margin: 0;
-    z-index: 1;
-  }
-
-  .apm__checkbox-custom {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 20px;
-    height: 20px;
-    pointer-events: none;
-  }
-
-  .apm__checkbox-custom svg {
-    display: none;
-    width: 20px;
-    height: 20px;
-  }
-
-  .apm__checkbox-input:not(:checked)~.apm__checkbox-custom .svg-unchecked {
-    display: block;
-  }
-
-  .apm__checkbox-input:checked~.apm__checkbox-custom .svg-checked {
-    display: block;
-  }
-
-  .apm__checkbox-label--error .apm__checkbox-input:not(:checked)~.apm__checkbox-custom .svg-unchecked {
-    display: none;
-  }
-
-  .apm__checkbox-label--error .apm__checkbox-input:not(:checked)~.apm__checkbox-custom .svg-error {
-    display: block;
-  }
-
-  .apm__checkbox-input:focus-visible~.apm__checkbox-custom {
-    outline: solid 2px #c91d42;
-    outline-offset: 2px;
-    border-radius: 4px;
-  }
-
-  .apm__checkbox-label a {
-    color: #1a1a1a;
-    font-weight: 700;
-    text-decoration: underline;
-  }
-
-  .apm__error {
-    display: none;
-    align-items: center;
-    gap: 12px;
-    color: #0d0d0d;
-    font-family: var(--wall-type-system-sans);
-    font-size: 17px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 24px;
-    margin-bottom: 16px;
-  }
-
-  .apm__error--visible {
-    display: flex;
-  }
-
-  .apm__cta {
-    display: flex;
-    width: 100%;
-    height: 44px;
-    padding: 6px 16px;
-    justify-content: center;
-    align-items: center;
-    gap: 6px;
-    border-radius: 4px;
-    background: #000;
-    border: none;
-    cursor: pointer;
-    color: #fff;
-    text-align: center;
-    font-family: 'SF Pro', var(--wall-type-system-sans, system-ui, sans-serif);
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: normal;
-  }
-
-  .apm__cta svg {
-    flex-shrink: 0;
-    display: block;
-  }
-
-  @media (min-width: 360px) and (max-width: 600px) {
-    .apm {
-      width: 390px;
-      max-width: 390px;
-    }
-  }
-
-  @media (min-width: 601px) {
-    .apm {
-      border-radius: 8px;
-    }
-  }
-
-  @media (max-width: 359px) {
-    .apm {
-      width: 320px;
-      max-width: 320px;
-    }
-  }
-
-  @media (max-width: 419px) {
-    .apm__cta {
-      font-size: 18px;
-    }
-  }
-</style>
-
-<div class="apm-overlay" id="apple-pay-modal-overlay">
-  <div class="apm" role="dialog" aria-modal="true" aria-labelledby="apple-pay-modal-offer-name" id="apple-pay-modal"
-    tabindex="-1">
-    <button class="apm__close" id="apple-pay-modal-close" aria-label="Close">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-        <g clip-path="url(#clip0_15712_93054)">
-          <rect width="24" height="24" fill="white" fill-opacity="0.01" />
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H24V24H0V0Z" fill="white" fill-opacity="0.01" />
-          <path 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" />
-        </g>
-        <defs>
-          <clipPath id="clip0_15712_93054">
-            <rect width="24" height="24" fill="white" />
-          </clipPath>
-        </defs>
-      </svg>
-    </button>
-    <p class="apm__offer-name" id="apple-pay-modal-offer-name"></p>
-    <p class="apm__due-today" id="apple-pay-modal-due-today"></p>
-    <hr class="apm__rule" />
-    <div class="apm__terms" id="apple-pay-modal-terms"></div>
-    <label class="apm__checkbox-label" id="apple-pay-modal-checkbox-label" for="apple-pay-modal-checkbox">
-      <div class="apm__checkbox-wrapper">
-        <input class="apm__checkbox-input" type="checkbox" id="apple-pay-modal-checkbox" />
-        <span class="apm__checkbox-custom">
-          <svg class="svg-unchecked" width="24" height="24" viewBox="0 0 24 24" fill="none"
-            xmlns="http://www.w3.org/2000/svg">
-            <path
-              d="M6 2.5H18C19.933 2.5 21.5 4.067 21.5 6V18C21.5 19.933 19.933 21.5 18 21.5H6C4.067 21.5 2.5 19.933 2.5 18V6C2.5 4.067 4.067 2.5 6 2.5Z"
-              fill="white" stroke="#595959" />
-          </svg>
-          <svg class="svg-checked" width="24" height="24" viewBox="0 0 24 24" fill="none"
-            xmlns="http://www.w3.org/2000/svg">
-            <g clip-path="url(#clip0_20014_9555)">
-              <path
-                d="M2 6C2 3.79086 3.79086 2 6 2H18C20.2091 2 22 3.79086 22 6V18C22 20.2091 20.2091 22 18 22H6C3.79086 22 2 20.2091 2 18V6Z"
-                fill="#333333" />
-              <path d="M10.2857 17L6 12.6814L7.20857 11.4635L10.2857 14.5557L16.7914 8L18 9.22649L10.2857 17Z"
-                fill="white" />
-            </g>
-            <defs>
-              <clipPath id="clip0_20014_9555">
-                <path
-                  d="M2 6C2 3.79086 3.79086 2 6 2H18C20.2091 2 22 3.79086 22 6V18C22 20.2091 20.2091 22 18 22H6C3.79086 22 2 20.2091 2 18V6Z"
-                  fill="white" />
-              </clipPath>
-            </defs>
-          </svg>
-          <svg class="svg-error" width="24" height="24" viewBox="0 0 24 24" fill="none"
-            xmlns="http://www.w3.org/2000/svg">
-            <path
-              d="M6 2.5H18C19.933 2.5 21.5 4.067 21.5 6V18C21.5 19.933 19.933 21.5 18 21.5H6C4.067 21.5 2.5 19.933 2.5 18V6C2.5 4.067 4.067 2.5 6 2.5Z"
-              fill="white" stroke="#C91D42" stroke-width="2" />
-          </svg>
-        </span>
-      </div>
-      <span id="apple-pay-modal-checkbox-text"></span>
-    </label>
-    <div class="apm__error" id="apple-pay-modal-error" role="alert">
-      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path fill-rule="evenodd" clip-rule="evenodd"
-          d="M10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2ZM0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10ZM11 13C11 13.5523 10.5523 14 10 14C9.44772 14 9 13.5523 9 13C9 12.4477 9.44772 12 10 12C10.5523 12 11 12.4477 11 13ZM10 6C10.5523 6 11 6.44772 11 7V10C11 10.5523 10.5523 11 10 11C9.44772 11 9 10.5523 9 10V7C9 6.44772 9.44772 6 10 6Z"
-          fill="#C91D42" />
-      </svg>
-      Please accept the terms to continue
-    </div>
-    <button class="apm__cta" id="apple-pay-modal-cta">
-      Continue with
-      <svg width="51" height="22" aria-label="Apple Pay" role="img">
-        <use href="#apple-pay-logo" />
-      </svg>
-    </button>
-  </div>
-</div>`;
+var apple_pay_modal_template_default = '<style>\n  .apm-overlay {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    z-index: 97;\n    background: rgba(13, 13, 13, 0.7);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--wall-gutter, 2rem);\n    box-sizing: border-box;\n  }\n\n  .apm {\n    position: relative;\n    background: #fff;\n    border-radius: 0.5rem 0.5rem 0 0;\n    border: 0.0625rem solid #d9d9d9;\n    padding: var(--mb-spacing-lg, 1.5rem);\n    width: 25rem;\n    max-width: 25rem;\n    box-sizing: border-box;\n    font-family: var(--mb-typeface-sans, var(--wall-type-system-sans));\n    box-shadow: 0 0.25rem 1rem 0 rgba(13, 13, 13, 0.15);\n  }\n\n  .apm__close {\n    position: absolute;\n    top: 1.5rem;\n    right: 1.3125rem;\n    background: none;\n    border: none;\n    cursor: pointer;\n    padding: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .apm__close:focus {\n    outline: solid 0.125rem var(--focus-border-color, #121212);\n    border-radius: 0.25rem;\n  }\n\n  .apm__offer-name {\n    font-family: var(--mb-typeface-sans, var(--wall-type-system-sans));\n    font-size: var(--mb-typestyle-title-3-size, 1.25rem);\n    font-weight: 500;\n    color: var(--mb-colour-greyscale-london-5, #0d0d0d);\n    line-height: var(--mb-typestyle-title-3-leading, 1.75rem);\n    font-style: normal;\n    margin: 0 1.5rem 0.5rem 0;\n  }\n\n  .apm__due-today {\n    color: #1a1a1a;\n    font-family: var(--mb-typeface-sans, var(--wall-type-system-sans));\n    font-size: var(--mb-typestyle-label-2-size, 0.9375rem);\n    font-style: normal;\n    font-weight: 400;\n    line-height: var(--mb-typestyle-label-2-leading, 1.25rem);\n    margin: 0 0 0.75rem 0;\n  }\n\n  .apm__rule {\n    border: none;\n    border-top: 0.0625rem solid #d9d9d9;\n    margin: 0 0 1rem 0;\n  }\n\n  .apm__terms {\n    color: #1a1a1a;\n    font-family: var(--mb-typeface-sans, var(--wall-type-system-sans));\n    font-size: var(--mb-typestyle-label-2-size, 0.9375rem);\n    font-style: normal;\n    font-weight: 400;\n    line-height: var(--mb-typestyle-label-2-leading, 1.25rem);\n    margin: 0 0 1rem 0;\n  }\n\n  .apm__terms-bullets {\n    list-style: disc outside;\n    padding-left: 1.25rem;\n    margin: 0 0 0.75rem 0;\n  }\n\n  .apm__terms-bullets li {\n    margin-bottom: 0.375rem;\n  }\n\n  .apm__terms-legal {\n    margin: 0;\n  }\n\n  .apm__passive-terms {\n    font-family: var(--wall-type-system-sans);\n    font-size: 0.9375rem;\n    color: #0d0d0d;\n    line-height: 1.4;\n    margin: 0 0 8px 0;\n  }\n\n  .apm__passive-terms a {\n    color: #1a1a1a;\n    font-weight: 700;\n    text-decoration: underline;\n  }\n\n  .apm__checkbox-label {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--mb-spacing-sm, 0.5rem);\n    font-family: var(--mb-typeface-sans, var(--wall-type-system-sans));\n    font-size: var(--mb-typestyle-label-2-size, 0.9375rem);\n    color: var(--mb-colour-greyscale-london-20, #1a1a1a);\n    line-height: var(--mb-typestyle-label-2-leading, 1.25rem);\n    cursor: pointer;\n    margin: 0 0 1.5rem 0;\n  }\n\n  .apm__checkbox-label--error {\n    margin-bottom: 0.25rem;\n  }\n\n  .apm__checkbox-wrapper {\n    position: relative;\n    flex-shrink: 0;\n    width: 1.25rem;\n    height: 1.25rem;\n    margin-top: 0.0625rem;\n  }\n\n  .apm__checkbox-input {\n    position: absolute;\n    opacity: 0;\n    width: 100%;\n    height: 100%;\n    cursor: pointer;\n    margin: 0;\n    z-index: 1;\n  }\n\n  .apm__checkbox-custom {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 1.25rem;\n    height: 1.25rem;\n    pointer-events: none;\n  }\n\n  .apm__checkbox-custom svg {\n    display: none;\n    width: 1.25rem;\n    height: 1.25rem;\n  }\n\n  .apm__checkbox-input:not(:checked) ~ .apm__checkbox-custom .svg-unchecked {\n    display: block;\n  }\n\n  .apm__checkbox-input:checked ~ .apm__checkbox-custom .svg-checked {\n    display: block;\n  }\n\n  .apm__checkbox-label--error\n    .apm__checkbox-input:not(:checked)\n    ~ .apm__checkbox-custom\n    .svg-unchecked {\n    display: none;\n  }\n\n  .apm__checkbox-label--error\n    .apm__checkbox-input:not(:checked)\n    ~ .apm__checkbox-custom\n    .svg-error {\n    display: block;\n  }\n\n  .apm__checkbox-input:focus-visible ~ .apm__checkbox-custom {\n    outline: solid 0.125rem #c91d42;\n    outline-offset: 0.125rem;\n    border-radius: 0.25rem;\n  }\n\n  .apm__checkbox-label a {\n    color: #1a1a1a;\n    font-weight: 700;\n    text-decoration: underline;\n  }\n\n  .apm__error {\n    display: none;\n    align-items: center;\n    gap: 0.75rem;\n    color: var(--mb-colour-greyscale-london-5, #0d0d0d);\n    font-family: var(--mb-typeface-sans, var(--wall-type-system-sans));\n    font-size: 1.0625rem;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 1.5rem;\n    margin-bottom: 1rem;\n  }\n\n  .apm__error--visible {\n    display: flex;\n  }\n\n  .apm__cta {\n    display: flex;\n    width: 100%;\n    height: 2.75rem;\n    padding: 0.375rem 1rem;\n    justify-content: center;\n    align-items: center;\n    gap: 0.375rem;\n    border-radius: 0.25rem;\n    background: #000;\n    border: none;\n    cursor: pointer;\n    color: #fff;\n    text-align: center;\n    font-family: var(\n      --mb-typeface-sans,\n      var(--wall-type-system-sans, system-ui, sans-serif)\n    );\n    font-size: 1.25rem;\n    font-style: normal;\n    font-weight: 500;\n    line-height: normal;\n  }\n\n  .apm__cta svg {\n    flex-shrink: 0;\n    display: block;\n  }\n\n  @media (min-width: 22.5rem) and (max-width: 37.5rem) {\n    .apm {\n      width: 24.375rem;\n      max-width: 24.375rem;\n    }\n  }\n\n  @media (min-width: 37.5625rem) {\n    .apm {\n      border-radius: 0.5rem;\n    }\n  }\n\n  @media (max-width: 22.4375rem) {\n    .apm {\n      width: 20rem;\n      max-width: 20rem;\n    }\n  }\n\n  @media (max-width: 26.1875rem) {\n    .apm__cta {\n      font-size: 1.125rem;\n    }\n  }\n</style>\n\n<div class="apm-overlay" id="apple-pay-modal-overlay">\n  <div\n    class="apm"\n    role="dialog"\n    aria-modal="true"\n    aria-labelledby="apple-pay-modal-offer-name"\n    id="apple-pay-modal"\n    tabindex="-1"\n  >\n    <button class="apm__close" id="apple-pay-modal-close" aria-label="Close">\n      <svg\n        aria-hidden="true"\n        xmlns="http://www.w3.org/2000/svg"\n        width="24"\n        height="24"\n        viewBox="0 0 24 24"\n        fill="none"\n      >\n        <g clip-path="url(#clip0_15712_93054)">\n          <rect width="24" height="24" fill="white" fill-opacity="0.01" />\n          <path\n            fill-rule="evenodd"\n            clip-rule="evenodd"\n            d="M0 0H24V24H0V0Z"\n            fill="white"\n            fill-opacity="0.01"\n          />\n          <path\n            fill-rule="evenodd"\n            clip-rule="evenodd"\n            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"\n            fill="#333333"\n          />\n        </g>\n        <defs>\n          <clipPath id="clip0_15712_93054">\n            <rect width="24" height="24" fill="white" />\n          </clipPath>\n        </defs>\n      </svg>\n    </button>\n    <p class="apm__offer-name" id="apple-pay-modal-offer-name"></p>\n    <p class="apm__due-today" id="apple-pay-modal-due-today"></p>\n    <hr class="apm__rule" />\n    <div class="apm__terms" id="apple-pay-modal-terms"></div>\n    <p class="apm__passive-terms" id="apple-pay-modal-passive-terms"></p>\n    <label\n      class="apm__checkbox-label"\n      id="apple-pay-modal-checkbox-label"\n      for="apple-pay-modal-checkbox"\n    >\n      <div class="apm__checkbox-wrapper">\n        <input\n          class="apm__checkbox-input"\n          type="checkbox"\n          id="apple-pay-modal-checkbox"\n        />\n        <span class="apm__checkbox-custom">\n          <svg\n            aria-hidden="true"\n            class="svg-unchecked"\n            width="24"\n            height="24"\n            viewBox="0 0 24 24"\n            fill="none"\n            xmlns="http://www.w3.org/2000/svg"\n          >\n            <path\n              d="M6 2.5H18C19.933 2.5 21.5 4.067 21.5 6V18C21.5 19.933 19.933 21.5 18 21.5H6C4.067 21.5 2.5 19.933 2.5 18V6C2.5 4.067 4.067 2.5 6 2.5Z"\n              fill="white"\n              stroke="#595959"\n            />\n          </svg>\n          <svg\n            aria-hidden="true"\n            class="svg-checked"\n            width="24"\n            height="24"\n            viewBox="0 0 24 24"\n            fill="none"\n            xmlns="http://www.w3.org/2000/svg"\n          >\n            <g clip-path="url(#clip0_20014_9555)">\n              <path\n                d="M2 6C2 3.79086 3.79086 2 6 2H18C20.2091 2 22 3.79086 22 6V18C22 20.2091 20.2091 22 18 22H6C3.79086 22 2 20.2091 2 18V6Z"\n                fill="#333333"\n              />\n              <path\n                d="M10.2857 17L6 12.6814L7.20857 11.4635L10.2857 14.5557L16.7914 8L18 9.22649L10.2857 17Z"\n                fill="white"\n              />\n            </g>\n            <defs>\n              <clipPath id="clip0_20014_9555">\n                <path\n                  d="M2 6C2 3.79086 3.79086 2 6 2H18C20.2091 2 22 3.79086 22 6V18C22 20.2091 20.2091 22 18 22H6C3.79086 22 2 20.2091 2 18V6Z"\n                  fill="white"\n                />\n              </clipPath>\n            </defs>\n          </svg>\n          <svg\n            aria-hidden="true"\n            class="svg-error"\n            width="24"\n            height="24"\n            viewBox="0 0 24 24"\n            fill="none"\n            xmlns="http://www.w3.org/2000/svg"\n          >\n            <path\n              d="M6 2.5H18C19.933 2.5 21.5 4.067 21.5 6V18C21.5 19.933 19.933 21.5 18 21.5H6C4.067 21.5 2.5 19.933 2.5 18V6C2.5 4.067 4.067 2.5 6 2.5Z"\n              fill="white"\n              stroke="#C91D42"\n              stroke-width="2"\n            />\n          </svg>\n        </span>\n      </div>\n      <span id="apple-pay-modal-checkbox-text"></span>\n    </label>\n    <div class="apm__error" id="apple-pay-modal-error" role="alert">\n      <svg\n        aria-hidden="true"\n        width="20"\n        height="20"\n        viewBox="0 0 20 20"\n        fill="none"\n        xmlns="http://www.w3.org/2000/svg"\n      >\n        <path\n          fill-rule="evenodd"\n          clip-rule="evenodd"\n          d="M10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2ZM0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10ZM11 13C11 13.5523 10.5523 14 10 14C9.44772 14 9 13.5523 9 13C9 12.4477 9.44772 12 10 12C10.5523 12 11 12.4477 11 13ZM10 6C10.5523 6 11 6.44772 11 7V10C11 10.5523 10.5523 11 10 11C9.44772 11 9 10.5523 9 10V7C9 6.44772 9.44772 6 10 6Z"\n          fill="#C91D42"\n        />\n      </svg>\n      Please accept the terms to continue\n    </div>\n    <button class="apm__cta" id="apple-pay-modal-cta">\n      Continue with\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</div>\n\n';
 
 // src/apple-pay-modal.ts
 function getRenewalDateText(unit, duration) {
@@ -457,6 +142,12 @@ function getCheckboxTermsHtml(isNYT, isLoggedIn, autoRenewal) {
   }
   return `I accept the ${TERMS_LINK}${autoRenewalClause} and acknowledge the ${PRIVACY_LINK}, and understand that by continuing, an account will be created for me if I don\u2019t already have one.`;
 }
+function getPassiveTermsHtml(isNYT, isLoggedIn, autoRenewal) {
+  const accountClause = isLoggedIn ? " " : "\u2019ll get an account and ";
+  const autoRenewalClause = autoRenewal ? "above auto-renewal terms, " : "";
+  const nytPrefix = isNYT ? " your subscription to The Economist," : "";
+  return `By purchasing${nytPrefix} you${accountClause}agree to the ${autoRenewalClause}${TERMS_LINK} and acknowledge the ${PRIVACY_LINK}.`;
+}
 function renewalPeriodText(unit, duration) {
   switch (unit) {
     case "week":
@@ -679,10 +370,21 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
     const errorElement = this.querySelector(
       "#apple-pay-modal-error"
     );
+    const passiveTermsElement = this.querySelector(
+      "#apple-pay-modal-passive-terms"
+    );
     if (!isUS) {
       checkboxLabel?.remove();
       errorElement?.remove();
+      if (passiveTermsElement) {
+        passiveTermsElement.innerHTML = getPassiveTermsHtml(
+          isOfferNYT,
+          isLoggedIn,
+          isAutoRenewal
+        );
+      }
     } else {
+      passiveTermsElement?.remove();
       checkbox?.addEventListener("change", () => {
         if (checkbox.checked) {
           errorElement?.classList.remove("apm__error--visible");
@@ -737,7 +439,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
 };
 
 // src/templates/apple-pay-button.template.html
-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(--wall-type-system-sans, system-ui, sans-serif);\n    font-size: 17px;\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';
+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;
@@ -842,6 +544,27 @@ var apiFetch = async (path, options = {}) => {
   }
   return response.json();
 };
+var getPaymentOptions = (data) => {
+  const { sku, countryCode, currencyCode, checkoutUrl } = data;
+  const params = new URLSearchParams({ checkoutUrl });
+  return apiFetch(
+    `/ecomb2c/v1/payment-options/sku/${sku}/${countryCode}/${currencyCode}?${params}`,
+    { method: "GET" }
+  );
+};
+var validateAppleMerchant = (data) => {
+  return apiFetch("/v1/wallet/validate-merchant", {
+    method: "POST",
+    body: JSON.stringify(data)
+  });
+};
+var performPurchase = (data) => {
+  return apiFetch("/v1/wallet/purchase", {
+    method: "POST",
+    body: JSON.stringify(data),
+    credentials: "include"
+  });
+};
 
 // src/clients/payment-checkout/session.ts
 var getExpressCheckoutSession = () => {
@@ -851,9 +574,732 @@ 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 decodeSku = (sku) => {
+  try {
+    return atob(sku.substring(sku.indexOf("-") + 1));
+  } catch {
+    return 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);
+  return url.pathname + url.search;
+};
+var redirectToCheckoutFallback = (params) => {
+  const url = new URL(window.location.href);
+  url.pathname = "/checkout";
+  url.searchParams.set("lmo_offer", params.skuId);
+  if (params.inlineError)
+    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);
+  return url.pathname + url.search;
+};
+
+// src/utils/recaptcha.ts
+var loadRecaptchaScript = (siteKey) => {
+  return new Promise((resolve, reject) => {
+    if (typeof grecaptcha !== "undefined") return resolve();
+    const existingScript = document.querySelector(
+      'script[src*="recaptcha/api.js"]'
+    );
+    if (existingScript) {
+      existingScript.addEventListener("load", () => resolve());
+      existingScript.addEventListener(
+        "error",
+        () => reject(new Error("Failed to load existing reCAPTCHA script"))
+      );
+      return;
+    }
+    const script = document.createElement("script");
+    script.src = `https://www.google.com/recaptcha/api.js?render=${siteKey}`;
+    script.async = true;
+    script.defer = true;
+    script.onload = () => resolve();
+    script.onerror = () => reject(new Error("Failed to load reCAPTCHA script"));
+    document.head.appendChild(script);
+  });
+};
+var getRecaptchaToken = async (action) => {
+  const siteKey = getApplePayConfig()?.recaptchaSiteKey;
+  if (!siteKey) {
+    throw new Error(
+      "[web-apple-pay] Missing recaptchaSiteKey. Call configureApplePay({ recaptchaSiteKey, ... }) before initiating Apple Pay."
+    );
+  }
+  await loadRecaptchaScript(siteKey);
+  return new Promise((resolve, reject) => {
+    grecaptcha.ready(() => {
+      grecaptcha.execute(siteKey, { action }).then(resolve).catch(reject);
+    });
+  });
+};
+var getPurchaseRecaptchaTokens = async () => {
+  const [checkEligibility, newBasket, registerUser] = await Promise.all([
+    getRecaptchaToken("checkEligibility"),
+    getRecaptchaToken("newBasket"),
+    getRecaptchaToken("registerUser")
+  ]);
+  return { checkEligibility, newBasket, registerUser };
+};
+
+// src/utils/expressCheckoutTracking.ts
+var EXPRESS_CHECKOUT_EVENTS = {
+  /** Wallet button displayed */
+  IMPRESSION: "express_wallet_impression",
+  /** Wallet button clicked */
+  BUTTON_CLICK: "express_wallet_click",
+  /** Apple Pay sheet opened */
+  SHEET_OPEN: "wallet_payment_sheet_open",
+  /** Payment authorised by the user in the Apple Pay sheet */
+  AUTHORISED: "wallet_payment_authorised",
+  /** Purchase completed — BFF returned success */
+  SUCCESS: "wallet_payment_success",
+  /** Payment failed — BFF returned error */
+  FAILURE: "wallet_payment_failure",
+  /** Redirect to standard checkout (any fallback path) */
+  FALLBACK_CHECKOUT: "fallback_checkout"
+};
+var getDevice = () => {
+  const ua = navigator.userAgent;
+  if (/tablet|ipad/i.test(ua)) return "tablet";
+  if (/mobile|iphone|android/i.test(ua)) return "mobile";
+  return "desktop";
+};
+var emitTedlEvent = (event) => {
+  window.tedl = window.tedl ?? {};
+  window.tedl.events = window.tedl.events ?? [];
+  window.tedl.events.push(event);
+};
+var track = (action, extra) => {
+  emitTedlEvent({
+    name: "user.journey",
+    type: "checkout",
+    action,
+    info: "applepay",
+    ...extra
+  });
+};
+var trackExpressWalletImpression = (skuId, { entryPoint, country }) => {
+  track(EXPRESS_CHECKOUT_EVENTS.IMPRESSION, {
+    wallet_type: "apple_pay",
+    entry_point: entryPoint,
+    sku_id: skuId,
+    country,
+    device: getDevice()
+  });
+};
+var trackExpressWalletClick = (skuId) => {
+  track(EXPRESS_CHECKOUT_EVENTS.BUTTON_CLICK, { sku_id: skuId });
+};
+var trackWalletPaymentSheetOpen = (skuId) => {
+  track(EXPRESS_CHECKOUT_EVENTS.SHEET_OPEN, { sku_id: skuId });
+};
+var trackWalletPaymentAuthorised = (skuId) => {
+  track(EXPRESS_CHECKOUT_EVENTS.AUTHORISED, { sku_id: skuId });
+};
+var trackWalletPaymentSuccess = (skuId, basketId) => {
+  track(EXPRESS_CHECKOUT_EVENTS.SUCCESS, {
+    sku_id: skuId,
+    basket_id: basketId
+  });
+};
+var trackWalletPaymentFailure = (skuId, reason) => {
+  track(EXPRESS_CHECKOUT_EVENTS.FAILURE, {
+    sku_id: skuId,
+    failure_reason: reason
+  });
+};
+var trackFallbackCheckout = (skuId) => {
+  track(EXPRESS_CHECKOUT_EVENTS.FALLBACK_CHECKOUT, { sku_id: skuId });
+};
+var trackValidationFieldError = (field, errorType) => {
+  track(`validation_${field}_${errorType}`, {});
+};
+
+// src/clients/payment-checkout/messages.ts
+var MSG_MISSING_REQUIRED_FIELD = "Missing required field";
+var MSG_EMAIL_WRONG_FORMAT = "That email doesn\u2019t look right. Please enter a valid email address.";
+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 startApplePaySession(config) {
+  const paymentRequest = {
+    countryCode: config.countryCode,
+    currencyCode: config.currencyCode,
+    merchantCapabilities: ["supports3DS"],
+    supportedNetworks: config.supportedNetworks,
+    total: {
+      label: config.totalLabel,
+      amount: config.totalAmount
+    },
+    requiredBillingContactFields: ["postalAddress", "name"],
+    // Only request email from Apple Pay sheet if user is NOT logged in
+    ...!config.userLoggedIn && { requiredShippingContactFields: ["email"] }
+  };
+  const session = new ApplePaySession(3, paymentRequest);
+  session.onvalidatemerchant = async (event) => {
+    try {
+      const validationHost = new URL(event.validationURL).host;
+      if (!validationHost.endsWith("apple.com")) {
+        trackFallbackCheckout(config.skuId);
+        session.abort();
+        window.location.href = redirectToCheckoutFallback({
+          skuId: config.skuId,
+          returnUrl: config.returnUrl,
+          inlineError: MSG_PAYMENT_GENERIC_ERROR
+        });
+        return;
+      }
+      const recaptchaToken = await getRecaptchaToken("verifyMerchant");
+      const response = await validateAppleMerchant({
+        validationURL: event.validationURL,
+        recaptchaToken
+      });
+      if (!response?.merchantSession) {
+        trackFallbackCheckout(config.skuId);
+        session.abort();
+        window.location.href = redirectToCheckoutFallback({
+          skuId: config.skuId,
+          returnUrl: config.returnUrl,
+          inlineError: MSG_PAYMENT_GENERIC_ERROR
+        });
+        return;
+      }
+      session.completeMerchantValidation(response.merchantSession);
+    } catch {
+      trackFallbackCheckout(config.skuId);
+      session.abort();
+      window.location.href = redirectToCheckoutFallback({
+        skuId: config.skuId,
+        returnUrl: config.returnUrl,
+        inlineError: MSG_PAYMENT_GENERIC_ERROR
+      });
+    }
+  };
+  session.onpaymentauthorized = (event) => {
+    trackWalletPaymentAuthorised(config.skuId);
+    config.onPaymentAuthorized(event, session);
+  };
+  session.oncancel = () => {
+    config.onCancel?.();
+  };
+  trackWalletPaymentSheetOpen(config.skuId);
+  session.begin();
+}
+
+// src/clients/payment-checkout/contact-validation.ts
+var pushFieldError = (errors, billingOrShippingContact = "billing", field, errorType, errorText) => {
+  const errorCode = billingOrShippingContact === "billing" ? "billingContactInvalid" : "shippingContactInvalid";
+  errors.push(new ApplePayError(errorCode, field, errorText));
+  trackValidationFieldError(field, errorType);
+  return "";
+};
+var pushRequiredFieldError = (errors, billingOrShippingContact = "billing", field) => {
+  return pushFieldError(
+    errors,
+    billingOrShippingContact,
+    field,
+    "required",
+    MSG_MISSING_REQUIRED_FIELD
+  );
+};
+var ContactValidationError = class extends Error {
+  constructor(errors) {
+    super(MSG_CONTACT_VALIDATION_INTERNAL);
+    this.errors = errors;
+  }
+};
+
+// src/clients/payment-checkout/billing-contact-details.ts
+var countriesWithoutCityField = ["KY", "CK", "NR", "TC"];
+var countriesRequiringAllFields = ["US", "CA", "GB"];
+var resolveCountryConfig = (country) => {
+  const hasCityField = !countriesWithoutCityField.includes(country);
+  const requiresStateAndPostcode = countriesRequiringAllFields.includes(country);
+  return {
+    hasCityField,
+    requiresStateAndPostcode,
+    // if there is no city field, we require state and use it in place of city
+    requiresStateField: !hasCityField || requiresStateAndPostcode
+  };
+};
+var validateAddressFields = (errors, contact, { hasCityField, requiresStateAndPostcode, requiresStateField }) => {
+  const locality = !hasCityField ? contact.administrativeArea : contact.locality;
+  if (!contact.addressLines?.at(0)?.trim()) {
+    pushRequiredFieldError(errors, "billing", "addressLines");
+  }
+  if (!locality?.trim() && hasCityField) {
+    pushRequiredFieldError(errors, "billing", "locality");
+  }
+  if (!contact.administrativeArea?.trim() && requiresStateField) {
+    pushRequiredFieldError(errors, "billing", "administrativeArea");
+  }
+  if (!contact.postalCode?.trim() && requiresStateAndPostcode) {
+    pushRequiredFieldError(errors, "billing", "postalCode");
+  }
+};
+var validateNameFields = (errors, contact) => {
+  const firstName = contact.givenName?.trim() || "";
+  const lastName = contact.familyName?.trim() || "";
+  if (!firstName || !lastName) {
+    pushRequiredFieldError(errors, "billing", "name");
+  }
+  return { firstName, lastName };
+};
+var validateCountrySupport = (errors, country, supportedBillingCountries) => {
+  if (!supportedBillingCountries.includes(country)) {
+    pushFieldError(
+      errors,
+      "billing",
+      "countryCode",
+      "not-supported",
+      MSG_UNSUPPORTED_BILLING_COUNTRY
+    );
+  }
+};
+var billingContactDetails = (contact, supportedBillingCountries) => {
+  const errors = [];
+  const country = contact.countryCode?.toUpperCase() || pushRequiredFieldError(errors, "billing", "country");
+  const config = resolveCountryConfig(country);
+  validateAddressFields(errors, contact, config);
+  const { firstName, lastName } = validateNameFields(errors, contact);
+  validateCountrySupport(errors, country, supportedBillingCountries);
+  if (errors.length > 0) {
+    throw new ContactValidationError(errors);
+  }
+  return { firstName, lastName };
+};
+
+// src/clients/payment-checkout/shipping-contact-details.ts
+var EMAIL_FORMAT_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+var shippingContactDetails = (shippingContact) => {
+  const errors = [];
+  let emailAddress = "";
+  if (shippingContact?.emailAddress === void 0 || shippingContact?.emailAddress === "") {
+    pushRequiredFieldError(errors, "shipping", "emailAddress");
+  } else {
+    emailAddress = shippingContact.emailAddress.trim();
+    if (emailAddress.length > 80) {
+      pushFieldError(
+        errors,
+        "shipping",
+        "emailAddress",
+        "format",
+        MSG_EMAIL_TOO_LONG
+      );
+    } else if (!EMAIL_FORMAT_REGEX.test(emailAddress)) {
+      pushFieldError(
+        errors,
+        "shipping",
+        "emailAddress",
+        "format",
+        MSG_EMAIL_WRONG_FORMAT
+      );
+    }
+  }
+  if (errors.length > 0) {
+    throw new ContactValidationError(errors);
+  }
+  return { emailAddress };
+};
+
+// 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,
+    errors
+  });
+};
+function parseWalletApiError(err) {
+  const body = err instanceof ApiError ? err.body : err;
+  if (body && typeof body === "object" && "errorType" in body && "message" in body) {
+    return body;
+  }
+  return null;
+}
+function validateContacts(event, sessionData, supportedBillingCountries) {
+  billingContactDetails(
+    event.payment.billingContact,
+    supportedBillingCountries
+  );
+  if (!sessionData.loggedIn) {
+    return shippingContactDetails(event.payment.shippingContact).emailAddress;
+  }
+  return void 0;
+}
+function redirectFallback(skuId, returnUrl, options) {
+  trackFallbackCheckout(skuId);
+  window.location.href = redirectToCheckoutFallback({
+    skuId,
+    returnUrl,
+    ...options
+  });
+}
+var ERROR_HANDLERS = {
+  EMAIL_COLLISION: ({ skuId, returnUrl, validatedEmail }) => redirectFallback(skuId, returnUrl, {
+    emailError: MSG_EMAIL_COLLISION,
+    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 })
+};
+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 });
+  }
+}
+async function handlePaymentAuthorized(event, session, sessionData, config) {
+  const { skuId, returnUrl, queryString } = config;
+  let validatedEmail;
+  try {
+    validatedEmail = validateContacts(
+      event,
+      sessionData,
+      config.supportedBillingCountries
+    );
+    const result = await performPurchase({
+      applePayToken: event.payment.token,
+      skuId: config.skuId,
+      billingContact: event.payment.billingContact,
+      ...event.payment.shippingContact && {
+        shippingContact: event.payment.shippingContact
+      },
+      recaptchaTokens: config.recaptchaTokens
+    });
+    trackWalletPaymentSuccess(skuId, result.basketId);
+    session.completePayment({ status: ApplePaySession.STATUS_SUCCESS });
+    const userStatus = sessionData.loggedIn ? "lex" : "nex";
+    window.location.href = redirectToCheckoutComplete({
+      basketId: result.basketId,
+      status: userStatus,
+      skuId: decodeSku(skuId),
+      returnUrl,
+      queryString
+    });
+  } catch (err) {
+    if (err instanceof ContactValidationError) {
+      failApplePaySession(session, err.errors);
+      return;
+    }
+    console.error("[web-apple-pay] onpaymentauthorized error", { skuId, err });
+    const walletError = parseWalletApiError(err);
+    trackWalletPaymentFailure(skuId, walletError?.errorType ?? "UNKNOWN");
+    failApplePaySession(session);
+    if (!walletError) {
+      redirectFallback(skuId, returnUrl, { inlineError: MSG_PAYMENT_GENERIC_ERROR });
+      return;
+    }
+    handleStructuredError({ skuId, returnUrl, validatedEmail, walletError });
+  }
+}
+
+// src/data/price-zones.json
+var price_zones_default = {
+  "AS-AS": [
+    "BD",
+    "BT",
+    "CK",
+    "FJ",
+    "ID",
+    "KH",
+    "KI",
+    "LA",
+    "LK",
+    "MH",
+    "MM",
+    "MN",
+    "MV",
+    "NC",
+    "NF",
+    "NP",
+    "NR",
+    "PF",
+    "PG",
+    "PK",
+    "PW",
+    "SB",
+    "TH",
+    "TL",
+    "TO",
+    "TV",
+    "VN",
+    "VU",
+    "WS"
+  ],
+  "AS-AU": ["AU"],
+  "AS-CN": ["CN"],
+  "AS-HK": ["HK", "MO"],
+  "AS-IN": ["IN"],
+  "AS-JP": ["JP"],
+  "AS-KR": ["KR"],
+  "AS-MY": ["MY"],
+  "AS-NZ": ["NZ"],
+  "AS-PH": ["PH"],
+  "AS-SG": ["BN", "SG"],
+  "AS-TW": ["TW"],
+  "CE-AF": [
+    "DZ",
+    "AO",
+    "BJ",
+    "BW",
+    "BF",
+    "BI",
+    "CM",
+    "CV",
+    "CF",
+    "TD",
+    "CG",
+    "CD",
+    "CI",
+    "DJ",
+    "EG",
+    "GQ",
+    "ER",
+    "ET",
+    "GA",
+    "GM",
+    "GH",
+    "GN",
+    "GW",
+    "IL",
+    "JO",
+    "KE",
+    "LB",
+    "LS",
+    "LR",
+    "LY",
+    "MG",
+    "MW",
+    "ML",
+    "MR",
+    "MU",
+    "MA",
+    "MZ",
+    "NA",
+    "NE",
+    "NG",
+    "PS",
+    "RE",
+    "RW",
+    "ST",
+    "SN",
+    "SC",
+    "SL",
+    "ZA",
+    "SZ",
+    "TZ",
+    "TG",
+    "TN",
+    "UG",
+    "ZM",
+    "ZW"
+  ],
+  "CE-CH": ["LI", "CH"],
+  "CE-DK": ["FO", "GL", "DK"],
+  "CE-EU": [
+    "AL",
+    "AD",
+    "AM",
+    "AT",
+    "AZ",
+    "BY",
+    "BE",
+    "BA",
+    "BG",
+    "HR",
+    "CY",
+    "CZ",
+    "EE",
+    "FI",
+    "FR",
+    "GE",
+    "DE",
+    "GI",
+    "GR",
+    "HU",
+    "IS",
+    "IE",
+    "IT",
+    "KZ",
+    "XK",
+    "KG",
+    "LV",
+    "LT",
+    "LU",
+    "MT",
+    "MD",
+    "MC",
+    "ME",
+    "NL",
+    "PL",
+    "PT",
+    "MK",
+    "RO",
+    "RS",
+    "SK",
+    "SI",
+    "ES",
+    "TJ",
+    "TR",
+    "TM",
+    "UA",
+    "UZ"
+  ],
+  "CE-ME": ["AE", "BH", "KW", "OM", "QA", "SA"],
+  "CE-NO": ["NO"],
+  "CE-SE": ["SE"],
+  "LA-LA": [
+    "AI",
+    "AG",
+    "AR",
+    "AW",
+    "BS",
+    "BB",
+    "BZ",
+    "BM",
+    "BO",
+    "BR",
+    "KY",
+    "CL",
+    "CO",
+    "CR",
+    "DM",
+    "DO",
+    "EC",
+    "SV",
+    "FK",
+    "GF",
+    "GD",
+    "GT",
+    "GY",
+    "HT",
+    "HN",
+    "JM",
+    "MQ",
+    "MX",
+    "MS",
+    "NI",
+    "MP",
+    "PA",
+    "PY",
+    "PE",
+    "KN",
+    "LC",
+    "VC",
+    "SR",
+    "TT",
+    "TC",
+    "UY",
+    "VG",
+    "VI"
+  ],
+  "NA-CA": ["CA"],
+  "NA-US": ["AS", "GU", "FM", "PR", "US"],
+  "UK-UK": ["GB"]
+};
+
+// src/data/eea-countries.json
+var eea_countries_default = [
+  "AT",
+  "BE",
+  "BG",
+  "HR",
+  "CY",
+  "CZ",
+  "DK",
+  "EE",
+  "FO",
+  "FI",
+  "FR",
+  "DE",
+  "GR",
+  "GL",
+  "HU",
+  "IS",
+  "IE",
+  "IT",
+  "LV",
+  "LI",
+  "LT",
+  "LU",
+  "MT",
+  "NL",
+  "NO",
+  "PL",
+  "PT",
+  "RO",
+  "SK",
+  "SI",
+  "ES",
+  "SE"
+];
+
+// src/utils/billing-countries.ts
+var priceZones = price_zones_default;
+var eeaCountries = eea_countries_default;
+var ALL_COUNTRY_CODES = Object.values(priceZones).flat();
+var getZoneByCountry = (country) => Object.keys(priceZones).find((key) => priceZones[key].includes(country)) ?? null;
+var getSupportedBillingCountries = (offerCountry, offerVariant) => {
+  if (offerVariant === "bundle" || offerVariant === "insider_print") {
+    return [...ALL_COUNTRY_CODES];
+  }
+  const zone = getZoneByCountry(offerCountry);
+  if (!zone) {
+    return [...ALL_COUNTRY_CODES];
+  }
+  const zoneCountries = priceZones[zone];
+  if (eeaCountries.includes(offerCountry)) {
+    return Array.from(/* @__PURE__ */ new Set([...zoneCountries, ...eeaCountries]));
+  }
+  return [...zoneCountries];
+};
+
 // src/apple-pay-button.ts
 var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
-var APPLE_PAY_EXCLUDED_VARIANTS = ["bundle", "insider_print"];
+var TOTAL_LABEL = "The Economist";
+var DEFAULT_CURRENCY = "USD";
+var DEFAULT_TOTAL = "0.00";
+var ERROR_INITIATE = "Failed to initiate Apple Pay session:";
+var SEL_CONTAINER = ".apple-pay-container";
+var SEL_BUTTON = ".apple-pay-btn";
+var APPLE_PAY_EXCLUDED_VARIANTS = [
+  "bundle",
+  "insider_print"
+];
 var ApplePayButton = class _ApplePayButton extends HTMLElement {
   static tag = "teg-apple-pay-button";
   static define() {
@@ -862,29 +1308,39 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   /**
    * Creates and configures an ApplePayButton if the feature flag is present.
    */
-  static createIfEnabled(offer, country) {
-    if (!offer) {
-      return null;
-    }
-    const isExcludedVariant = APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant);
-    if (isExcludedVariant) {
+  static createIfEnabled(offer, country, entryPoint) {
+    if (!offer) return null;
+    if (APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant))
       return null;
-    }
-    if (!new URLSearchParams(window.location.search).has(
-      FEATURE_APPLE_PAY_EXPRESS_CHECKOUT
-    )) {
+    if (!new URLSearchParams(window.location.search).has(FEATURE_APPLE_PAY_EXPRESS_CHECKOUT))
       return null;
-    }
     _ApplePayButton.define();
     const button = document.createElement(_ApplePayButton.tag);
     button.offer = offer;
     button.country = country;
+    button.entryPoint = entryPoint;
     return button;
   }
+  /**
+   * Fallback session used when the BFF is unreachable at page load.
+   * Treats the user as anonymous (not logged in, new-eligible).
+   * Matches the behaviour of sma-checkout when session fetch fails.
+   */
+  static #ANONYMOUS_SESSION = {
+    loggedIn: false,
+    userType: "new-eligible-user"
+  };
+  // ─── Private state ──────────────────────────────────────────────────────────
   #offer = null;
   #country = "";
   #rendering = false;
   #readyPromise = null;
+  #sessionData = null;
+  #paymentOptions = null;
+  #returnUrl = "";
+  #supportedBillingCountries = [];
+  #entryPoint = "";
+  // ─── Public API ─────────────────────────────────────────────────────────────
   get offer() {
     return this.#offer;
   }
@@ -898,6 +1354,12 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   set country(value) {
     this.#country = value;
   }
+  get entryPoint() {
+    return this.#entryPoint;
+  }
+  set entryPoint(value) {
+    this.#entryPoint = value;
+  }
   /**
    * Awaitable contract for the component's current render lifecycle.
    *
@@ -917,60 +1379,130 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   whenReady() {
     return this.#readyPromise ?? Promise.resolve();
   }
+  // ─── Lifecycle ──────────────────────────────────────────────────────────────
   async connectedCallback() {
-    if (this.#rendering || this.querySelector(".apple-pay-container")) {
+    if (this.#rendering || this.querySelector(SEL_CONTAINER)) {
       return;
     }
     this.#rendering = true;
     this.#readyPromise = this.#run();
     await this.#readyPromise;
   }
+  /**
+   * Resets all render state when the element is removed from the DOM.
+   *
+   * A shared library component cannot assume it won't be moved in the DOM
+   * (e.g. lazy panels, SPA route changes). Resetting on disconnect means
+   * reattach always triggers a fresh `#run()` — new session check, new payment
+   * options fetch, fresh event listeners — preventing stale data from persisting
+   * and eliminating the implicit reliance on the DOM as a render-state flag.
+   */
+  disconnectedCallback() {
+    this.#rendering = false;
+    this.#readyPromise = null;
+    this.#sessionData = null;
+    this.#paymentOptions = null;
+    this.#returnUrl = "";
+    this.#supportedBillingCountries = [];
+    this.querySelector(SEL_CONTAINER)?.remove();
+  }
+  // ─── Render pipeline ────────────────────────────────────────────────────────
   async #run() {
     try {
-      const available = await isApplePayAvailable();
-      if (!available) {
-        this.style.display = "none";
-        return;
-      }
-      const sessionData = await this.#fetchSession();
-      if (sessionData?.loggedIn && (sessionData.userType === "active-subscription" || sessionData.userType === "b2b-user")) {
-        this.style.display = "none";
-        return;
-      }
-      this.style.removeProperty("display");
-      ensureApplePayLogoSymbol();
-      const template = document.createElement("template");
-      template.innerHTML = apple_pay_button_template_default;
-      this.appendChild(template.content.cloneNode(true));
-      this.#updateDisabledState();
-      const button = this.querySelector(".apple-pay-btn");
-      button.addEventListener("click", () => {
-        if (!this.#offer) {
-          return;
-        }
-        if (document.querySelector(ApplePayModal.tag)) {
-          return;
-        }
-        ApplePayModal.define();
-        const modal = document.createElement(ApplePayModal.tag);
-        modal.offer = this.#offer;
-        modal.country = this.#country;
-        if (this.dataset.loggedIn !== void 0) {
-          modal.dataset.loggedIn = this.dataset.loggedIn;
-        }
-        modal.open();
-      });
+      if (await this.#checkAvailability()) return;
+      if (await this.#checkSession()) return;
+      if (this.#checkOffer()) return;
+      this.#captureReturnUrl();
+      this.#computeBillingCountries();
+      if (await this.#fetchAndCacheOptions()) return;
+      this.#renderTemplate();
     } catch {
       this.style.display = "none";
     } finally {
       this.#rendering = false;
     }
   }
-  #updateDisabledState() {
-    const button = this.querySelector(".apple-pay-btn");
-    if (!button) {
-      return;
+  /** Returns `true` (hide) when Apple Pay is unavailable on this device/browser. */
+  async #checkAvailability() {
+    const available = await isApplePayAvailable();
+    if (!available) {
+      this.style.display = "none";
+      return true;
+    }
+    return false;
+  }
+  /**
+   * Returns `true` (hide) when the user already has an active subscription or is B2B.
+   * Session fetch errors are swallowed — the component continues as an anonymous user.
+   */
+  async #checkSession() {
+    this.#sessionData = await this.#fetchSession();
+    if (this.#sessionData?.loggedIn && (this.#sessionData.userType === "active-subscription" || this.#sessionData.userType === "b2b-user")) {
+      this.style.display = "none";
+      return true;
+    }
+    return false;
+  }
+  /** Returns `true` (hide) when no offer has been set before mount. */
+  #checkOffer() {
+    if (!this.#offer) {
+      this.style.display = "none";
+      return true;
     }
+    return false;
+  }
+  /** Captures the current page URL once at mount for reuse across the session lifetime. */
+  #captureReturnUrl() {
+    this.#returnUrl = captureOriginUrl();
+  }
+  /**
+   * Computes supported billing countries once at mount.
+   * Mirrors sma-checkout `billingCountryOptions()` — stable for the element's
+   * connected lifetime; recalculated on reattach via `disconnectedCallback` reset.
+   */
+  #computeBillingCountries() {
+    this.#supportedBillingCountries = getSupportedBillingCountries(
+      this.#country,
+      this.#offer.product?.variant ?? ""
+    );
+  }
+  /**
+   * Returns `true` (hide) when ecom services reports Apple Pay is unavailable
+   * for this offer. The response is cached and reused in `#initiateApplePay`.
+   */
+  async #fetchAndCacheOptions() {
+    this.#paymentOptions = await this.#fetchPaymentOptions();
+    if (!this.#paymentOptions?.options.applePay) {
+      this.style.display = "none";
+      return true;
+    }
+    return false;
+  }
+  /** Injects the button template and wires click and confirm event listeners. */
+  #renderTemplate() {
+    this.style.removeProperty("display");
+    ensureApplePayLogoSymbol();
+    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.addEventListener("click", () => {
+      this.#openModal();
+    });
+    this.addEventListener("apple-pay-confirmed", (event) => {
+      const { skuId, country } = event.detail;
+      this.#initiateApplePay(skuId, country);
+    });
+  }
+  // ─── Private helpers ────────────────────────────────────────────────────────
+  #updateDisabledState() {
+    const button = this.querySelector(SEL_BUTTON);
+    if (!button) return;
     if (this.#offer) {
       button.removeAttribute("disabled");
       button.removeAttribute("aria-disabled");
@@ -979,6 +1511,18 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     button.setAttribute("disabled", "");
     button.setAttribute("aria-disabled", "true");
   }
+  #openModal() {
+    if (!this.#offer || document.querySelector(ApplePayModal.tag)) return;
+    trackExpressWalletClick(this.#offer.sku_id);
+    ApplePayModal.define();
+    const modal = document.createElement(ApplePayModal.tag);
+    modal.offer = this.#offer;
+    modal.country = this.#country;
+    if (this.#sessionData?.loggedIn) {
+      modal.dataset.loggedIn = "true";
+    }
+    modal.open();
+  }
   async #fetchSession() {
     try {
       return await getExpressCheckoutSession();
@@ -986,6 +1530,58 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       return null;
     }
   }
+  async #fetchPaymentOptions() {
+    try {
+      return await getPaymentOptions({
+        sku: this.#offer.sku_id,
+        countryCode: this.#country,
+        currencyCode: this.#offer.price?.currency_code ?? DEFAULT_CURRENCY,
+        checkoutUrl: this.#returnUrl
+      });
+    } catch {
+      return null;
+    }
+  }
+  #buildSessionParams(skuId, country, sessionData, paymentOptions, recaptchaTokens) {
+    const offer = this.#offer;
+    const totalAmount = offer.price?.purchase ? `${offer.price.purchase}` : DEFAULT_TOTAL;
+    return {
+      countryCode: country,
+      currencyCode: offer.price?.currency_code ?? DEFAULT_CURRENCY,
+      supportedNetworks: paymentOptions.options.applePay.settings.supportedNetworks,
+      totalAmount,
+      totalLabel: TOTAL_LABEL,
+      skuId,
+      returnUrl: this.#returnUrl,
+      userLoggedIn: sessionData.loggedIn,
+      onPaymentAuthorized: (event, session) => handlePaymentAuthorized(event, session, sessionData, {
+        skuId,
+        country,
+        returnUrl: this.#returnUrl,
+        queryString: buildQueryString(),
+        supportedBillingCountries: this.#supportedBillingCountries,
+        recaptchaTokens
+      })
+    };
+  }
+  async #initiateApplePay(skuId, country) {
+    try {
+      const sessionData = this.#sessionData ?? _ApplePayButton.#ANONYMOUS_SESSION;
+      const paymentOptions = this.#paymentOptions;
+      const recaptchaTokens = await getPurchaseRecaptchaTokens();
+      startApplePaySession(
+        this.#buildSessionParams(
+          skuId,
+          country,
+          sessionData,
+          paymentOptions,
+          recaptchaTokens
+        )
+      );
+    } catch (error) {
+      console.error(ERROR_INITIATE, error);
+    }
+  }
 };
 
 // src/index.ts
@@ -1132,7 +1728,7 @@ var withApplePayStoryEnvironment = (options, renderFn) => (args) => {
 
 // src/apple-pay-button.stories.ts
 var APPLE_PAY_BUTTON_TAG = "teg-apple-pay-button";
-var renderButton = ({ country, loggedIn }) => {
+var renderButton = ({ country }) => {
   defineApplePayElements();
   const container = document.createElement("div");
   container.style.padding = "24px";
@@ -1141,7 +1737,6 @@ var renderButton = ({ country, loggedIn }) => {
   );
   button.offer = STORYBOOK_SAMPLE_OFFER;
   button.country = country;
-  button.dataset.loggedIn = String(loggedIn);
   container.appendChild(button);
   return container;
 };
@@ -1154,12 +1749,10 @@ var meta = {
     }
   },
   args: {
-    country: "US",
-    loggedIn: false
+    country: "US"
   },
   argTypes: {
-    country: { control: "text" },
-    loggedIn: { control: "boolean" }
+    country: { control: "text" }
   },
   render: renderButton
 };
@@ -1180,7 +1773,10 @@ var NotSupported = {
       disable: true
     }
   },
-  render: withApplePayStoryEnvironment({ applePaySupported: false }, renderButton)
+  render: withApplePayStoryEnvironment(
+    { applePaySupported: false },
+    renderButton
+  )
 };
 var SessionInitErrorFallback = {
   parameters: {
@@ -1204,9 +1800,6 @@ var LoggedInModalPropagation = {
       disable: true
     }
   },
-  args: {
-    loggedIn: true
-  },
   render: withApplePayStoryEnvironment(
     {
       applePaySupported: true,
@@ -1246,9 +1839,6 @@ var ActiveSubscriberHidden = {
       disable: true
     }
   },
-  args: {
-    loggedIn: true
-  },
   render: withApplePayStoryEnvironment(
     {
       applePaySupported: true,
@@ -1270,9 +1860,6 @@ var B2BUserHidden = {
       disable: true
     }
   },
-  args: {
-    loggedIn: true
-  },
   render: withApplePayStoryEnvironment(
     {
       applePaySupported: true,