@economist/web-apple-pay 1.5.0 → 1.5.1
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 +2 -317
- package/dist/src/apple-pay-button.js +2 -317
- package/dist/src/apple-pay-button.stories.js +2 -317
- package/dist/src/apple-pay-modal.js +1 -316
- package/dist/src/apple-pay-modal.stories.js +2 -317
- package/dist/src/index.js +2 -317
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -76,322 +76,7 @@ function ensureApplePayLogoSymbol() {
|
|
|
76
76
|
}
|
|
77
77
|
|
|
78
78
|
// src/templates/apple-pay-modal.template.html
|
|
79
|
-
var apple_pay_modal_template_default = `<style>
|
|
80
|
-
.apm-overlay {
|
|
81
|
-
position: fixed;
|
|
82
|
-
top: 0;
|
|
83
|
-
left: 0;
|
|
84
|
-
width: 100%;
|
|
85
|
-
height: 100%;
|
|
86
|
-
z-index: 97;
|
|
87
|
-
background: rgba(13, 13, 13, 0.7);
|
|
88
|
-
display: flex;
|
|
89
|
-
align-items: center;
|
|
90
|
-
justify-content: center;
|
|
91
|
-
padding: var(--wall-gutter);
|
|
92
|
-
box-sizing: border-box;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
.apm {
|
|
96
|
-
position: relative;
|
|
97
|
-
background: #fff;
|
|
98
|
-
border-radius: 8px 8px 0 0;
|
|
99
|
-
border: 1px solid #d9d9d9;
|
|
100
|
-
padding: 24px;
|
|
101
|
-
width: 400px;
|
|
102
|
-
max-width: 400px;
|
|
103
|
-
box-sizing: border-box;
|
|
104
|
-
font-family: var(--wall-type-system-sans);
|
|
105
|
-
box-shadow: 0 4px 16px 0 rgba(13, 13, 13, 0.15);
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
.apm__close {
|
|
109
|
-
position: absolute;
|
|
110
|
-
top: 24px;
|
|
111
|
-
right: 21px;
|
|
112
|
-
background: none;
|
|
113
|
-
border: none;
|
|
114
|
-
cursor: pointer;
|
|
115
|
-
padding: 0;
|
|
116
|
-
display: flex;
|
|
117
|
-
align-items: center;
|
|
118
|
-
justify-content: center;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
.apm__close:focus {
|
|
122
|
-
outline: solid 2px var(--focus-border-color, #121212);
|
|
123
|
-
border-radius: 0.25rem;
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
.apm__offer-name {
|
|
127
|
-
font-family: var(--wall-type-system-sans);
|
|
128
|
-
font-size: 1.4375rem;
|
|
129
|
-
font-weight: 500;
|
|
130
|
-
color: #0d0d0d;
|
|
131
|
-
line-height: 28px;
|
|
132
|
-
font-style: normal;
|
|
133
|
-
margin: 0 1.5rem 0.5rem 0;
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
.apm__due-today {
|
|
137
|
-
color: #1a1a1a;
|
|
138
|
-
font-family: var(--wall-type-system-sans);
|
|
139
|
-
font-size: 15px;
|
|
140
|
-
font-style: normal;
|
|
141
|
-
font-weight: 400;
|
|
142
|
-
line-height: 20px;
|
|
143
|
-
margin: 0 0 1rem 0;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
.apm__rule {
|
|
147
|
-
border: none;
|
|
148
|
-
border-top: 1px solid #d9d9d9;
|
|
149
|
-
margin: 0 0 1rem 0;
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
.apm__terms {
|
|
153
|
-
color: #1a1a1a;
|
|
154
|
-
font-family: var(--wall-type-system-sans);
|
|
155
|
-
font-size: 15px;
|
|
156
|
-
font-style: normal;
|
|
157
|
-
font-weight: 400;
|
|
158
|
-
line-height: 1.333;
|
|
159
|
-
margin: 0 0 1rem 0;
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
.apm__terms-bullets {
|
|
163
|
-
list-style: disc outside;
|
|
164
|
-
padding-left: 1.25rem;
|
|
165
|
-
margin: 0 0 0.75rem 0;
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
.apm__terms-bullets li {
|
|
169
|
-
margin-bottom: 0.375rem;
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
.apm__terms-legal {
|
|
173
|
-
margin: 0;
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
.apm__checkbox-label {
|
|
177
|
-
display: flex;
|
|
178
|
-
align-items: flex-start;
|
|
179
|
-
gap: 12px;
|
|
180
|
-
font-family: var(--wall-type-system-sans);
|
|
181
|
-
font-size: 0.9375rem;
|
|
182
|
-
color: #0d0d0d;
|
|
183
|
-
line-height: 1.4;
|
|
184
|
-
cursor: pointer;
|
|
185
|
-
margin: 0 0 8px 0;
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
.apm__checkbox-wrapper {
|
|
189
|
-
position: relative;
|
|
190
|
-
flex-shrink: 0;
|
|
191
|
-
width: 20px;
|
|
192
|
-
height: 20px;
|
|
193
|
-
margin-top: 1px;
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
.apm__checkbox-input {
|
|
197
|
-
position: absolute;
|
|
198
|
-
opacity: 0;
|
|
199
|
-
width: 100%;
|
|
200
|
-
height: 100%;
|
|
201
|
-
cursor: pointer;
|
|
202
|
-
margin: 0;
|
|
203
|
-
z-index: 1;
|
|
204
|
-
}
|
|
205
|
-
|
|
206
|
-
.apm__checkbox-custom {
|
|
207
|
-
position: absolute;
|
|
208
|
-
top: 0;
|
|
209
|
-
left: 0;
|
|
210
|
-
width: 20px;
|
|
211
|
-
height: 20px;
|
|
212
|
-
pointer-events: none;
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
.apm__checkbox-custom svg {
|
|
216
|
-
display: none;
|
|
217
|
-
width: 20px;
|
|
218
|
-
height: 20px;
|
|
219
|
-
}
|
|
220
|
-
|
|
221
|
-
.apm__checkbox-input:not(:checked)~.apm__checkbox-custom .svg-unchecked {
|
|
222
|
-
display: block;
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
.apm__checkbox-input:checked~.apm__checkbox-custom .svg-checked {
|
|
226
|
-
display: block;
|
|
227
|
-
}
|
|
228
|
-
|
|
229
|
-
.apm__checkbox-label--error .apm__checkbox-input:not(:checked)~.apm__checkbox-custom .svg-unchecked {
|
|
230
|
-
display: none;
|
|
231
|
-
}
|
|
232
|
-
|
|
233
|
-
.apm__checkbox-label--error .apm__checkbox-input:not(:checked)~.apm__checkbox-custom .svg-error {
|
|
234
|
-
display: block;
|
|
235
|
-
}
|
|
236
|
-
|
|
237
|
-
.apm__checkbox-input:focus-visible~.apm__checkbox-custom {
|
|
238
|
-
outline: solid 2px #c91d42;
|
|
239
|
-
outline-offset: 2px;
|
|
240
|
-
border-radius: 4px;
|
|
241
|
-
}
|
|
242
|
-
|
|
243
|
-
.apm__checkbox-label a {
|
|
244
|
-
color: #1a1a1a;
|
|
245
|
-
font-weight: 700;
|
|
246
|
-
text-decoration: underline;
|
|
247
|
-
}
|
|
248
|
-
|
|
249
|
-
.apm__error {
|
|
250
|
-
display: none;
|
|
251
|
-
align-items: center;
|
|
252
|
-
gap: 12px;
|
|
253
|
-
color: #0d0d0d;
|
|
254
|
-
font-family: var(--wall-type-system-sans);
|
|
255
|
-
font-size: 17px;
|
|
256
|
-
font-style: normal;
|
|
257
|
-
font-weight: 500;
|
|
258
|
-
line-height: 24px;
|
|
259
|
-
margin-bottom: 16px;
|
|
260
|
-
}
|
|
261
|
-
|
|
262
|
-
.apm__error--visible {
|
|
263
|
-
display: flex;
|
|
264
|
-
}
|
|
265
|
-
|
|
266
|
-
.apm__cta {
|
|
267
|
-
display: flex;
|
|
268
|
-
width: 100%;
|
|
269
|
-
height: 44px;
|
|
270
|
-
padding: 6px 16px;
|
|
271
|
-
justify-content: center;
|
|
272
|
-
align-items: center;
|
|
273
|
-
gap: 6px;
|
|
274
|
-
border-radius: 4px;
|
|
275
|
-
background: #000;
|
|
276
|
-
border: none;
|
|
277
|
-
cursor: pointer;
|
|
278
|
-
color: #fff;
|
|
279
|
-
text-align: center;
|
|
280
|
-
font-family: 'SF Pro', var(--wall-type-system-sans, system-ui, sans-serif);
|
|
281
|
-
font-size: 20px;
|
|
282
|
-
font-style: normal;
|
|
283
|
-
font-weight: 500;
|
|
284
|
-
line-height: normal;
|
|
285
|
-
}
|
|
286
|
-
|
|
287
|
-
.apm__cta svg {
|
|
288
|
-
flex-shrink: 0;
|
|
289
|
-
display: block;
|
|
290
|
-
}
|
|
291
|
-
|
|
292
|
-
@media (min-width: 360px) and (max-width: 600px) {
|
|
293
|
-
.apm {
|
|
294
|
-
width: 390px;
|
|
295
|
-
max-width: 390px;
|
|
296
|
-
}
|
|
297
|
-
}
|
|
298
|
-
|
|
299
|
-
@media (min-width: 601px) {
|
|
300
|
-
.apm {
|
|
301
|
-
border-radius: 8px;
|
|
302
|
-
}
|
|
303
|
-
}
|
|
304
|
-
|
|
305
|
-
@media (max-width: 359px) {
|
|
306
|
-
.apm {
|
|
307
|
-
width: 320px;
|
|
308
|
-
max-width: 320px;
|
|
309
|
-
}
|
|
310
|
-
}
|
|
311
|
-
|
|
312
|
-
@media (max-width: 419px) {
|
|
313
|
-
.apm__cta {
|
|
314
|
-
font-size: 18px;
|
|
315
|
-
}
|
|
316
|
-
}
|
|
317
|
-
</style>
|
|
318
|
-
|
|
319
|
-
<div class="apm-overlay" id="apple-pay-modal-overlay">
|
|
320
|
-
<div class="apm" role="dialog" aria-modal="true" aria-labelledby="apple-pay-modal-offer-name" id="apple-pay-modal"
|
|
321
|
-
tabindex="-1">
|
|
322
|
-
<button class="apm__close" id="apple-pay-modal-close" aria-label="Close">
|
|
323
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
324
|
-
<g clip-path="url(#clip0_15712_93054)">
|
|
325
|
-
<rect width="24" height="24" fill="white" fill-opacity="0.01" />
|
|
326
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H24V24H0V0Z" fill="white" fill-opacity="0.01" />
|
|
327
|
-
<path fill-rule="evenodd" clip-rule="evenodd"
|
|
328
|
-
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"
|
|
329
|
-
fill="#333333" />
|
|
330
|
-
</g>
|
|
331
|
-
<defs>
|
|
332
|
-
<clipPath id="clip0_15712_93054">
|
|
333
|
-
<rect width="24" height="24" fill="white" />
|
|
334
|
-
</clipPath>
|
|
335
|
-
</defs>
|
|
336
|
-
</svg>
|
|
337
|
-
</button>
|
|
338
|
-
<p class="apm__offer-name" id="apple-pay-modal-offer-name"></p>
|
|
339
|
-
<p class="apm__due-today" id="apple-pay-modal-due-today"></p>
|
|
340
|
-
<hr class="apm__rule" />
|
|
341
|
-
<div class="apm__terms" id="apple-pay-modal-terms"></div>
|
|
342
|
-
<label class="apm__checkbox-label" id="apple-pay-modal-checkbox-label" for="apple-pay-modal-checkbox">
|
|
343
|
-
<div class="apm__checkbox-wrapper">
|
|
344
|
-
<input class="apm__checkbox-input" type="checkbox" id="apple-pay-modal-checkbox" />
|
|
345
|
-
<span class="apm__checkbox-custom">
|
|
346
|
-
<svg class="svg-unchecked" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
347
|
-
xmlns="http://www.w3.org/2000/svg">
|
|
348
|
-
<path
|
|
349
|
-
d="M6 2.5H18C19.933 2.5 21.5 4.067 21.5 6V18C21.5 19.933 19.933 21.5 18 21.5H6C4.067 21.5 2.5 19.933 2.5 18V6C2.5 4.067 4.067 2.5 6 2.5Z"
|
|
350
|
-
fill="white" stroke="#595959" />
|
|
351
|
-
</svg>
|
|
352
|
-
<svg class="svg-checked" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
353
|
-
xmlns="http://www.w3.org/2000/svg">
|
|
354
|
-
<g clip-path="url(#clip0_20014_9555)">
|
|
355
|
-
<path
|
|
356
|
-
d="M2 6C2 3.79086 3.79086 2 6 2H18C20.2091 2 22 3.79086 22 6V18C22 20.2091 20.2091 22 18 22H6C3.79086 22 2 20.2091 2 18V6Z"
|
|
357
|
-
fill="#333333" />
|
|
358
|
-
<path d="M10.2857 17L6 12.6814L7.20857 11.4635L10.2857 14.5557L16.7914 8L18 9.22649L10.2857 17Z"
|
|
359
|
-
fill="white" />
|
|
360
|
-
</g>
|
|
361
|
-
<defs>
|
|
362
|
-
<clipPath id="clip0_20014_9555">
|
|
363
|
-
<path
|
|
364
|
-
d="M2 6C2 3.79086 3.79086 2 6 2H18C20.2091 2 22 3.79086 22 6V18C22 20.2091 20.2091 22 18 22H6C3.79086 22 2 20.2091 2 18V6Z"
|
|
365
|
-
fill="white" />
|
|
366
|
-
</clipPath>
|
|
367
|
-
</defs>
|
|
368
|
-
</svg>
|
|
369
|
-
<svg class="svg-error" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
370
|
-
xmlns="http://www.w3.org/2000/svg">
|
|
371
|
-
<path
|
|
372
|
-
d="M6 2.5H18C19.933 2.5 21.5 4.067 21.5 6V18C21.5 19.933 19.933 21.5 18 21.5H6C4.067 21.5 2.5 19.933 2.5 18V6C2.5 4.067 4.067 2.5 6 2.5Z"
|
|
373
|
-
fill="white" stroke="#C91D42" stroke-width="2" />
|
|
374
|
-
</svg>
|
|
375
|
-
</span>
|
|
376
|
-
</div>
|
|
377
|
-
<span id="apple-pay-modal-checkbox-text"></span>
|
|
378
|
-
</label>
|
|
379
|
-
<div class="apm__error" id="apple-pay-modal-error" role="alert">
|
|
380
|
-
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
381
|
-
<path fill-rule="evenodd" clip-rule="evenodd"
|
|
382
|
-
d="M10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2ZM0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10ZM11 13C11 13.5523 10.5523 14 10 14C9.44772 14 9 13.5523 9 13C9 12.4477 9.44772 12 10 12C10.5523 12 11 12.4477 11 13ZM10 6C10.5523 6 11 6.44772 11 7V10C11 10.5523 10.5523 11 10 11C9.44772 11 9 10.5523 9 10V7C9 6.44772 9.44772 6 10 6Z"
|
|
383
|
-
fill="#C91D42" />
|
|
384
|
-
</svg>
|
|
385
|
-
Please accept the terms to continue
|
|
386
|
-
</div>
|
|
387
|
-
<button class="apm__cta" id="apple-pay-modal-cta">
|
|
388
|
-
Continue with
|
|
389
|
-
<svg width="51" height="22" aria-label="Apple Pay" role="img">
|
|
390
|
-
<use href="#apple-pay-logo" />
|
|
391
|
-
</svg>
|
|
392
|
-
</button>
|
|
393
|
-
</div>
|
|
394
|
-
</div>`;
|
|
79
|
+
var apple_pay_modal_template_default = '<style>\n .apm-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 97;\n background: rgba(13, 13, 13, 0.7);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--wall-gutter, 2rem);\n box-sizing: border-box;\n }\n\n .apm {\n position: relative;\n background: #fff;\n border-radius: 0.5rem 0.5rem 0 0;\n border: 0.0625rem solid #d9d9d9;\n padding: var(--mb-spacing-lg, 1.5rem);\n width: 25rem;\n max-width: 25rem;\n box-sizing: border-box;\n font-family: var(--mb-typeface-sans, var(--wall-type-system-sans));\n box-shadow: 0 0.25rem 1rem 0 rgba(13, 13, 13, 0.15);\n }\n\n .apm__close {\n position: absolute;\n top: 1.5rem;\n right: 1.3125rem;\n background: none;\n border: none;\n cursor: pointer;\n padding: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .apm__close:focus {\n outline: solid 0.125rem var(--focus-border-color, #121212);\n border-radius: 0.25rem;\n }\n\n .apm__offer-name {\n font-family: var(--mb-typeface-sans, var(--wall-type-system-sans));\n font-size: var(--mb-typestyle-title-3-size, 1.25rem);\n font-weight: 500;\n color: var(--mb-colour-greyscale-london-5, #0d0d0d);\n line-height: var(--mb-typestyle-title-3-leading, 1.75rem);\n font-style: normal;\n margin: 0 1.5rem 0.5rem 0;\n }\n\n .apm__due-today {\n color: #1a1a1a;\n font-family: var(--mb-typeface-sans, var(--wall-type-system-sans));\n font-size: var(--mb-typestyle-label-2-size, 0.9375rem);\n font-style: normal;\n font-weight: 400;\n line-height: var(--mb-typestyle-label-2-leading, 1.25rem);\n margin: 0 0 0.75rem 0;\n }\n\n .apm__rule {\n border: none;\n border-top: 0.0625rem solid #d9d9d9;\n margin: 0 0 1rem 0;\n }\n\n .apm__terms {\n color: #1a1a1a;\n font-family: var(--mb-typeface-sans, var(--wall-type-system-sans));\n font-size: var(--mb-typestyle-label-2-size, 0.9375rem);\n font-style: normal;\n font-weight: 400;\n line-height: var(--mb-typestyle-label-2-leading, 1.25rem);\n margin: 0 0 1rem 0;\n }\n\n .apm__terms-bullets {\n list-style: disc outside;\n padding-left: 1.25rem;\n margin: 0 0 0.75rem 0;\n }\n\n .apm__terms-bullets li {\n margin-bottom: 0.375rem;\n }\n\n .apm__terms-legal {\n margin: 0;\n }\n\n .apm__checkbox-label {\n display: flex;\n align-items: flex-start;\n gap: var(--mb-spacing-sm, 0.5rem);\n font-family: var(--mb-typeface-sans, var(--wall-type-system-sans));\n font-size: var(--mb-typestyle-label-2-size, 0.9375rem);\n color: var(--mb-colour-greyscale-london-20, #1a1a1a);\n line-height: var(--mb-typestyle-label-2-leading, 1.25rem);\n cursor: pointer;\n margin: 0 0 1.5rem 0;\n }\n\n .apm__checkbox-label--error {\n margin-bottom: 0.25rem;\n }\n\n .apm__checkbox-wrapper {\n position: relative;\n flex-shrink: 0;\n width: 1.25rem;\n height: 1.25rem;\n margin-top: 0.0625rem;\n }\n\n .apm__checkbox-input {\n position: absolute;\n opacity: 0;\n width: 100%;\n height: 100%;\n cursor: pointer;\n margin: 0;\n z-index: 1;\n }\n\n .apm__checkbox-custom {\n position: absolute;\n top: 0;\n left: 0;\n width: 1.25rem;\n height: 1.25rem;\n pointer-events: none;\n }\n\n .apm__checkbox-custom svg {\n display: none;\n width: 1.25rem;\n height: 1.25rem;\n }\n\n .apm__checkbox-input:not(:checked)~.apm__checkbox-custom .svg-unchecked {\n display: block;\n }\n\n .apm__checkbox-input:checked~.apm__checkbox-custom .svg-checked {\n display: block;\n }\n\n .apm__checkbox-label--error .apm__checkbox-input:not(:checked)~.apm__checkbox-custom .svg-unchecked {\n display: none;\n }\n\n .apm__checkbox-label--error .apm__checkbox-input:not(:checked)~.apm__checkbox-custom .svg-error {\n display: block;\n }\n\n .apm__checkbox-input:focus-visible~.apm__checkbox-custom {\n outline: solid 0.125rem #c91d42;\n outline-offset: 0.125rem;\n border-radius: 0.25rem;\n }\n\n .apm__checkbox-label a {\n color: #1a1a1a;\n font-weight: 700;\n text-decoration: underline;\n }\n\n .apm__error {\n display: none;\n align-items: center;\n gap: 0.75rem;\n color: var(--mb-colour-greyscale-london-5, #0d0d0d);\n font-family: var(--mb-typeface-sans, var(--wall-type-system-sans));\n font-size: 1.0625rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.5rem;\n margin-bottom: 1rem;\n }\n\n .apm__error--visible {\n display: flex;\n }\n\n .apm__cta {\n display: flex;\n width: 100%;\n height: 2.75rem;\n padding: 0.375rem 1rem;\n justify-content: center;\n align-items: center;\n gap: 0.375rem;\n border-radius: 0.25rem;\n background: #000;\n border: none;\n cursor: pointer;\n color: #fff;\n text-align: center;\n font-family: var(--mb-typeface-sans, var(--wall-type-system-sans, system-ui, sans-serif));\n font-size: 1.25rem;\n font-style: normal;\n font-weight: 500;\n line-height: normal;\n }\n\n .apm__cta svg {\n flex-shrink: 0;\n display: block;\n }\n\n @media (min-width: 22.5rem) and (max-width: 37.5rem) {\n .apm {\n width: 24.375rem;\n max-width: 24.375rem;\n }\n }\n\n @media (min-width: 37.5625rem) {\n .apm {\n border-radius: 0.5rem;\n }\n }\n\n @media (max-width: 22.4375rem) {\n .apm {\n width: 20rem;\n max-width: 20rem;\n }\n }\n\n @media (max-width: 26.1875rem) {\n .apm__cta {\n font-size: 1.125rem;\n }\n }\n</style>\n\n<div class="apm-overlay" id="apple-pay-modal-overlay">\n <div class="apm" role="dialog" aria-modal="true" aria-labelledby="apple-pay-modal-offer-name" id="apple-pay-modal"\n tabindex="-1">\n <button class="apm__close" id="apple-pay-modal-close" aria-label="Close">\n <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">\n <g clip-path="url(#clip0_15712_93054)">\n <rect width="24" height="24" fill="white" fill-opacity="0.01" />\n <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H24V24H0V0Z" fill="white" fill-opacity="0.01" />\n <path fill-rule="evenodd" clip-rule="evenodd"\n d="M18.75 6.60964L17.3904 5.25L12 10.6404L6.60964 5.25L5.25 6.60964L10.6404 12L5.25 17.3904L6.60964 18.75L12 13.3596L17.3904 18.75L18.75 17.3904L13.3596 12L18.75 6.60964Z"\n fill="#333333" />\n </g>\n <defs>\n <clipPath id="clip0_15712_93054">\n <rect width="24" height="24" fill="white" />\n </clipPath>\n </defs>\n </svg>\n </button>\n <p class="apm__offer-name" id="apple-pay-modal-offer-name"></p>\n <p class="apm__due-today" id="apple-pay-modal-due-today"></p>\n <hr class="apm__rule" />\n <div class="apm__terms" id="apple-pay-modal-terms"></div>\n <label class="apm__checkbox-label" id="apple-pay-modal-checkbox-label" for="apple-pay-modal-checkbox">\n <div class="apm__checkbox-wrapper">\n <input class="apm__checkbox-input" type="checkbox" id="apple-pay-modal-checkbox" />\n <span class="apm__checkbox-custom">\n <svg class="svg-unchecked" width="24" height="24" viewBox="0 0 24 24" fill="none"\n xmlns="http://www.w3.org/2000/svg">\n <path\n d="M6 2.5H18C19.933 2.5 21.5 4.067 21.5 6V18C21.5 19.933 19.933 21.5 18 21.5H6C4.067 21.5 2.5 19.933 2.5 18V6C2.5 4.067 4.067 2.5 6 2.5Z"\n fill="white" stroke="#595959" />\n </svg>\n <svg class="svg-checked" width="24" height="24" viewBox="0 0 24 24" fill="none"\n xmlns="http://www.w3.org/2000/svg">\n <g clip-path="url(#clip0_20014_9555)">\n <path\n d="M2 6C2 3.79086 3.79086 2 6 2H18C20.2091 2 22 3.79086 22 6V18C22 20.2091 20.2091 22 18 22H6C3.79086 22 2 20.2091 2 18V6Z"\n fill="#333333" />\n <path d="M10.2857 17L6 12.6814L7.20857 11.4635L10.2857 14.5557L16.7914 8L18 9.22649L10.2857 17Z"\n fill="white" />\n </g>\n <defs>\n <clipPath id="clip0_20014_9555">\n <path\n d="M2 6C2 3.79086 3.79086 2 6 2H18C20.2091 2 22 3.79086 22 6V18C22 20.2091 20.2091 22 18 22H6C3.79086 22 2 20.2091 2 18V6Z"\n fill="white" />\n </clipPath>\n </defs>\n </svg>\n <svg class="svg-error" width="24" height="24" viewBox="0 0 24 24" fill="none"\n xmlns="http://www.w3.org/2000/svg">\n <path\n d="M6 2.5H18C19.933 2.5 21.5 4.067 21.5 6V18C21.5 19.933 19.933 21.5 18 21.5H6C4.067 21.5 2.5 19.933 2.5 18V6C2.5 4.067 4.067 2.5 6 2.5Z"\n fill="white" stroke="#C91D42" stroke-width="2" />\n </svg>\n </span>\n </div>\n <span id="apple-pay-modal-checkbox-text"></span>\n </label>\n <div class="apm__error" id="apple-pay-modal-error" role="alert">\n <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path fill-rule="evenodd" clip-rule="evenodd"\n d="M10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2ZM0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10ZM11 13C11 13.5523 10.5523 14 10 14C9.44772 14 9 13.5523 9 13C9 12.4477 9.44772 12 10 12C10.5523 12 11 12.4477 11 13ZM10 6C10.5523 6 11 6.44772 11 7V10C11 10.5523 10.5523 11 10 11C9.44772 11 9 10.5523 9 10V7C9 6.44772 9.44772 6 10 6Z"\n fill="#C91D42" />\n </svg>\n Please accept the terms to continue\n </div>\n <button class="apm__cta" id="apple-pay-modal-cta">\n Continue with\n <svg width="51" height="22" aria-label="Apple Pay" role="img">\n <use href="#apple-pay-logo" />\n </svg>\n </button>\n </div>\n</div>';
|
|
395
80
|
|
|
396
81
|
// src/apple-pay-modal.ts
|
|
397
82
|
function getRenewalDateText(unit, duration) {
|
|
@@ -737,7 +422,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
|
|
|
737
422
|
};
|
|
738
423
|
|
|
739
424
|
// src/templates/apple-pay-button.template.html
|
|
740
|
-
var apple_pay_button_template_default = '<style>\n /* Use CSS variables for layout so parent walls can easily override placement and sizing */\n teg-apple-pay-button {\n display: block;\n margin: var(--apple-pay-margin, 0);\n width: 100%;\n height: 100%;\n }\n\n teg-apple-pay-button .apple-pay-container {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n width: 100%;\n height: 100%;\n }\n\n teg-apple-pay-button .apple-pay-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.375rem;\n width: 100%;\n min-width: 0;\n height: 100%;\n min-height: var(--apple-pay-height, 2.75rem);\n background-color: #000;\n color: #fff;\n border: none;\n border-radius: var(--apple-pay-border-radius, 1.375rem);\n cursor: pointer;\n font-family: var(--
|
|
425
|
+
var apple_pay_button_template_default = '<style>\n /* Use CSS variables for layout so parent walls can easily override placement and sizing */\n teg-apple-pay-button {\n display: block;\n margin: var(--apple-pay-margin, 0);\n width: 100%;\n height: 100%;\n }\n\n teg-apple-pay-button .apple-pay-container {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n width: 100%;\n height: 100%;\n }\n\n teg-apple-pay-button .apple-pay-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.375rem;\n width: 100%;\n min-width: 0;\n height: 100%;\n min-height: var(--apple-pay-height, 2.75rem);\n background-color: #000;\n color: #fff;\n border: none;\n border-radius: var(--apple-pay-border-radius, 1.375rem);\n cursor: pointer;\n font-family: var(--mb-typeface-sans, var(--wall-type-system-sans));\n font-size: 1.0625rem;\n font-weight: 500;\n }\n\n teg-apple-pay-button .apple-pay-btn svg {\n flex-shrink: 0;\n display: block;\n }\n</style>\n\n<div class="apple-pay-container" aria-label="Express checkout with Apple Pay">\n <button\n class="apple-pay-btn"\n type="button"\n aria-label="Pay with Apple Pay"\n data-analytics="paywall:apple-pay-checkout"\n >\n <svg width="51" height="22" aria-label="Apple Pay" role="img">\n <use href="#apple-pay-logo" />\n </svg>\n </button>\n</div>\n';
|
|
741
426
|
|
|
742
427
|
// src/clients/payment-checkout/config.ts
|
|
743
428
|
var runtimeConfig = null;
|