@economist/web-apple-pay 1.8.1 → 1.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/index.js +39 -48
  2. package/dist/src/apple-pay-button.js +39 -48
  3. package/dist/src/apple-pay-button.stories.js +39 -48
  4. package/dist/src/apple-pay-logo.js +1 -2
  5. package/dist/src/apple-pay-modal.js +1 -2
  6. package/dist/src/apple-pay-modal.stories.js +39 -48
  7. package/dist/src/index.js +39 -48
  8. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -66,13 +66,12 @@ function formatPrice(price, currencyCode, shouldFixDecimalPlaces = true, roundUp
66
66
  // src/apple-pay-logo.ts
67
67
  var LOGO_DEFS_ID = "apple-pay-logo-defs";
68
68
  var LOGO_PATH = "M10.2651 4.21143C10.4299 4.21143 10.7106 4.23763 11.1074 4.29004C11.5042 4.34245 11.9385 4.49219 12.4102 4.73926C12.8893 4.97884 13.3236 5.37939 13.7129 5.94092C13.6904 5.96338 13.5819 6.04574 13.3872 6.18799C13.1925 6.32275 12.9754 6.5249 12.7358 6.79443C12.4963 7.05648 12.2866 7.39339 12.1069 7.80518C11.9272 8.20947 11.8374 8.69238 11.8374 9.25391C11.8374 9.89779 11.9497 10.4443 12.1743 10.8936C12.4064 11.3428 12.6722 11.7059 12.9717 11.9829C13.2786 12.2524 13.5482 12.4508 13.7803 12.5781C14.0199 12.7054 14.1471 12.7728 14.1621 12.7803C14.1546 12.8102 14.0573 13.076 13.8701 13.5776C13.6904 14.0793 13.391 14.637 12.9717 15.251C12.6048 15.7826 12.208 16.2729 11.7812 16.7222C11.362 17.1714 10.8566 17.396 10.2651 17.396C9.86833 17.396 9.54264 17.3398 9.28809 17.2275C9.03353 17.1077 8.77148 16.9917 8.50195 16.8794C8.23242 16.7596 7.8693 16.6997 7.4126 16.6997C6.97087 16.6997 6.60026 16.7596 6.30078 16.8794C6.00879 16.9992 5.72803 17.119 5.4585 17.2388C5.19645 17.3586 4.88574 17.4185 4.52637 17.4185C3.97982 17.4185 3.50065 17.2013 3.08887 16.7671C2.67708 16.3328 2.25407 15.8125 1.81982 15.2061C1.3182 14.4873 0.887695 13.6113 0.52832 12.5781C0.176432 11.5374 0.000488281 10.4893 0.000488281 9.43359C0.000488281 8.30306 0.213867 7.35596 0.640625 6.59229C1.06738 5.82113 1.61393 5.24089 2.28027 4.85156C2.9541 4.45475 3.65039 4.25635 4.36914 4.25635C4.75098 4.25635 5.11035 4.31999 5.44727 4.44727C5.78418 4.56706 6.09863 4.69059 6.39062 4.81787C6.6901 4.94515 6.95964 5.00879 7.19922 5.00879C7.43132 5.00879 7.70085 4.94141 8.00781 4.80664C8.31478 4.67188 8.65918 4.54085 9.04102 4.41357C9.42285 4.27881 9.83089 4.21143 10.2651 4.21143ZM9.64746 2.78516C9.35547 3.13704 8.98861 3.43278 8.54688 3.67236C8.10514 3.90446 7.68587 4.02051 7.28906 4.02051C7.20671 4.02051 7.12809 4.01302 7.05322 3.99805C7.04574 3.97559 7.03825 3.93441 7.03076 3.87451C7.02327 3.81462 7.01953 3.75098 7.01953 3.68359C7.01953 3.23438 7.11686 2.80013 7.31152 2.38086C7.50618 1.9541 7.72705 1.60221 7.97412 1.3252C8.28857 0.950846 8.68538 0.640137 9.16455 0.393066C9.64372 0.145996 10.1004 0.014974 10.5347 0C10.5571 0.0973307 10.5684 0.213379 10.5684 0.348145C10.5684 0.797363 10.4823 1.23535 10.3101 1.66211C10.1379 2.08138 9.91699 2.45573 9.64746 2.78516ZM17.6885 11.5112V9.71436H22.0459C23.2064 9.71436 24.1048 9.41488 24.7412 8.81592C25.3776 8.20947 25.6958 7.37467 25.6958 6.31152V6.28906C25.6958 5.21842 25.3776 4.38363 24.7412 3.78467C24.1048 3.18571 23.2064 2.88623 22.0459 2.88623H17.6885V1.08936H22.5625C23.5807 1.08936 24.4792 1.30648 25.2578 1.74072C26.0365 2.17497 26.6466 2.78141 27.0884 3.56006C27.5376 4.3387 27.7622 5.24089 27.7622 6.2666V6.28906C27.7622 7.31478 27.5376 8.2207 27.0884 9.00684C26.6466 9.79297 26.0365 10.4069 25.2578 10.8486C24.4792 11.2904 23.5807 11.5112 22.5625 11.5112H17.6885ZM16.6777 17.2949V1.08936H18.6992V17.2949H16.6777ZM32.6699 17.5195C31.9062 17.5195 31.2249 17.3735 30.626 17.0815C30.0345 16.7896 29.5703 16.3778 29.2334 15.8462C28.904 15.3071 28.7393 14.682 28.7393 13.9707V13.9482C28.7393 13.2594 28.9077 12.668 29.2446 12.1738C29.5815 11.6797 30.0682 11.2904 30.7046 11.0059C31.3485 10.7139 32.1234 10.5417 33.0293 10.4893L37.3979 10.2422V11.7695L33.2539 12.0278C32.4303 12.0728 31.8052 12.2599 31.3784 12.5894C30.9517 12.9188 30.7383 13.3643 30.7383 13.9258V13.9482C30.7383 14.5322 30.9554 14.9927 31.3896 15.3296C31.8239 15.659 32.3929 15.8237 33.0967 15.8237C33.7331 15.8237 34.2983 15.6927 34.7925 15.4307C35.2941 15.1686 35.6909 14.813 35.9829 14.3638C36.2749 13.9071 36.4209 13.3979 36.4209 12.8364V9.27637C36.4209 8.55762 36.1963 7.99609 35.7471 7.5918C35.2979 7.1875 34.6502 6.98535 33.8042 6.98535C33.063 6.98535 32.4603 7.13883 31.9961 7.4458C31.5394 7.74528 31.2474 8.14958 31.1201 8.65869L31.0977 8.7373H29.1885L29.1997 8.625C29.2746 7.98861 29.5067 7.41585 29.896 6.90674C30.2928 6.39762 30.8244 5.99707 31.4907 5.70508C32.1646 5.4056 32.9469 5.25586 33.8379 5.25586C34.7812 5.25586 35.5898 5.41683 36.2637 5.73877C36.945 6.05322 37.4653 6.50244 37.8247 7.08643C38.1916 7.66292 38.375 8.35173 38.375 9.15283V17.2949H36.4209V15.4307H36.3311C36.0915 15.8574 35.7845 16.228 35.4102 16.5425C35.0433 16.8569 34.6278 17.1003 34.1636 17.2725C33.6994 17.4372 33.2015 17.5195 32.6699 17.5195ZM42.1484 21.3267C41.9837 21.3267 41.8115 21.3192 41.6318 21.3042C41.4521 21.2892 41.2987 21.2705 41.1714 21.248V19.6421C41.2612 19.6646 41.366 19.6795 41.4858 19.687C41.6056 19.702 41.7292 19.7095 41.8564 19.7095C42.4554 19.7095 42.9383 19.5897 43.3052 19.3501C43.672 19.1105 43.9678 18.6576 44.1924 17.9912L44.4282 17.3062L40.0371 5.48047H42.126L45.6187 15.981L45.0796 15.2734H45.7759L45.248 15.981L48.7407 5.48047H50.7959L46.1802 18.0249C45.8807 18.826 45.555 19.4661 45.2031 19.9453C44.8512 20.432 44.432 20.7839 43.9453 21.001C43.4587 21.2181 42.8597 21.3267 42.1484 21.3267Z";
69
- var APPLE_LOGO_PATH = LOGO_PATH.slice(0, LOGO_PATH.indexOf("M17.6885"));
70
69
  function ensureApplePayLogoSymbol() {
71
70
  if (document.getElementById(LOGO_DEFS_ID)) {
72
71
  return;
73
72
  }
74
73
  const tmp = document.createElement("div");
75
- 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><symbol id="apple-logo" viewBox="0 0 15 18"><path d="${APPLE_LOGO_PATH}" fill="currentColor"/></symbol></defs></svg>`;
74
+ 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>`;
76
75
  document.body.prepend(tmp.firstElementChild);
77
76
  }
78
77
 
@@ -1008,26 +1007,10 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
1008
1007
  // src/templates/apple-pay-button.template.html
1009
1008
  var apple_pay_button_template_default = `<style>
1010
1009
  /*
1011
- * Entry CTA only: \u201CSubscribe with [apple logo] Apple Pay\u201D.
1012
- * Uses OS SF Pro via local() (no Marber). Modal styling is unchanged.
1010
+ * Entry CTA: \u201CSubscribe with\u201D + Apple Pay wordmark (Figma 1118:14088).
1011
+ * \u201CSubscribe with\u201D matches Continue to checkout typography (EconomistSans Regular / 17 / 24 / 400).
1013
1012
  */
1014
- @font-face {
1015
- font-family: 'WAP Apple Pay Text';
1016
- src:
1017
- local('SF Pro Text Light'),
1018
- local('SFProText-Light'),
1019
- local('SF Pro Text'),
1020
- local('SFProText-Regular'),
1021
- local('-apple-system'),
1022
- local('BlinkMacSystemFont'),
1023
- local('Helvetica Neue');
1024
- font-weight: 300;
1025
- font-style: normal;
1026
- font-display: swap;
1027
- }
1028
-
1029
1013
  teg-apple-pay-button {
1030
- --wap-apple-pay-scale: 1.375; /* default height 44px / 32 */
1031
1014
  display: block;
1032
1015
  margin: var(--apple-pay-margin, 0);
1033
1016
  width: 100%;
@@ -1043,44 +1026,53 @@ var apple_pay_button_template_default = `<style>
1043
1026
  }
1044
1027
 
