@economist/web-apple-pay 1.7.5 → 1.7.6
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 +50 -25
- package/dist/src/apple-pay-button.js +50 -25
- package/dist/src/apple-pay-button.stories.js +50 -25
- package/dist/src/apple-pay-modal.js +28 -12
- package/dist/src/apple-pay-modal.stories.js +50 -25
- package/dist/src/index.js +50 -25
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -320,28 +320,41 @@ var apple_pay_modal_template_default = `<style>
|
|
|
320
320
|
cursor: not-allowed;
|
|
321
321
|
}
|
|
322
322
|
|
|
323
|
-
.apm__cta
|
|
324
|
-
|
|
323
|
+
.apm__cta-content {
|
|
324
|
+
display: flex;
|
|
325
|
+
align-items: center;
|
|
326
|
+
gap: 0.375rem;
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
.apm__cta-label {
|
|
330
|
+
display: inline-flex;
|
|
331
|
+
align-items: center;
|
|
332
|
+
gap: 0.375rem;
|
|
325
333
|
}
|
|
326
334
|
|
|
327
|
-
.apm__cta
|
|
335
|
+
.apm__cta-loading {
|
|
336
|
+
display: none;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
.apm__cta[aria-busy="true"]::before {
|
|
328
340
|
content: '';
|
|
329
341
|
position: absolute;
|
|
330
|
-
left: 50%;
|
|
331
342
|
top: 50%;
|
|
332
|
-
|
|
333
|
-
margin-top: -0.625rem;
|
|
343
|
+
left: 50%;
|
|
334
344
|
width: 1.25rem;
|
|
335
345
|
height: 1.25rem;
|
|
336
|
-
border: 2px solid rgba(255, 255, 255, 0.
|
|
346
|
+
border: 2px solid rgba(255, 255, 255, 0.25);
|
|
337
347
|
border-top-color: #fff;
|
|
338
348
|
border-radius: 50%;
|
|
339
349
|
animation: apm-cta-spinner 0.8s linear infinite;
|
|
340
350
|
}
|
|
341
351
|
|
|
342
352
|
@keyframes apm-cta-spinner {
|
|
353
|
+
from {
|
|
354
|
+
transform: translate(-50%, -50%) rotate(0deg);
|
|
355
|
+
}
|
|
343
356
|
to {
|
|
344
|
-
transform: rotate(360deg);
|
|
357
|
+
transform: translate(-50%, -50%) rotate(360deg);
|
|
345
358
|
}
|
|
346
359
|
}
|
|
347
360
|
|
|
@@ -518,11 +531,14 @@ var apple_pay_modal_template_default = `<style>
|
|
|
518
531
|
</div>
|
|
519
532
|
<button class="apm__cta" id="apple-pay-modal-cta" aria-label="Continue with Apple Pay">
|
|
520
533
|
<span class="apm__cta-content">
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
<
|
|
524
|
-
|
|
534
|
+
<span class="apm__cta-label">
|
|
535
|
+
Continue with
|
|
536
|
+
<svg width="51" height="22" aria-hidden="true" role="img">
|
|
537
|
+
<use href="#apple-pay-logo" />
|
|
538
|
+
</svg>
|
|
539
|
+
</span>
|
|
525
540
|
</span>
|
|
541
|
+
<span class="apm__cta-loading" aria-hidden="true">Loading...</span>
|
|
526
542
|
</button>
|
|
527
543
|
</div>
|
|
528
544
|
</div>
|
|
@@ -1035,28 +1051,34 @@ var apple_pay_button_template_default = `<style>
|
|
|
1035
1051
|
cursor: default;
|
|
1036
1052
|
}
|
|
1037
1053
|
|
|
1038
|
-
teg-apple-pay-button .apple-pay-btn.wap-loading
|
|
1039
|
-
visibility: hidden;
|
|
1040
|
-
}
|
|
1041
|
-
|
|
1042
|
-
teg-apple-pay-button .apple-pay-btn.wap-loading::after {
|
|
1054
|
+
teg-apple-pay-button .apple-pay-btn.wap-loading::before {
|
|
1043
1055
|
content: '';
|
|
1044
1056
|
position: absolute;
|
|
1045
|
-
left: 50%;
|
|
1046
1057
|
top: 50%;
|
|
1047
|
-
|
|
1048
|
-
margin-top: -0.625rem;
|
|
1058
|
+
left: 50%;
|
|
1049
1059
|
width: 1.25rem;
|
|
1050
1060
|
height: 1.25rem;
|
|
1051
|
-
border: 2px solid rgba(255, 255, 255, 0.
|
|
1061
|
+
border: 2px solid rgba(255, 255, 255, 0.25);
|
|
1052
1062
|
border-top-color: #fff;
|
|
1053
1063
|
border-radius: 50%;
|
|
1054
1064
|
animation: wap-button-spinner 0.8s linear infinite;
|
|
1055
1065
|
}
|
|
1056
1066
|
|
|
1067
|
+
teg-apple-pay-button .apple-pay-btn__logo {
|
|
1068
|
+
display: inline-flex;
|
|
1069
|
+
align-items: center;
|
|
1070
|
+
}
|
|
1071
|
+
|
|
1072
|
+
teg-apple-pay-button .apple-pay-btn__loading {
|
|
1073
|
+
display: none;
|
|
1074
|
+
}
|
|
1075
|
+
|
|
1057
1076
|
@keyframes wap-button-spinner {
|
|
1077
|
+
from {
|
|
1078
|
+
transform: translate(-50%, -50%) rotate(0deg);
|
|
1079
|
+
}
|
|
1058
1080
|
to {
|
|
1059
|
-
transform: rotate(360deg);
|
|
1081
|
+
transform: translate(-50%, -50%) rotate(360deg);
|
|
1060
1082
|
}
|
|
1061
1083
|
}
|
|
1062
1084
|
</style>
|
|
@@ -1068,9 +1090,12 @@ var apple_pay_button_template_default = `<style>
|
|
|
1068
1090
|
aria-label="Pay with Apple Pay"
|
|
1069
1091
|
data-analytics="paywall:apple-pay-checkout"
|
|
1070
1092
|
>
|
|
1071
|
-
<
|
|
1072
|
-
<
|
|
1073
|
-
|
|
1093
|
+
<span class="apple-pay-btn__logo">
|
|
1094
|
+
<svg width="51" height="22" aria-label="Apple Pay" role="img">
|
|
1095
|
+
<use href="#apple-pay-logo" />
|
|
1096
|
+
</svg>
|
|
1097
|
+
</span>
|
|
1098
|
+
<span class="apple-pay-btn__loading" aria-hidden="true">Loading...</span>
|
|
1074
1099
|
</button>
|
|
1075
1100
|
</div>
|
|
1076
1101
|
`;
|
|
@@ -320,28 +320,41 @@ var apple_pay_modal_template_default = `<style>
|
|
|
320
320
|
cursor: not-allowed;
|
|
321
321
|
}
|
|
322
322
|
|
|
323
|
-
.apm__cta
|
|
324
|
-
|
|
323
|
+
.apm__cta-content {
|
|
324
|
+
display: flex;
|
|
325
|
+
align-items: center;
|
|
326
|
+
gap: 0.375rem;
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
.apm__cta-label {
|
|
330
|
+
display: inline-flex;
|
|
331
|
+
align-items: center;
|
|
332
|
+
gap: 0.375rem;
|
|
325
333
|
}
|
|
326
334
|
|
|
327
|
-
.apm__cta
|
|
335
|
+
.apm__cta-loading {
|
|
336
|
+
display: none;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
.apm__cta[aria-busy="true"]::before {
|
|
328
340
|
content: '';
|
|
329
341
|
position: absolute;
|
|
330
|
-
left: 50%;
|
|
331
342
|
top: 50%;
|
|
332
|
-
|
|
333
|
-
margin-top: -0.625rem;
|
|
343
|
+
left: 50%;
|
|
334
344
|
width: 1.25rem;
|
|
335
345
|
height: 1.25rem;
|
|
336
|
-
border: 2px solid rgba(255, 255, 255, 0.
|
|
346
|
+
border: 2px solid rgba(255, 255, 255, 0.25);
|
|
337
347
|
border-top-color: #fff;
|
|
338
348
|
border-radius: 50%;
|
|
339
349
|
animation: apm-cta-spinner 0.8s linear infinite;
|
|
340
350
|
}
|
|
341
351
|
|
|
342
352
|
@keyframes apm-cta-spinner {
|
|
353
|
+
from {
|
|
354
|
+
transform: translate(-50%, -50%) rotate(0deg);
|
|
355
|
+
}
|
|
343
356
|
to {
|
|
344
|
-
transform: rotate(360deg);
|
|
357
|
+
transform: translate(-50%, -50%) rotate(360deg);
|
|
345
358
|
}
|
|
346
359
|
}
|
|
347
360
|
|
|
@@ -518,11 +531,14 @@ var apple_pay_modal_template_default = `<style>
|
|
|
518
531
|
</div>
|
|
519
532
|
<button class="apm__cta" id="apple-pay-modal-cta" aria-label="Continue with Apple Pay">
|
|
520
533
|
<span class="apm__cta-content">
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
<
|
|
524
|
-
|
|
534
|
+
<span class="apm__cta-label">
|
|
535
|
+
Continue with
|
|
536
|
+
<svg width="51" height="22" aria-hidden="true" role="img">
|
|
537
|
+
<use href="#apple-pay-logo" />
|
|
538
|
+
</svg>
|
|
539
|
+
</span>
|
|
525
540
|
</span>
|
|
541
|
+
<span class="apm__cta-loading" aria-hidden="true">Loading...</span>
|
|
526
542
|
</button>
|
|
527
543
|
</div>
|
|
528
544
|
</div>
|
|
@@ -1030,28 +1046,34 @@ var apple_pay_button_template_default = `<style>
|
|
|
1030
1046
|
cursor: default;
|
|
1031
1047
|
}
|
|
1032
1048
|
|
|
1033
|
-
teg-apple-pay-button .apple-pay-btn.wap-loading
|
|
1034
|
-
visibility: hidden;
|
|
1035
|
-
}
|
|
1036
|
-
|
|
1037
|
-
teg-apple-pay-button .apple-pay-btn.wap-loading::after {
|
|
1049
|
+
teg-apple-pay-button .apple-pay-btn.wap-loading::before {
|
|
1038
1050
|
content: '';
|
|
1039
1051
|
position: absolute;
|
|
1040
|
-
left: 50%;
|
|
1041
1052
|
top: 50%;
|
|
1042
|
-
|
|
1043
|
-
margin-top: -0.625rem;
|
|
1053
|
+
left: 50%;
|
|
1044
1054
|
width: 1.25rem;
|
|
1045
1055
|
height: 1.25rem;
|
|
1046
|
-
border: 2px solid rgba(255, 255, 255, 0.
|
|
1056
|
+
border: 2px solid rgba(255, 255, 255, 0.25);
|
|
1047
1057
|
border-top-color: #fff;
|
|
1048
1058
|
border-radius: 50%;
|
|
1049
1059
|
animation: wap-button-spinner 0.8s linear infinite;
|
|
1050
1060
|
}
|
|
1051
1061
|
|
|
1062
|
+
teg-apple-pay-button .apple-pay-btn__logo {
|
|
1063
|
+
display: inline-flex;
|
|
1064
|
+
align-items: center;
|
|
1065
|
+
}
|
|
1066
|
+
|
|
1067
|
+
teg-apple-pay-button .apple-pay-btn__loading {
|
|
1068
|
+
display: none;
|
|
1069
|
+
}
|
|
1070
|
+
|
|
1052
1071
|
@keyframes wap-button-spinner {
|
|
1072
|
+
from {
|
|
1073
|
+
transform: translate(-50%, -50%) rotate(0deg);
|
|
1074
|
+
}
|
|
1053
1075
|
to {
|
|
1054
|
-
transform: rotate(360deg);
|
|
1076
|
+
transform: translate(-50%, -50%) rotate(360deg);
|
|
1055
1077
|
}
|
|
1056
1078
|
}
|
|
1057
1079
|
</style>
|
|
@@ -1063,9 +1085,12 @@ var apple_pay_button_template_default = `<style>
|
|
|
1063
1085
|
aria-label="Pay with Apple Pay"
|
|
1064
1086
|
data-analytics="paywall:apple-pay-checkout"
|
|
1065
1087
|
>
|
|
1066
|
-
<
|
|
1067
|
-
<
|
|
1068
|
-
|
|
1088
|
+
<span class="apple-pay-btn__logo">
|
|
1089
|
+
<svg width="51" height="22" aria-label="Apple Pay" role="img">
|
|
1090
|
+
<use href="#apple-pay-logo" />
|
|
1091
|
+
</svg>
|
|
1092
|
+
</span>
|
|
1093
|
+
<span class="apple-pay-btn__loading" aria-hidden="true">Loading...</span>
|
|
1069
1094
|
</button>
|
|
1070
1095
|
</div>
|
|
1071
1096
|
`;
|
|
@@ -320,28 +320,41 @@ var apple_pay_modal_template_default = `<style>
|
|
|
320
320
|
cursor: not-allowed;
|
|
321
321
|
}
|
|
322
322
|
|
|
323
|
-
.apm__cta
|
|
324
|
-
|
|
323
|
+
.apm__cta-content {
|
|
324
|
+
display: flex;
|
|
325
|
+
align-items: center;
|
|
326
|
+
gap: 0.375rem;
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
.apm__cta-label {
|
|
330
|
+
display: inline-flex;
|
|
331
|
+
align-items: center;
|
|
332
|
+
gap: 0.375rem;
|
|
325
333
|
}
|
|
326
334
|
|
|
327
|
-
.apm__cta
|
|
335
|
+
.apm__cta-loading {
|
|
336
|
+
display: none;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
.apm__cta[aria-busy="true"]::before {
|
|
328
340
|
content: '';
|
|
329
341
|
position: absolute;
|
|
330
|
-
left: 50%;
|
|
331
342
|
top: 50%;
|
|
332
|
-
|
|
333
|
-
margin-top: -0.625rem;
|
|
343
|
+
left: 50%;
|
|
334
344
|
width: 1.25rem;
|
|
335
345
|
height: 1.25rem;
|
|
336
|
-
border: 2px solid rgba(255, 255, 255, 0.
|
|
346
|
+
border: 2px solid rgba(255, 255, 255, 0.25);
|
|
337
347
|
border-top-color: #fff;
|
|
338
348
|
border-radius: 50%;
|
|
339
349
|
animation: apm-cta-spinner 0.8s linear infinite;
|
|
340
350
|
}
|
|
341
351
|
|
|
342
352
|
@keyframes apm-cta-spinner {
|
|
353
|
+
from {
|
|
354
|
+
transform: translate(-50%, -50%) rotate(0deg);
|
|
355
|
+
}
|
|
343
356
|
to {
|
|
344
|
-
transform: rotate(360deg);
|
|
357
|
+
transform: translate(-50%, -50%) rotate(360deg);
|
|
345
358
|
}
|
|
346
359
|
}
|
|
347
360
|
|
|
@@ -518,11 +531,14 @@ var apple_pay_modal_template_default = `<style>
|
|
|
518
531
|
</div>
|
|
519
532
|
<button class="apm__cta" id="apple-pay-modal-cta" aria-label="Continue with Apple Pay">
|
|
520
533
|
<span class="apm__cta-content">
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
<
|
|
524
|
-
|
|
534
|
+
<span class="apm__cta-label">
|
|
535
|
+
Continue with
|
|
536
|
+
<svg width="51" height="22" aria-hidden="true" role="img">
|
|
537
|
+
<use href="#apple-pay-logo" />
|
|
538
|
+
</svg>
|
|
539
|
+
</span>
|
|
525
540
|
</span>
|
|
541
|
+
<span class="apm__cta-loading" aria-hidden="true">Loading...</span>
|
|
526
542
|
</button>
|
|
527
543
|
</div>
|
|
528
544
|
</div>
|
|
@@ -1038,28 +1054,34 @@ var apple_pay_button_template_default = `<style>
|
|
|
1038
1054
|
cursor: default;
|
|
1039
1055
|
}
|
|
1040
1056
|
|
|
1041
|
-
teg-apple-pay-button .apple-pay-btn.wap-loading
|
|
1042
|
-
visibility: hidden;
|
|
1043
|
-
}
|
|
1044
|
-
|
|
1045
|
-
teg-apple-pay-button .apple-pay-btn.wap-loading::after {
|
|
1057
|
+
teg-apple-pay-button .apple-pay-btn.wap-loading::before {
|
|
1046
1058
|
content: '';
|
|
1047
1059
|
position: absolute;
|
|
1048
|
-
left: 50%;
|
|
1049
1060
|
top: 50%;
|
|
1050
|
-
|
|
1051
|
-
margin-top: -0.625rem;
|
|
1061
|
+
left: 50%;
|
|
1052
1062
|
width: 1.25rem;
|
|
1053
1063
|
height: 1.25rem;
|
|
1054
|
-
border: 2px solid rgba(255, 255, 255, 0.
|
|
1064
|
+
border: 2px solid rgba(255, 255, 255, 0.25);
|
|
1055
1065
|
border-top-color: #fff;
|
|
1056
1066
|
border-radius: 50%;
|
|
1057
1067
|
animation: wap-button-spinner 0.8s linear infinite;
|
|
1058
1068
|
}
|
|
1059
1069
|
|
|
1070
|
+
teg-apple-pay-button .apple-pay-btn__logo {
|
|
1071
|
+
display: inline-flex;
|
|
1072
|
+
align-items: center;
|
|
1073
|
+
}
|
|
1074
|
+
|
|
1075
|
+
teg-apple-pay-button .apple-pay-btn__loading {
|
|
1076
|
+
display: none;
|
|
1077
|
+
}
|
|
1078
|
+
|
|
1060
1079
|
@keyframes wap-button-spinner {
|
|
1080
|
+
from {
|
|
1081
|
+
transform: translate(-50%, -50%) rotate(0deg);
|
|
1082
|
+
}
|
|
1061
1083
|
to {
|
|
1062
|
-
transform: rotate(360deg);
|
|
1084
|
+
transform: translate(-50%, -50%) rotate(360deg);
|
|
1063
1085
|
}
|
|
1064
1086
|
}
|
|
1065
1087
|
</style>
|
|
@@ -1071,9 +1093,12 @@ var apple_pay_button_template_default = `<style>
|
|
|
1071
1093
|
aria-label="Pay with Apple Pay"
|
|
1072
1094
|
data-analytics="paywall:apple-pay-checkout"
|
|
1073
1095
|
>
|
|
1074
|
-
<
|
|
1075
|
-
<
|
|
1076
|
-
|
|
1096
|
+
<span class="apple-pay-btn__logo">
|
|
1097
|
+
<svg width="51" height="22" aria-label="Apple Pay" role="img">
|
|
1098
|
+
<use href="#apple-pay-logo" />
|
|
1099
|
+
</svg>
|
|
1100
|
+
</span>
|
|
1101
|
+
<span class="apple-pay-btn__loading" aria-hidden="true">Loading...</span>
|
|
1077
1102
|
</button>
|
|
1078
1103
|
</div>
|
|
1079
1104
|
`;
|
|
@@ -320,28 +320,41 @@ var apple_pay_modal_template_default = `<style>
|
|
|
320
320
|
cursor: not-allowed;
|
|
321
321
|
}
|
|
322
322
|
|
|
323
|
-
.apm__cta
|
|
324
|
-
|
|
323
|
+
.apm__cta-content {
|
|
324
|
+
display: flex;
|
|
325
|
+
align-items: center;
|
|
326
|
+
gap: 0.375rem;
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
.apm__cta-label {
|
|
330
|
+
display: inline-flex;
|
|
331
|
+
align-items: center;
|
|
332
|
+
gap: 0.375rem;
|
|
325
333
|
}
|
|
326
334
|
|
|
327
|
-
.apm__cta
|
|
335
|
+
.apm__cta-loading {
|
|
336
|
+
display: none;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
.apm__cta[aria-busy="true"]::before {
|
|
328
340
|
content: '';
|
|
329
341
|
position: absolute;
|
|
330
|
-
left: 50%;
|
|
331
342
|
top: 50%;
|
|
332
|
-
|
|
333
|
-
margin-top: -0.625rem;
|
|
343
|
+
left: 50%;
|
|
334
344
|
width: 1.25rem;
|
|
335
345
|
height: 1.25rem;
|
|
336
|
-
border: 2px solid rgba(255, 255, 255, 0.
|
|
346
|
+
border: 2px solid rgba(255, 255, 255, 0.25);
|
|
337
347
|
border-top-color: #fff;
|
|
338
348
|
border-radius: 50%;
|
|
339
349
|
animation: apm-cta-spinner 0.8s linear infinite;
|
|
340
350
|
}
|
|
341
351
|
|
|
342
352
|
@keyframes apm-cta-spinner {
|
|
353
|
+
from {
|
|
354
|
+
transform: translate(-50%, -50%) rotate(0deg);
|
|
355
|
+
}
|
|
343
356
|
to {
|
|
344
|
-
transform: rotate(360deg);
|
|
357
|
+
transform: translate(-50%, -50%) rotate(360deg);
|
|
345
358
|
}
|
|
346
359
|
}
|
|
347
360
|
|
|
@@ -518,11 +531,14 @@ var apple_pay_modal_template_default = `<style>
|
|
|
518
531
|
</div>
|
|
519
532
|
<button class="apm__cta" id="apple-pay-modal-cta" aria-label="Continue with Apple Pay">
|
|
520
533
|
<span class="apm__cta-content">
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
<
|
|
524
|
-
|
|
534
|
+
<span class="apm__cta-label">
|
|
535
|
+
Continue with
|
|
536
|
+
<svg width="51" height="22" aria-hidden="true" role="img">
|
|
537
|
+
<use href="#apple-pay-logo" />
|
|
538
|
+
</svg>
|
|
539
|
+
</span>
|
|
525
540
|
</span>
|
|
541
|
+
<span class="apm__cta-loading" aria-hidden="true">Loading...</span>
|
|
526
542
|
</button>
|
|
527
543
|
</div>
|
|
528
544
|
</div>
|
|
@@ -320,28 +320,41 @@ var apple_pay_modal_template_default = `<style>
|
|
|
320
320
|
cursor: not-allowed;
|
|
321
321
|
}
|
|
322
322
|
|
|
323
|
-
.apm__cta
|
|
324
|
-
|
|
323
|
+
.apm__cta-content {
|
|
324
|
+
display: flex;
|
|
325
|
+
align-items: center;
|
|
326
|
+
gap: 0.375rem;
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
.apm__cta-label {
|
|
330
|
+
display: inline-flex;
|
|
331
|
+
align-items: center;
|
|
332
|
+
gap: 0.375rem;
|
|
325
333
|
}
|
|
326
334
|
|
|
327
|
-
.apm__cta
|
|
335
|
+
.apm__cta-loading {
|
|
336
|
+
display: none;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
.apm__cta[aria-busy="true"]::before {
|
|
328
340
|
content: '';
|
|
329
341
|
position: absolute;
|
|
330
|
-
left: 50%;
|
|
331
342
|
top: 50%;
|
|
332
|
-
|
|
333
|
-
margin-top: -0.625rem;
|
|
343
|
+
left: 50%;
|
|
334
344
|
width: 1.25rem;
|
|
335
345
|
height: 1.25rem;
|
|
336
|
-
border: 2px solid rgba(255, 255, 255, 0.
|
|
346
|
+
border: 2px solid rgba(255, 255, 255, 0.25);
|
|
337
347
|
border-top-color: #fff;
|
|
338
348
|
border-radius: 50%;
|
|
339
349
|
animation: apm-cta-spinner 0.8s linear infinite;
|
|
340
350
|
}
|
|
341
351
|
|
|
342
352
|
@keyframes apm-cta-spinner {
|
|
353
|
+
from {
|
|
354
|
+
transform: translate(-50%, -50%) rotate(0deg);
|
|
355
|
+
}
|
|
343
356
|
to {
|
|
344
|
-
transform: rotate(360deg);
|
|
357
|
+
transform: translate(-50%, -50%) rotate(360deg);
|
|
345
358
|
}
|
|
346
359
|
}
|
|
347
360
|
|
|
@@ -518,11 +531,14 @@ var apple_pay_modal_template_default = `<style>
|
|
|
518
531
|
</div>
|
|
519
532
|
<button class="apm__cta" id="apple-pay-modal-cta" aria-label="Continue with Apple Pay">
|
|
520
533
|
<span class="apm__cta-content">
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
<
|
|
524
|
-
|
|
534
|
+
<span class="apm__cta-label">
|
|
535
|
+
Continue with
|
|
536
|
+
<svg width="51" height="22" aria-hidden="true" role="img">
|
|
537
|
+
<use href="#apple-pay-logo" />
|
|
538
|
+
</svg>
|
|
539
|
+
</span>
|
|
525
540
|
</span>
|
|
541
|
+
<span class="apm__cta-loading" aria-hidden="true">Loading...</span>
|
|
526
542
|
</button>
|
|
527
543
|
</div>
|
|
528
544
|
</div>
|
|
@@ -1030,28 +1046,34 @@ var apple_pay_button_template_default = `<style>
|
|
|
1030
1046
|
cursor: default;
|
|
1031
1047
|
}
|
|
1032
1048
|
|
|
1033
|
-
teg-apple-pay-button .apple-pay-btn.wap-loading
|
|
1034
|
-
visibility: hidden;
|
|
1035
|
-
}
|
|
1036
|
-
|
|
1037
|
-
teg-apple-pay-button .apple-pay-btn.wap-loading::after {
|
|
1049
|
+
teg-apple-pay-button .apple-pay-btn.wap-loading::before {
|
|
1038
1050
|
content: '';
|
|
1039
1051
|
position: absolute;
|
|
1040
|
-
left: 50%;
|
|
1041
1052
|
top: 50%;
|
|
1042
|
-
|
|
1043
|
-
margin-top: -0.625rem;
|
|
1053
|
+
left: 50%;
|
|
1044
1054
|
width: 1.25rem;
|
|
1045
1055
|
height: 1.25rem;
|
|
1046
|
-
border: 2px solid rgba(255, 255, 255, 0.
|
|
1056
|
+
border: 2px solid rgba(255, 255, 255, 0.25);
|
|
1047
1057
|
border-top-color: #fff;
|
|
1048
1058
|
border-radius: 50%;
|
|
1049
1059
|
animation: wap-button-spinner 0.8s linear infinite;
|
|
1050
1060
|
}
|
|
1051
1061
|
|
|
1062
|
+
teg-apple-pay-button .apple-pay-btn__logo {
|
|
1063
|
+
display: inline-flex;
|
|
1064
|
+
align-items: center;
|
|
1065
|
+
}
|
|
1066
|
+
|
|
1067
|
+
teg-apple-pay-button .apple-pay-btn__loading {
|
|
1068
|
+
display: none;
|
|
1069
|
+
}
|
|
1070
|
+
|
|
1052
1071
|
@keyframes wap-button-spinner {
|
|
1072
|
+
from {
|
|
1073
|
+
transform: translate(-50%, -50%) rotate(0deg);
|
|
1074
|
+
}
|
|
1053
1075
|
to {
|
|
1054
|
-
transform: rotate(360deg);
|
|
1076
|
+
transform: translate(-50%, -50%) rotate(360deg);
|
|
1055
1077
|
}
|
|
1056
1078
|
}
|
|
1057
1079
|
</style>
|
|
@@ -1063,9 +1085,12 @@ var apple_pay_button_template_default = `<style>
|
|
|
1063
1085
|
aria-label="Pay with Apple Pay"
|
|
1064
1086
|
data-analytics="paywall:apple-pay-checkout"
|
|
1065
1087
|
>
|
|
1066
|
-
<
|
|
1067
|
-
<
|
|
1068
|
-
|
|
1088
|
+
<span class="apple-pay-btn__logo">
|
|
1089
|
+
<svg width="51" height="22" aria-label="Apple Pay" role="img">
|
|
1090
|
+
<use href="#apple-pay-logo" />
|
|
1091
|
+
</svg>
|
|
1092
|
+
</span>
|
|
1093
|
+
<span class="apple-pay-btn__loading" aria-hidden="true">Loading...</span>
|
|
1069
1094
|
</button>
|
|
1070
1095
|
</div>
|
|
1071
1096
|
`;
|
package/dist/src/index.js
CHANGED
|
@@ -320,28 +320,41 @@ var apple_pay_modal_template_default = `<style>
|
|
|
320
320
|
cursor: not-allowed;
|
|
321
321
|
}
|
|
322
322
|
|
|
323
|
-
.apm__cta
|
|
324
|
-
|
|
323
|
+
.apm__cta-content {
|
|
324
|
+
display: flex;
|
|
325
|
+
align-items: center;
|
|
326
|
+
gap: 0.375rem;
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
.apm__cta-label {
|
|
330
|
+
display: inline-flex;
|
|
331
|
+
align-items: center;
|
|
332
|
+
gap: 0.375rem;
|
|
325
333
|
}
|
|
326
334
|
|
|
327
|
-
.apm__cta
|
|
335
|
+
.apm__cta-loading {
|
|
336
|
+
display: none;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
.apm__cta[aria-busy="true"]::before {
|
|
328
340
|
content: '';
|
|
329
341
|
position: absolute;
|
|
330
|
-
left: 50%;
|
|
331
342
|
top: 50%;
|
|
332
|
-
|
|
333
|
-
margin-top: -0.625rem;
|
|
343
|
+
left: 50%;
|
|
334
344
|
width: 1.25rem;
|
|
335
345
|
height: 1.25rem;
|
|
336
|
-
border: 2px solid rgba(255, 255, 255, 0.
|
|
346
|
+
border: 2px solid rgba(255, 255, 255, 0.25);
|
|
337
347
|
border-top-color: #fff;
|
|
338
348
|
border-radius: 50%;
|
|
339
349
|
animation: apm-cta-spinner 0.8s linear infinite;
|
|
340
350
|
}
|
|
341
351
|
|
|
342
352
|
@keyframes apm-cta-spinner {
|
|
353
|
+
from {
|
|
354
|
+
transform: translate(-50%, -50%) rotate(0deg);
|
|
355
|
+
}
|
|
343
356
|
to {
|
|
344
|
-
transform: rotate(360deg);
|
|
357
|
+
transform: translate(-50%, -50%) rotate(360deg);
|
|
345
358
|
}
|
|
346
359
|
}
|
|
347
360
|
|
|
@@ -518,11 +531,14 @@ var apple_pay_modal_template_default = `<style>
|
|
|
518
531
|
</div>
|
|
519
532
|
<button class="apm__cta" id="apple-pay-modal-cta" aria-label="Continue with Apple Pay">
|
|
520
533
|
<span class="apm__cta-content">
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
<
|
|
524
|
-
|
|
534
|
+
<span class="apm__cta-label">
|
|
535
|
+
Continue with
|
|
536
|
+
<svg width="51" height="22" aria-hidden="true" role="img">
|
|
537
|
+
<use href="#apple-pay-logo" />
|
|
538
|
+
</svg>
|
|
539
|
+
</span>
|
|
525
540
|
</span>
|
|
541
|
+
<span class="apm__cta-loading" aria-hidden="true">Loading...</span>
|
|
526
542
|
</button>
|
|
527
543
|
</div>
|
|
528
544
|
</div>
|
|
@@ -1035,28 +1051,34 @@ var apple_pay_button_template_default = `<style>
|
|
|
1035
1051
|
cursor: default;
|
|
1036
1052
|
}
|
|
1037
1053
|
|
|
1038
|
-
teg-apple-pay-button .apple-pay-btn.wap-loading
|
|
1039
|
-
visibility: hidden;
|
|
1040
|
-
}
|
|
1041
|
-
|
|
1042
|
-
teg-apple-pay-button .apple-pay-btn.wap-loading::after {
|
|
1054
|
+
teg-apple-pay-button .apple-pay-btn.wap-loading::before {
|
|
1043
1055
|
content: '';
|
|
1044
1056
|
position: absolute;
|
|
1045
|
-
left: 50%;
|
|
1046
1057
|
top: 50%;
|
|
1047
|
-
|
|
1048
|
-
margin-top: -0.625rem;
|
|
1058
|
+
left: 50%;
|
|
1049
1059
|
width: 1.25rem;
|
|
1050
1060
|
height: 1.25rem;
|
|
1051
|
-
border: 2px solid rgba(255, 255, 255, 0.
|
|
1061
|
+
border: 2px solid rgba(255, 255, 255, 0.25);
|
|
1052
1062
|
border-top-color: #fff;
|
|
1053
1063
|
border-radius: 50%;
|
|
1054
1064
|
animation: wap-button-spinner 0.8s linear infinite;
|
|
1055
1065
|
}
|
|
1056
1066
|
|
|
1067
|
+
teg-apple-pay-button .apple-pay-btn__logo {
|
|
1068
|
+
display: inline-flex;
|
|
1069
|
+
align-items: center;
|
|
1070
|
+
}
|
|
1071
|
+
|
|
1072
|
+
teg-apple-pay-button .apple-pay-btn__loading {
|
|
1073
|
+
display: none;
|
|
1074
|
+
}
|
|
1075
|
+
|
|
1057
1076
|
@keyframes wap-button-spinner {
|
|
1077
|
+
from {
|
|
1078
|
+
transform: translate(-50%, -50%) rotate(0deg);
|
|
1079
|
+
}
|
|
1058
1080
|
to {
|
|
1059
|
-
transform: rotate(360deg);
|
|
1081
|
+
transform: translate(-50%, -50%) rotate(360deg);
|
|
1060
1082
|
}
|
|
1061
1083
|
}
|
|
1062
1084
|
</style>
|
|
@@ -1068,9 +1090,12 @@ var apple_pay_button_template_default = `<style>
|
|
|
1068
1090
|
aria-label="Pay with Apple Pay"
|
|
1069
1091
|
data-analytics="paywall:apple-pay-checkout"
|
|
1070
1092
|
>
|
|
1071
|
-
<
|
|
1072
|
-
<
|
|
1073
|
-
|
|
1093
|
+
<span class="apple-pay-btn__logo">
|
|
1094
|
+
<svg width="51" height="22" aria-label="Apple Pay" role="img">
|
|
1095
|
+
<use href="#apple-pay-logo" />
|
|
1096
|
+
</svg>
|
|
1097
|
+
</span>
|
|
1098
|
+
<span class="apple-pay-btn__loading" aria-hidden="true">Loading...</span>
|
|
1074
1099
|
</button>
|
|
1075
1100
|
</div>
|
|
1076
1101
|
`;
|