@globalpayments/js 4.0.20 → 4.1.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.
Files changed (31) hide show
  1. package/README.md +1 -1
  2. package/package.json +1 -1
  3. package/types/common/constants.d.ts +2 -0
  4. package/types/common/enums.d.ts +6 -0
  5. package/types/internal/lib/add-footer-branded-icons.d.ts +12 -0
  6. package/types/internal/lib/enums.d.ts +4 -0
  7. package/types/internal/lib/styles/built-in-validations/common.d.ts +0 -4
  8. package/types/internal/lib/styles/built-in-validations/default.d.ts +0 -4
  9. package/types/internal/lib/styles/built-in-validations/gp-default.d.ts +0 -4
  10. package/types/internal/lib/styles/built-in-validations/simple.d.ts +0 -4
  11. package/types/internal/lib/styles/currency-conversion/common.d.ts +12 -2
  12. package/types/internal/lib/styles/currency-conversion/default.d.ts +5 -0
  13. package/types/internal/lib/styles/currency-conversion/gp-default.d.ts +12 -2
  14. package/types/internal/lib/styles/currency-conversion/simple.d.ts +5 -0
  15. package/types/internal/lib/styles/default.d.ts +13 -4
  16. package/types/internal/lib/styles/gp-default.d.ts +24 -6
  17. package/types/internal/lib/styles/simple.d.ts +13 -4
  18. package/types/internal/lib/styles/themes/brand-themes/base/base-theme-preset.d.ts +5 -0
  19. package/types/internal/lib/styles/themes/brand-themes/base/base-theme.d.ts +1693 -0
  20. package/types/internal/lib/styles/themes/brand-themes/base/base-token-definition.d.ts +98 -0
  21. package/types/internal/lib/styles/themes/brand-themes/base/contracts.d.ts +82 -0
  22. package/types/internal/lib/styles/themes/brand-themes/brand-theme-boipa-uk.d.ts +9 -0
  23. package/types/internal/lib/styles/themes/brand-themes/brand-theme-boipa.d.ts +9 -0
  24. package/types/internal/lib/styles/themes/brand-themes/brand-theme-commerzbank.d.ts +9 -0
  25. package/types/internal/lib/styles/themes/brand-themes/brand-theme-e-service.d.ts +9 -0
  26. package/types/internal/lib/styles/themes/brand-themes/brand-theme-nbg-pay.d.ts +9 -0
  27. package/types/internal/lib/styles/themes/brand-themes/brand-themes.d.ts +14 -0
  28. package/types/internal/lib/styles/themes/helpers.d.ts +1 -0
  29. package/types/internal/lib/styles/tooltip/common.d.ts +8 -0
  30. package/types/lib/version.d.ts +1 -1
  31. package/types/ui/form/index.d.ts +148 -25
package/README.md CHANGED
@@ -24,7 +24,7 @@ This plugin allows you to use online payments (eCommerce) features of a variety
24
24
  ## Usage
25
25
 
26
26
  ```html
27
- <script src="https://js.globalpay.com/4.0.20/globalpayments.js"></script>
27
+ <script src="https://js.globalpay.com/4.1.1/globalpayments.js"></script>
28
28
  ```
29
29
 
30
30
  > Note: Installing via NPM will only provide TypeScript types for type-checking.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@globalpayments/js",
3
- "version": "4.0.20",
3
+ "version": "4.1.1",
4
4
  "author": "Heartland Developer Portal <developers@heartland.us>",
5
5
  "license": "GPL-2.0",
