@economist/web-apple-pay 0.1.3-beta.29 → 0.1.3-beta.30

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 (13) hide show
  1. package/dist/index.js +27 -25
  2. package/dist/src/apple-pay-button.js +26 -25
  3. package/dist/src/apple-pay-button.stories.js +26 -25
  4. package/dist/src/apple-pay-logo.js +1 -1
  5. package/dist/src/apple-pay-modal.js +21 -10
  6. package/dist/src/apple-pay-modal.stories.js +26 -25
  7. package/dist/src/clients/payment-checkout/apple-session.js +0 -2
  8. package/dist/src/clients/payment-checkout/detects.js +0 -4
  9. package/dist/src/clients/payment-checkout/payment-handler.js +0 -1
  10. package/dist/src/constants.d.ts +2 -1
  11. package/dist/src/constants.js +1 -0
  12. package/dist/src/index.js +27 -25
  13. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -71,7 +71,7 @@ function ensureApplePayLogoSymbol() {
71
71
  return;
72
72
  }
73
73
  const tmp = document.createElement("div");
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="white"/></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>`;
75
75
  document.body.prepend(tmp.firstElementChild);
76
76
  }
77
77
 
@@ -109,16 +109,32 @@ var apple_pay_modal_template_default = `<style>
109
109
  position: absolute;
110
110
  top: 1.5rem;
111
111
  right: 1.3125rem;
112
- background: none;
112
+ background: transparent;
113
113
  border: none;
114
114
  cursor: pointer;
115
115
  padding: 0;
116
+ width: 1.5rem;
117
+ height: 1.5rem;
116
118
  display: flex;
117
119
  align-items: center;
118
120
  justify-content: center;
