@economist/web-apple-pay 1.8.1 → 1.9.0
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.
- package/dist/index.js +77 -58
- package/dist/src/apple-pay-button.d.ts +17 -1
- package/dist/src/apple-pay-button.js +71 -50
- package/dist/src/apple-pay-button.stories.js +71 -50
- package/dist/src/apple-pay-logo.js +1 -2
- package/dist/src/apple-pay-modal.js +1 -2
- package/dist/src/apple-pay-modal.stories.js +71 -50
- package/dist/src/constants.d.ts +20 -0
- package/dist/src/constants.js +7 -0
- package/dist/src/index.js +77 -58
- package/dist/src/types/experiment-integration.d.js +0 -0
- 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
|
|
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
|
|
1012
|
-
*
|
|
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:
|
|
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.
|
|
1053
|
-
padding: 0
|
|
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, #
|
|
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,
|
|
1041
|
+
border-radius: var(--apple-pay-border-radius, 0.25rem);
|
|
1059
1042
|
cursor: pointer;
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
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
|
|
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-
|
|
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
|
-
|
|
1082
|
-
height:
|
|
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
|
-
|
|
1132
|
-
class="apple-pay-
|
|
1133
|
-
width="
|
|
1134
|
-
height="
|
|
1135
|
-
viewBox="0 0
|
|
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
|
-
|
|
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>
|
|
@@ -1946,6 +1937,19 @@ var getSupportedBillingCountries = (offerCountry, offerVariant) => {
|
|
|
1946
1937
|
return [...zoneCountries];
|
|
1947
1938
|
};
|
|
1948
1939
|
|
|
1940
|
+
// src/constants.ts
|
|
1941
|
+
var ApplePayEntryPoint = /* @__PURE__ */ ((ApplePayEntryPoint3) => {
|
|
1942
|
+
ApplePayEntryPoint3["PAYWALL"] = "article_paywall";
|
|
1943
|
+
ApplePayEntryPoint3["REGWALL"] = "article_regwall";
|
|
1944
|
+
ApplePayEntryPoint3["DUAL_OFFER_BANNER"] = "dual_offer_banner";
|
|
1945
|
+
return ApplePayEntryPoint3;
|
|
1946
|
+
})(ApplePayEntryPoint || {});
|
|
1947
|
+
var APPLE_PAY_EXPRESS_EXPERIMENT_KEY = "apple-pay-express-feature-flag-placeholder";
|
|
1948
|
+
var APPLE_PAY_EXPRESS_VARIANTS = {
|
|
1949
|
+
CONTROL: "control",
|
|
1950
|
+
TREATMENT: "treatment"
|
|
1951
|
+
};
|
|
1952
|
+
|
|
1949
1953
|
// src/apple-pay-button.ts
|
|
1950
1954
|
var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
|
|
1951
1955
|
var TOTAL_LABEL = "The Economist";
|
|
@@ -1963,7 +1967,23 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
|
|
|
1963
1967
|
define(_ApplePayButton.tag, _ApplePayButton);
|
|
1964
1968
|
}
|
|
1965
1969
|
/**
|
|
1966
|
-
* Creates and configures an ApplePayButton
|
|
1970
|
+
* Creates and configures an ApplePayButton when the Amplitude experiment is enabled.
|
|
1971
|
+
*
|
|
1972
|
+
* Reads the experiment variant from `window.experimentIntegration.getVariant` using
|
|
1973
|
+
* {@link APPLE_PAY_EXPRESS_EXPERIMENT_KEY}. The host page is responsible
|
|
1974
|
+
* for setting up `window.experimentIntegration` before calling this method.
|
|
1975
|
+
*
|
|
1976
|
+
* - `treatment` → button created and returned
|
|
1977
|
+
* - `control` / missing / anything else → returns null (button suppressed)
|
|
1978
|
+
*
|
|
1979
|
+
* **Transition period:** the legacy `FEATURE_APPLE_PAY_EXPRESS_CHECKOUT` URL param
|
|
1980
|
+
* gate is also evaluated as a fallback until all host apps have integrated
|
|
1981
|
+
* `window.experimentIntegration`. Once all consumers are migrated, the URL param
|
|
1982
|
+
* fallback will be removed.
|
|
1983
|
+
*
|
|
1984
|
+
* @param offer - The offer to display in the Apple Pay flow.
|
|
1985
|
+
* @param country - The user's country code.
|
|
1986
|
+
* @param entryPoint - Where the button is being rendered (e.g. paywall, banner).
|
|
1967
1987
|
*/
|
|
1968
1988
|
static createIfEnabled(offer, country, entryPoint) {
|
|
1969
1989
|
if (!offer) {
|
|
@@ -1972,7 +1992,14 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
|
|
|
1972
1992
|
if (APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant)) {
|
|
1973
1993
|
return null;
|
|
1974
1994
|
}
|
|
1975
|
-
|
|
1995
|
+
const experimentValue = window.experimentIntegration?.getVariant?.(
|
|
1996
|
+
APPLE_PAY_EXPRESS_EXPERIMENT_KEY
|
|
1997
|
+
);
|
|
1998
|
+
const isTreatment = experimentValue === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
|
|
1999
|
+
const hasUrlParamFlag = new URLSearchParams(window.location.search).has(
|
|
2000
|
+
FEATURE_APPLE_PAY_EXPRESS_CHECKOUT
|
|
2001
|
+
);
|
|
2002
|
+
if (!isTreatment && !hasUrlParamFlag) {
|
|
1976
2003
|
return null;
|
|
1977
2004
|
}
|
|
1978
2005
|
_ApplePayButton.define();
|
|
@@ -2280,14 +2307,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
|
|
|
2280
2307
|
}
|
|
2281
2308
|
};
|
|
2282
2309
|
|
|
2283
|
-
// src/constants.ts
|
|
2284
|
-
var ApplePayEntryPoint = /* @__PURE__ */ ((ApplePayEntryPoint2) => {
|
|
2285
|
-
ApplePayEntryPoint2["PAYWALL"] = "article_paywall";
|
|
2286
|
-
ApplePayEntryPoint2["REGWALL"] = "article_regwall";
|
|
2287
|
-
ApplePayEntryPoint2["DUAL_OFFER_BANNER"] = "dual_offer_banner";
|
|
2288
|
-
return ApplePayEntryPoint2;
|
|
2289
|
-
})(ApplePayEntryPoint || {});
|
|
2290
|
-
|
|
2291
2310
|
// src/index.ts
|
|
2292
2311
|
function defineApplePayElements() {
|
|
2293
2312
|
ApplePayButton.define();
|
|
@@ -6,7 +6,23 @@ export declare class ApplePayButton extends HTMLElement {
|
|
|
6
6
|
static readonly tag = "teg-apple-pay-button";
|
|
7
7
|
static define(): void;
|
|
8
8
|
/**
|
|
9
|
-
* Creates and configures an ApplePayButton
|
|
9
|
+
* Creates and configures an ApplePayButton when the Amplitude experiment is enabled.
|
|
10
|
+
*
|
|
11
|
+
* Reads the experiment variant from `window.experimentIntegration.getVariant` using
|
|
12
|
+
* {@link APPLE_PAY_EXPRESS_EXPERIMENT_KEY}. The host page is responsible
|
|
13
|
+
* for setting up `window.experimentIntegration` before calling this method.
|
|
14
|
+
*
|
|
15
|
+
* - `treatment` → button created and returned
|
|
16
|
+
* - `control` / missing / anything else → returns null (button suppressed)
|
|
17
|
+
*
|
|
18
|
+
* **Transition period:** the legacy `FEATURE_APPLE_PAY_EXPRESS_CHECKOUT` URL param
|
|
19
|
+
* gate is also evaluated as a fallback until all host apps have integrated
|
|
20
|
+
* `window.experimentIntegration`. Once all consumers are migrated, the URL param
|
|
21
|
+
* fallback will be removed.
|
|
22
|
+
*
|
|
23
|
+
* @param offer - The offer to display in the Apple Pay flow.
|
|
24
|
+
* @param country - The user's country code.
|
|
25
|
+
* @param entryPoint - Where the button is being rendered (e.g. paywall, banner).
|
|
10
26
|
*/
|
|
11
27
|
static createIfEnabled(offer: Offer | undefined, country: string, entryPoint?: ApplePayEntryPoint): ApplePayButton | null;
|
|
12
28
|
get offer(): Offer | null;
|
|
@@ -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
|
|
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
|
|
1007
|
-
*
|
|
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:
|
|
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.
|
|
1048
|
-
padding: 0
|
|
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, #
|
|
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,
|
|
1036
|
+
border-radius: var(--apple-pay-border-radius, 0.25rem);
|
|
1054
1037
|
cursor: pointer;
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
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
|
|
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-
|
|
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
|
-
|
|
1077
|
-
height:
|
|
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
|
-
|
|
1127
|
-
class="apple-pay-
|
|
1128
|
-
width="
|
|
1129
|
-
height="
|
|
1130
|
-
viewBox="0 0
|
|
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
|
-
|
|
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>
|
|
@@ -1941,6 +1932,13 @@ var getSupportedBillingCountries = (offerCountry, offerVariant) => {
|
|
|
1941
1932
|
return [...zoneCountries];
|
|
1942
1933
|
};
|
|
1943
1934
|
|
|
1935
|
+
// src/constants.ts
|
|
1936
|
+
var APPLE_PAY_EXPRESS_EXPERIMENT_KEY = "apple-pay-express-feature-flag-placeholder";
|
|
1937
|
+
var APPLE_PAY_EXPRESS_VARIANTS = {
|
|
1938
|
+
CONTROL: "control",
|
|
1939
|
+
TREATMENT: "treatment"
|
|
1940
|
+
};
|
|
1941
|
+
|
|
1944
1942
|
// src/apple-pay-button.ts
|
|
1945
1943
|
var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
|
|
1946
1944
|
var TOTAL_LABEL = "The Economist";
|
|
@@ -1958,7 +1956,23 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
|
|
|
1958
1956
|
define(_ApplePayButton.tag, _ApplePayButton);
|
|
1959
1957
|
}
|
|
1960
1958
|
/**
|
|
1961
|
-
* Creates and configures an ApplePayButton
|
|
1959
|
+
* Creates and configures an ApplePayButton when the Amplitude experiment is enabled.
|
|
1960
|
+
*
|
|
1961
|
+
* Reads the experiment variant from `window.experimentIntegration.getVariant` using
|
|
1962
|
+
* {@link APPLE_PAY_EXPRESS_EXPERIMENT_KEY}. The host page is responsible
|
|
1963
|
+
* for setting up `window.experimentIntegration` before calling this method.
|
|
1964
|
+
*
|
|
1965
|
+
* - `treatment` → button created and returned
|
|
1966
|
+
* - `control` / missing / anything else → returns null (button suppressed)
|
|
1967
|
+
*
|
|
1968
|
+
* **Transition period:** the legacy `FEATURE_APPLE_PAY_EXPRESS_CHECKOUT` URL param
|
|
1969
|
+
* gate is also evaluated as a fallback until all host apps have integrated
|
|
1970
|
+
* `window.experimentIntegration`. Once all consumers are migrated, the URL param
|
|
1971
|
+
* fallback will be removed.
|
|
1972
|
+
*
|
|
1973
|
+
* @param offer - The offer to display in the Apple Pay flow.
|
|
1974
|
+
* @param country - The user's country code.
|
|
1975
|
+
* @param entryPoint - Where the button is being rendered (e.g. paywall, banner).
|
|
1962
1976
|
*/
|
|
1963
1977
|
static createIfEnabled(offer, country, entryPoint) {
|
|
1964
1978
|
if (!offer) {
|
|
@@ -1967,7 +1981,14 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
|
|
|
1967
1981
|
if (APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant)) {
|
|
1968
1982
|
return null;
|
|
1969
1983
|
}
|
|
1970
|
-
|
|
1984
|
+
const experimentValue = window.experimentIntegration?.getVariant?.(
|
|
1985
|
+
APPLE_PAY_EXPRESS_EXPERIMENT_KEY
|
|
1986
|
+
);
|
|
1987
|
+
const isTreatment = experimentValue === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
|
|
1988
|
+
const hasUrlParamFlag = new URLSearchParams(window.location.search).has(
|
|
1989
|
+
FEATURE_APPLE_PAY_EXPRESS_CHECKOUT
|
|
1990
|
+
);
|
|
1991
|
+
if (!isTreatment && !hasUrlParamFlag) {
|
|
1971
1992
|
return null;
|
|
1972
1993
|
}
|
|
1973
1994
|
_ApplePayButton.define();
|
|
@@ -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
|
|
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
|
|
1015
|
-
*
|
|
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:
|
|
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.
|
|
1056
|
-
padding: 0
|
|
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, #
|
|
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,
|
|
1044
|
+
border-radius: var(--apple-pay-border-radius, 0.25rem);
|
|
1062
1045
|
cursor: pointer;
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
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
|
|
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-
|
|
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
|
-
|
|
1085
|
-
height:
|
|
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
|
-
|
|
1135
|
-
class="apple-pay-
|
|
1136
|
-
width="
|
|
1137
|
-
height="
|
|
1138
|
-
viewBox="0 0
|
|
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
|
-
|
|
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>
|
|
@@ -1949,6 +1940,13 @@ var getSupportedBillingCountries = (offerCountry, offerVariant) => {
|
|
|
1949
1940
|
return [...zoneCountries];
|
|
1950
1941
|
};
|
|
1951
1942
|
|
|
1943
|
+
// src/constants.ts
|
|
1944
|
+
var APPLE_PAY_EXPRESS_EXPERIMENT_KEY = "apple-pay-express-feature-flag-placeholder";
|
|
1945
|
+
var APPLE_PAY_EXPRESS_VARIANTS = {
|
|
1946
|
+
CONTROL: "control",
|
|
1947
|
+
TREATMENT: "treatment"
|
|
1948
|
+
};
|
|
1949
|
+
|
|
1952
1950
|
// src/apple-pay-button.ts
|
|
1953
1951
|
var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
|
|
1954
1952
|
var TOTAL_LABEL = "The Economist";
|
|
@@ -1966,7 +1964,23 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
|
|
|
1966
1964
|
define(_ApplePayButton.tag, _ApplePayButton);
|
|
1967
1965
|
}
|
|
1968
1966
|
/**
|
|
1969
|
-
* Creates and configures an ApplePayButton
|
|
1967
|
+
* Creates and configures an ApplePayButton when the Amplitude experiment is enabled.
|
|
1968
|
+
*
|
|
1969
|
+
* Reads the experiment variant from `window.experimentIntegration.getVariant` using
|
|
1970
|
+
* {@link APPLE_PAY_EXPRESS_EXPERIMENT_KEY}. The host page is responsible
|
|
1971
|
+
* for setting up `window.experimentIntegration` before calling this method.
|
|
1972
|
+
*
|
|
1973
|
+
* - `treatment` → button created and returned
|
|
1974
|
+
* - `control` / missing / anything else → returns null (button suppressed)
|
|
1975
|
+
*
|
|
1976
|
+
* **Transition period:** the legacy `FEATURE_APPLE_PAY_EXPRESS_CHECKOUT` URL param
|
|
1977
|
+
* gate is also evaluated as a fallback until all host apps have integrated
|
|
1978
|
+
* `window.experimentIntegration`. Once all consumers are migrated, the URL param
|
|
1979
|
+
* fallback will be removed.
|
|
1980
|
+
*
|
|
1981
|
+
* @param offer - The offer to display in the Apple Pay flow.
|
|
1982
|
+
* @param country - The user's country code.
|
|
1983
|
+
* @param entryPoint - Where the button is being rendered (e.g. paywall, banner).
|
|
1970
1984
|
*/
|
|
1971
1985
|
static createIfEnabled(offer, country, entryPoint) {
|
|
1972
1986
|
if (!offer) {
|
|
@@ -1975,7 +1989,14 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
|
|
|
1975
1989
|
if (APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant)) {
|
|
1976
1990
|
return null;
|
|
1977
1991
|
}
|
|
1978
|
-
|
|
1992
|
+
const experimentValue = window.experimentIntegration?.getVariant?.(
|
|
1993
|
+
APPLE_PAY_EXPRESS_EXPERIMENT_KEY
|
|
1994
|
+
);
|
|
1995
|
+
const isTreatment = experimentValue === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
|
|
1996
|
+
const hasUrlParamFlag = new URLSearchParams(window.location.search).has(
|
|
1997
|
+
FEATURE_APPLE_PAY_EXPRESS_CHECKOUT
|
|
1998
|
+
);
|
|
1999
|
+
if (!isTreatment && !hasUrlParamFlag) {
|
|
1979
2000
|
return null;
|
|
1980
2001
|
}
|
|
1981
2002
|
_ApplePayButton.define();
|
|
@@ -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
|
|
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 {
|
|
@@ -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
|
|
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
|
|
|
@@ -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
|
|
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
|
|
1007
|
-
*
|
|
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:
|
|
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.
|
|
1048
|
-
padding: 0
|
|
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, #
|
|
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,
|
|
1036
|
+
border-radius: var(--apple-pay-border-radius, 0.25rem);
|
|
1054
1037
|
cursor: pointer;
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
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
|
|
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-
|
|
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
|
-
|
|
1077
|
-
height:
|
|
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
|
-
|
|
1127
|
-
class="apple-pay-
|
|
1128
|
-
width="
|
|
1129
|
-
height="
|
|
1130
|
-
viewBox="0 0
|
|
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
|
-
|
|
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>
|
|
@@ -1941,6 +1932,13 @@ var getSupportedBillingCountries = (offerCountry, offerVariant) => {
|
|
|
1941
1932
|
return [...zoneCountries];
|
|
1942
1933
|
};
|
|
1943
1934
|
|
|
1935
|
+
// src/constants.ts
|
|
1936
|
+
var APPLE_PAY_EXPRESS_EXPERIMENT_KEY = "apple-pay-express-feature-flag-placeholder";
|
|
1937
|
+
var APPLE_PAY_EXPRESS_VARIANTS = {
|
|
1938
|
+
CONTROL: "control",
|
|
1939
|
+
TREATMENT: "treatment"
|
|
1940
|
+
};
|
|
1941
|
+
|
|
1944
1942
|
// src/apple-pay-button.ts
|
|
1945
1943
|
var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
|
|
1946
1944
|
var TOTAL_LABEL = "The Economist";
|
|
@@ -1958,7 +1956,23 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
|
|
|
1958
1956
|
define(_ApplePayButton.tag, _ApplePayButton);
|
|
1959
1957
|
}
|
|
1960
1958
|
/**
|
|
1961
|
-
* Creates and configures an ApplePayButton
|
|
1959
|
+
* Creates and configures an ApplePayButton when the Amplitude experiment is enabled.
|
|
1960
|
+
*
|
|
1961
|
+
* Reads the experiment variant from `window.experimentIntegration.getVariant` using
|
|
1962
|
+
* {@link APPLE_PAY_EXPRESS_EXPERIMENT_KEY}. The host page is responsible
|
|
1963
|
+
* for setting up `window.experimentIntegration` before calling this method.
|
|
1964
|
+
*
|
|
1965
|
+
* - `treatment` → button created and returned
|
|
1966
|
+
* - `control` / missing / anything else → returns null (button suppressed)
|
|
1967
|
+
*
|
|
1968
|
+
* **Transition period:** the legacy `FEATURE_APPLE_PAY_EXPRESS_CHECKOUT` URL param
|
|
1969
|
+
* gate is also evaluated as a fallback until all host apps have integrated
|
|
1970
|
+
* `window.experimentIntegration`. Once all consumers are migrated, the URL param
|
|
1971
|
+
* fallback will be removed.
|
|
1972
|
+
*
|
|
1973
|
+
* @param offer - The offer to display in the Apple Pay flow.
|
|
1974
|
+
* @param country - The user's country code.
|
|
1975
|
+
* @param entryPoint - Where the button is being rendered (e.g. paywall, banner).
|
|
1962
1976
|
*/
|
|
1963
1977
|
static createIfEnabled(offer, country, entryPoint) {
|
|
1964
1978
|
if (!offer) {
|
|
@@ -1967,7 +1981,14 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
|
|
|
1967
1981
|
if (APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant)) {
|
|
1968
1982
|
return null;
|
|
1969
1983
|
}
|
|
1970
|
-
|
|
1984
|
+
const experimentValue = window.experimentIntegration?.getVariant?.(
|
|
1985
|
+
APPLE_PAY_EXPRESS_EXPERIMENT_KEY
|
|
1986
|
+
);
|
|
1987
|
+
const isTreatment = experimentValue === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
|
|
1988
|
+
const hasUrlParamFlag = new URLSearchParams(window.location.search).has(
|
|
1989
|
+
FEATURE_APPLE_PAY_EXPRESS_CHECKOUT
|
|
1990
|
+
);
|
|
1991
|
+
if (!isTreatment && !hasUrlParamFlag) {
|
|
1971
1992
|
return null;
|
|
1972
1993
|
}
|
|
1973
1994
|
_ApplePayButton.define();
|
package/dist/src/constants.d.ts
CHANGED
|
@@ -3,3 +3,23 @@ export declare enum ApplePayEntryPoint {
|
|
|
3
3
|
REGWALL = "article_regwall",
|
|
4
4
|
DUAL_OFFER_BANNER = "dual_offer_banner"
|
|
5
5
|
}
|
|
6
|
+
/**
|
|
7
|
+
* Amplitude experiment key for Apple Pay Express Checkout.
|
|
8
|
+
* This package reads the variant for this key internally via
|
|
9
|
+
* `window.experimentIntegration.getVariant()` — set up by the host page
|
|
10
|
+
* before `createIfEnabled` is called. Gates all entry points (paywall, regwall, banner).
|
|
11
|
+
*
|
|
12
|
+
* TODO: Replace with the confirmed Amplitude experiment key once available.
|
|
13
|
+
* The current value is a placeholder and must be verified against the
|
|
14
|
+
* Amplitude experiment dashboard before going to production.
|
|
15
|
+
*/
|
|
16
|
+
export declare const APPLE_PAY_EXPRESS_EXPERIMENT_KEY = "apple-pay-express-feature-flag-placeholder";
|
|
17
|
+
/**
|
|
18
|
+
* Amplitude variant values for the Apple Pay Express Checkout experiment.
|
|
19
|
+
* CONTROL → button hidden (baseline)
|
|
20
|
+
* TREATMENT → button shown
|
|
21
|
+
*/
|
|
22
|
+
export declare const APPLE_PAY_EXPRESS_VARIANTS: {
|
|
23
|
+
readonly CONTROL: "control";
|
|
24
|
+
readonly TREATMENT: "treatment";
|
|
25
|
+
};
|
package/dist/src/constants.js
CHANGED
|
@@ -5,6 +5,13 @@ var ApplePayEntryPoint = /* @__PURE__ */ ((ApplePayEntryPoint2) => {
|
|
|
5
5
|
ApplePayEntryPoint2["DUAL_OFFER_BANNER"] = "dual_offer_banner";
|
|
6
6
|
return ApplePayEntryPoint2;
|
|
7
7
|
})(ApplePayEntryPoint || {});
|
|
8
|
+
var APPLE_PAY_EXPRESS_EXPERIMENT_KEY = "apple-pay-express-feature-flag-placeholder";
|
|
9
|
+
var APPLE_PAY_EXPRESS_VARIANTS = {
|
|
10
|
+
CONTROL: "control",
|
|
11
|
+
TREATMENT: "treatment"
|
|
12
|
+
};
|
|
8
13
|
export {
|
|
14
|
+
APPLE_PAY_EXPRESS_EXPERIMENT_KEY,
|
|
15
|
+
APPLE_PAY_EXPRESS_VARIANTS,
|
|
9
16
|
ApplePayEntryPoint
|
|
10
17
|
};
|
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
|
|
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
|
|
1012
|
-
*
|
|
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:
|
|
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.
|
|
1053
|
-
padding: 0
|
|
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, #
|
|
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,
|
|
1041
|
+
border-radius: var(--apple-pay-border-radius, 0.25rem);
|
|
1059
1042
|
cursor: pointer;
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
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
|
|
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-
|
|
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
|
-
|
|
1082
|
-
height:
|
|
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
|
-
|
|
1132
|
-
class="apple-pay-
|
|
1133
|
-
width="
|
|
1134
|
-
height="
|
|
1135
|
-
viewBox="0 0
|
|
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
|
-
|
|
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>
|
|
@@ -1946,6 +1937,19 @@ var getSupportedBillingCountries = (offerCountry, offerVariant) => {
|
|
|
1946
1937
|
return [...zoneCountries];
|
|
1947
1938
|
};
|
|
1948
1939
|
|
|
1940
|
+
// src/constants.ts
|
|
1941
|
+
var ApplePayEntryPoint = /* @__PURE__ */ ((ApplePayEntryPoint3) => {
|
|
1942
|
+
ApplePayEntryPoint3["PAYWALL"] = "article_paywall";
|
|
1943
|
+
ApplePayEntryPoint3["REGWALL"] = "article_regwall";
|
|
1944
|
+
ApplePayEntryPoint3["DUAL_OFFER_BANNER"] = "dual_offer_banner";
|
|
1945
|
+
return ApplePayEntryPoint3;
|
|
1946
|
+
})(ApplePayEntryPoint || {});
|
|
1947
|
+
var APPLE_PAY_EXPRESS_EXPERIMENT_KEY = "apple-pay-express-feature-flag-placeholder";
|
|
1948
|
+
var APPLE_PAY_EXPRESS_VARIANTS = {
|
|
1949
|
+
CONTROL: "control",
|
|
1950
|
+
TREATMENT: "treatment"
|
|
1951
|
+
};
|
|
1952
|
+
|
|
1949
1953
|
// src/apple-pay-button.ts
|
|
1950
1954
|
var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
|
|
1951
1955
|
var TOTAL_LABEL = "The Economist";
|
|
@@ -1963,7 +1967,23 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
|
|
|
1963
1967
|
define(_ApplePayButton.tag, _ApplePayButton);
|
|
1964
1968
|
}
|
|
1965
1969
|
/**
|
|
1966
|
-
* Creates and configures an ApplePayButton
|
|
1970
|
+
* Creates and configures an ApplePayButton when the Amplitude experiment is enabled.
|
|
1971
|
+
*
|
|
1972
|
+
* Reads the experiment variant from `window.experimentIntegration.getVariant` using
|
|
1973
|
+
* {@link APPLE_PAY_EXPRESS_EXPERIMENT_KEY}. The host page is responsible
|
|
1974
|
+
* for setting up `window.experimentIntegration` before calling this method.
|
|
1975
|
+
*
|
|
1976
|
+
* - `treatment` → button created and returned
|
|
1977
|
+
* - `control` / missing / anything else → returns null (button suppressed)
|
|
1978
|
+
*
|
|
1979
|
+
* **Transition period:** the legacy `FEATURE_APPLE_PAY_EXPRESS_CHECKOUT` URL param
|
|
1980
|
+
* gate is also evaluated as a fallback until all host apps have integrated
|
|
1981
|
+
* `window.experimentIntegration`. Once all consumers are migrated, the URL param
|
|
1982
|
+
* fallback will be removed.
|
|
1983
|
+
*
|
|
1984
|
+
* @param offer - The offer to display in the Apple Pay flow.
|
|
1985
|
+
* @param country - The user's country code.
|
|
1986
|
+
* @param entryPoint - Where the button is being rendered (e.g. paywall, banner).
|
|
1967
1987
|
*/
|
|
1968
1988
|
static createIfEnabled(offer, country, entryPoint) {
|
|
1969
1989
|
if (!offer) {
|
|
@@ -1972,7 +1992,14 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
|
|
|
1972
1992
|
if (APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant)) {
|
|
1973
1993
|
return null;
|
|
1974
1994
|
}
|
|
1975
|
-
|
|
1995
|
+
const experimentValue = window.experimentIntegration?.getVariant?.(
|
|
1996
|
+
APPLE_PAY_EXPRESS_EXPERIMENT_KEY
|
|
1997
|
+
);
|
|
1998
|
+
const isTreatment = experimentValue === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
|
|
1999
|
+
const hasUrlParamFlag = new URLSearchParams(window.location.search).has(
|
|
2000
|
+
FEATURE_APPLE_PAY_EXPRESS_CHECKOUT
|
|
2001
|
+
);
|
|
2002
|
+
if (!isTreatment && !hasUrlParamFlag) {
|
|
1976
2003
|
return null;
|
|
1977
2004
|
}
|
|
1978
2005
|
_ApplePayButton.define();
|
|
@@ -2280,14 +2307,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
|
|
|
2280
2307
|
}
|
|
2281
2308
|
};
|
|
2282
2309
|
|
|
2283
|
-
// src/constants.ts
|
|
2284
|
-
var ApplePayEntryPoint = /* @__PURE__ */ ((ApplePayEntryPoint2) => {
|
|
2285
|
-
ApplePayEntryPoint2["PAYWALL"] = "article_paywall";
|
|
2286
|
-
ApplePayEntryPoint2["REGWALL"] = "article_regwall";
|
|
2287
|
-
ApplePayEntryPoint2["DUAL_OFFER_BANNER"] = "dual_offer_banner";
|
|
2288
|
-
return ApplePayEntryPoint2;
|
|
2289
|
-
})(ApplePayEntryPoint || {});
|
|
2290
|
-
|
|
2291
2310
|
// src/index.ts
|
|
2292
2311
|
function defineApplePayElements() {
|
|
2293
2312
|
ApplePayButton.define();
|
|
File without changes
|