6
6
  "repository": {
@@ -1 +1,3 @@
1
1
  export declare const HOSTED_FIELD_NAME_KEYS: string[];
2
+ export declare const HOSTED_FIELD_STYLE_NAMES: string[];
3
+ export declare const HOSTED_FIELD_BRAND_THEMES_NAMES: string[];
@@ -32,3 +32,9 @@ export declare enum Environments {
32
32
  Sandbox = "sandbox",
33
33
  Production = "production"
34
34
  }
35
+ export declare enum HostedFieldStyles {
36
+ Default = "default",
37
+ Simple = "simple",
38
+ Blank = "blank",
39
+ GpDefault = "gp-default"
40
+ }
@@ -0,0 +1,12 @@
1
+ import { IUIFormOptions } from "../../ui/form";
2
+ /**
3
+ * Adds the branded footer icons:
4
+ * - SSL Encrypted Logo
5
+ * - Branded specific Logo
6
+ * - Security Emblem text ("Securely processed by Global Payments")
7
+ *
8
+ * @param formOptions
9
+ * @param footer
10
+ *
11
+ */
12
+ export declare function addFooterBrandedIcons(formOptions: IUIFormOptions, footer: HTMLElement): void;
@@ -1,3 +1,5 @@
1
+ import { HostedFieldStyles as HostedFieldStylesAlias } from "../../common/enums";
2
+ import { BrandThemes as BrandThemesAlias } from "./styles/themes/brand-themes/brand-themes";
1
3
  export declare enum ApiVersion {
2
4
  default = "2021-03-22"
3
5
  }
@@ -53,3 +55,5 @@ export declare enum QRCodePaymentsWeChatProviderBrands {
53
55
  WeChatMethodResponse = "WECHAT",
54
56
  WeChatAccountResponse = "WeChat Pay"
55
57
  }
58
+ export declare const HostedFieldStyles: typeof HostedFieldStylesAlias;
59
+ export declare const BrandThemes: typeof BrandThemesAlias;
@@ -1,8 +1,4 @@
1
1
  export declare const fieldStyles: (assetBaseUrl: string) => {
2
- "@font-face": {
3
- "font-family": string;
4
- src: string;
5
- };
6
2
  "#secure-payment-field[type=text].field-validation-wrapper": {
7
3
  "font-family": string;
8
4
  };
@@ -8,10 +8,6 @@ export declare const fieldStyles: (assetBaseUrl: string) => {
8
8
  top: string;
9
9
  "background-position": string;
10
10
  };
11
- "@font-face": {
12
- "font-family": string;
13
- src: string;
14
- };
15
11
  "#secure-payment-field[type=text].field-validation-wrapper": {
16
12
  "font-family": string;
17
13
  };
@@ -7,10 +7,6 @@ export declare const fieldStyles: (assetBaseUrl: string) => {
7
7
  height: string;
8
8
  "background-size": string;
9
9
  };
10
- "@font-face": {
11
- "font-family": string;
12
- src: string;
13
- };
14
10
  "#secure-payment-field[type=text].field-validation-wrapper": {
15
11
  "font-family": string;
16
12
  };
@@ -10,10 +10,6 @@ export declare const fieldStyles: (assetBaseUrl: string) => {
10
10
  "#field-validation-wrapper": {
11
11
  "margin-top": string;
12
12
  };
13
- "@font-face": {
14
- "font-family": string;
15
- src: string;
16
- };
17
13
  "#secure-payment-field[type=text].field-validation-wrapper": {
18
14
  "font-family": string;
19
15
  };
@@ -23,8 +23,9 @@ declare const styles: () => {
23
23
  padding: number;
24
24
  display: string;
25
25
  "font-size": string;
26
- "font-weight": number;
26
+ "font-weight": string;
27
27
  position: string;
28
+ color: string;
28
29
  };
29
30
  ".secure-payment-form .credit-card-currency-conversion .radio-button": {
30
31
  display: string;
@@ -41,6 +42,7 @@ declare const styles: () => {
41
42
  };
42
43
  ".secure-payment-form .credit-card-currency-conversion .radio-button:hover": {
43
44
  "border-color": string;
45
+ color: string;
44
46
  };
45
47
  ".secure-payment-form .credit-card-currency-conversion fieldset:focus-within > .radio-button": {
46
48
  outline: string;
@@ -56,6 +58,9 @@ declare const styles: () => {
56
58
  color: string;
57
59
  outline: string;
58
60
  };
61
+ ".secure-payment-form .credit-card-currency-conversion .radio-button.checked label": {
62
+ color: string;
63
+ };
59
64
  ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']": {
60
65
  margin: string;
61
66
  appearance: string;
@@ -72,16 +77,19 @@ declare const styles: () => {
72
77
  ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']:checked": {
73
78
  "background-color": string;
74
79
  border: string;
80
+ color: string;
75
81
  };
76
82
  ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']:focus": {
77
83
  outline: string;
84
+ color: string;
78
85
  };
79
86
  ".secure-payment-form .credit-card-currency-conversion .radio-button label": {
80
87
  "font-family": string;
81
88
  "font-size": string;
82
- "font-weight": number;
89
+ "font-weight": string;
83
90
  display: string;
84
91
  margin: string;
92
+ color: string;
85
93
  };
86
94
  ".secure-payment-form .credit-card-currency-conversion .card-currency-content": {
87
95
  opacity: string;
@@ -117,6 +125,8 @@ declare const styles: () => {
117
125
  "font-weight": number;
118
126
  margin: string;
119
127
  display: string;
128
+ "line-height": string;
129
+ color: string;
120
130
  };
121
131
  ".secure-payment-form .credit-card-currency-conversion .additional-info p": {
122
132
  margin: string;
@@ -87,6 +87,7 @@ export declare const styles: () => {
87
87
  };
88
88
  ".secure-payment-form .credit-card-currency-conversion .radio-button:hover": {
89
89
  "border-color": string;
90
+ color: string;
90
91
  };
91
92
  ".secure-payment-form .credit-card-currency-conversion fieldset:focus-within > .radio-button": {
92
93
  outline: string;
@@ -118,9 +119,11 @@ export declare const styles: () => {
118
119
  ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']:checked": {
119
120
  "background-color": string;
120
121
  border: string;
122
+ color: string;
121
123
  };
122
124
  ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']:focus": {
123
125
  outline: string;
126
+ color: string;
124
127
  };
125
128
  ".secure-payment-form .credit-card-currency-conversion .card-currency-content.visible": {
126
129
  display: string;
@@ -138,6 +141,8 @@ export declare const styles: () => {
138
141
  "font-weight": number;
139
142
  margin: string;
140
143
  display: string;
144
+ "line-height": string;
145
+ color: string;
141
146
  };
142
147
  ".secure-payment-form .credit-card-currency-conversion .tooltip": {
143
148
  width: string;
@@ -30,8 +30,9 @@ export declare const styles: () => {
30
30
  padding: number;
31
31
  display: string;
32
32
  "font-size": string;
33
- "font-weight": number;
33
+ "font-weight": string;
34
34
  position: string;
35
+ color: string;
35
36
  };
36
37
  ".secure-payment-form .credit-card-currency-conversion .radio-button": {
37
38
  display: string;
@@ -48,6 +49,7 @@ export declare const styles: () => {
48
49
  };
49
50
  ".secure-payment-form .credit-card-currency-conversion .radio-button:hover": {
50
51
  "border-color": string;
52
+ color: string;
51
53
  };
52
54
  ".secure-payment-form .credit-card-currency-conversion fieldset:focus-within > .radio-button": {
53
55
  outline: string;
@@ -63,6 +65,9 @@ export declare const styles: () => {
63
65
  color: string;
64
66
  outline: string;
65
67
  };
68
+ ".secure-payment-form .credit-card-currency-conversion .radio-button.checked label": {
69
+ color: string;
70
+ };
66
71
  ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']": {
67
72
  margin: string;
68
73
  appearance: string;
@@ -79,16 +84,19 @@ export declare const styles: () => {
79
84
  ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']:checked": {
80
85
  "background-color": string;
81
86
  border: string;
87
+ color: string;
82
88
  };
83
89
  ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']:focus": {
84
90
  outline: string;
91
+ color: string;
85
92
  };
86
93
  ".secure-payment-form .credit-card-currency-conversion .radio-button label": {
87
94
  "font-family": string;
88
95
  "font-size": string;
89
- "font-weight": number;
96
+ "font-weight": string;
90
97
  display: string;
91
98
  margin: string;
99
+ color: string;
92
100
  };
93
101
  ".secure-payment-form .credit-card-currency-conversion .card-currency-content": {
94
102
  opacity: string;
@@ -124,6 +132,8 @@ export declare const styles: () => {
124
132
  "font-weight": number;
125
133
  margin: string;
126
134
  display: string;
135
+ "line-height": string;
136
+ color: string;
127
137
  };
128
138
  ".secure-payment-form .credit-card-currency-conversion .additional-info p": {
129
139
  margin: string;
@@ -92,6 +92,7 @@ export declare const styles: () => {
92
92
  };
93
93
  ".secure-payment-form .credit-card-currency-conversion .radio-button:hover": {
94
94
  "border-color": string;
95
+ color: string;
95
96
  };
96
97
  ".secure-payment-form .credit-card-currency-conversion fieldset:focus-within > .radio-button": {
97
98
  outline: string;
@@ -123,9 +124,11 @@ export declare const styles: () => {
123
124
  ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']:checked": {
124
125
  "background-color": string;
125
126
  border: string;
127
+ color: string;
126
128
  };
127
129
  ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']:focus": {
128
130
  outline: string;
131
+ color: string;
129
132
  };
130
133
  ".secure-payment-form .credit-card-currency-conversion .card-currency-content.visible": {
131
134
  display: string;
@@ -143,6 +146,8 @@ export declare const styles: () => {
143
146
  "font-weight": number;
144
147
  margin: string;
145
148
  display: string;
149
+ "line-height": string;
150
+ color: string;
146
151
  };
147
152
  ".secure-payment-form .credit-card-currency-conversion .tooltip": {
148
153
  width: string;
@@ -17,10 +17,6 @@ export declare const fieldStyles: (assetBaseUrl: string) => {
17
17
  "margin-top": string;
18
18
  "background-position": string;
19
19
  };
20
- "@font-face"?: {
21
- "font-family": string;
22
- src: string;
23
- };
24
20
  "#secure-payment-field[type=text].field-validation-wrapper"?: {
25
21
  "font-family": string;
26
22
  };
@@ -462,6 +458,7 @@ export declare const parentStyles: (assetBaseUrl: string) => {
462
458
  };
463
459
  ".secure-payment-form .credit-card-currency-conversion .radio-button:hover"?: {
464
460
  "border-color": string;
461
+ color: string;
465
462
  };
466
463
  ".secure-payment-form .credit-card-currency-conversion fieldset:focus-within > .radio-button"?: {
467
464
  outline: string;
@@ -493,9 +490,11 @@ export declare const parentStyles: (assetBaseUrl: string) => {
493
490
  ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']:checked"?: {
494
491
  "background-color": string;
495
492
  border: string;
493
+ color: string;
496
494
  };
497
495
  ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']:focus"?: {
498
496
  outline: string;
497
+ color: string;
499
498
  };
500
499
  ".secure-payment-form .credit-card-currency-conversion .card-currency-content.visible"?: {
501
500
  display: string;
@@ -513,6 +512,8 @@ export declare const parentStyles: (assetBaseUrl: string) => {
513
512
  "font-weight": number;
514
513
  margin: string;
515
514
  display: string;
515
+ "line-height": string;
516
+ color: string;
516
517
  };
517
518
  ".secure-payment-form .credit-card-currency-conversion .tooltip"?: {
518
519
  width: string;
@@ -889,6 +890,14 @@ export declare const parentStyles: (assetBaseUrl: string) => {
889
890
  "background-size": string;
890
891
  background: string;
891
892
  "font-family": string;
893
+ "font-size": string;
894
+ "line-height": string;
895
+ };
896
+ ".secure-payment-form .tooltip h4": {
897
+ "font-family": string;
898
+ "font-size": string;
899
+ "line-height": string;
900
+ color: string;
892
901
  };
893
902
  ".secure-payment-form .tooltip:focus": {
894
903
  border: string;
@@ -15,10 +15,6 @@ export declare const fieldStyles: (assetBaseUrl: string) => {
15
15
  "margin-top": string;
16
16
  "background-size": string;
17
17
  };
18
- "@font-face"?: {
19
- "font-family": string;
20
- src: string;
21
- };
22
18
  "#secure-payment-field[type=text].field-validation-wrapper"?: {
23
19
  "font-family": string;
24
20
  };
@@ -33,6 +29,10 @@ export declare const fieldStyles: (assetBaseUrl: string) => {
33
29
  opacity: string;
34
30
  visibility: string;
35
31
  };
32
+ "@font-face": {
33
+ "font-family": string;
34
+ src: string;
35
+ };
36
36
  "*": {
37
37
  "box-sizing": string;
38
38
  };
@@ -367,8 +367,9 @@ export declare const parentStyles: (assetBaseUrl: string) => {
367
367
  padding: number;
368
368
  display: string;
369
369
  "font-size": string;
370
- "font-weight": number;
370
+ "font-weight": string;
371
371
  position: string;
372
+ color: string;
372
373
  };
373
374
  ".secure-payment-form .credit-card-currency-conversion .radio-button"?: {
374
375
  display: string;
@@ -385,6 +386,7 @@ export declare const parentStyles: (assetBaseUrl: string) => {
385
386
  };
386
387
  ".secure-payment-form .credit-card-currency-conversion .radio-button:hover"?: {
387
388
  "border-color": string;
389
+ color: string;
388
390
  };
389
391
  ".secure-payment-form .credit-card-currency-conversion fieldset:focus-within > .radio-button"?: {
390
392
  outline: string;
@@ -400,6 +402,9 @@ export declare const parentStyles: (assetBaseUrl: string) => {
400
402
  color: string;
401
403
  outline: string;
402
404
  };
405
+ ".secure-payment-form .credit-card-currency-conversion .radio-button.checked label"?: {
406
+ color: string;
407
+ };
403
408
  ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']"?: {
404
409
  margin: string;
405
410
  appearance: string;
@@ -416,16 +421,19 @@ export declare const parentStyles: (assetBaseUrl: string) => {
416
421
  ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']:checked"?: {
417
422
  "background-color": string;
418
423
  border: string;
424
+ color: string;
419
425
  };
420
426
  ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']:focus"?: {
421
427
  outline: string;
428
+ color: string;
422
429
  };
423
430
  ".secure-payment-form .credit-card-currency-conversion .radio-button label"?: {
424
431
  "font-family": string;
425
432
  "font-size": string;
426
- "font-weight": number;
433
+ "font-weight": string;
427
434
  display: string;
428
435
  margin: string;
436
+ color: string;
429
437
  };
430
438
  ".secure-payment-form .credit-card-currency-conversion .card-currency-content"?: {
431
439
  opacity: string;
@@ -461,6 +469,8 @@ export declare const parentStyles: (assetBaseUrl: string) => {
461
469
  "font-weight": number;
462
470
  margin: string;
463
471
  display: string;
472
+ "line-height": string;
473
+ color: string;
464
474
  };
465
475
  ".secure-payment-form .credit-card-currency-conversion .additional-info p"?: {
466
476
  margin: string;
@@ -1188,6 +1198,14 @@ export declare const parentStyles: (assetBaseUrl: string) => {
1188
1198
  "background-size": string;
1189
1199
  background: string;
1190
1200
  "font-family": string;
1201
+ "font-size": string;
1202
+ "line-height": string;
1203
+ };
1204
+ ".secure-payment-form .tooltip h4": {
1205
+ "font-family": string;
1206
+ "font-size": string;
1207
+ "line-height": string;
1208
+ color: string;
1191
1209
  };
1192
1210
  ".secure-payment-form .tooltip:focus": {
1193
1211
  border: string;
@@ -24,10 +24,6 @@ export declare const fieldStyles: (assetBaseUrl: string) => {
24
24
  "#field-validation-wrapper"?: {
25
25
  "margin-top": string;
26
26
  };
27
- "@font-face"?: {
28
- "font-family": string;
29
- src: string;
30
- };
31
27
  "#secure-payment-field[type=text].field-validation-wrapper"?: {
32
28
  "font-family": string;
33
29
  };
@@ -242,6 +238,7 @@ export declare const parentStyles: (assetBaseUrl: string) => {
242
238
  };
243
239
  ".secure-payment-form .credit-card-currency-conversion .radio-button:hover"?: {
244
240
  "border-color": string;
241
+ color: string;
245
242
  };
246
243
  ".secure-payment-form .credit-card-currency-conversion fieldset:focus-within > .radio-button"?: {
247
244
  outline: string;
@@ -273,9 +270,11 @@ export declare const parentStyles: (assetBaseUrl: string) => {
273
270
  ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']:checked"?: {
274
271
  "background-color": string;
275
272
  border: string;
273
+ color: string;
276
274
  };
277
275
  ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']:focus"?: {
278
276
  outline: string;
277
+ color: string;
279
278
  };
280
279
  ".secure-payment-form .credit-card-currency-conversion .card-currency-content.visible"?: {
281
280
  display: string;
@@ -293,6 +292,8 @@ export declare const parentStyles: (assetBaseUrl: string) => {
293
292
  "font-weight": number;
294
293
  margin: string;
295
294
  display: string;
295
+ "line-height": string;
296
+ color: string;
296
297
  };
297
298
  ".secure-payment-form .credit-card-currency-conversion .tooltip"?: {
298
299
  width: string;
@@ -777,6 +778,14 @@ export declare const parentStyles: (assetBaseUrl: string) => {
777
778
  "background-size": string;
778
779
  background: string;
779
780
  "font-family": string;
781
+ "font-size": string;
782
+ "line-height": string;
783
+ };
784
+ ".secure-payment-form .tooltip h4": {
785
+ "font-family": string;
786
+ "font-size": string;
787
+ "line-height": string;
788
+ color: string;
780
789
  };
781
790
  ".secure-payment-form .tooltip:focus": {
782
791
  border: string;
@@ -0,0 +1,5 @@
1
+ import { IThemePreset, IThemePresetBodyPaddings, IThemePresetFontFamily, IThemePresetGeneralColors } from "./contracts";
2
+ export declare const getBaseThemePreset: () => IThemePreset;
3
+ export declare const getBaseThemePresetGeneralColors: () => IThemePresetGeneralColors;
4
+ export declare const getBaseThemePresetBodyPaddings: () => IThemePresetBodyPaddings;
5
+ export declare const getBaseThemePresetFontFamily: () => IThemePresetFontFamily;