1045
1028
  teg-apple-pay-button .apple-pay-btn {
1046
- display: inline-flex;
1029
+ display: flex;
1047
1030
  align-items: center;
1048
1031
  justify-content: center;
1049
1032
  width: 100%;
1050
1033
  min-width: 0;
1051
1034
  height: 100%;
1052
- min-height: var(--apple-pay-height, 2.75rem);
1053
- padding: 0 calc(8px * var(--wap-apple-pay-scale));
1035
+ min-height: var(--apple-pay-height, 2.5rem);
1036
+ padding: 0;
1054
1037
  box-sizing: border-box;
1055
- background-color: var(--apple-pay-background-color, #000);
1038
+ background-color: var(--apple-pay-background-color, #1a1a1a);
1056
1039
  color: var(--apple-pay-foreground-color, #fff);
1057
1040
  border: none;
1058
- border-radius: var(--apple-pay-border-radius, 5px);
1041
+ border-radius: var(--apple-pay-border-radius, 0.25rem);
1059
1042
  cursor: pointer;
1060
- font-family: 'WAP Apple Pay Text', -apple-system, BlinkMacSystemFont,
1061
- 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
1062
- font-size: calc(12px * var(--wap-apple-pay-scale));
1063
- font-weight: 300;
1064
- font-style: normal;
1043
+ /* Same as wall Continue to checkout / Marber button large */
1044
+ font-family: var(
1045
+ --mb-typeface-sans,
1046
+ var(--wall-type-system-sans, 'EconomistSans', system-ui, sans-serif)
1047
+ );
1048
+ font-size: var(--mb-button-font-size, 1.0625rem);
1049
+ font-weight: var(--mb-font-weight-regular, 400);
1065
1050
  line-height: 1;
1066
- letter-spacing: -0.01em;
1067
- -webkit-font-smoothing: antialiased;
1068
- -moz-osx-font-smoothing: grayscale;
1069
1051
  }
1070
1052
 
1071
1053
  teg-apple-pay-button .apple-pay-btn__label {
1072
1054
  display: inline-flex;
1073
1055
  align-items: center;
1074
- gap: calc(4px * var(--wap-apple-pay-scale));
1056
+ /* No flex gap \u2014 spacing after \u201Cwith\u201D uses the same word-space as \u201CSubscribe with\u201D */
1057
+ gap: 0;
1075
1058
  white-space: nowrap;
1076
1059
  }
1077
1060
 
1078
- teg-apple-pay-button .apple-pay-btn__apple-logo {
1061
+ teg-apple-pay-button .apple-pay-btn__caption {
1062
+ /* One typographic word space after \u201Cwith\u201D, matching Subscribe\u2194with */
1063
+ padding-right: 0.25em;
1064
+ }
1065
+
1066
+ teg-apple-pay-button .apple-pay-btn__logo {
1079
1067
  flex-shrink: 0;
1080
1068
  display: block;
1081
- width: calc(12px * var(--wap-apple-pay-scale));
1082
- height: calc(14px * var(--wap-apple-pay-scale));
1069
+ /* Match caption font-size so mark aligns with text metrics */
1070
+ height: 1.05em;
1071
+ width: auto;
1072
+ aspect-ratio: 51 / 22;
1083
1073
  color: currentColor;
1074
+ /* Optical nudge \u2014 SVG viewBox sits slightly high vs EconomistSans caps */
1075
+ transform: translateY(0.06em);
1084
1076
  }
1085
1077
 
1086
1078
  teg-apple-pay-button .apple-pay-btn.wap-loading {
@@ -1126,20 +1118,19 @@ var apple_pay_button_template_default = `<style>
1126
1118
  aria-label="Subscribe with Apple Pay"
1127
1119
  data-analytics="paywall:apple-pay-checkout"
1128
1120
  >
1129
- <span class="apple-pay-btn__label">
1130
- Subscribe with
1131
- <svg
1132
- class="apple-pay-btn__apple-logo"
1133
- width="17"
1134
- height="19"
1135
- viewBox="0 0 15 18"
1121
+ <span class="apple-pay-btn__label"
1122
+ ><span class="apple-pay-btn__caption">Subscribe with</span
1123
+ ><svg
1124
+ class="apple-pay-btn__logo"
1125
+ width="42"
1126
+ height="18"
1127
+ viewBox="0 0 51 22"
1136
1128
  aria-hidden="true"
1137
1129
  role="img"
1138
1130
  >
1139
- <use href="#apple-logo" />
1140
- </svg>
1141
- Apple Pay
1142
- </span>
1131
+ <use href="#apple-pay-logo" />
1132
+ </svg
1133
+ ></span>
1143
1134
  <span class="apple-pay-btn__loading" aria-hidden="true">Loading...</span>
1144
1135
  </button>
1145
1136
  </div>
package/dist/src/apple-pay-button.js CHANGED
@@ -66,13 +66,12 @@ function formatPrice(price, currencyCode, shouldFixDecimalPlaces = true, roundUp
66
66
  // src/apple-pay-logo.ts
67
67
  var LOGO_DEFS_ID = "apple-pay-logo-defs";
68
68
  var LOGO_PATH = "M10.2651 4.21143C10.4299 4.21143 10.7106 4.23763 11.1074 4.29004C11.5042 4.34245 11.9385 4.49219 12.4102 4.73926C12.8893 4.97884 13.3236 5.37939 13.7129 5.94092C13.6904 5.96338 13.5819 6.04574 13.3872 6.18799C13.1925 6.32275 12.9754 6.5249 12.7358 6.79443C12.4963 7.05648 12.2866 7.39339 12.1069 7.80518C11.9272 8.20947 11.8374 8.69238 11.8374 9.25391C11.8374 9.89779 11.9497 10.4443 12.1743 10.8936C12.4064 11.3428 12.6722 11.7059 12.9717 11.9829C13.2786 12.2524 13.5482 12.4508 13.7803 12.5781C14.0199 12.7054 14.1471 12.7728 14.1621 12.7803C14.1546 12.8102 14.0573 13.076 13.8701 13.5776C13.6904 14.0793 13.391 14.637 12.9717 15.251C12.6048 15.7826 12.208 16.2729 11.7812 16.7222C11.362 17.1714 10.8566 17.396 10.2651 17.396C9.86833 17.396 9.54264 17.3398 9.28809 17.2275C9.03353 17.1077 8.77148 16.9917 8.50195 16.8794C8.23242 16.7596 7.8693 16.6997 7.4126 16.6997C6.97087 16.6997 6.60026 16.7596 6.30078 16.8794C6.00879 16.9992 5.72803 17.119 5.4585 17.2388C5.19645 17.3586 4.88574 17.4185 4.52637 17.4185C3.97982 17.4185 3.50065 17.2013 3.08887 16.7671C2.67708 16.3328 2.25407 15.8125 1.81982 15.2061C1.3182 14.4873 0.887695 13.6113 0.52832 12.5781C0.176432 11.5374 0.000488281 10.4893 0.000488281 9.43359C0.000488281 8.30306 0.213867 7.35596 0.640625 6.59229C1.06738 5.82113 1.61393 5.24089 2.28027 4.85156C2.9541 4.45475 3.65039 4.25635 4.36914 4.25635C4.75098 4.25635 5.11035 4.31999 5.44727 4.44727C5.78418 4.56706 6.09863 4.69059 6.39062 4.81787C6.6901 4.94515 6.95964 5.00879 7.19922 5.00879C7.43132 5.00879 7.70085 4.94141 8.00781 4.80664C8.31478 4.67188 8.65918 4.54085 9.04102 4.41357C9.42285 4.27881 9.83089 4.21143 10.2651 4.21143ZM9.64746 2.78516C9.35547 3.13704 8.98861 3.43278 8.54688 3.67236C8.10514 3.90446 7.68587 4.02051 7.28906 4.02051C7.20671 4.02051 7.12809 4.01302 7.05322 3.99805C7.04574 3.97559 7.03825 3.93441 7.03076 3.87451C7.02327 3.81462 7.01953 3.75098 7.01953 3.68359C7.01953 3.23438 7.11686 2.80013 7.31152 2.38086C7.50618 1.9541 7.72705 1.60221 7.97412 1.3252C8.28857 0.950846 8.68538 0.640137 9.16455 0.393066C9.64372 0.145996 10.1004 0.014974 10.5347 0C10.5571 0.0973307 10.5684 0.213379 10.5684 0.348145C10.5684 0.797363 10.4823 1.23535 10.3101 1.66211C10.1379 2.08138 9.91699 2.45573 9.64746 2.78516ZM17.6885 11.5112V9.71436H22.0459C23.2064 9.71436 24.1048 9.41488 24.7412 8.81592C25.3776 8.20947 25.6958 7.37467 25.6958 6.31152V6.28906C25.6958 5.21842 25.3776 4.38363 24.7412 3.78467C24.1048 3.18571 23.2064 2.88623 22.0459 2.88623H17.6885V1.08936H22.5625C23.5807 1.08936 24.4792 1.30648 25.2578 1.74072C26.0365 2.17497 26.6466 2.78141 27.0884 3.56006C27.5376 4.3387 27.7622 5.24089 27.7622 6.2666V6.28906C27.7622 7.31478 27.5376 8.2207 27.0884 9.00684C26.6466 9.79297 26.0365 10.4069 25.2578 10.8486C24.4792 11.2904 23.5807 11.5112 22.5625 11.5112H17.6885ZM16.6777 17.2949V1.08936H18.6992V17.2949H16.6777ZM32.6699 17.5195C31.9062 17.5195 31.2249 17.3735 30.626 17.0815C30.0345 16.7896 29.5703 16.3778 29.2334 15.8462C28.904 15.3071 28.7393 14.682 28.7393 13.9707V13.9482C28.7393 13.2594 28.9077 12.668 29.2446 12.1738C29.5815 11.6797 30.0682 11.2904 30.7046 11.0059C31.3485 10.7139 32.1234 10.5417 33.0293 10.4893L37.3979 10.2422V11.7695L33.2539 12.0278C32.4303 12.0728 31.8052 12.2599 31.3784 12.5894C30.9517 12.9188 30.7383 13.3643 30.7383 13.9258V13.9482C30.7383 14.5322 30.9554 14.9927 31.3896 15.3296C31.8239 15.659 32.3929 15.8237 33.0967 15.8237C33.7331 15.8237 34.2983 15.6927 34.7925 15.4307C35.2941 15.1686 35.6909 14.813 35.9829 14.3638C36.2749 13.9071 36.4209 13.3979 36.4209 12.8364V9.27637C36.4209 8.55762 36.1963 7.99609 35.7471 7.5918C35.2979 7.1875 34.6502 6.98535 33.8042 6.98535C33.063 6.98535 32.4603 7.13883 31.9961 7.4458C31.5394 7.74528 31.2474 8.14958 31.1201 8.65869L31.0977 8.7373H29.1885L29.1997 8.625C29.2746 7.98861 29.5067 7.41585 29.896 6.90674C30.2928 6.39762 30.8244 5.99707 31.4907 5.70508C32.1646 5.4056 32.9469 5.25586 33.8379 5.25586C34.7812 5.25586 35.5898 5.41683 36.2637 5.73877C36.945 6.05322 37.4653 6.50244 37.8247 7.08643C38.1916 7.66292 38.375 8.35173 38.375 9.15283V17.2949H36.4209V15.4307H36.3311C36.0915 15.8574 35.7845 16.228 35.4102 16.5425C35.0433 16.8569 34.6278 17.1003 34.1636 17.2725C33.6994 17.4372 33.2015 17.5195 32.6699 17.5195ZM42.1484 21.3267C41.9837 21.3267 41.8115 21.3192 41.6318 21.3042C41.4521 21.2892 41.2987 21.2705 41.1714 21.248V19.6421C41.2612 19.6646 41.366 19.6795 41.4858 19.687C41.6056 19.702 41.7292 19.7095 41.8564 19.7095C42.4554 19.7095 42.9383 19.5897 43.3052 19.3501C43.672 19.1105 43.9678 18.6576 44.1924 17.9912L44.4282 17.3062L40.0371 5.48047H42.126L45.6187 15.981L45.0796 15.2734H45.7759L45.248 15.981L48.7407 5.48047H50.7959L46.1802 18.0249C45.8807 18.826 45.555 19.4661 45.2031 19.9453C44.8512 20.432 44.432 20.7839 43.9453 21.001C43.4587 21.2181 42.8597 21.3267 42.1484 21.3267Z";
69
- var APPLE_LOGO_PATH = LOGO_PATH.slice(0, LOGO_PATH.indexOf("M17.6885"));
70
69
  function ensureApplePayLogoSymbol() {
71
70
  if (document.getElementById(LOGO_DEFS_ID)) {
72
71
  return;
73
72
  }
74
73
  const tmp = document.createElement("div");
75
- 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><symbol id="apple-logo" viewBox="0 0 15 18"><path d="${APPLE_LOGO_PATH}" fill="currentColor"/></symbol></defs></svg>`;
74
+ 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>`;
76
75
  document.body.prepend(tmp.firstElementChild);
77
76
  }
78
77
 
@@ -1003,26 +1002,10 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
1003
1002
  // src/templates/apple-pay-button.template.html
1004
1003
  var apple_pay_button_template_default = `<style>
1005
1004
  /*
1006
- * Entry CTA only: \u201CSubscribe with [apple logo] Apple Pay\u201D.
1007
- * Uses OS SF Pro via local() (no Marber). Modal styling is unchanged.
1005
+ * Entry CTA: \u201CSubscribe with\u201D + Apple Pay wordmark (Figma 1118:14088).
1006
+ * \u201CSubscribe with\u201D matches Continue to checkout typography (EconomistSans Regular / 17 / 24 / 400).
1008
1007
  */
1009
- @font-face {
1010
- font-family: 'WAP Apple Pay Text';
1011
- src:
1012
- local('SF Pro Text Light'),
1013
- local('SFProText-Light'),
1014
- local('SF Pro Text'),
1015
- local('SFProText-Regular'),
1016
- local('-apple-system'),
1017
- local('BlinkMacSystemFont'),
1018
- local('Helvetica Neue');
1019
- font-weight: 300;
1020
- font-style: normal;
1021
- font-display: swap;
1022
- }
1023
-
1024
1008
  teg-apple-pay-button {
1025
- --wap-apple-pay-scale: 1.375; /* default height 44px / 32 */
1026
1009
  display: block;
1027
1010
  margin: var(--apple-pay-margin, 0);
1028
1011
  width: 100%;
@@ -1038,44 +1021,53 @@ var apple_pay_button_template_default = `<style>
1038
1021
  }
1039
1022
 
1040
1023
  teg-apple-pay-button .apple-pay-btn {
1041
- display: inline-flex;
1024
+ display: flex;
1042
1025
  align-items: center;
1043
1026
  justify-content: center;
1044
1027
  width: 100%;
1045
1028
  min-width: 0;
1046
1029
  height: 100%;
1047
- min-height: var(--apple-pay-height, 2.75rem);
1048
- padding: 0 calc(8px * var(--wap-apple-pay-scale));
1030
+ min-height: var(--apple-pay-height, 2.5rem);
1031
+ padding: 0;
1049
1032
  box-sizing: border-box;
1050
- background-color: var(--apple-pay-background-color, #000);
1033
+ background-color: var(--apple-pay-background-color, #1a1a1a);
1051
1034
  color: var(--apple-pay-foreground-color, #fff);
1052
1035
  border: none;
1053
- border-radius: var(--apple-pay-border-radius, 5px);
1036
+ border-radius: var(--apple-pay-border-radius, 0.25rem);
1054
1037
  cursor: pointer;
1055
- font-family: 'WAP Apple Pay Text', -apple-system, BlinkMacSystemFont,
1056
- 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
1057
- font-size: calc(12px * var(--wap-apple-pay-scale));
1058
- font-weight: 300;
1059
- font-style: normal;
1038
+ /* Same as wall Continue to checkout / Marber button large */
1039
+ font-family: var(
1040
+ --mb-typeface-sans,
1041
+ var(--wall-type-system-sans, 'EconomistSans', system-ui, sans-serif)
1042
+ );
1043
+ font-size: var(--mb-button-font-size, 1.0625rem);
1044
+ font-weight: var(--mb-font-weight-regular, 400);
1060
1045
  line-height: 1;
1061
- letter-spacing: -0.01em;
1062
- -webkit-font-smoothing: antialiased;
1063
- -moz-osx-font-smoothing: grayscale;
1064
1046
  }
1065
1047
 
1066
1048
  teg-apple-pay-button .apple-pay-btn__label {
1067
1049
  display: inline-flex;
1068
1050
  align-items: center;
1069
- gap: calc(4px * var(--wap-apple-pay-scale));
1051
+ /* No flex gap \u2014 spacing after \u201Cwith\u201D uses the same word-space as \u201CSubscribe with\u201D */
1052
+ gap: 0;
1070
1053
  white-space: nowrap;
1071
1054
  }
1072
1055
 
1073
- teg-apple-pay-button .apple-pay-btn__apple-logo {
1056
+ teg-apple-pay-button .apple-pay-btn__caption {
1057
+ /* One typographic word space after \u201Cwith\u201D, matching Subscribe\u2194with */
1058
+ padding-right: 0.25em;
1059
+ }
1060
+
1061
+ teg-apple-pay-button .apple-pay-btn__logo {
1074
1062
  flex-shrink: 0;
1075
1063
  display: block;
1076
- width: calc(12px * var(--wap-apple-pay-scale));
1077
- height: calc(14px * var(--wap-apple-pay-scale));
1064
+ /* Match caption font-size so mark aligns with text metrics */
1065
+ height: 1.05em;
1066
+ width: auto;
1067
+ aspect-ratio: 51 / 22;
1078
1068
  color: currentColor;
1069
+ /* Optical nudge \u2014 SVG viewBox sits slightly high vs EconomistSans caps */
1070
+ transform: translateY(0.06em);
1079
1071
  }
1080
1072
 
1081
1073
  teg-apple-pay-button .apple-pay-btn.wap-loading {
@@ -1121,20 +1113,19 @@ var apple_pay_button_template_default = `<style>
1121
1113
  aria-label="Subscribe with Apple Pay"
1122
1114
  data-analytics="paywall:apple-pay-checkout"
1123
1115
  >
1124
- <span class="apple-pay-btn__label">
1125
- Subscribe with
1126
- <svg
1127
- class="apple-pay-btn__apple-logo"
1128
- width="17"
1129
- height="19"
1130
- viewBox="0 0 15 18"
1116
+ <span class="apple-pay-btn__label"
1117
+ ><span class="apple-pay-btn__caption">Subscribe with</span
1118
+ ><svg
1119
+ class="apple-pay-btn__logo"
1120
+ width="42"
1121
+ height="18"
1122
+ viewBox="0 0 51 22"
1131
1123
  aria-hidden="true"
1132
1124
  role="img"
1133
1125
  >
1134
- <use href="#apple-logo" />
1135
- </svg>
1136
- Apple Pay
1137
- </span>
1126
+ <use href="#apple-pay-logo" />
1127
+ </svg
1128
+ ></span>
1138
1129
  <span class="apple-pay-btn__loading" aria-hidden="true">Loading...</span>
1139
1130
  </button>
1140
1131
  </div>
package/dist/src/apple-pay-button.stories.js CHANGED
@@ -66,13 +66,12 @@ function formatPrice(price, currencyCode, shouldFixDecimalPlaces = true, roundUp
66
66
  // src/apple-pay-logo.ts
67
67
  var LOGO_DEFS_ID = "apple-pay-logo-defs";
68
68
  var LOGO_PATH = "M10.2651 4.21143C10.4299 4.21143 10.7106 4.23763 11.1074 4.29004C11.5042 4.34245 11.9385 4.49219 12.4102 4.73926C12.8893 4.97884 13.3236 5.37939 13.7129 5.94092C13.6904 5.96338 13.5819 6.04574 13.3872 6.18799C13.1925 6.32275 12.9754 6.5249 12.7358 6.79443C12.4963 7.05648 12.2866 7.39339 12.1069 7.80518C11.9272 8.20947 11.8374 8.69238 11.8374 9.25391C11.8374 9.89779 11.9497 10.4443 12.1743 10.8936C12.4064 11.3428 12.6722 11.7059 12.9717 11.9829C13.2786 12.2524 13.5482 12.4508 13.7803 12.5781C14.0199 12.7054 14.1471 12.7728 14.1621 12.7803C14.1546 12.8102 14.0573 13.076 13.8701 13.5776C13.6904 14.0793 13.391 14.637 12.9717 15.251C12.6048 15.7826 12.208 16.2729 11.7812 16.7222C11.362 17.1714 10.8566 17.396 10.2651 17.396C9.86833 17.396 9.54264 17.3398 9.28809 17.2275C9.03353 17.1077 8.77148 16.9917 8.50195 16.8794C8.23242 16.7596 7.8693 16.6997 7.4126 16.6997C6.97087 16.6997 6.60026 16.7596 6.30078 16.8794C6.00879 16.9992 5.72803 17.119 5.4585 17.2388C5.19645 17.3586 4.88574 17.4185 4.52637 17.4185C3.97982 17.4185 3.50065 17.2013 3.08887 16.7671C2.67708 16.3328 2.25407 15.8125 1.81982 15.2061C1.3182 14.4873 0.887695 13.6113 0.52832 12.5781C0.176432 11.5374 0.000488281 10.4893 0.000488281 9.43359C0.000488281 8.30306 0.213867 7.35596 0.640625 6.59229C1.06738 5.82113 1.61393 5.24089 2.28027 4.85156C2.9541 4.45475 3.65039 4.25635 4.36914 4.25635C4.75098 4.25635 5.11035 4.31999 5.44727 4.44727C5.78418 4.56706 6.09863 4.69059 6.39062 4.81787C6.6901 4.94515 6.95964 5.00879 7.19922 5.00879C7.43132 5.00879 7.70085 4.94141 8.00781 4.80664C8.31478 4.67188 8.65918 4.54085 9.04102 4.41357C9.42285 4.27881 9.83089 4.21143 10.2651 4.21143ZM9.64746 2.78516C9.35547 3.13704 8.98861 3.43278 8.54688 3.67236C8.10514 3.90446 7.68587 4.02051 7.28906 4.02051C7.20671 4.02051 7.12809 4.01302 7.05322 3.99805C7.04574 3.97559 7.03825 3.93441 7.03076 3.87451C7.02327 3.81462 7.01953 3.75098 7.01953 3.68359C7.01953 3.23438 7.11686 2.80013 7.31152 2.38086C7.50618 1.9541 7.72705 1.60221 7.97412 1.3252C8.28857 0.950846 8.68538 0.640137 9.16455 0.393066C9.64372 0.145996 10.1004 0.014974 10.5347 0C10.5571 0.0973307 10.5684 0.213379 10.5684 0.348145C10.5684 0.797363 10.4823 1.23535 10.3101 1.66211C10.1379 2.08138 9.91699 2.45573 9.64746 2.78516ZM17.6885 11.5112V9.71436H22.0459C23.2064 9.71436 24.1048 9.41488 24.7412 8.81592C25.3776 8.20947 25.6958 7.37467 25.6958 6.31152V6.28906C25.6958 5.21842 25.3776 4.38363 24.7412 3.78467C24.1048 3.18571 23.2064 2.88623 22.0459 2.88623H17.6885V1.08936H22.5625C23.5807 1.08936 24.4792 1.30648 25.2578 1.74072C26.0365 2.17497 26.6466 2.78141 27.0884 3.56006C27.5376 4.3387 27.7622 5.24089 27.7622 6.2666V6.28906C27.7622 7.31478 27.5376 8.2207 27.0884 9.00684C26.6466 9.79297 26.0365 10.4069 25.2578 10.8486C24.4792 11.2904 23.5807 11.5112 22.5625 11.5112H17.6885ZM16.6777 17.2949V1.08936H18.6992V17.2949H16.6777ZM32.6699 17.5195C31.9062 17.5195 31.2249 17.3735 30.626 17.0815C30.0345 16.7896 29.5703 16.3778 29.2334 15.8462C28.904 15.3071 28.7393 14.682 28.7393 13.9707V13.9482C28.7393 13.2594 28.9077 12.668 29.2446 12.1738C29.5815 11.6797 30.0682 11.2904 30.7046 11.0059C31.3485 10.7139 32.1234 10.5417 33.0293 10.4893L37.3979 10.2422V11.7695L33.2539 12.0278C32.4303 12.0728 31.8052 12.2599 31.3784 12.5894C30.9517 12.9188 30.7383 13.3643 30.7383 13.9258V13.9482C30.7383 14.5322 30.9554 14.9927 31.3896 15.3296C31.8239 15.659 32.3929 15.8237 33.0967 15.8237C33.7331 15.8237 34.2983 15.6927 34.7925 15.4307C35.2941 15.1686 35.6909 14.813 35.9829 14.3638C36.2749 13.9071 36.4209 13.3979 36.4209 12.8364V9.27637C36.4209 8.55762 36.1963 7.99609 35.7471 7.5918C35.2979 7.1875 34.6502 6.98535 33.8042 6.98535C33.063 6.98535 32.4603 7.13883 31.9961 7.4458C31.5394 7.74528 31.2474 8.14958 31.1201 8.65869L31.0977 8.7373H29.1885L29.1997 8.625C29.2746 7.98861 29.5067 7.41585 29.896 6.90674C30.2928 6.39762 30.8244 5.99707 31.4907 5.70508C32.1646 5.4056 32.9469 5.25586 33.8379 5.25586C34.7812 5.25586 35.5898 5.41683 36.2637 5.73877C36.945 6.05322 37.4653 6.50244 37.8247 7.08643C38.1916 7.66292 38.375 8.35173 38.375 9.15283V17.2949H36.4209V15.4307H36.3311C36.0915 15.8574 35.7845 16.228 35.4102 16.5425C35.0433 16.8569 34.6278 17.1003 34.1636 17.2725C33.6994 17.4372 33.2015 17.5195 32.6699 17.5195ZM42.1484 21.3267C41.9837 21.3267 41.8115 21.3192 41.6318 21.3042C41.4521 21.2892 41.2987 21.2705 41.1714 21.248V19.6421C41.2612 19.6646 41.366 19.6795 41.4858 19.687C41.6056 19.702 41.7292 19.7095 41.8564 19.7095C42.4554 19.7095 42.9383 19.5897 43.3052 19.3501C43.672 19.1105 43.9678 18.6576 44.1924 17.9912L44.4282 17.3062L40.0371 5.48047H42.126L45.6187 15.981L45.0796 15.2734H45.7759L45.248 15.981L48.7407 5.48047H50.7959L46.1802 18.0249C45.8807 18.826 45.555 19.4661 45.2031 19.9453C44.8512 20.432 44.432 20.7839 43.9453 21.001C43.4587 21.2181 42.8597 21.3267 42.1484 21.3267Z";
69
- var APPLE_LOGO_PATH = LOGO_PATH.slice(0, LOGO_PATH.indexOf("M17.6885"));
70
69
  function ensureApplePayLogoSymbol() {
71
70
  if (document.getElementById(LOGO_DEFS_ID)) {
72
71
  return;
73
72
  }
74
73
  const tmp = document.createElement("div");
75
- 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><symbol id="apple-logo" viewBox="0 0 15 18"><path d="${APPLE_LOGO_PATH}" fill="currentColor"/></symbol></defs></svg>`;
74
+ 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>`;
76
75
  document.body.prepend(tmp.firstElementChild);
77
76
  }
78
77
 
@@ -1011,26 +1010,10 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
1011
1010
  // src/templates/apple-pay-button.template.html
1012
1011
  var apple_pay_button_template_default = `<style>
1013
1012
  /*
1014
- * Entry CTA only: \u201CSubscribe with [apple logo] Apple Pay\u201D.
1015
- * Uses OS SF Pro via local() (no Marber). Modal styling is unchanged.
1013
+ * Entry CTA: \u201CSubscribe with\u201D + Apple Pay wordmark (Figma 1118:14088).
1014
+ * \u201CSubscribe with\u201D matches Continue to checkout typography (EconomistSans Regular / 17 / 24 / 400).
1016
1015
  */
1017
- @font-face {
1018
- font-family: 'WAP Apple Pay Text';
1019
- src:
1020
- local('SF Pro Text Light'),
1021
- local('SFProText-Light'),
1022
- local('SF Pro Text'),
1023
- local('SFProText-Regular'),
1024
- local('-apple-system'),
1025
- local('BlinkMacSystemFont'),
1026
- local('Helvetica Neue');
1027
- font-weight: 300;
1028
- font-style: normal;
1029
- font-display: swap;
1030
- }
1031
-
1032
1016
  teg-apple-pay-button {
1033
- --wap-apple-pay-scale: 1.375; /* default height 44px / 32 */
1034
1017
  display: block;
1035
1018
  margin: var(--apple-pay-margin, 0);
1036
1019
  width: 100%;
@@ -1046,44 +1029,53 @@ var apple_pay_button_template_default = `<style>
1046
1029
  }
1047
1030
 
1048
1031
  teg-apple-pay-button .apple-pay-btn {
1049
- display: inline-flex;
1032
+ display: flex;
1050
1033
  align-items: center;
1051
1034
  justify-content: center;
1052
1035
  width: 100%;
1053
1036
  min-width: 0;
1054
1037
  height: 100%;
1055
- min-height: var(--apple-pay-height, 2.75rem);
1056
- padding: 0 calc(8px * var(--wap-apple-pay-scale));
1038
+ min-height: var(--apple-pay-height, 2.5rem);
1039
+ padding: 0;
1057
1040
  box-sizing: border-box;
1058
- background-color: var(--apple-pay-background-color, #000);
1041
+ background-color: var(--apple-pay-background-color, #1a1a1a);
1059
1042
  color: var(--apple-pay-foreground-color, #fff);
1060
1043
  border: none;
1061
- border-radius: var(--apple-pay-border-radius, 5px);
1044
+ border-radius: var(--apple-pay-border-radius, 0.25rem);
1062
1045
  cursor: pointer;
1063
- font-family: 'WAP Apple Pay Text', -apple-system, BlinkMacSystemFont,
1064
- 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
1065
- font-size: calc(12px * var(--wap-apple-pay-scale));
1066
- font-weight: 300;
1067
- font-style: normal;
1046
+ /* Same as wall Continue to checkout / Marber button large */
1047
+ font-family: var(
1048
+ --mb-typeface-sans,
1049
+ var(--wall-type-system-sans, 'EconomistSans', system-ui, sans-serif)
1050
+ );
1051
+ font-size: var(--mb-button-font-size, 1.0625rem);
1052
+ font-weight: var(--mb-font-weight-regular, 400);
1068
1053
  line-height: 1;
1069
- letter-spacing: -0.01em;
1070
- -webkit-font-smoothing: antialiased;
1071
- -moz-osx-font-smoothing: grayscale;
1072
1054
  }
1073
1055
 
1074
1056
  teg-apple-pay-button .apple-pay-btn__label {
1075
1057
  display: inline-flex;
1076
1058
  align-items: center;
1077
- gap: calc(4px * var(--wap-apple-pay-scale));
1059
+ /* No flex gap \u2014 spacing after \u201Cwith\u201D uses the same word-space as \u201CSubscribe with\u201D */
1060
+ gap: 0;
1078
1061
  white-space: nowrap;
1079
1062
  }
1080
1063
 
1081
- teg-apple-pay-button .apple-pay-btn__apple-logo {
1064
+ teg-apple-pay-button .apple-pay-btn__caption {
1065
+ /* One typographic word space after \u201Cwith\u201D, matching Subscribe\u2194with */
1066
+ padding-right: 0.25em;
1067
+ }
1068
+
1069
+ teg-apple-pay-button .apple-pay-btn__logo {
1082
1070
  flex-shrink: 0;
1083
1071
  display: block;
1084
- width: calc(12px * var(--wap-apple-pay-scale));
1085
- height: calc(14px * var(--wap-apple-pay-scale));
1072
+ /* Match caption font-size so mark aligns with text metrics */
1073
+ height: 1.05em;
1074
+ width: auto;
1075
+ aspect-ratio: 51 / 22;
1086
1076
  color: currentColor;
1077
+ /* Optical nudge \u2014 SVG viewBox sits slightly high vs EconomistSans caps */
1078
+ transform: translateY(0.06em);
1087
1079
  }
1088
1080
 
1089
1081
  teg-apple-pay-button .apple-pay-btn.wap-loading {
@@ -1129,20 +1121,19 @@ var apple_pay_button_template_default = `<style>
1129
1121
  aria-label="Subscribe with Apple Pay"
1130
1122
  data-analytics="paywall:apple-pay-checkout"
1131
1123
  >
1132
- <span class="apple-pay-btn__label">
1133
- Subscribe with
1134
- <svg
1135
- class="apple-pay-btn__apple-logo"
1136
- width="17"
1137
- height="19"
1138
- viewBox="0 0 15 18"
1124
+ <span class="apple-pay-btn__label"
1125
+ ><span class="apple-pay-btn__caption">Subscribe with</span
1126
+ ><svg
1127
+ class="apple-pay-btn__logo"
1128
+ width="42"
1129
+ height="18"
1130
+ viewBox="0 0 51 22"
1139
1131
  aria-hidden="true"
1140
1132
  role="img"
1141
1133
  >
1142
- <use href="#apple-logo" />
1143
- </svg>
1144
- Apple Pay
1145
- </span>
1134
+ <use href="#apple-pay-logo" />
1135
+ </svg
1136
+ ></span>
1146
1137
  <span class="apple-pay-btn__loading" aria-hidden="true">Loading...</span>
1147
1138
  </button>
1148
1139
  </div>
package/dist/src/apple-pay-logo.js CHANGED
@@ -1,13 +1,12 @@
1
1
  // src/apple-pay-logo.ts
2
2
  var LOGO_DEFS_ID = "apple-pay-logo-defs";
3
3
  var LOGO_PATH = "M10.2651 4.21143C10.4299 4.21143 10.7106 4.23763 11.1074 4.29004C11.5042 4.34245 11.9385 4.49219 12.4102 4.73926C12.8893 4.97884 13.3236 5.37939 13.7129 5.94092C13.6904 5.96338 13.5819 6.04574 13.3872 6.18799C13.1925 6.32275 12.9754 6.5249 12.7358 6.79443C12.4963 7.05648 12.2866 7.39339 12.1069 7.80518C11.9272 8.20947 11.8374 8.69238 11.8374 9.25391C11.8374 9.89779 11.9497 10.4443 12.1743 10.8936C12.4064 11.3428 12.6722 11.7059 12.9717 11.9829C13.2786 12.2524 13.5482 12.4508 13.7803 12.5781C14.0199 12.7054 14.1471 12.7728 14.1621 12.7803C14.1546 12.8102 14.0573 13.076 13.8701 13.5776C13.6904 14.0793 13.391 14.637 12.9717 15.251C12.6048 15.7826 12.208 16.2729 11.7812 16.7222C11.362 17.1714 10.8566 17.396 10.2651 17.396C9.86833 17.396 9.54264 17.3398 9.28809 17.2275C9.03353 17.1077 8.77148 16.9917 8.50195 16.8794C8.23242 16.7596 7.8693 16.6997 7.4126 16.6997C6.97087 16.6997 6.60026 16.7596 6.30078 16.8794C6.00879 16.9992 5.72803 17.119 5.4585 17.2388C5.19645 17.3586 4.88574 17.4185 4.52637 17.4185C3.97982 17.4185 3.50065 17.2013 3.08887 16.7671C2.67708 16.3328 2.25407 15.8125 1.81982 15.2061C1.3182 14.4873 0.887695 13.6113 0.52832 12.5781C0.176432 11.5374 0.000488281 10.4893 0.000488281 9.43359C0.000488281 8.30306 0.213867 7.35596 0.640625 6.59229C1.06738 5.82113 1.61393 5.24089 2.28027 4.85156C2.9541 4.45475 3.65039 4.25635 4.36914 4.25635C4.75098 4.25635 5.11035 4.31999 5.44727 4.44727C5.78418 4.56706 6.09863 4.69059 6.39062 4.81787C6.6901 4.94515 6.95964 5.00879 7.19922 5.00879C7.43132 5.00879 7.70085 4.94141 8.00781 4.80664C8.31478 4.67188 8.65918 4.54085 9.04102 4.41357C9.42285 4.27881 9.83089 4.21143 10.2651 4.21143ZM9.64746 2.78516C9.35547 3.13704 8.98861 3.43278 8.54688 3.67236C8.10514 3.90446 7.68587 4.02051 7.28906 4.02051C7.20671 4.02051 7.12809 4.01302 7.05322 3.99805C7.04574 3.97559 7.03825 3.93441 7.03076 3.87451C7.02327 3.81462 7.01953 3.75098 7.01953 3.68359C7.01953 3.23438 7.11686 2.80013 7.31152 2.38086C7.50618 1.9541 7.72705 1.60221 7.97412 1.3252C8.28857 0.950846 8.68538 0.640137 9.16455 0.393066C9.64372 0.145996 10.1004 0.014974 10.5347 0C10.5571 0.0973307 10.5684 0.213379 10.5684 0.348145C10.5684 0.797363 10.4823 1.23535 10.3101 1.66211C10.1379 2.08138 9.91699 2.45573 9.64746 2.78516ZM17.6885 11.5112V9.71436H22.0459C23.2064 9.71436 24.1048 9.41488 24.7412 8.81592C25.3776 8.20947 25.6958 7.37467 25.6958 6.31152V6.28906C25.6958 5.21842 25.3776 4.38363 24.7412 3.78467C24.1048 3.18571 23.2064 2.88623 22.0459 2.88623H17.6885V1.08936H22.5625C23.5807 1.08936 24.4792 1.30648 25.2578 1.74072C26.0365 2.17497 26.6466 2.78141 27.0884 3.56006C27.5376 4.3387 27.7622 5.24089 27.7622 6.2666V6.28906C27.7622 7.31478 27.5376 8.2207 27.0884 9.00684C26.6466 9.79297 26.0365 10.4069 25.2578 10.8486C24.4792 11.2904 23.5807 11.5112 22.5625 11.5112H17.6885ZM16.6777 17.2949V1.08936H18.6992V17.2949H16.6777ZM32.6699 17.5195C31.9062 17.5195 31.2249 17.3735 30.626 17.0815C30.0345 16.7896 29.5703 16.3778 29.2334 15.8462C28.904 15.3071 28.7393 14.682 28.7393 13.9707V13.9482C28.7393 13.2594 28.9077 12.668 29.2446 12.1738C29.5815 11.6797 30.0682 11.2904 30.7046 11.0059C31.3485 10.7139 32.1234 10.5417 33.0293 10.4893L37.3979 10.2422V11.7695L33.2539 12.0278C32.4303 12.0728 31.8052 12.2599 31.3784 12.5894C30.9517 12.9188 30.7383 13.3643 30.7383 13.9258V13.9482C30.7383 14.5322 30.9554 14.9927 31.3896 15.3296C31.8239 15.659 32.3929 15.8237 33.0967 15.8237C33.7331 15.8237 34.2983 15.6927 34.7925 15.4307C35.2941 15.1686 35.6909 14.813 35.9829 14.3638C36.2749 13.9071 36.4209 13.3979 36.4209 12.8364V9.27637C36.4209 8.55762 36.1963 7.99609 35.7471 7.5918C35.2979 7.1875 34.6502 6.98535 33.8042 6.98535C33.063 6.98535 32.4603 7.13883 31.9961 7.4458C31.5394 7.74528 31.2474 8.14958 31.1201 8.65869L31.0977 8.7373H29.1885L29.1997 8.625C29.2746 7.98861 29.5067 7.41585 29.896 6.90674C30.2928 6.39762 30.8244 5.99707 31.4907 5.70508C32.1646 5.4056 32.9469 5.25586 33.8379 5.25586C34.7812 5.25586 35.5898 5.41683 36.2637 5.73877C36.945 6.05322 37.4653 6.50244 37.8247 7.08643C38.1916 7.66292 38.375 8.35173 38.375 9.15283V17.2949H36.4209V15.4307H36.3311C36.0915 15.8574 35.7845 16.228 35.4102 16.5425C35.0433 16.8569 34.6278 17.1003 34.1636 17.2725C33.6994 17.4372 33.2015 17.5195 32.6699 17.5195ZM42.1484 21.3267C41.9837 21.3267 41.8115 21.3192 41.6318 21.3042C41.4521 21.2892 41.2987 21.2705 41.1714 21.248V19.6421C41.2612 19.6646 41.366 19.6795 41.4858 19.687C41.6056 19.702 41.7292 19.7095 41.8564 19.7095C42.4554 19.7095 42.9383 19.5897 43.3052 19.3501C43.672 19.1105 43.9678 18.6576 44.1924 17.9912L44.4282 17.3062L40.0371 5.48047H42.126L45.6187 15.981L45.0796 15.2734H45.7759L45.248 15.981L48.7407 5.48047H50.7959L46.1802 18.0249C45.8807 18.826 45.555 19.4661 45.2031 19.9453C44.8512 20.432 44.432 20.7839 43.9453 21.001C43.4587 21.2181 42.8597 21.3267 42.1484 21.3267Z";
4
- var APPLE_LOGO_PATH = LOGO_PATH.slice(0, LOGO_PATH.indexOf("M17.6885"));
5
4
  function ensureApplePayLogoSymbol() {
6
5
  if (document.getElementById(LOGO_DEFS_ID)) {
7
6
  return;
8
7
  }
9
8
  const tmp = document.createElement("div");
10
- 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><symbol id="apple-logo" viewBox="0 0 15 18"><path d="${APPLE_LOGO_PATH}" fill="currentColor"/></symbol></defs></svg>`;
9
+ 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>`;
11
10
  document.body.prepend(tmp.firstElementChild);
12
11
  }
13
12
  export {
package/dist/src/apple-pay-modal.js CHANGED
@@ -66,13 +66,12 @@ function formatPrice(price, currencyCode, shouldFixDecimalPlaces = true, roundUp
66
66
  // src/apple-pay-logo.ts
67
67
  var LOGO_DEFS_ID = "apple-pay-logo-defs";
68
68
  var LOGO_PATH = "M10.2651 4.21143C10.4299 4.21143 10.7106 4.23763 11.1074 4.29004C11.5042 4.34245 11.9385 4.49219 12.4102 4.73926C12.8893 4.97884 13.3236 5.37939 13.7129 5.94092C13.6904 5.96338 13.5819 6.04574 13.3872 6.18799C13.1925 6.32275 12.9754 6.5249 12.7358 6.79443C12.4963 7.05648 12.2866 7.39339 12.1069 7.80518C11.9272 8.20947 11.8374 8.69238 11.8374 9.25391C11.8374 9.89779 11.9497 10.4443 12.1743 10.8936C12.4064 11.3428 12.6722 11.7059 12.9717 11.9829C13.2786 12.2524 13.5482 12.4508 13.7803 12.5781C14.0199 12.7054 14.1471 12.7728 14.1621 12.7803C14.1546 12.8102 14.0573 13.076 13.8701 13.5776C13.6904 14.0793 13.391 14.637 12.9717 15.251C12.6048 15.7826 12.208 16.2729 11.7812 16.7222C11.362 17.1714 10.8566 17.396 10.2651 17.396C9.86833 17.396 9.54264 17.3398 9.28809 17.2275C9.03353 17.1077 8.77148 16.9917 8.50195 16.8794C8.23242 16.7596 7.8693 16.6997 7.4126 16.6997C6.97087 16.6997 6.60026 16.7596 6.30078 16.8794C6.00879 16.9992 5.72803 17.119 5.4585 17.2388C5.19645 17.3586 4.88574 17.4185 4.52637 17.4185C3.97982 17.4185 3.50065 17.2013 3.08887 16.7671C2.67708 16.3328 2.25407 15.8125 1.81982 15.2061C1.3182 14.4873 0.887695 13.6113 0.52832 12.5781C0.176432 11.5374 0.000488281 10.4893 0.000488281 9.43359C0.000488281 8.30306 0.213867 7.35596 0.640625 6.59229C1.06738 5.82113 1.61393 5.24089 2.28027 4.85156C2.9541 4.45475 3.65039 4.25635 4.36914 4.25635C4.75098 4.25635 5.11035 4.31999 5.44727 4.44727C5.78418 4.56706 6.09863 4.69059 6.39062 4.81787C6.6901 4.94515 6.95964 5.00879 7.19922 5.00879C7.43132 5.00879 7.70085 4.94141 8.00781 4.80664C8.31478 4.67188 8.65918 4.54085 9.04102 4.41357C9.42285 4.27881 9.83089 4.21143 10.2651 4.21143ZM9.64746 2.78516C9.35547 3.13704 8.98861 3.43278 8.54688 3.67236C8.10514 3.90446 7.68587 4.02051 7.28906 4.02051C7.20671 4.02051 7.12809 4.01302 7.05322 3.99805C7.04574 3.97559 7.03825 3.93441 7.03076 3.87451C7.02327 3.81462 7.01953 3.75098 7.01953 3.68359C7.01953 3.23438 7.11686 2.80013 7.31152 2.38086C7.50618 1.9541 7.72705 1.60221 7.97412 1.3252C8.28857 0.950846 8.68538 0.640137 9.16455 0.393066C9.64372 0.145996 10.1004 0.014974 10.5347 0C10.5571 0.0973307 10.5684 0.213379 10.5684 0.348145C10.5684 0.797363 10.4823 1.23535 10.3101 1.66211C10.1379 2.08138 9.91699 2.45573 9.64746 2.78516ZM17.6885 11.5112V9.71436H22.0459C23.2064 9.71436 24.1048 9.41488 24.7412 8.81592C25.3776 8.20947 25.6958 7.37467 25.6958 6.31152V6.28906C25.6958 5.21842 25.3776 4.38363 24.7412 3.78467C24.1048 3.18571 23.2064 2.88623 22.0459 2.88623H17.6885V1.08936H22.5625C23.5807 1.08936 24.4792 1.30648 25.2578 1.74072C26.0365 2.17497 26.6466 2.78141 27.0884 3.56006C27.5376 4.3387 27.7622 5.24089 27.7622 6.2666V6.28906C27.7622 7.31478 27.5376 8.2207 27.0884 9.00684C26.6466 9.79297 26.0365 10.4069 25.2578 10.8486C24.4792 11.2904 23.5807 11.5112 22.5625 11.5112H17.6885ZM16.6777 17.2949V1.08936H18.6992V17.2949H16.6777ZM32.6699 17.5195C31.9062 17.5195 31.2249 17.3735 30.626 17.0815C30.0345 16.7896 29.5703 16.3778 29.2334 15.8462C28.904 15.3071 28.7393 14.682 28.7393 13.9707V13.9482C28.7393 13.2594 28.9077 12.668 29.2446 12.1738C29.5815 11.6797 30.0682 11.2904 30.7046 11.0059C31.3485 10.7139 32.1234 10.5417 33.0293 10.4893L37.3979 10.2422V11.7695L33.2539 12.0278C32.4303 12.0728 31.8052 12.2599 31.3784 12.5894C30.9517 12.9188 30.7383 13.3643 30.7383 13.9258V13.9482C30.7383 14.5322 30.9554 14.9927 31.3896 15.3296C31.8239 15.659 32.3929 15.8237 33.0967 15.8237C33.7331 15.8237 34.2983 15.6927 34.7925 15.4307C35.2941 15.1686 35.6909 14.813 35.9829 14.3638C36.2749 13.9071 36.4209 13.3979 36.4209 12.8364V9.27637C36.4209 8.55762 36.1963 7.99609 35.7471 7.5918C35.2979 7.1875 34.6502 6.98535 33.8042 6.98535C33.063 6.98535 32.4603 7.13883 31.9961 7.4458C31.5394 7.74528 31.2474 8.14958 31.1201 8.65869L31.0977 8.7373H29.1885L29.1997 8.625C29.2746 7.98861 29.5067 7.41585 29.896 6.90674C30.2928 6.39762 30.8244 5.99707 31.4907 5.70508C32.1646 5.4056 32.9469 5.25586 33.8379 5.25586C34.7812 5.25586 35.5898 5.41683 36.2637 5.73877C36.945 6.05322 37.4653 6.50244 37.8247 7.08643C38.1916 7.66292 38.375 8.35173 38.375 9.15283V17.2949H36.4209V15.4307H36.3311C36.0915 15.8574 35.7845 16.228 35.4102 16.5425C35.0433 16.8569 34.6278 17.1003 34.1636 17.2725C33.6994 17.4372 33.2015 17.5195 32.6699 17.5195ZM42.1484 21.3267C41.9837 21.3267 41.8115 21.3192 41.6318 21.3042C41.4521 21.2892 41.2987 21.2705 41.1714 21.248V19.6421C41.2612 19.6646 41.366 19.6795 41.4858 19.687C41.6056 19.702 41.7292 19.7095 41.8564 19.7095C42.4554 19.7095 42.9383 19.5897 43.3052 19.3501C43.672 19.1105 43.9678 18.6576 44.1924 17.9912L44.4282 17.3062L40.0371 5.48047H42.126L45.6187 15.981L45.0796 15.2734H45.7759L45.248 15.981L48.7407 5.48047H50.7959L46.1802 18.0249C45.8807 18.826 45.555 19.4661 45.2031 19.9453C44.8512 20.432 44.432 20.7839 43.9453 21.001C43.4587 21.2181 42.8597 21.3267 42.1484 21.3267Z";
69
- var APPLE_LOGO_PATH = LOGO_PATH.slice(0, LOGO_PATH.indexOf("M17.6885"));
70
69
  function ensureApplePayLogoSymbol() {
71
70
  if (document.getElementById(LOGO_DEFS_ID)) {
72
71
  return;
73
72
  }
74
73
  const tmp = document.createElement("div");
75
- 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><symbol id="apple-logo" viewBox="0 0 15 18"><path d="${APPLE_LOGO_PATH}" fill="currentColor"/></symbol></defs></svg>`;
74
+ 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>`;
76
75
  document.body.prepend(tmp.firstElementChild);
77
76
  }
78
77
 
package/dist/src/apple-pay-modal.stories.js CHANGED
@@ -66,13 +66,12 @@ function formatPrice(price, currencyCode, shouldFixDecimalPlaces = true, roundUp
66
66
  // src/apple-pay-logo.ts
67
67
  var LOGO_DEFS_ID = "apple-pay-logo-defs";
68
68
  var LOGO_PATH = "M10.2651 4.21143C10.4299 4.21143 10.7106 4.23763 11.1074 4.29004C11.5042 4.34245 11.9385 4.49219 12.4102 4.73926C12.8893 4.97884 13.3236 5.37939 13.7129 5.94092C13.6904 5.96338 13.5819 6.04574 13.3872 6.18799C13.1925 6.32275 12.9754 6.5249 12.7358 6.79443C12.4963 7.05648 12.2866 7.39339 12.1069 7.80518C11.9272 8.20947 11.8374 8.69238 11.8374 9.25391C11.8374 9.89779 11.9497 10.4443 12.1743 10.8936C12.4064 11.3428 12.6722 11.7059 12.9717 11.9829C13.2786 12.2524 13.5482 12.4508 13.7803 12.5781C14.0199 12.7054 14.1471 12.7728 14.1621 12.7803C14.1546 12.8102 14.0573 13.076 13.8701 13.5776C13.6904 14.0793 13.391 14.637 12.9717 15.251C12.6048 15.7826 12.208 16.2729 11.7812 16.7222C11.362 17.1714 10.8566 17.396 10.2651 17.396C9.86833 17.396 9.54264 17.3398 9.28809 17.2275C9.03353 17.1077 8.77148 16.9917 8.50195 16.8794C8.23242 16.7596 7.8693 16.6997 7.4126 16.6997C6.97087 16.6997 6.60026 16.7596 6.30078 16.8794C6.00879 16.9992 5.72803 17.119 5.4585 17.2388C5.19645 17.3586 4.88574 17.4185 4.52637 17.4185C3.97982 17.4185 3.50065 17.2013 3.08887 16.7671C2.67708 16.3328 2.25407 15.8125 1.81982 15.2061C1.3182 14.4873 0.887695 13.6113 0.52832 12.5781C0.176432 11.5374 0.000488281 10.4893 0.000488281 9.43359C0.000488281 8.30306 0.213867 7.35596 0.640625 6.59229C1.06738 5.82113 1.61393 5.24089 2.28027 4.85156C2.9541 4.45475 3.65039 4.25635 4.36914 4.25635C4.75098 4.25635 5.11035 4.31999 5.44727 4.44727C5.78418 4.56706 6.09863 4.69059 6.39062 4.81787C6.6901 4.94515 6.95964 5.00879 7.19922 5.00879C7.43132 5.00879 7.70085 4.94141 8.00781 4.80664C8.31478 4.67188 8.65918 4.54085 9.04102 4.41357C9.42285 4.27881 9.83089 4.21143 10.2651 4.21143ZM9.64746 2.78516C9.35547 3.13704 8.98861 3.43278 8.54688 3.67236C8.10514 3.90446 7.68587 4.02051 7.28906 4.02051C7.20671 4.02051 7.12809 4.01302 7.05322 3.99805C7.04574 3.97559 7.03825 3.93441 7.03076 3.87451C7.02327 3.81462 7.01953 3.75098 7.01953 3.68359C7.01953 3.23438 7.11686 2.80013 7.31152 2.38086C7.50618 1.9541 7.72705 1.60221 7.97412 1.3252C8.28857 0.950846 8.68538 0.640137 9.16455 0.393066C9.64372 0.145996 10.1004 0.014974 10.5347 0C10.5571 0.0973307 10.5684 0.213379 10.5684 0.348145C10.5684 0.797363 10.4823 1.23535 10.3101 1.66211C10.1379 2.08138 9.91699 2.45573 9.64746 2.78516ZM17.6885 11.5112V9.71436H22.0459C23.2064 9.71436 24.1048 9.41488 24.7412 8.81592C25.3776 8.20947 25.6958 7.37467 25.6958 6.31152V6.28906C25.6958 5.21842 25.3776 4.38363 24.7412 3.78467C24.1048 3.18571 23.2064 2.88623 22.0459 2.88623H17.6885V1.08936H22.5625C23.5807 1.08936 24.4792 1.30648 25.2578 1.74072C26.0365 2.17497 26.6466 2.78141 27.0884 3.56006C27.5376 4.3387 27.7622 5.24089 27.7622 6.2666V6.28906C27.7622 7.31478 27.5376 8.2207 27.0884 9.00684C26.6466 9.79297 26.0365 10.4069 25.2578 10.8486C24.4792 11.2904 23.5807 11.5112 22.5625 11.5112H17.6885ZM16.6777 17.2949V1.08936H18.6992V17.2949H16.6777ZM32.6699 17.5195C31.9062 17.5195 31.2249 17.3735 30.626 17.0815C30.0345 16.7896 29.5703 16.3778 29.2334 15.8462C28.904 15.3071 28.7393 14.682 28.7393 13.9707V13.9482C28.7393 13.2594 28.9077 12.668 29.2446 12.1738C29.5815 11.6797 30.0682 11.2904 30.7046 11.0059C31.3485 10.7139 32.1234 10.5417 33.0293 10.4893L37.3979 10.2422V11.7695L33.2539 12.0278C32.4303 12.0728 31.8052 12.2599 31.3784 12.5894C30.9517 12.9188 30.7383 13.3643 30.7383 13.9258V13.9482C30.7383 14.5322 30.9554 14.9927 31.3896 15.3296C31.8239 15.659 32.3929 15.8237 33.0967 15.8237C33.7331 15.8237 34.2983 15.6927 34.7925 15.4307C35.2941 15.1686 35.6909 14.813 35.9829 14.3638C36.2749 13.9071 36.4209 13.3979 36.4209 12.8364V9.27637C36.4209 8.55762 36.1963 7.99609 35.7471 7.5918C35.2979 7.1875 34.6502 6.98535 33.8042 6.98535C33.063 6.98535 32.4603 7.13883 31.9961 7.4458C31.5394 7.74528 31.2474 8.14958 31.1201 8.65869L31.0977 8.7373H29.1885L29.1997 8.625C29.2746 7.98861 29.5067 7.41585 29.896 6.90674C30.2928 6.39762 30.8244 5.99707 31.4907 5.70508C32.1646 5.4056 32.9469 5.25586 33.8379 5.25586C34.7812 5.25586 35.5898 5.41683 36.2637 5.73877C36.945 6.05322 37.4653 6.50244 37.8247 7.08643C38.1916 7.66292 38.375 8.35173 38.375 9.15283V17.2949H36.4209V15.4307H36.3311C36.0915 15.8574 35.7845 16.228 35.4102 16.5425C35.0433 16.8569 34.6278 17.1003 34.1636 17.2725C33.6994 17.4372 33.2015 17.5195 32.6699 17.5195ZM42.1484 21.3267C41.9837 21.3267 41.8115 21.3192 41.6318 21.3042C41.4521 21.2892 41.2987 21.2705 41.1714 21.248V19.6421C41.2612 19.6646 41.366 19.6795 41.4858 19.687C41.6056 19.702 41.7292 19.7095 41.8564 19.7095C42.4554 19.7095 42.9383 19.5897 43.3052 19.3501C43.672 19.1105 43.9678 18.6576 44.1924 17.9912L44.4282 17.3062L40.0371 5.48047H42.126L45.6187 15.981L45.0796 15.2734H45.7759L45.248 15.981L48.7407 5.48047H50.7959L46.1802 18.0249C45.8807 18.826 45.555 19.4661 45.2031 19.9453C44.8512 20.432 44.432 20.7839 43.9453 21.001C43.4587 21.2181 42.8597 21.3267 42.1484 21.3267Z";
69
- var APPLE_LOGO_PATH = LOGO_PATH.slice(0, LOGO_PATH.indexOf("M17.6885"));
70
69
  function ensureApplePayLogoSymbol() {
71
70
  if (document.getElementById(LOGO_DEFS_ID)) {
72
71
  return;
73
72
  }
74
73
  const tmp = document.createElement("div");
75
- 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><symbol id="apple-logo" viewBox="0 0 15 18"><path d="${APPLE_LOGO_PATH}" fill="currentColor"/></symbol></defs></svg>`;
74
+ 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>`;
76
75
  document.body.prepend(tmp.firstElementChild);
77
76
  }
78
77
 
@@ -1003,26 +1002,10 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
1003
1002
  // src/templates/apple-pay-button.template.html
1004
1003
  var apple_pay_button_template_default = `<style>
1005
1004
  /*
1006
- * Entry CTA only: \u201CSubscribe with [apple logo] Apple Pay\u201D.
1007
- * Uses OS SF Pro via local() (no Marber). Modal styling is unchanged.
1005
+ * Entry CTA: \u201CSubscribe with\u201D + Apple Pay wordmark (Figma 1118:14088).
1006
+ * \u201CSubscribe with\u201D matches Continue to checkout typography (EconomistSans Regular / 17 / 24 / 400).
1008
1007
  */
1009
- @font-face {
1010
- font-family: 'WAP Apple Pay Text';
1011
- src:
1012
- local('SF Pro Text Light'),
1013
- local('SFProText-Light'),
1014
- local('SF Pro Text'),
1015
- local('SFProText-Regular'),
1016
- local('-apple-system'),
1017
- local('BlinkMacSystemFont'),
1018
- local('Helvetica Neue');
1019
- font-weight: 300;
1020
- font-style: normal;
1021
- font-display: swap;
1022
- }
1023
-
1024
1008
  teg-apple-pay-button {
1025
- --wap-apple-pay-scale: 1.375; /* default height 44px / 32 */
1026
1009
  display: block;
1027
1010
  margin: var(--apple-pay-margin, 0);
1028
1011
  width: 100%;
@@ -1038,44 +1021,53 @@ var apple_pay_button_template_default = `<style>
1038
1021
  }
1039
1022
 
1040
1023
  teg-apple-pay-button .apple-pay-btn {
1041
- display: inline-flex;
1024
+ display: flex;
1042
1025
  align-items: center;
1043
1026
  justify-content: center;
1044
1027
  width: 100%;
1045
1028
  min-width: 0;
1046
1029
  height: 100%;
1047
- min-height: var(--apple-pay-height, 2.75rem);
1048
- padding: 0 calc(8px * var(--wap-apple-pay-scale));
1030
+ min-height: var(--apple-pay-height, 2.5rem);
1031
+ padding: 0;
1049
1032
  box-sizing: border-box;
1050
- background-color: var(--apple-pay-background-color, #000);
1033
+ background-color: var(--apple-pay-background-color, #1a1a1a);
1051
1034
  color: var(--apple-pay-foreground-color, #fff);
1052
1035
  border: none;
1053
- border-radius: var(--apple-pay-border-radius, 5px);
1036
+ border-radius: var(--apple-pay-border-radius, 0.25rem);
1054
1037
  cursor: pointer;
1055
- font-family: 'WAP Apple Pay Text', -apple-system, BlinkMacSystemFont,
1056
- 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
1057
- font-size: calc(12px * var(--wap-apple-pay-scale));
1058
- font-weight: 300;
1059
- font-style: normal;
1038
+ /* Same as wall Continue to checkout / Marber button large */
1039
+ font-family: var(
1040
+ --mb-typeface-sans,
1041
+ var(--wall-type-system-sans, 'EconomistSans', system-ui, sans-serif)
1042
+ );
1043
+ font-size: var(--mb-button-font-size, 1.0625rem);
1044
+ font-weight: var(--mb-font-weight-regular, 400);
1060
1045
  line-height: 1;
1061
- letter-spacing: -0.01em;
1062
- -webkit-font-smoothing: antialiased;
1063
- -moz-osx-font-smoothing: grayscale;
1064
1046
  }
1065
1047
 
1066
1048
  teg-apple-pay-button .apple-pay-btn__label {
1067
1049
  display: inline-flex;
1068
1050
  align-items: center;
1069
- gap: calc(4px * var(--wap-apple-pay-scale));
1051
+ /* No flex gap \u2014 spacing after \u201Cwith\u201D uses the same word-space as \u201CSubscribe with\u201D */
1052
+ gap: 0;
1070
1053
  white-space: nowrap;
1071
1054
  }
1072
1055
 
1073
- teg-apple-pay-button .apple-pay-btn__apple-logo {
1056
+ teg-apple-pay-button .apple-pay-btn__caption {
1057
+ /* One typographic word space after \u201Cwith\u201D, matching Subscribe\u2194with */
1058
+ padding-right: 0.25em;
1059
+ }
1060
+
1061
+ teg-apple-pay-button .apple-pay-btn__logo {
1074
1062
  flex-shrink: 0;
1075
1063
  display: block;
1076
- width: calc(12px * var(--wap-apple-pay-scale));
1077
- height: calc(14px * var(--wap-apple-pay-scale));
1064
+ /* Match caption font-size so mark aligns with text metrics */
1065
+ height: 1.05em;
1066
+ width: auto;
1067
+ aspect-ratio: 51 / 22;
1078
1068
  color: currentColor;
1069
+ /* Optical nudge \u2014 SVG viewBox sits slightly high vs EconomistSans caps */
1070
+ transform: translateY(0.06em);
1079
1071
  }
1080
1072
 
1081
1073
  teg-apple-pay-button .apple-pay-btn.wap-loading {
@@ -1121,20 +1113,19 @@ var apple_pay_button_template_default = `<style>
1121
1113
  aria-label="Subscribe with Apple Pay"
1122
1114
  data-analytics="paywall:apple-pay-checkout"
1123
1115
  >
1124
- <span class="apple-pay-btn__label">
1125
- Subscribe with
1126
- <svg
1127
- class="apple-pay-btn__apple-logo"
1128
- width="17"
1129
- height="19"
1130
- viewBox="0 0 15 18"
1116
+ <span class="apple-pay-btn__label"
1117
+ ><span class="apple-pay-btn__caption">Subscribe with</span
1118
+ ><svg
1119
+ class="apple-pay-btn__logo"
1120
+ width="42"
1121
+ height="18"
1122
+ viewBox="0 0 51 22"
1131
1123
  aria-hidden="true"
1132
1124
  role="img"
1133
1125
  >
1134
- <use href="#apple-logo" />
1135
- </svg>
1136
- Apple Pay
1137
- </span>
1126
+ <use href="#apple-pay-logo" />
1127
+ </svg
1128
+ ></span>
1138
1129
  <span class="apple-pay-btn__loading" aria-hidden="true">Loading...</span>
1139
1130
  </button>
1140
1131
  </div>
package/dist/src/index.js CHANGED
@@ -66,13 +66,12 @@ function formatPrice(price, currencyCode, shouldFixDecimalPlaces = true, roundUp
66
66
  // src/apple-pay-logo.ts
67
67
  var LOGO_DEFS_ID = "apple-pay-logo-defs";
68
68
  var LOGO_PATH = "M10.2651 4.21143C10.4299 4.21143 10.7106 4.23763 11.1074 4.29004C11.5042 4.34245 11.9385 4.49219 12.4102 4.73926C12.8893 4.97884 13.3236 5.37939 13.7129 5.94092C13.6904 5.96338 13.5819 6.04574 13.3872 6.18799C13.1925 6.32275 12.9754 6.5249 12.7358 6.79443C12.4963 7.05648 12.2866 7.39339 12.1069 7.80518C11.9272 8.20947 11.8374 8.69238 11.8374 9.25391C11.8374 9.89779 11.9497 10.4443 12.1743 10.8936C12.4064 11.3428 12.6722 11.7059 12.9717 11.9829C13.2786 12.2524 13.5482 12.4508 13.7803 12.5781C14.0199 12.7054 14.1471 12.7728 14.1621 12.7803C14.1546 12.8102 14.0573 13.076 13.8701 13.5776C13.6904 14.0793 13.391 14.637 12.9717 15.251C12.6048 15.7826 12.208 16.2729 11.7812 16.7222C11.362 17.1714 10.8566 17.396 10.2651 17.396C9.86833 17.396 9.54264 17.3398 9.28809 17.2275C9.03353 17.1077 8.77148 16.9917 8.50195 16.8794C8.23242 16.7596 7.8693 16.6997 7.4126 16.6997C6.97087 16.6997 6.60026 16.7596 6.30078 16.8794C6.00879 16.9992 5.72803 17.119 5.4585 17.2388C5.19645 17.3586 4.88574 17.4185 4.52637 17.4185C3.97982 17.4185 3.50065 17.2013 3.08887 16.7671C2.67708 16.3328 2.25407 15.8125 1.81982 15.2061C1.3182 14.4873 0.887695 13.6113 0.52832 12.5781C0.176432 11.5374 0.000488281 10.4893 0.000488281 9.43359C0.000488281 8.30306 0.213867 7.35596 0.640625 6.59229C1.06738 5.82113 1.61393 5.24089 2.28027 4.85156C2.9541 4.45475 3.65039 4.25635 4.36914 4.25635C4.75098 4.25635 5.11035 4.31999 5.44727 4.44727C5.78418 4.56706 6.09863 4.69059 6.39062 4.81787C6.6901 4.94515 6.95964 5.00879 7.19922 5.00879C7.43132 5.00879 7.70085 4.94141 8.00781 4.80664C8.31478 4.67188 8.65918 4.54085 9.04102 4.41357C9.42285 4.27881 9.83089 4.21143 10.2651 4.21143ZM9.64746 2.78516C9.35547 3.13704 8.98861 3.43278 8.54688 3.67236C8.10514 3.90446 7.68587 4.02051 7.28906 4.02051C7.20671 4.02051 7.12809 4.01302 7.05322 3.99805C7.04574 3.97559 7.03825 3.93441 7.03076 3.87451C7.02327 3.81462 7.01953 3.75098 7.01953 3.68359C7.01953 3.23438 7.11686 2.80013 7.31152 2.38086C7.50618 1.9541 7.72705 1.60221 7.97412 1.3252C8.28857 0.950846 8.68538 0.640137 9.16455 0.393066C9.64372 0.145996 10.1004 0.014974 10.5347 0C10.5571 0.0973307 10.5684 0.213379 10.5684 0.348145C10.5684 0.797363 10.4823 1.23535 10.3101 1.66211C10.1379 2.08138 9.91699 2.45573 9.64746 2.78516ZM17.6885 11.5112V9.71436H22.0459C23.2064 9.71436 24.1048 9.41488 24.7412 8.81592C25.3776 8.20947 25.6958 7.37467 25.6958 6.31152V6.28906C25.6958 5.21842 25.3776 4.38363 24.7412 3.78467C24.1048 3.18571 23.2064 2.88623 22.0459 2.88623H17.6885V1.08936H22.5625C23.5807 1.08936 24.4792 1.30648 25.2578 1.74072C26.0365 2.17497 26.6466 2.78141 27.0884 3.56006C27.5376 4.3387 27.7622 5.24089 27.7622 6.2666V6.28906C27.7622 7.31478 27.5376 8.2207 27.0884 9.00684C26.6466 9.79297 26.0365 10.4069 25.2578 10.8486C24.4792 11.2904 23.5807 11.5112 22.5625 11.5112H17.6885ZM16.6777 17.2949V1.08936H18.6992V17.2949H16.6777ZM32.6699 17.5195C31.9062 17.5195 31.2249 17.3735 30.626 17.0815C30.0345 16.7896 29.5703 16.3778 29.2334 15.8462C28.904 15.3071 28.7393 14.682 28.7393 13.9707V13.9482C28.7393 13.2594 28.9077 12.668 29.2446 12.1738C29.5815 11.6797 30.0682 11.2904 30.7046 11.0059C31.3485 10.7139 32.1234 10.5417 33.0293 10.4893L37.3979 10.2422V11.7695L33.2539 12.0278C32.4303 12.0728 31.8052 12.2599 31.3784 12.5894C30.9517 12.9188 30.7383 13.3643 30.7383 13.9258V13.9482C30.7383 14.5322 30.9554 14.9927 31.3896 15.3296C31.8239 15.659 32.3929 15.8237 33.0967 15.8237C33.7331 15.8237 34.2983 15.6927 34.7925 15.4307C35.2941 15.1686 35.6909 14.813 35.9829 14.3638C36.2749 13.9071 36.4209 13.3979 36.4209 12.8364V9.27637C36.4209 8.55762 36.1963 7.99609 35.7471 7.5918C35.2979 7.1875 34.6502 6.98535 33.8042 6.98535C33.063 6.98535 32.4603 7.13883 31.9961 7.4458C31.5394 7.74528 31.2474 8.14958 31.1201 8.65869L31.0977 8.7373H29.1885L29.1997 8.625C29.2746 7.98861 29.5067 7.41585 29.896 6.90674C30.2928 6.39762 30.8244 5.99707 31.4907 5.70508C32.1646 5.4056 32.9469 5.25586 33.8379 5.25586C34.7812 5.25586 35.5898 5.41683 36.2637 5.73877C36.945 6.05322 37.4653 6.50244 37.8247 7.08643C38.1916 7.66292 38.375 8.35173 38.375 9.15283V17.2949H36.4209V15.4307H36.3311C36.0915 15.8574 35.7845 16.228 35.4102 16.5425C35.0433 16.8569 34.6278 17.1003 34.1636 17.2725C33.6994 17.4372 33.2015 17.5195 32.6699 17.5195ZM42.1484 21.3267C41.9837 21.3267 41.8115 21.3192 41.6318 21.3042C41.4521 21.2892 41.2987 21.2705 41.1714 21.248V19.6421C41.2612 19.6646 41.366 19.6795 41.4858 19.687C41.6056 19.702 41.7292 19.7095 41.8564 19.7095C42.4554 19.7095 42.9383 19.5897 43.3052 19.3501C43.672 19.1105 43.9678 18.6576 44.1924 17.9912L44.4282 17.3062L40.0371 5.48047H42.126L45.6187 15.981L45.0796 15.2734H45.7759L45.248 15.981L48.7407 5.48047H50.7959L46.1802 18.0249C45.8807 18.826 45.555 19.4661 45.2031 19.9453C44.8512 20.432 44.432 20.7839 43.9453 21.001C43.4587 21.2181 42.8597 21.3267 42.1484 21.3267Z";
69
- var APPLE_LOGO_PATH = LOGO_PATH.slice(0, LOGO_PATH.indexOf("M17.6885"));
70
69
  function ensureApplePayLogoSymbol() {
71
70
  if (document.getElementById(LOGO_DEFS_ID)) {
72
71
  return;
73
72
  }
74
73
  const tmp = document.createElement("div");
75
- 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><symbol id="apple-logo" viewBox="0 0 15 18"><path d="${APPLE_LOGO_PATH}" fill="currentColor"/></symbol></defs></svg>`;
74
+ 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>`;
76
75
  document.body.prepend(tmp.firstElementChild);
77
76
  }
78
77
 
@@ -1008,26 +1007,10 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
1008
1007
  // src/templates/apple-pay-button.template.html
1009
1008
  var apple_pay_button_template_default = `<style>
1010
1009
  /*
1011
- * Entry CTA only: \u201CSubscribe with [apple logo] Apple Pay\u201D.
1012
- * Uses OS SF Pro via local() (no Marber). Modal styling is unchanged.
1010
+ * Entry CTA: \u201CSubscribe with\u201D + Apple Pay wordmark (Figma 1118:14088).
1011
+ * \u201CSubscribe with\u201D matches Continue to checkout typography (EconomistSans Regular / 17 / 24 / 400).
1013
1012
  */
1014
- @font-face {
1015
- font-family: 'WAP Apple Pay Text';
1016
- src:
1017
- local('SF Pro Text Light'),
1018
- local('SFProText-Light'),
1019
- local('SF Pro Text'),
1020
- local('SFProText-Regular'),
1021
- local('-apple-system'),
1022
- local('BlinkMacSystemFont'),
1023
- local('Helvetica Neue');
1024
- font-weight: 300;
1025
- font-style: normal;
1026
- font-display: swap;
1027
- }
1028
-
1029
1013
  teg-apple-pay-button {
1030
- --wap-apple-pay-scale: 1.375; /* default height 44px / 32 */
1031
1014
  display: block;
1032
1015
  margin: var(--apple-pay-margin, 0);
1033
1016
  width: 100%;
@@ -1043,44 +1026,53 @@ var apple_pay_button_template_default = `<style>
1043
1026
  }
1044
1027
 
1045
1028
  teg-apple-pay-button .apple-pay-btn {
1046
- display: inline-flex;
1029
+ display: flex;
1047
1030
  align-items: center;
1048
1031
  justify-content: center;
1049
1032
  width: 100%;
1050
1033
  min-width: 0;
1051
1034
  height: 100%;
1052
- min-height: var(--apple-pay-height, 2.75rem);
1053
- padding: 0 calc(8px * var(--wap-apple-pay-scale));
1035
+ min-height: var(--apple-pay-height, 2.5rem);
1036
+ padding: 0;
1054
1037
  box-sizing: border-box;
1055
- background-color: var(--apple-pay-background-color, #000);
1038
+ background-color: var(--apple-pay-background-color, #1a1a1a);
1056
1039
  color: var(--apple-pay-foreground-color, #fff);
1057
1040
  border: none;
1058
- border-radius: var(--apple-pay-border-radius, 5px);
1041
+ border-radius: var(--apple-pay-border-radius, 0.25rem);
1059
1042
  cursor: pointer;
1060
- font-family: 'WAP Apple Pay Text', -apple-system, BlinkMacSystemFont,
1061
- 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
1062
- font-size: calc(12px * var(--wap-apple-pay-scale));
1063
- font-weight: 300;
1064
- font-style: normal;
1043
+ /* Same as wall Continue to checkout / Marber button large */
1044
+ font-family: var(
1045
+ --mb-typeface-sans,
1046
+ var(--wall-type-system-sans, 'EconomistSans', system-ui, sans-serif)
1047
+ );
1048
+ font-size: var(--mb-button-font-size, 1.0625rem);
1049
+ font-weight: var(--mb-font-weight-regular, 400);
1065
1050
  line-height: 1;
1066
- letter-spacing: -0.01em;
1067
- -webkit-font-smoothing: antialiased;
1068
- -moz-osx-font-smoothing: grayscale;
1069
1051
  }
1070
1052
 
1071
1053
  teg-apple-pay-button .apple-pay-btn__label {
1072
1054
  display: inline-flex;
1073
1055
  align-items: center;
1074
- gap: calc(4px * var(--wap-apple-pay-scale));
1056
+ /* No flex gap \u2014 spacing after \u201Cwith\u201D uses the same word-space as \u201CSubscribe with\u201D */
1057
+ gap: 0;
1075
1058
  white-space: nowrap;
1076
1059
  }
1077
1060
 
1078
- teg-apple-pay-button .apple-pay-btn__apple-logo {
1061
+ teg-apple-pay-button .apple-pay-btn__caption {
1062
+ /* One typographic word space after \u201Cwith\u201D, matching Subscribe\u2194with */
1063
+ padding-right: 0.25em;
1064
+ }
1065
+
1066
+ teg-apple-pay-button .apple-pay-btn__logo {
1079
1067
  flex-shrink: 0;
1080
1068
  display: block;
1081
- width: calc(12px * var(--wap-apple-pay-scale));
1082
- height: calc(14px * var(--wap-apple-pay-scale));
1069
+ /* Match caption font-size so mark aligns with text metrics */
1070
+ height: 1.05em;
1071
+ width: auto;
1072
+ aspect-ratio: 51 / 22;
1083
1073
  color: currentColor;
1074
+ /* Optical nudge \u2014 SVG viewBox sits slightly high vs EconomistSans caps */
1075
+ transform: translateY(0.06em);
1084
1076
  }
1085
1077
 
1086
1078
  teg-apple-pay-button .apple-pay-btn.wap-loading {
@@ -1126,20 +1118,19 @@ var apple_pay_button_template_default = `<style>
1126
1118
  aria-label="Subscribe with Apple Pay"
1127
1119
  data-analytics="paywall:apple-pay-checkout"
1128
1120
  >
1129
- <span class="apple-pay-btn__label">
1130
- Subscribe with
1131
- <svg
1132
- class="apple-pay-btn__apple-logo"
1133
- width="17"
1134
- height="19"
1135
- viewBox="0 0 15 18"
1121
+ <span class="apple-pay-btn__label"
1122
+ ><span class="apple-pay-btn__caption">Subscribe with</span
1123
+ ><svg
1124
+ class="apple-pay-btn__logo"
1125
+ width="42"
1126
+ height="18"
1127
+ viewBox="0 0 51 22"
1136
1128
  aria-hidden="true"
1137
1129
  role="img"
1138
1130
  >
1139
- <use href="#apple-logo" />
1140
- </svg>
1141
- Apple Pay
1142
- </span>
1131
+ <use href="#apple-pay-logo" />
1132
+ </svg
1133
+ ></span>
1143
1134
  <span class="apple-pay-btn__loading" aria-hidden="true">Loading...</span>
1144
1135
  </button>
1145
1136
  </div>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@economist/web-apple-pay",
3
3
  "description": "Web component package for Apple Pay checkout UI",
4
- "version": "1.8.1",
4
+ "version": "1.8.2",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "types": "dist/index.d.ts",