121
+ color: var(--mb-colour-greyscale-london-20, #1a1a1a);
122
+ transition:
123
+ background-color ease-in-out 0.2s,
124
+ color ease-in-out 0.2s;
125
+ }
126
+
127
+ .apm__close:hover {
128
+ color: var(--mb-colour-base-chicago-30, #333333);
129
+ }
130
+
131
+ .apm__close:active {
132
+ background-color: var(--mb-colour-base-chicago-90, #e6e6e6);
133
+ color: var(--mb-colour-base-chicago-30, #333333);
119
134
  }
120
135
 
121
136
  .apm__close:focus {
137
+ background-color: var(--mb-colour-base-chicago-90, #e6e6e6);
122
138
  outline: solid 0.125rem var(--focus-border-color, #121212);
123
139
  border-radius: 0.25rem;
124
140
  }
@@ -301,10 +317,6 @@ var apple_pay_modal_template_default = `<style>
301
317
  cursor: pointer;
302
318
  color: #fff;
303
319
  text-align: center;
304
- font-family: var(
305
- --mb-typeface-sans,
306
- var(--wall-type-system-sans, system-ui, sans-serif)
307
- );
308
320
  font-size: 1.25rem;
309
321
  font-style: normal;
310
322
  font-weight: 500;
@@ -421,7 +433,7 @@ var apple_pay_modal_template_default = `<style>
421
433
  fill-rule="evenodd"
422
434
  clip-rule="evenodd"
423
435
  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"
424
- fill="#333333"
436
+ fill="currentColor"
425
437
  />
426
438
  </g>
427
439
  <defs>
@@ -684,8 +696,8 @@ function renewalPeriodText(unit, duration) {
684
696
  return "";
685
697
  }
686
698
  }
687
- var LI_SEPARATOR = "LI_SEPARATOR";
688
- var P_SEPARATOR = "P_SEPARATOR";
699
+ var LI_SEPARATOR = "\0LI_SEP\0";
700
+ var P_SEPARATOR = "\0P_SEP\0";
689
701
  function buildTermsContext(offer, country) {
690
702
  const isUS = country === "US";
691
703
  const isCA = country === "CA";
@@ -944,7 +956,6 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
944
956
  cta.removeAttribute("aria-busy");
945
957
  }
946
958
  }).catch(() => {
947
- console.error("[web-apple-pay] apple-pay-modal: failed to pre-fetch reCAPTCHA tokens; CTA remains disabled");
948
959
  if (cta) {
949
960
  cta.removeAttribute("aria-busy");
950
961
  }
@@ -1033,8 +1044,8 @@ var apple_pay_button_template_default = `<style>
1033
1044
  min-width: 0;
1034
1045
  height: 100%;
1035
1046
  min-height: var(--apple-pay-height, 2.75rem);
1036
- background-color: #000;
1037
- color: #fff;
1047
+ background-color: var(--apple-pay-background-color, #000);
1048
+ color: var(--apple-pay-foreground-color, #fff);
1038
1049
  border: none;
1039
1050
  border-radius: var(--apple-pay-border-radius, 1.375rem);
1040
1051
  cursor: pointer;
@@ -1046,6 +1057,7 @@ var apple_pay_button_template_default = `<style>
1046
1057
  teg-apple-pay-button .apple-pay-btn svg {
1047
1058
  flex-shrink: 0;
1048
1059
  display: block;
1060
+ color: currentColor;
1049
1061
  }
1050
1062
 
1051
1063
  teg-apple-pay-button .apple-pay-btn.wap-loading {
@@ -1060,8 +1072,8 @@ var apple_pay_button_template_default = `<style>
1060
1072
  left: 50%;
1061
1073
  width: 1.25rem;
1062
1074
  height: 1.25rem;
1063
- border: 2px solid rgba(255, 255, 255, 0.25);
1064
- border-top-color: #fff;
1075
+ border: 2px solid var(--apple-pay-spinner-track-color, rgba(255, 255, 255, 0.25));
1076
+ border-top-color: var(--apple-pay-spinner-head-color, currentColor);
1065
1077
  border-radius: 50%;
1066
1078
  animation: wap-button-spinner 0.8s linear infinite;
1067
1079
  }
@@ -1129,15 +1141,11 @@ var isApplePayAvailable = async () => {
1129
1141
  }
1130
1142
  const merchantId = getApplePayConfig()?.merchantId;
1131
1143
  if (!merchantId) {
1132
- console.warn(
1133
- "[web-apple-pay] Missing merchantId. Call configureApplePay({ merchantId, ... }) before rendering Apple Pay components."
1134
- );
1135
1144
  return false;
1136
1145
  }
1137
1146
  const hasActiveCard = await applePaySession.canMakePaymentsWithActiveCard(merchantId);
1138
1147
  return hasActiveCard;
1139
1148
  } catch (error) {
1140
- console.error("Error checking Apple Pay active card status:", error);
1141
1149
  return false;
1142
1150
  }
1143
1151
  };
@@ -1377,7 +1385,6 @@ async function handleMerchantValidation(event, session, config) {
1377
1385
  }
1378
1386
  session.completeMerchantValidation(response.merchantSession);
1379
1387
  } catch (err) {
1380
- console.error("[web-apple-pay] onvalidatemerchant: error during validation", err);
1381
1388
  session.abort();
1382
1389
  redirectToFallbackCheckout(config);
1383
1390
  }
@@ -1411,7 +1418,6 @@ function startApplePaySession(config) {
1411
1418
  trackWalletPaymentSheetOpen(config.skuId);
1412
1419
  session.begin();
1413
1420
  } catch (err) {
1414
- console.error("[web-apple-pay] startApplePaySession: failed to create session", err);
1415
1421
  redirectToFallbackCheckout(config);
1416
1422
  }
1417
1423
  }
@@ -1621,7 +1627,6 @@ async function handlePaymentAuthorized(event, session, sessionData, config) {
1621
1627
  failApplePaySession(session, err.errors);
1622
1628
  return;
1623
1629
  }
1624
- console.error("[web-apple-pay] onpaymentauthorized error", { skuId, err });
1625
1630
  const walletError = parseWalletApiError(err);
1626
1631
  trackWalletPaymentFailure(skuId, walletError?.errorType ?? "UNKNOWN");
1627
1632
  failApplePaySession(session);
@@ -1899,7 +1904,6 @@ var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
1899
1904
  var TOTAL_LABEL = "The Economist";
1900
1905
  var DEFAULT_CURRENCY = "USD";
1901
1906
  var DEFAULT_TOTAL = "0.00";
1902
- var ERROR_INITIATE = "Failed to initiate Apple Pay session:";
1903
1907
  var SEL_CONTAINER = ".apple-pay-container";
1904
1908
  var SEL_BUTTON = ".apple-pay-btn";
1905
1909
  var APPLE_PAY_EXCLUDED_VARIANTS = [
@@ -2032,7 +2036,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
2032
2036
  if (await this.#fetchAndCacheOptions()) return;
2033
2037
  this.#finishLoading();
2034
2038
  } catch (err) {
2035
- console.error("[web-apple-pay] #run: unexpected error, hiding button", err);
2036
2039
  this.style.display = "none";
2037
2040
  this.querySelector(SEL_CONTAINER)?.remove();
2038
2041
  } finally {
@@ -2172,7 +2175,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
2172
2175
  #scheduleRecaptchaTokens() {
2173
2176
  const attempt = getPurchaseRecaptchaTokens();
2174
2177
  attempt.catch((err) => {
2175
- console.error("[web-apple-pay] reCAPTCHA token pre-fetch failed; will retry on modal open", err);
2176
2178
  if (this.#recaptchaTokensPromise === attempt) {
2177
2179
  this.#recaptchaTokensPromise = null;
2178
2180
  }
@@ -2235,7 +2237,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
2235
2237
  )
2236
2238
  );
2237
2239
  } catch (error) {
2238
- console.error(ERROR_INITIATE, error);
2239
2240
  }
2240
2241
  }
2241
2242
  };
@@ -2244,6 +2245,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
2244
2245
  var ApplePayEntryPoint = /* @__PURE__ */ ((ApplePayEntryPoint2) => {
2245
2246
  ApplePayEntryPoint2["PAYWALL"] = "article_paywall";
2246
2247
  ApplePayEntryPoint2["REGWALL"] = "article_regwall";
2248
+ ApplePayEntryPoint2["DUAL_OFFER_BANNER"] = "dual_offer_banner";
2247
2249
  return ApplePayEntryPoint2;
2248
2250
  })(ApplePayEntryPoint || {});
2249
2251
 
package/dist/src/apple-pay-button.js CHANGED
@@ -71,7 +71,7 @@ function ensureApplePayLogoSymbol() {
71
71
  return;
72
72
  }
73
73
  const tmp = document.createElement("div");
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="white"/></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>`;
75
75
  document.body.prepend(tmp.firstElementChild);
76
76
  }
77
77
 
@@ -109,16 +109,32 @@ var apple_pay_modal_template_default = `<style>
109
109
  position: absolute;
110
110
  top: 1.5rem;
111
111
  right: 1.3125rem;
112
- background: none;
112
+ background: transparent;
113
113
  border: none;
114
114
  cursor: pointer;
115
115
  padding: 0;
116
+ width: 1.5rem;
117
+ height: 1.5rem;
116
118
  display: flex;
117
119
  align-items: center;
118
120
  justify-content: center;
121
+ color: var(--mb-colour-greyscale-london-20, #1a1a1a);
122
+ transition:
123
+ background-color ease-in-out 0.2s,
124
+ color ease-in-out 0.2s;
125
+ }
126
+
127
+ .apm__close:hover {
128
+ color: var(--mb-colour-base-chicago-30, #333333);
129
+ }
130
+
131
+ .apm__close:active {
132
+ background-color: var(--mb-colour-base-chicago-90, #e6e6e6);
133
+ color: var(--mb-colour-base-chicago-30, #333333);
119
134
  }
120
135
 
121
136
  .apm__close:focus {
137
+ background-color: var(--mb-colour-base-chicago-90, #e6e6e6);
122
138
  outline: solid 0.125rem var(--focus-border-color, #121212);
123
139
  border-radius: 0.25rem;
124
140
  }
@@ -301,10 +317,6 @@ var apple_pay_modal_template_default = `<style>
301
317
  cursor: pointer;
302
318
  color: #fff;
303
319
  text-align: center;
304
- font-family: var(
305
- --mb-typeface-sans,
306
- var(--wall-type-system-sans, system-ui, sans-serif)
307
- );
308
320
  font-size: 1.25rem;
309
321
  font-style: normal;
310
322
  font-weight: 500;
@@ -421,7 +433,7 @@ var apple_pay_modal_template_default = `<style>
421
433
  fill-rule="evenodd"
422
434
  clip-rule="evenodd"
423
435
  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"
424
- fill="#333333"
436
+ fill="currentColor"
425
437
  />
426
438
  </g>
427
439
  <defs>
@@ -679,8 +691,8 @@ function renewalPeriodText(unit, duration) {
679
691
  return "";
680
692
  }
681
693
  }
682
- var LI_SEPARATOR = "LI_SEPARATOR";
683
- var P_SEPARATOR = "P_SEPARATOR";
694
+ var LI_SEPARATOR = "\0LI_SEP\0";
695
+ var P_SEPARATOR = "\0P_SEP\0";
684
696
  function buildTermsContext(offer, country) {
685
697
  const isUS = country === "US";
686
698
  const isCA = country === "CA";
@@ -939,7 +951,6 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
939
951
  cta.removeAttribute("aria-busy");
940
952
  }
941
953
  }).catch(() => {
942
- console.error("[web-apple-pay] apple-pay-modal: failed to pre-fetch reCAPTCHA tokens; CTA remains disabled");
943
954
  if (cta) {
944
955
  cta.removeAttribute("aria-busy");
945
956
  }
@@ -1028,8 +1039,8 @@ var apple_pay_button_template_default = `<style>
1028
1039
  min-width: 0;
1029
1040
  height: 100%;
1030
1041
  min-height: var(--apple-pay-height, 2.75rem);
1031
- background-color: #000;
1032
- color: #fff;
1042
+ background-color: var(--apple-pay-background-color, #000);
1043
+ color: var(--apple-pay-foreground-color, #fff);
1033
1044
  border: none;
1034
1045
  border-radius: var(--apple-pay-border-radius, 1.375rem);
1035
1046
  cursor: pointer;
@@ -1041,6 +1052,7 @@ var apple_pay_button_template_default = `<style>
1041
1052
  teg-apple-pay-button .apple-pay-btn svg {
1042
1053
  flex-shrink: 0;
1043
1054
  display: block;
1055
+ color: currentColor;
1044
1056
  }
1045
1057
 
1046
1058
  teg-apple-pay-button .apple-pay-btn.wap-loading {
@@ -1055,8 +1067,8 @@ var apple_pay_button_template_default = `<style>
1055
1067
  left: 50%;
1056
1068
  width: 1.25rem;
1057
1069
  height: 1.25rem;
1058
- border: 2px solid rgba(255, 255, 255, 0.25);
1059
- border-top-color: #fff;
1070
+ border: 2px solid var(--apple-pay-spinner-track-color, rgba(255, 255, 255, 0.25));
1071
+ border-top-color: var(--apple-pay-spinner-head-color, currentColor);
1060
1072
  border-radius: 50%;
1061
1073
  animation: wap-button-spinner 0.8s linear infinite;
1062
1074
  }
@@ -1124,15 +1136,11 @@ var isApplePayAvailable = async () => {
1124
1136
  }
1125
1137
  const merchantId = getApplePayConfig()?.merchantId;
1126
1138
  if (!merchantId) {
1127
- console.warn(
1128
- "[web-apple-pay] Missing merchantId. Call configureApplePay({ merchantId, ... }) before rendering Apple Pay components."
1129
- );
1130
1139
  return false;
1131
1140
  }
1132
1141
  const hasActiveCard = await applePaySession.canMakePaymentsWithActiveCard(merchantId);
1133
1142
  return hasActiveCard;
1134
1143
  } catch (error) {
1135
- console.error("Error checking Apple Pay active card status:", error);
1136
1144
  return false;
1137
1145
  }
1138
1146
  };
@@ -1372,7 +1380,6 @@ async function handleMerchantValidation(event, session, config) {
1372
1380
  }
1373
1381
  session.completeMerchantValidation(response.merchantSession);
1374
1382
  } catch (err) {
1375
- console.error("[web-apple-pay] onvalidatemerchant: error during validation", err);
1376
1383
  session.abort();
1377
1384
  redirectToFallbackCheckout(config);
1378
1385
  }
@@ -1406,7 +1413,6 @@ function startApplePaySession(config) {
1406
1413
  trackWalletPaymentSheetOpen(config.skuId);
1407
1414
  session.begin();
1408
1415
  } catch (err) {
1409
- console.error("[web-apple-pay] startApplePaySession: failed to create session", err);
1410
1416
  redirectToFallbackCheckout(config);
1411
1417
  }
1412
1418
  }
@@ -1616,7 +1622,6 @@ async function handlePaymentAuthorized(event, session, sessionData, config) {
1616
1622
  failApplePaySession(session, err.errors);
1617
1623
  return;
1618
1624
  }
1619
- console.error("[web-apple-pay] onpaymentauthorized error", { skuId, err });
1620
1625
  const walletError = parseWalletApiError(err);
1621
1626
  trackWalletPaymentFailure(skuId, walletError?.errorType ?? "UNKNOWN");
1622
1627
  failApplePaySession(session);
@@ -1894,7 +1899,6 @@ var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
1894
1899
  var TOTAL_LABEL = "The Economist";
1895
1900
  var DEFAULT_CURRENCY = "USD";
1896
1901
  var DEFAULT_TOTAL = "0.00";
1897
- var ERROR_INITIATE = "Failed to initiate Apple Pay session:";
1898
1902
  var SEL_CONTAINER = ".apple-pay-container";
1899
1903
  var SEL_BUTTON = ".apple-pay-btn";
1900
1904
  var APPLE_PAY_EXCLUDED_VARIANTS = [
@@ -2027,7 +2031,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
2027
2031
  if (await this.#fetchAndCacheOptions()) return;
2028
2032
  this.#finishLoading();
2029
2033
  } catch (err) {
2030
- console.error("[web-apple-pay] #run: unexpected error, hiding button", err);
2031
2034
  this.style.display = "none";
2032
2035
  this.querySelector(SEL_CONTAINER)?.remove();
2033
2036
  } finally {
@@ -2167,7 +2170,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
2167
2170
  #scheduleRecaptchaTokens() {
2168
2171
  const attempt = getPurchaseRecaptchaTokens();
2169
2172
  attempt.catch((err) => {
2170
- console.error("[web-apple-pay] reCAPTCHA token pre-fetch failed; will retry on modal open", err);
2171
2173
  if (this.#recaptchaTokensPromise === attempt) {
2172
2174
  this.#recaptchaTokensPromise = null;
2173
2175
  }
@@ -2230,7 +2232,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
2230
2232
  )
2231
2233
  );
2232
2234
  } catch (error) {
2233
- console.error(ERROR_INITIATE, error);
2234
2235
  }
2235
2236
  }
2236
2237
  };
package/dist/src/apple-pay-button.stories.js CHANGED
@@ -71,7 +71,7 @@ function ensureApplePayLogoSymbol() {
71
71
  return;
72
72
  }
73
73
  const tmp = document.createElement("div");
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="white"/></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>`;
75
75
  document.body.prepend(tmp.firstElementChild);
76
76
  }
77
77
 
@@ -109,16 +109,32 @@ var apple_pay_modal_template_default = `<style>
109
109
  position: absolute;
110
110
  top: 1.5rem;
111
111
  right: 1.3125rem;
112
- background: none;
112
+ background: transparent;
113
113
  border: none;
114
114
  cursor: pointer;
115
115
  padding: 0;
116
+ width: 1.5rem;
117
+ height: 1.5rem;
116
118
  display: flex;
117
119
  align-items: center;
118
120
  justify-content: center;
121
+ color: var(--mb-colour-greyscale-london-20, #1a1a1a);
122
+ transition:
123
+ background-color ease-in-out 0.2s,
124
+ color ease-in-out 0.2s;
125
+ }
126
+
127
+ .apm__close:hover {
128
+ color: var(--mb-colour-base-chicago-30, #333333);
129
+ }
130
+
131
+ .apm__close:active {
132
+ background-color: var(--mb-colour-base-chicago-90, #e6e6e6);
133
+ color: var(--mb-colour-base-chicago-30, #333333);
119
134
  }
120
135
 
121
136
  .apm__close:focus {
137
+ background-color: var(--mb-colour-base-chicago-90, #e6e6e6);
122
138
  outline: solid 0.125rem var(--focus-border-color, #121212);
123
139
  border-radius: 0.25rem;
124
140
  }
@@ -301,10 +317,6 @@ var apple_pay_modal_template_default = `<style>
301
317
  cursor: pointer;
302
318
  color: #fff;
303
319
  text-align: center;
304
- font-family: var(
305
- --mb-typeface-sans,
306
- var(--wall-type-system-sans, system-ui, sans-serif)
307
- );
308
320
  font-size: 1.25rem;
309
321
  font-style: normal;
310
322
  font-weight: 500;
@@ -421,7 +433,7 @@ var apple_pay_modal_template_default = `<style>
421
433
  fill-rule="evenodd"
422
434
  clip-rule="evenodd"
423
435
  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"
424
- fill="#333333"
436
+ fill="currentColor"
425
437
  />
426
438
  </g>
427
439
  <defs>
@@ -687,8 +699,8 @@ function renewalPeriodText(unit, duration) {
687
699
  return "";
688
700
  }
689
701
  }
690
- var LI_SEPARATOR = "LI_SEPARATOR";
691
- var P_SEPARATOR = "P_SEPARATOR";
702
+ var LI_SEPARATOR = "\0LI_SEP\0";
703
+ var P_SEPARATOR = "\0P_SEP\0";
692
704
  function buildTermsContext(offer, country) {
693
705
  const isUS = country === "US";
694
706
  const isCA = country === "CA";
@@ -947,7 +959,6 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
947
959
  cta.removeAttribute("aria-busy");
948
960
  }
949
961
  }).catch(() => {
950
- console.error("[web-apple-pay] apple-pay-modal: failed to pre-fetch reCAPTCHA tokens; CTA remains disabled");
951
962
  if (cta) {
952
963
  cta.removeAttribute("aria-busy");
953
964
  }
@@ -1036,8 +1047,8 @@ var apple_pay_button_template_default = `<style>
1036
1047
  min-width: 0;
1037
1048
  height: 100%;
1038
1049
  min-height: var(--apple-pay-height, 2.75rem);
1039
- background-color: #000;
1040
- color: #fff;
1050
+ background-color: var(--apple-pay-background-color, #000);
1051
+ color: var(--apple-pay-foreground-color, #fff);
1041
1052
  border: none;
1042
1053
  border-radius: var(--apple-pay-border-radius, 1.375rem);
1043
1054
  cursor: pointer;
@@ -1049,6 +1060,7 @@ var apple_pay_button_template_default = `<style>
1049
1060
  teg-apple-pay-button .apple-pay-btn svg {
1050
1061
  flex-shrink: 0;
1051
1062
  display: block;
1063
+ color: currentColor;
1052
1064
  }
1053
1065
 
1054
1066
  teg-apple-pay-button .apple-pay-btn.wap-loading {
@@ -1063,8 +1075,8 @@ var apple_pay_button_template_default = `<style>
1063
1075
  left: 50%;
1064
1076
  width: 1.25rem;
1065
1077
  height: 1.25rem;
1066
- border: 2px solid rgba(255, 255, 255, 0.25);
1067
- border-top-color: #fff;
1078
+ border: 2px solid var(--apple-pay-spinner-track-color, rgba(255, 255, 255, 0.25));
1079
+ border-top-color: var(--apple-pay-spinner-head-color, currentColor);
1068
1080
  border-radius: 50%;
1069
1081
  animation: wap-button-spinner 0.8s linear infinite;
1070
1082
  }
@@ -1132,15 +1144,11 @@ var isApplePayAvailable = async () => {
1132
1144
  }
1133
1145
  const merchantId = getApplePayConfig()?.merchantId;
1134
1146
  if (!merchantId) {
1135
- console.warn(
1136
- "[web-apple-pay] Missing merchantId. Call configureApplePay({ merchantId, ... }) before rendering Apple Pay components."
1137
- );
1138
1147
  return false;
1139
1148
  }
1140
1149
  const hasActiveCard = await applePaySession.canMakePaymentsWithActiveCard(merchantId);
1141
1150
  return hasActiveCard;
1142
1151
  } catch (error) {
1143
- console.error("Error checking Apple Pay active card status:", error);
1144
1152
  return false;
1145
1153
  }
1146
1154
  };
@@ -1380,7 +1388,6 @@ async function handleMerchantValidation(event, session, config) {
1380
1388
  }
1381
1389
  session.completeMerchantValidation(response.merchantSession);
1382
1390
  } catch (err) {
1383
- console.error("[web-apple-pay] onvalidatemerchant: error during validation", err);
1384
1391
  session.abort();
1385
1392
  redirectToFallbackCheckout(config);
1386
1393
  }
@@ -1414,7 +1421,6 @@ function startApplePaySession(config) {
1414
1421
  trackWalletPaymentSheetOpen(config.skuId);
1415
1422
  session.begin();
1416
1423
  } catch (err) {
1417
- console.error("[web-apple-pay] startApplePaySession: failed to create session", err);
1418
1424
  redirectToFallbackCheckout(config);
1419
1425
  }
1420
1426
  }
@@ -1624,7 +1630,6 @@ async function handlePaymentAuthorized(event, session, sessionData, config) {
1624
1630
  failApplePaySession(session, err.errors);
1625
1631
  return;
1626
1632
  }
1627
- console.error("[web-apple-pay] onpaymentauthorized error", { skuId, err });
1628
1633
  const walletError = parseWalletApiError(err);
1629
1634
  trackWalletPaymentFailure(skuId, walletError?.errorType ?? "UNKNOWN");
1630
1635
  failApplePaySession(session);
@@ -1902,7 +1907,6 @@ var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
1902
1907
  var TOTAL_LABEL = "The Economist";
1903
1908
  var DEFAULT_CURRENCY = "USD";
1904
1909
  var DEFAULT_TOTAL = "0.00";
1905
- var ERROR_INITIATE = "Failed to initiate Apple Pay session:";
1906
1910
  var SEL_CONTAINER = ".apple-pay-container";
1907
1911
  var SEL_BUTTON = ".apple-pay-btn";
1908
1912
  var APPLE_PAY_EXCLUDED_VARIANTS = [
@@ -2035,7 +2039,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
2035
2039
  if (await this.#fetchAndCacheOptions()) return;
2036
2040
  this.#finishLoading();
2037
2041
  } catch (err) {
2038
- console.error("[web-apple-pay] #run: unexpected error, hiding button", err);
2039
2042
  this.style.display = "none";
2040
2043
  this.querySelector(SEL_CONTAINER)?.remove();
2041
2044
  } finally {
@@ -2175,7 +2178,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
2175
2178
  #scheduleRecaptchaTokens() {
2176
2179
  const attempt = getPurchaseRecaptchaTokens();
2177
2180
  attempt.catch((err) => {
2178
- console.error("[web-apple-pay] reCAPTCHA token pre-fetch failed; will retry on modal open", err);
2179
2181
  if (this.#recaptchaTokensPromise === attempt) {
2180
2182
  this.#recaptchaTokensPromise = null;
2181
2183
  }
@@ -2238,7 +2240,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
2238
2240
  )
2239
2241
  );
2240
2242
  } catch (error) {
2241
- console.error(ERROR_INITIATE, error);
2242
2243
  }
2243
2244
  }
2244
2245
  };
package/dist/src/apple-pay-logo.js CHANGED
@@ -6,7 +6,7 @@ function ensureApplePayLogoSymbol() {
6
6
  return;
7
7
  }
8
8
  const tmp = document.createElement("div");
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="white"/></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>`;
10
10
  document.body.prepend(tmp.firstElementChild);
11
11
  }
12
12
  export {
package/dist/src/apple-pay-modal.js CHANGED
@@ -71,7 +71,7 @@ function ensureApplePayLogoSymbol() {
71
71
  return;
72
72
  }
73
73
  const tmp = document.createElement("div");
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="white"/></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>`;
75
75
  document.body.prepend(tmp.firstElementChild);
76
76
  }
77
77
 
@@ -109,16 +109,32 @@ var apple_pay_modal_template_default = `<style>
109
109
  position: absolute;
110
110
  top: 1.5rem;
111
111
  right: 1.3125rem;
112
- background: none;
112
+ background: transparent;
113
113
  border: none;
114
114
  cursor: pointer;
115
115
  padding: 0;
116
+ width: 1.5rem;
117
+ height: 1.5rem;
116
118
  display: flex;
117
119
  align-items: center;
118
120
  justify-content: center;
121
+ color: var(--mb-colour-greyscale-london-20, #1a1a1a);
122
+ transition:
123
+ background-color ease-in-out 0.2s,
124
+ color ease-in-out 0.2s;
125
+ }
126
+
127
+ .apm__close:hover {
128
+ color: var(--mb-colour-base-chicago-30, #333333);
129
+ }
130
+
131
+ .apm__close:active {
132
+ background-color: var(--mb-colour-base-chicago-90, #e6e6e6);
133
+ color: var(--mb-colour-base-chicago-30, #333333);
119
134
  }
120
135
 
121
136
  .apm__close:focus {
137
+ background-color: var(--mb-colour-base-chicago-90, #e6e6e6);
122
138
  outline: solid 0.125rem var(--focus-border-color, #121212);
123
139
  border-radius: 0.25rem;
124
140
  }
@@ -301,10 +317,6 @@ var apple_pay_modal_template_default = `<style>
301
317
  cursor: pointer;
302
318
  color: #fff;
303
319
  text-align: center;
304
- font-family: var(
305
- --mb-typeface-sans,
306
- var(--wall-type-system-sans, system-ui, sans-serif)
307
- );
308
320
  font-size: 1.25rem;
309
321
  font-style: normal;
310
322
  font-weight: 500;
@@ -421,7 +433,7 @@ var apple_pay_modal_template_default = `<style>
421
433
  fill-rule="evenodd"
422
434
  clip-rule="evenodd"
423
435
  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"
424
- fill="#333333"
436
+ fill="currentColor"
425
437
  />
426
438
  </g>
427
439
  <defs>
@@ -679,8 +691,8 @@ function renewalPeriodText(unit, duration) {
679
691
  return "";
680
692
  }
681
693
  }
682
- var LI_SEPARATOR = "LI_SEPARATOR";
683
- var P_SEPARATOR = "P_SEPARATOR";
694
+ var LI_SEPARATOR = "\0LI_SEP\0";
695
+ var P_SEPARATOR = "\0P_SEP\0";
684
696
  function buildTermsContext(offer, country) {
685
697
  const isUS = country === "US";
686
698
  const isCA = country === "CA";
@@ -939,7 +951,6 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
939
951
  cta.removeAttribute("aria-busy");
940
952
  }
941
953
  }).catch(() => {
942
- console.error("[web-apple-pay] apple-pay-modal: failed to pre-fetch reCAPTCHA tokens; CTA remains disabled");
943
954
  if (cta) {
944
955
  cta.removeAttribute("aria-busy");
945
956
  }
package/dist/src/apple-pay-modal.stories.js CHANGED
@@ -71,7 +71,7 @@ function ensureApplePayLogoSymbol() {
71
71
  return;
72
72
  }
73
73
  const tmp = document.createElement("div");
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="white"/></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>`;
75
75
  document.body.prepend(tmp.firstElementChild);
76
76
  }
77
77
 
@@ -109,16 +109,32 @@ var apple_pay_modal_template_default = `<style>
109
109
  position: absolute;
110
110
  top: 1.5rem;
111
111
  right: 1.3125rem;
112
- background: none;
112
+ background: transparent;
113
113
  border: none;
114
114
  cursor: pointer;
115
115
  padding: 0;
116
+ width: 1.5rem;
117
+ height: 1.5rem;
116
118
  display: flex;
117
119
  align-items: center;
118
120
  justify-content: center;
121
+ color: var(--mb-colour-greyscale-london-20, #1a1a1a);
122
+ transition:
123
+ background-color ease-in-out 0.2s,
124
+ color ease-in-out 0.2s;
125
+ }
126
+
127
+ .apm__close:hover {
128
+ color: var(--mb-colour-base-chicago-30, #333333);
129
+ }
130
+
131
+ .apm__close:active {
132
+ background-color: var(--mb-colour-base-chicago-90, #e6e6e6);
133
+ color: var(--mb-colour-base-chicago-30, #333333);
119
134
  }
120
135
 
121
136
  .apm__close:focus {
137
+ background-color: var(--mb-colour-base-chicago-90, #e6e6e6);
122
138
  outline: solid 0.125rem var(--focus-border-color, #121212);
123
139
  border-radius: 0.25rem;
124
140
  }
@@ -301,10 +317,6 @@ var apple_pay_modal_template_default = `<style>
301
317
  cursor: pointer;
302
318
  color: #fff;
303
319
  text-align: center;
304
- font-family: var(
305
- --mb-typeface-sans,
306
- var(--wall-type-system-sans, system-ui, sans-serif)
307
- );
308
320
  font-size: 1.25rem;
309
321
  font-style: normal;
310
322
  font-weight: 500;
@@ -421,7 +433,7 @@ var apple_pay_modal_template_default = `<style>
421
433
  fill-rule="evenodd"
422
434
  clip-rule="evenodd"
423
435
  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"
424
- fill="#333333"
436
+ fill="currentColor"
425
437
  />
426
438
  </g>
427
439
  <defs>
@@ -679,8 +691,8 @@ function renewalPeriodText(unit, duration) {
679
691
  return "";
680
692
  }
681
693
  }
682
- var LI_SEPARATOR = "LI_SEPARATOR";
683
- var P_SEPARATOR = "P_SEPARATOR";
694
+ var LI_SEPARATOR = "\0LI_SEP\0";
695
+ var P_SEPARATOR = "\0P_SEP\0";
684
696
  function buildTermsContext(offer, country) {
685
697
  const isUS = country === "US";
686
698
  const isCA = country === "CA";
@@ -939,7 +951,6 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
939
951
  cta.removeAttribute("aria-busy");
940
952
  }
941
953
  }).catch(() => {
942
- console.error("[web-apple-pay] apple-pay-modal: failed to pre-fetch reCAPTCHA tokens; CTA remains disabled");
943
954
  if (cta) {
944
955
  cta.removeAttribute("aria-busy");
945
956
  }
@@ -1028,8 +1039,8 @@ var apple_pay_button_template_default = `<style>
1028
1039
  min-width: 0;
1029
1040
  height: 100%;
1030
1041
  min-height: var(--apple-pay-height, 2.75rem);
1031
- background-color: #000;
1032
- color: #fff;
1042
+ background-color: var(--apple-pay-background-color, #000);
1043
+ color: var(--apple-pay-foreground-color, #fff);
1033
1044
  border: none;
1034
1045
  border-radius: var(--apple-pay-border-radius, 1.375rem);
1035
1046
  cursor: pointer;
@@ -1041,6 +1052,7 @@ var apple_pay_button_template_default = `<style>
1041
1052
  teg-apple-pay-button .apple-pay-btn svg {
1042
1053
  flex-shrink: 0;
1043
1054
  display: block;
1055
+ color: currentColor;
1044
1056
  }
1045
1057
 
1046
1058
  teg-apple-pay-button .apple-pay-btn.wap-loading {
@@ -1055,8 +1067,8 @@ var apple_pay_button_template_default = `<style>
1055
1067
  left: 50%;
1056
1068
  width: 1.25rem;
1057
1069
  height: 1.25rem;
1058
- border: 2px solid rgba(255, 255, 255, 0.25);
1059
- border-top-color: #fff;
1070
+ border: 2px solid var(--apple-pay-spinner-track-color, rgba(255, 255, 255, 0.25));
1071
+ border-top-color: var(--apple-pay-spinner-head-color, currentColor);
1060
1072
  border-radius: 50%;
1061
1073
  animation: wap-button-spinner 0.8s linear infinite;
1062
1074
  }
@@ -1124,15 +1136,11 @@ var isApplePayAvailable = async () => {
1124
1136
  }
1125
1137
  const merchantId = getApplePayConfig()?.merchantId;
1126
1138
  if (!merchantId) {
1127
- console.warn(
1128
- "[web-apple-pay] Missing merchantId. Call configureApplePay({ merchantId, ... }) before rendering Apple Pay components."
1129
- );
1130
1139
  return false;
1131
1140
  }
1132
1141
  const hasActiveCard = await applePaySession.canMakePaymentsWithActiveCard(merchantId);
1133
1142
  return hasActiveCard;
1134
1143
  } catch (error) {
1135
- console.error("Error checking Apple Pay active card status:", error);
1136
1144
  return false;
1137
1145
  }
1138
1146
  };
@@ -1372,7 +1380,6 @@ async function handleMerchantValidation(event, session, config) {
1372
1380
  }
1373
1381
  session.completeMerchantValidation(response.merchantSession);
1374
1382
  } catch (err) {
1375
- console.error("[web-apple-pay] onvalidatemerchant: error during validation", err);
1376
1383
  session.abort();
1377
1384
  redirectToFallbackCheckout(config);
1378
1385
  }
@@ -1406,7 +1413,6 @@ function startApplePaySession(config) {
1406
1413
  trackWalletPaymentSheetOpen(config.skuId);
1407
1414
  session.begin();
1408
1415
  } catch (err) {
1409
- console.error("[web-apple-pay] startApplePaySession: failed to create session", err);
1410
1416
  redirectToFallbackCheckout(config);
1411
1417
  }
1412
1418
  }
@@ -1616,7 +1622,6 @@ async function handlePaymentAuthorized(event, session, sessionData, config) {
1616
1622
  failApplePaySession(session, err.errors);
1617
1623
  return;
1618
1624
  }
1619
- console.error("[web-apple-pay] onpaymentauthorized error", { skuId, err });
1620
1625
  const walletError = parseWalletApiError(err);
1621
1626
  trackWalletPaymentFailure(skuId, walletError?.errorType ?? "UNKNOWN");
1622
1627
  failApplePaySession(session);
@@ -1894,7 +1899,6 @@ var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
1894
1899
  var TOTAL_LABEL = "The Economist";
1895
1900
  var DEFAULT_CURRENCY = "USD";
1896
1901
  var DEFAULT_TOTAL = "0.00";
1897
- var ERROR_INITIATE = "Failed to initiate Apple Pay session:";
1898
1902
  var SEL_CONTAINER = ".apple-pay-container";
1899
1903
  var SEL_BUTTON = ".apple-pay-btn";
1900
1904
  var APPLE_PAY_EXCLUDED_VARIANTS = [
@@ -2027,7 +2031,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
2027
2031
  if (await this.#fetchAndCacheOptions()) return;
2028
2032
  this.#finishLoading();
2029
2033
  } catch (err) {
2030
- console.error("[web-apple-pay] #run: unexpected error, hiding button", err);
2031
2034
  this.style.display = "none";
2032
2035
  this.querySelector(SEL_CONTAINER)?.remove();
2033
2036
  } finally {
@@ -2167,7 +2170,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
2167
2170
  #scheduleRecaptchaTokens() {
2168
2171
  const attempt = getPurchaseRecaptchaTokens();
2169
2172
  attempt.catch((err) => {
2170
- console.error("[web-apple-pay] reCAPTCHA token pre-fetch failed; will retry on modal open", err);
2171
2173
  if (this.#recaptchaTokensPromise === attempt) {
2172
2174
  this.#recaptchaTokensPromise = null;
2173
2175
  }
@@ -2230,7 +2232,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
2230
2232
  )
2231
2233
  );
2232
2234
  } catch (error) {
2233
- console.error(ERROR_INITIATE, error);
2234
2235
  }
2235
2236
  }
2236
2237
  };
package/dist/src/clients/payment-checkout/apple-session.js CHANGED
@@ -193,7 +193,6 @@ async function handleMerchantValidation(event, session, config) {
193
193
  }
194
194
  session.completeMerchantValidation(response.merchantSession);
195
195
  } catch (err) {
196
- console.error("[web-apple-pay] onvalidatemerchant: error during validation", err);
197
196
  session.abort();
198
197
  redirectToFallbackCheckout(config);
199
198
  }
@@ -227,7 +226,6 @@ function startApplePaySession(config) {
227
226
  trackWalletPaymentSheetOpen(config.skuId);
228
227
  session.begin();
229
228
  } catch (err) {
230
- console.error("[web-apple-pay] startApplePaySession: failed to create session", err);
231
229
  redirectToFallbackCheckout(config);
232
230
  }
233
231
  }
package/dist/src/clients/payment-checkout/detects.js CHANGED
@@ -29,15 +29,11 @@ var isApplePayAvailable = async () => {
29
29
  }
30
30
  const merchantId = getApplePayConfig()?.merchantId;
31
31
  if (!merchantId) {
32
- console.warn(
33
- "[web-apple-pay] Missing merchantId. Call configureApplePay({ merchantId, ... }) before rendering Apple Pay components."
34
- );
35
32
  return false;
36
33
  }
37
34
  const hasActiveCard = await applePaySession.canMakePaymentsWithActiveCard(merchantId);
38
35
  return hasActiveCard;
39
36
  } catch (error) {
40
- console.error("Error checking Apple Pay active card status:", error);
41
37
  return false;
42
38
  }
43
39
  };
package/dist/src/clients/payment-checkout/payment-handler.js CHANGED
@@ -360,7 +360,6 @@ async function handlePaymentAuthorized(event, session, sessionData, config) {
360
360
  failApplePaySession(session, err.errors);
361
361
  return;
362
362
  }
363
- console.error("[web-apple-pay] onpaymentauthorized error", { skuId, err });
364
363
  const walletError = parseWalletApiError(err);
365
364
  trackWalletPaymentFailure(skuId, walletError?.errorType ?? "UNKNOWN");
366
365
  failApplePaySession(session);
package/dist/src/constants.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export declare enum ApplePayEntryPoint {
2
2
  PAYWALL = "article_paywall",
3
- REGWALL = "article_regwall"
3
+ REGWALL = "article_regwall",
4
+ DUAL_OFFER_BANNER = "dual_offer_banner"
4
5
  }
package/dist/src/constants.js CHANGED
@@ -2,6 +2,7 @@
2
2
  var ApplePayEntryPoint = /* @__PURE__ */ ((ApplePayEntryPoint2) => {
3
3
  ApplePayEntryPoint2["PAYWALL"] = "article_paywall";
4
4
  ApplePayEntryPoint2["REGWALL"] = "article_regwall";
5
+ ApplePayEntryPoint2["DUAL_OFFER_BANNER"] = "dual_offer_banner";
5
6
  return ApplePayEntryPoint2;
6
7
  })(ApplePayEntryPoint || {});
7
8
  export {
package/dist/src/index.js CHANGED
@@ -71,7 +71,7 @@ function ensureApplePayLogoSymbol() {
71
71
  return;
72
72
  }
73
73
  const tmp = document.createElement("div");
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="white"/></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>`;
75
75
  document.body.prepend(tmp.firstElementChild);
76
76
  }
77
77
 
@@ -109,16 +109,32 @@ var apple_pay_modal_template_default = `<style>
109
109
  position: absolute;
110
110
  top: 1.5rem;
111
111
  right: 1.3125rem;
112
- background: none;
112
+ background: transparent;
113
113
  border: none;
114
114
  cursor: pointer;
115
115
  padding: 0;
116
+ width: 1.5rem;
117
+ height: 1.5rem;
116
118
  display: flex;
117
119
  align-items: center;
118
120
  justify-content: center;
121
+ color: var(--mb-colour-greyscale-london-20, #1a1a1a);
122
+ transition:
123
+ background-color ease-in-out 0.2s,
124
+ color ease-in-out 0.2s;
125
+ }
126
+
127
+ .apm__close:hover {
128
+ color: var(--mb-colour-base-chicago-30, #333333);
129
+ }
130
+
131
+ .apm__close:active {
132
+ background-color: var(--mb-colour-base-chicago-90, #e6e6e6);
133
+ color: var(--mb-colour-base-chicago-30, #333333);
119
134
  }
120
135
 
121
136
  .apm__close:focus {
137
+ background-color: var(--mb-colour-base-chicago-90, #e6e6e6);
122
138
  outline: solid 0.125rem var(--focus-border-color, #121212);
123
139
  border-radius: 0.25rem;
124
140
  }
@@ -301,10 +317,6 @@ var apple_pay_modal_template_default = `<style>
301
317
  cursor: pointer;
302
318
  color: #fff;
303
319
  text-align: center;
304
- font-family: var(
305
- --mb-typeface-sans,
306
- var(--wall-type-system-sans, system-ui, sans-serif)
307
- );
308
320
  font-size: 1.25rem;
309
321
  font-style: normal;
310
322
  font-weight: 500;
@@ -421,7 +433,7 @@ var apple_pay_modal_template_default = `<style>
421
433
  fill-rule="evenodd"
422
434
  clip-rule="evenodd"
423
435
  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"
424
- fill="#333333"
436
+ fill="currentColor"
425
437
  />
426
438
  </g>
427
439
  <defs>
@@ -684,8 +696,8 @@ function renewalPeriodText(unit, duration) {
684
696
  return "";
685
697
  }
686
698
  }
687
- var LI_SEPARATOR = "LI_SEPARATOR";
688
- var P_SEPARATOR = "P_SEPARATOR";
699
+ var LI_SEPARATOR = "\0LI_SEP\0";
700
+ var P_SEPARATOR = "\0P_SEP\0";
689
701
  function buildTermsContext(offer, country) {
690
702
  const isUS = country === "US";
691
703
  const isCA = country === "CA";
@@ -944,7 +956,6 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
944
956
  cta.removeAttribute("aria-busy");
945
957
  }
946
958
  }).catch(() => {
947
- console.error("[web-apple-pay] apple-pay-modal: failed to pre-fetch reCAPTCHA tokens; CTA remains disabled");
948
959
  if (cta) {
949
960
  cta.removeAttribute("aria-busy");
950
961
  }
@@ -1033,8 +1044,8 @@ var apple_pay_button_template_default = `<style>
1033
1044
  min-width: 0;
1034
1045
  height: 100%;
1035
1046
  min-height: var(--apple-pay-height, 2.75rem);
1036
- background-color: #000;
1037
- color: #fff;
1047
+ background-color: var(--apple-pay-background-color, #000);
1048
+ color: var(--apple-pay-foreground-color, #fff);
1038
1049
  border: none;
1039
1050
  border-radius: var(--apple-pay-border-radius, 1.375rem);
1040
1051
  cursor: pointer;
@@ -1046,6 +1057,7 @@ var apple_pay_button_template_default = `<style>
1046
1057
  teg-apple-pay-button .apple-pay-btn svg {
1047
1058
  flex-shrink: 0;
1048
1059
  display: block;
1060
+ color: currentColor;
1049
1061
  }
1050
1062
 
1051
1063
  teg-apple-pay-button .apple-pay-btn.wap-loading {
@@ -1060,8 +1072,8 @@ var apple_pay_button_template_default = `<style>
1060
1072
  left: 50%;
1061
1073
  width: 1.25rem;
1062
1074
  height: 1.25rem;
1063
- border: 2px solid rgba(255, 255, 255, 0.25);
1064
- border-top-color: #fff;
1075
+ border: 2px solid var(--apple-pay-spinner-track-color, rgba(255, 255, 255, 0.25));
1076
+ border-top-color: var(--apple-pay-spinner-head-color, currentColor);
1065
1077
  border-radius: 50%;
1066
1078
  animation: wap-button-spinner 0.8s linear infinite;
1067
1079
  }
@@ -1129,15 +1141,11 @@ var isApplePayAvailable = async () => {
1129
1141
  }
1130
1142
  const merchantId = getApplePayConfig()?.merchantId;
1131
1143
  if (!merchantId) {
1132
- console.warn(
1133
- "[web-apple-pay] Missing merchantId. Call configureApplePay({ merchantId, ... }) before rendering Apple Pay components."
1134
- );
1135
1144
  return false;
1136
1145
  }
1137
1146
  const hasActiveCard = await applePaySession.canMakePaymentsWithActiveCard(merchantId);
1138
1147
  return hasActiveCard;
1139
1148
  } catch (error) {
1140
- console.error("Error checking Apple Pay active card status:", error);
1141
1149
  return false;
1142
1150
  }
1143
1151
  };
@@ -1377,7 +1385,6 @@ async function handleMerchantValidation(event, session, config) {
1377
1385
  }
1378
1386
  session.completeMerchantValidation(response.merchantSession);
1379
1387
  } catch (err) {
1380
- console.error("[web-apple-pay] onvalidatemerchant: error during validation", err);
1381
1388
  session.abort();
1382
1389
  redirectToFallbackCheckout(config);
1383
1390
  }
@@ -1411,7 +1418,6 @@ function startApplePaySession(config) {
1411
1418
  trackWalletPaymentSheetOpen(config.skuId);
1412
1419
  session.begin();
1413
1420
  } catch (err) {
1414
- console.error("[web-apple-pay] startApplePaySession: failed to create session", err);
1415
1421
  redirectToFallbackCheckout(config);
1416
1422
  }
1417
1423
  }
@@ -1621,7 +1627,6 @@ async function handlePaymentAuthorized(event, session, sessionData, config) {
1621
1627
  failApplePaySession(session, err.errors);
1622
1628
  return;
1623
1629
  }
1624
- console.error("[web-apple-pay] onpaymentauthorized error", { skuId, err });
1625
1630
  const walletError = parseWalletApiError(err);
1626
1631
  trackWalletPaymentFailure(skuId, walletError?.errorType ?? "UNKNOWN");
1627
1632
  failApplePaySession(session);
@@ -1899,7 +1904,6 @@ var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
1899
1904
  var TOTAL_LABEL = "The Economist";
1900
1905
  var DEFAULT_CURRENCY = "USD";
1901
1906
  var DEFAULT_TOTAL = "0.00";
1902
- var ERROR_INITIATE = "Failed to initiate Apple Pay session:";
1903
1907
  var SEL_CONTAINER = ".apple-pay-container";
1904
1908
  var SEL_BUTTON = ".apple-pay-btn";
1905
1909
  var APPLE_PAY_EXCLUDED_VARIANTS = [
@@ -2032,7 +2036,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
2032
2036
  if (await this.#fetchAndCacheOptions()) return;
2033
2037
  this.#finishLoading();
2034
2038
  } catch (err) {
2035
- console.error("[web-apple-pay] #run: unexpected error, hiding button", err);
2036
2039
  this.style.display = "none";
2037
2040
  this.querySelector(SEL_CONTAINER)?.remove();
2038
2041
  } finally {
@@ -2172,7 +2175,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
2172
2175
  #scheduleRecaptchaTokens() {
2173
2176
  const attempt = getPurchaseRecaptchaTokens();
2174
2177
  attempt.catch((err) => {
2175
- console.error("[web-apple-pay] reCAPTCHA token pre-fetch failed; will retry on modal open", err);
2176
2178
  if (this.#recaptchaTokensPromise === attempt) {
2177
2179
  this.#recaptchaTokensPromise = null;
2178
2180
  }
@@ -2235,7 +2237,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
2235
2237
  )
2236
2238
  );
2237
2239
  } catch (error) {
2238
- console.error(ERROR_INITIATE, error);
2239
2240
  }
2240
2241
  }
2241
2242
  };
@@ -2244,6 +2245,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
2244
2245
  var ApplePayEntryPoint = /* @__PURE__ */ ((ApplePayEntryPoint2) => {
2245
2246
  ApplePayEntryPoint2["PAYWALL"] = "article_paywall";
2246
2247
  ApplePayEntryPoint2["REGWALL"] = "article_regwall";
2248
+ ApplePayEntryPoint2["DUAL_OFFER_BANNER"] = "dual_offer_banner";
2247
2249
  return ApplePayEntryPoint2;
2248
2250
  })(ApplePayEntryPoint || {});
2249
2251
 
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": "0.1.3-beta.29",
4
+ "version": "0.1.3-beta.30",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "types": "dist/index.d.ts",