@globalpayments/js 1.9.29 → 1.10.2

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/README.md CHANGED
@@ -146,7 +146,7 @@ The tokenization account name for the given merchant account. Only required if t
146
146
 
147
147
  > Note: Applies to GP API only.
148
148
 
149
- The target API version. Default is `2020-10-22`.
149
+ The target API version. Default is `2021-03-22`.
150
150
 
151
151
  ##### `reference` - `string` (Optional)
152
152
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@globalpayments/js",
3
- "version": "1.9.29",
3
+ "version": "1.10.2",
4
4
  "author": "Heartland Developer Portal <developers@heartland.us>",
5
5
  "license": "GPL-2.0",
6
6
  "repository": {
@@ -0,0 +1,2 @@
1
+ export declare const isSafari: boolean;
2
+ export declare const isIE: boolean;
@@ -5,3 +5,15 @@ export declare enum CardFormFieldNames {
5
5
  CardCvv = "card-cvv",
6
6
  CardHolderName = "card-holder-name"
7
7
  }
8
+ export declare enum HostedFieldValidationEvents {
9
+ BuiltInValidationShow = "hosted-field-built-in-validation-show",
10
+ BuiltInValidationHide = "hosted-field-built-in-validation-hide",
11
+ ValidationCvvTooltipShow = "hosted-field-validation-cvv-tooltip-show",
12
+ ValidationCvvTooltipHide = "hosted-field-validation-cvv-tooltip-hide",
13
+ ValidationShow = "hosted-field-validation-show",
14
+ ValidationHide = "hosted-field-validation-hide",
15
+ Validate = "hosted-field-validate",
16
+ ValidatePassData = "hosted-field-validate-pass-data",
17
+ ValidateForm = "hosted-field-validate-form",
18
+ ValidateFormValid = "hosted-field-validate-form-valid"
19
+ }
@@ -1,24 +1,22 @@
1
1
  export declare const ValidationMessages: {
2
2
  CardNumber: {
3
- Required: string;
4
- CharactersLessThan12: string;
5
- NumberIsNotValid: string;
3
+ Required: any;
4
+ CharactersLessThan12: any;
5
+ NumberIsNotValid: any;
6
6
  };
7
7
  CardExpiration: {
8
- Required: string;
9
- NotCompleted: string;
10
- YearNotValid: string;
11
- MonthNotValid: string;
12
- HasExpired: string;
8
+ NotCompleted: any;
9
+ YearNotValid: any;
10
+ MonthNotValid: any;
11
+ ExpiryDateNotValid: any;
13
12
  };
14
13
  CardCvv: {
15
- CodeIsNotValid: string;
16
- CodeIsLessThan3Digits: string;
17
- CodeMustBe3Digits: string;
18
- AmexCodeMustBe4Digits: string;
14
+ CodeIsNotValid: any;
15
+ CodeIsLessThan3Digits: any;
16
+ CodeMustBe3Digits: any;
17
+ AmexCodeMustBe4Digits: any;
19
18
  };
20
19
  CardHolderName: {
21
- Required: string;
22
- CharactersLessThan2: string;
20
+ NotValidCardHolderName: any;
23
21
  };
24
22
  };
@@ -52,6 +52,15 @@ export default class Card {
52
52
  * @param e
53
53
  */
54
54
  static restrictNumeric(e: KeyboardEvent): void;
55
+ /**
56
+ * restrictNumericOnInput
57
+ *
58
+ * Restricts input in a target element to only
59
+ * numeric data for input event type.
60
+ *
61
+ * @param e
62
+ */
63
+ static restrictNumericOnInput(e: Event): void;
55
64
  /**
56
65
  * deleteProperly
57
66
  *
@@ -93,6 +102,16 @@ export default class Card {
93
102
  * @param e
94
103
  */
95
104
  static validateExpiration(e: Event): void;
105
+ /**
106
+ * validateCardHolderName
107
+ *
108
+ * Validates a target element"s value based on the
109
+ * possible Card Holder name. Adds a class to the target
110
+ * element to note `valid` or `invalid`.
111
+ *
112
+ * @param e
113
+ */
114
+ static validateCardHolderName(e: Event): void;
96
115
  /**
97
116
  * validateInstallmentFields
98
117
  *
@@ -128,4 +147,15 @@ export default class Card {
128
147
  * @param selector
129
148
  */
130
149
  static attachCvvEvents(selector: string): void;
150
+ /**
151
+ * attachCardHolderNameEvents
152
+ *
153
+ * @param selector
154
+ */
155
+ static attachCardHolderNameEvents(selector: string): void;
156
+ private static handleHostedFieldValidation;
157
+ private static focusOutHostedFieldValidationHandler;
158
+ private static focusInHostedFieldValidationHandler;
159
+ private static getFieldEventData;
160
+ private static getCardType;
131
161
  }
@@ -0,0 +1,2 @@
1
+ export declare function setCurrentLanguage(lang?: string): string;
2
+ export declare function getCurrentLanguage(): string;
@@ -1,16 +1,17 @@
1
1
  export declare const fieldStyles: (assetBaseUrl: string) => {
2
+ "@font-face": {
3
+ "font-family": string;
4
+ src: string;
5
+ };
2
6
  "#secure-payment-field[type=text].field-validation-wrapper": {
3
7
  "font-family": string;
4
8
  };
5
- "#secure-payment-field[type=tel].invalid": {
9
+ "#secure-payment-field[type=tel].hf-invalid": {
6
10
  border: string;
7
11
  };
8
- "#secure-payment-field[type=text].invalid": {
12
+ "#secure-payment-field[type=text].hf-invalid": {
9
13
  border: string;
10
14
  };
11
- "img.card-number-icon.invalid": {
12
- "margin-top": string;
13
- };
14
15
  };
15
16
  declare const styles: (assetBaseUrl: string) => {};
16
17
  export default styles;
@@ -0,0 +1,25 @@
1
+ export declare const fieldStyles: (assetBaseUrl: string) => {
2
+ "img.card-number-icon": {
3
+ background: string;
4
+ "background-size": string;
5
+ width: string;
6
+ height: string;
7
+ right: string;
8
+ top: string;
9
+ "background-position": string;
10
+ };
11
+ "@font-face": {
12
+ "font-family": string;
13
+ src: string;
14
+ };
15
+ "#secure-payment-field[type=text].field-validation-wrapper": {
16
+ "font-family": string;
17
+ };
18
+ "#secure-payment-field[type=tel].hf-invalid": {
19
+ border: string;
20
+ };
21
+ "#secure-payment-field[type=text].hf-invalid": {
22
+ border: string;
23
+ };
24
+ };
25
+ export declare const styles: (assetBaseUrl: string) => {};
@@ -0,0 +1,37 @@
1
+ export declare const fieldStyles: (assetBaseUrl: string) => {
2
+ "img.card-number-icon": {
3
+ background: string;
4
+ right: string;
5
+ top: string;
6
+ width: string;
7
+ height: string;
8
+ "background-size": string;
9
+ };
10
+ "@font-face": {
11
+ "font-family": string;
12
+ src: string;
13
+ };
14
+ "#secure-payment-field[type=text].field-validation-wrapper": {
15
+ "font-family": string;
16
+ };
17
+ "#secure-payment-field[type=tel].hf-invalid": {
18
+ border: string;
19
+ };
20
+ "#secure-payment-field[type=text].hf-invalid": {
21
+ border: string;
22
+ };
23
+ };
24
+ export declare const styles: (assetBaseUrl: string) => {
25
+ ".secure-payment-form .hf-cvv-tooltip-invalid": {
26
+ border: string;
27
+ "border-left": string;
28
+ };
29
+ ".secure-payment-form .hf-cvv-tooltip-invalid:hover": {
30
+ border: string;
31
+ "border-left": string;
32
+ };
33
+ ".secure-payment-form .hf-cvv-tooltip-invalid:focus": {
34
+ border: string;
35
+ "border-left": string;
36
+ };
37
+ };
@@ -0,0 +1,24 @@
1
+ export declare const fieldStyles: (assetBaseUrl: string) => {
2
+ "img.card-number-icon": {
3
+ background: string;
4
+ "background-size": string;
5
+ width: string;
6
+ height: string;
7
+ right: string;
8
+ top: string;
9
+ };
10
+ "@font-face": {
11
+ "font-family": string;
12
+ src: string;
13
+ };
14
+ "#secure-payment-field[type=text].field-validation-wrapper": {
15
+ "font-family": string;
16
+ };
17
+ "#secure-payment-field[type=tel].hf-invalid": {
18
+ border: string;
19
+ };
20
+ "#secure-payment-field[type=text].hf-invalid": {
21
+ border: string;
22
+ };
23
+ };
24
+ export declare const styles: (assetBaseUrl: string) => {};
@@ -1,4 +1,35 @@
1
1
  export declare const fieldStyles: (assetBaseUrl: string) => {
2
+ "img.card-number-icon": {
3
+ background: string;
4
+ "background-size": string;
5
+ width: string;
6
+ height: string;
7
+ right: string;
8
+ top: string;
9
+ "background-position": string;
10
+ } | {
11
+ background: string;
12
+ "background-size": string;
13
+ width: string;
14
+ height: string;
15
+ right: string;
16
+ top: string;
17
+ "margin-top": string;
18
+ "background-position": string;
19
+ };
20
+ "@font-face"?: {
21
+ "font-family": string;
22
+ src: string;
23
+ };
24
+ "#secure-payment-field[type=text].field-validation-wrapper"?: {
25
+ "font-family": string;
26
+ };
27
+ "#secure-payment-field[type=tel].hf-invalid"?: {
28
+ border: string;
29
+ };
30
+ "#secure-payment-field[type=text].hf-invalid"?: {
31
+ border: string;
32
+ };
2
33
  "#secure-payment-field": {
3
34
  "-o-transition": string;
4
35
  "-webkit-box-shadow": string;
@@ -69,16 +100,6 @@ export declare const fieldStyles: (assetBaseUrl: string) => {
69
100
  background: string;
70
101
  "background-size": string;
71
102
  };
72
- "img.card-number-icon": {
73
- background: string;
74
- "background-size": string;
75
- width: string;
76
- height: string;
77
- right: string;
78
- top: string;
79
- "margin-top": string;
80
- "background-position": string;
81
- };
82
103
  "img.card-number-icon[src$='/gp-cc-generic.svg']": {
83
104
  background: string;
84
105
  "background-size": string;
@@ -470,11 +491,14 @@ export declare const parentStyles: (assetBaseUrl: string) => {
470
491
  height: string;
471
492
  "text-align": string;
472
493
  margin: string;
494
+ display: string;
495
+ "justify-content": string;
496
+ "align-items": string;
473
497
  };
474
498
  ".secure-payment-form div[class$='-shield'] .ssl-logo_ico": {
475
499
  width: string;
476
500
  height: string;
477
- "margin-top": string;
501
+ "margin-left": string;
478
502
  "vertical-align": string;
479
503
  };
480
504
  ".secure-payment-form div[class$='-shield'] .ssl-msg": {
@@ -497,14 +521,22 @@ export declare const parentStyles: (assetBaseUrl: string) => {
497
521
  height: string;
498
522
  "text-align": string;
499
523
  float: string;
524
+ display: string;
525
+ "justify-content": string;
500
526
  };
501
527
  ".secure-payment-form div[class$='-logo'] .security-msg": {
502
528
  color: string;
503
529
  "font-size": string;
504
530
  display: string;
505
531
  "vertical-align": string;
532
+ "white-space": string;
506
533
  "margin-right": string;
507
534
  };
535
+ ".secure-payment-form div[class$='-logo'] .security-msg strong": {
536
+ "white-space": string;
537
+ "font-weight": string;
538
+ display: string;
539
+ };
508
540
  ".secure-payment-form div[class$='-logo'] img": {
509
541
  "vertical-align": string;
510
542
  };
@@ -1,4 +1,33 @@
1
1
  export declare const fieldStyles: (assetBaseUrl: string) => {
2
+ "img.card-number-icon": {
3
+ background: string;
4
+ right: string;
5
+ top: string;
6
+ width: string;
7
+ height: string;
8
+ "background-size": string;
9
+ } | {
10
+ background: string;
11
+ right: string;
12
+ top: string;
13
+ width: string;
14
+ height: string;
15
+ "margin-top": string;
16
+ "background-size": string;
17
+ };
18
+ "@font-face"?: {
19
+ "font-family": string;
20
+ src: string;
21
+ };
22
+ "#secure-payment-field[type=text].field-validation-wrapper"?: {
23
+ "font-family": string;
24
+ };
25
+ "#secure-payment-field[type=tel].hf-invalid"?: {
26
+ border: string;
27
+ };
28
+ "#secure-payment-field[type=text].hf-invalid"?: {
29
+ border: string;
30
+ };
2
31
  "*": {
3
32
  "box-sizing": string;
4
33
  };
@@ -75,15 +104,6 @@ export declare const fieldStyles: (assetBaseUrl: string) => {
75
104
  ".card-cvv.card-type-amex": {
76
105
  "background-image": string;
77
106
  };
78
- "img.card-number-icon": {
79
- background: string;
80
- right: string;
81
- top: string;
82
- width: string;
83
- height: string;
84
- "margin-top": string;
85
- "background-size": string;
86
- };
87
107
  "img.card-number-icon.card-type-amex": {
88
108
  "background-image": string;
89
109
  };
@@ -107,6 +127,18 @@ export declare const fieldStyles: (assetBaseUrl: string) => {
107
127
  };
108
128
  };
109
129
  export declare const parentStyles: (assetBaseUrl: string) => {
130
+ ".secure-payment-form .hf-cvv-tooltip-invalid"?: {
131
+ border: string;
132
+ "border-left": string;
133
+ };
134
+ ".secure-payment-form .hf-cvv-tooltip-invalid:hover"?: {
135
+ border: string;
136
+ "border-left": string;
137
+ };
138
+ ".secure-payment-form .hf-cvv-tooltip-invalid:focus"?: {
139
+ border: string;
140
+ "border-left": string;
141
+ };
110
142
  "#googlePay": {
111
143
  height: string;
112
144
  margin: string;
@@ -770,11 +802,14 @@ export declare const parentStyles: (assetBaseUrl: string) => {
770
802
  height: string;
771
803
  "text-align": string;
772
804
  margin: string;
805
+ display: string;
806
+ "justify-content": string;
807
+ "align-items": string;
773
808
  };
774
809
  ".secure-payment-form div[class$='-shield'] .ssl-logo_ico": {
775
810
  width: string;
776
811
  height: string;
777
- "margin-top": string;
812
+ "margin-left": string;
778
813
  "vertical-align": string;
779
814
  };
780
815
  ".secure-payment-form div[class$='-shield'] .ssl-msg": {
@@ -796,14 +831,22 @@ export declare const parentStyles: (assetBaseUrl: string) => {
796
831
  width: string;
797
832
  height: string;
798
833
  "text-align": string;
834
+ display: string;
835
+ "justify-content": string;
799
836
  };
800
837
  ".secure-payment-form div[class$='-logo'] .security-msg": {
801
838
  color: string;
802
839
  "font-size": string;
803
840
  display: string;
804
841
  "vertical-align": string;
842
+ "white-space": string;
805
843
  "margin-right": string;
806
844
  };
845
+ ".secure-payment-form div[class$='-logo'] .security-msg strong": {
846
+ "white-space": string;
847
+ "font-weight": string;
848
+ display: string;
849
+ };
807
850
  ".secure-payment-form div[class$='-logo'] img": {
808
851
  "vertical-align": string;
809
852
  };
@@ -1,4 +1,34 @@
1
1
  export declare const fieldStyles: (assetBaseUrl: string) => {
2
+ "img.card-number-icon": {
3
+ background: string;
4
+ "background-size": string;
5
+ width: string;
6
+ height: string;
7
+ right: string;
8
+ top: string;
9
+ } | {
10
+ background: string;
11
+ "background-size": string;
12
+ width: string;
13
+ height: string;
14
+ right: string;
15
+ top: string;
16
+ "margin-top": string;
17
+ "background-position": string;
18
+ };
19
+ "@font-face"?: {
20
+ "font-family": string;
21
+ src: string;
22
+ };
23
+ "#secure-payment-field[type=text].field-validation-wrapper"?: {
24
+ "font-family": string;
25
+ };
26
+ "#secure-payment-field[type=tel].hf-invalid"?: {
27
+ border: string;
28
+ };
29
+ "#secure-payment-field[type=text].hf-invalid"?: {
30
+ border: string;
31
+ };
2
32
  html: {
3
33
  "font-size": string;
4
34
  };
@@ -51,16 +81,6 @@ export declare const fieldStyles: (assetBaseUrl: string) => {
51
81
  background: string;
52
82
  "background-size": string;
53
83
  };
54
- "img.card-number-icon": {
55
- background: string;
56
- "background-size": string;
57
- width: string;
58
- height: string;
59
- right: string;
60
- top: string;
61
- "margin-top": string;
62
- "background-position": string;
63
- };
64
84
  "img.card-number-icon[src$='/gp-cc-generic.svg']": {
65
85
  background: string;
66
86
  "background-size": string;
@@ -455,11 +475,14 @@ export declare const parentStyles: (assetBaseUrl: string) => {
455
475
  height: string;
456
476
  "text-align": string;
457
477
  margin: string;
478
+ display: string;
479
+ "justify-content": string;
480
+ "align-items": string;
458
481
  };
459
482
  ".secure-payment-form div[class$='-shield'] .ssl-logo_ico": {
460
483
  width: string;
461
484
  height: string;
462
- "margin-top": string;
485
+ "margin-left": string;
463
486
  "vertical-align": string;
464
487
  };
465
488
  ".secure-payment-form div[class$='-shield'] .ssl-msg": {
@@ -482,14 +505,22 @@ export declare const parentStyles: (assetBaseUrl: string) => {
482
505
  height: string;
483
506
  "text-align": string;
484
507
  float: string;
508
+ display: string;
509
+ "justify-content": string;
485
510
  };
486
511
  ".secure-payment-form div[class$='-logo'] .security-msg": {
487
512
  color: string;
488
513
  "font-size": string;
489
514
  display: string;
490
515
  "vertical-align": string;
516
+ "white-space": string;
491
517
  "margin-right": string;
492
518
  };
519
+ ".secure-payment-form div[class$='-logo'] .security-msg strong": {
520
+ "white-space": string;
521
+ "font-weight": string;
522
+ display: string;
523
+ };
493
524
  ".secure-payment-form div[class$='-logo'] img": {
494
525
  "vertical-align": string;
495
526
  };
@@ -0,0 +1,5 @@
1
+ declare function translateMessage(lang: string, message: string): any;
2
+ declare function translateObj(lang: string, object: any): {
3
+ [key: string]: string;
4
+ };
5
+ export { translateMessage, translateObj };
@@ -0,0 +1,48 @@
1
+ declare const en: {
2
+ labels: {
3
+ "card-number": string;
4
+ "card-expiration": string;
5
+ "card-cvv": string;
6
+ "card-holder-name": string;
7
+ submit: string;
8
+ };
9
+ values: {
10
+ "card-track": string;
11
+ submit: string;
12
+ };
13
+ validationMessages: {
14
+ CardNumber: {
15
+ Required: string;
16
+ CharactersLessThan12: string;
17
+ NumberIsNotValid: string;
18
+ };
19
+ CardExpiration: {
20
+ NotCompleted: string;
21
+ YearNotValid: string;
22
+ MonthNotValid: string;
23
+ ExpiryDateNotValid: string;
24
+ };
25
+ CardCvv: {
26
+ CodeIsNotValid: string;
27
+ CodeIsLessThan3Digits: string;
28
+ CodeMustBe3Digits: string;
29
+ AmexCodeMustBe4Digits: string;
30
+ };
31
+ CardHolderName: {
32
+ NotValidCardHolderName: string;
33
+ };
34
+ };
35
+ footer: {
36
+ "ssl-msg-alt": string;
37
+ "ssl-msg": string;
38
+ "security-msg-alt": string;
39
+ "security-msg": string;
40
+ };
41
+ tooltip: {
42
+ title: string;
43
+ "aria-label": string;
44
+ text: string;
45
+ };
46
+ "other-cards-label": string;
47
+ };
48
+ export default en;
@@ -0,0 +1,6 @@
1
+ import { IDictionary } from "../util";
2
+ declare type Translations = {
3
+ [key: string]: IDictionary;
4
+ };
5
+ declare const translations: Translations;
6
+ export default translations;
@@ -0,0 +1,47 @@
1
+ declare const zh: {
2
+ labels: {
3
+ "card-cvv": string;
4
+ "card-expiration": string;
5
+ "card-holder-name": string;
6
+ "card-number": string;
7
+ submit: string;
8
+ };
9
+ values: {
10
+ submit: string;
11
+ };
12
+ validationMessages: {
13
+ CardNumber: {
14
+ Required: string;
15
+ CharactersLessThan12: string;
16
+ NumberIsNotValid: string;
17
+ };
18
+ CardExpiration: {
19
+ NotCompleted: string;
20
+ YearNotValid: string;
21
+ MonthNotValid: string;
22
+ ExpiryDateNotValid: string;
23
+ };
24
+ CardCvv: {
25
+ CodeIsNotValid: string;
26
+ CodeIsLessThan3Digits: string;
27
+ CodeMustBe3Digits: string;
28
+ AmexCodeMustBe4Digits: string;
29
+ };
30
+ CardHolderName: {
31
+ NotValidCardHolderName: string;
32
+ };
33
+ };
34
+ footer: {
35
+ "ssl-msg-alt": string;
36
+ "ssl-msg": string;
37
+ "security-msg-alt": string;
38
+ "security-msg": string;
39
+ };
40
+ tooltip: {
41
+ title: string;
42
+ "aria-label": string;
43
+ text: string;
44
+ };
45
+ "other-cards-label": string;
46
+ };
47
+ export default zh;
@@ -1,2 +1,2 @@
1
- declare const _default: "1.9.29";
1
+ declare const _default: "1.10.2";
2
2
  export default _default;
@@ -78,6 +78,7 @@ export interface IConfiguration extends IDictionary {
78
78
  mcc: string;
79
79
  currency: string;
80
80
  };
81
+ fieldValidation?: boolean;
81
82
  }
82
83
  declare const _default: (options: IConfiguration) => void;
83
84
  /**
@@ -5,6 +5,37 @@ export { IUIFormField } from "../iframe-field";
5
5
  export declare const fieldStyles: () => {
6
6
  blank: {};
7
7
  default: {
8
+ "img.card-number-icon": {
9
+ background: string;
10
+ "background-size": string;
11
+ width: string;
12
+ height: string;
13
+ right: string;
14
+ top: string;
15
+ "background-position": string;
16
+ } | {
17
+ background: string;
18
+ "background-size": string;
19
+ width: string;
20
+ height: string;
21
+ right: string;
22
+ top: string;
23
+ "margin-top": string;
24
+ "background-position": string;
25
+ };
26
+ "@font-face"?: {
27
+ "font-family": string;
28
+ src: string;
29
+ };
30
+ "#secure-payment-field[type=text].field-validation-wrapper"?: {
31
+ "font-family": string;
32
+ };
33
+ "#secure-payment-field[type=tel].hf-invalid"?: {
34
+ border: string;
35
+ };
36
+ "#secure-payment-field[type=text].hf-invalid"?: {
37
+ border: string;
38
+ };
8
39
  "#secure-payment-field": {
9
40
  "-o-transition": string;
10
41
  "-webkit-box-shadow": string;
@@ -75,16 +106,6 @@ export declare const fieldStyles: () => {
75
106
  background: string;
76
107
  "background-size": string;
77
108
  };
78
- "img.card-number-icon": {
79
- background: string;
80
- "background-size": string;
81
- width: string;
82
- height: string;
83
- right: string;
84
- top: string;
85
- "margin-top": string;
86
- "background-position": string;
87
- };
88
109
  "img.card-number-icon[src$='/gp-cc-generic.svg']": {
89
110
  background: string;
90
111
  "background-size": string;
@@ -128,11 +149,6 @@ export declare const fieldStyles: () => {
128
149
  width: string;
129
150
  };
130
151
  "img.card-number-icon.valid.card-type-jcb": {
131
- /**
132
- * Appends additional CSS rules to the group of hosted fields
133
- *
134
- * @param json New CSS rules
135
- */
136
152
  background: string;
137
153
  "background-size": string;
138
154
  "background-position-y": string;
@@ -155,6 +171,35 @@ export declare const fieldStyles: () => {
155
171
  };
156
172
  };
157
173
  "gp-default": {
174
+ "img.card-number-icon": {
175
+ background: string;
176
+ right: string;
177
+ top: string;
178
+ width: string;
179
+ height: string;
180
+ "background-size": string;
181
+ } | {
182
+ background: string;
183
+ right: string;
184
+ top: string;
185
+ width: string;
186
+ height: string;
187
+ "margin-top": string;
188
+ "background-size": string;
189
+ };
190
+ "@font-face"?: {
191
+ "font-family": string;
192
+ src: string;
193
+ };
194
+ "#secure-payment-field[type=text].field-validation-wrapper"?: {
195
+ "font-family": string;
196
+ };
197
+ "#secure-payment-field[type=tel].hf-invalid"?: {
198
+ border: string;
199
+ };
200
+ "#secure-payment-field[type=text].hf-invalid"?: {
201
+ border: string;
202
+ };
158
203
  "*": {
159
204
  "box-sizing": string;
160
205
  };
@@ -231,15 +276,6 @@ export declare const fieldStyles: () => {
231
276
  ".card-cvv.card-type-amex": {
232
277
  "background-image": string;
233
278
  };
234
- "img.card-number-icon": {
235
- background: string;
236
- right: string;
237
- top: string;
238
- width: string;
239
- height: string;
240
- "margin-top": string;
241
- "background-size": string;
242
- };
243
279
  "img.card-number-icon.card-type-amex": {
244
280
  "background-image": string;
245
281
  };
@@ -263,6 +299,36 @@ export declare const fieldStyles: () => {
263
299
  };
264
300
  };
265
301
  simple: {
302
+ "img.card-number-icon": {
303
+ background: string;
304
+ "background-size": string;
305
+ width: string;
306
+ height: string;
307
+ right: string;
308
+ top: string;
309
+ } | {
310
+ background: string;
311
+ "background-size": string;
312
+ width: string;
313
+ height: string;
314
+ right: string;
315
+ top: string;
316
+ "margin-top": string;
317
+ "background-position": string;
318
+ };
319
+ "@font-face"?: {
320
+ "font-family": string;
321
+ src: string;
322
+ };
323
+ "#secure-payment-field[type=text].field-validation-wrapper"?: {
324
+ "font-family": string;
325
+ };
326
+ "#secure-payment-field[type=tel].hf-invalid"?: {
327
+ border: string;
328
+ };
329
+ "#secure-payment-field[type=text].hf-invalid"?: {
330
+ border: string;
331
+ };
266
332
  html: {
267
333
  "font-size": string;
268
334
  };
@@ -315,16 +381,6 @@ export declare const fieldStyles: () => {
315
381
  background: string;
316
382
  "background-size": string;
317
383
  };
318
- "img.card-number-icon": {
319
- background: string;
320
- "background-size": string;
321
- width: string;
322
- height: string;
323
- right: string;
324
- top: string;
325
- "margin-top": string;
326
- "background-position": string;
327
- };
328
384
  "img.card-number-icon[src$='/gp-cc-generic.svg']": {
329
385
  background: string;
330
386
  "background-size": string;
@@ -479,22 +535,16 @@ export declare const parentStyles: () => {
479
535
  "background-color": string;
480
536
  color: string;
481
537
  "text-align": string;
482
- /**
538
+ "border-radius": string; /**
483
539
  * Represents logic surrounding a group of hosted fields.
484
540
  */
485
- "border-radius": string;
486
541
  border: string;
487
542
  padding: string;
488
543
  position: string;
489
544
  "z-index": string;
490
545
  "margin-left": string;
491
546
  "margin-top": string;
492
- opacity: string; /**
493
- * Instantiates a new UIForm object for a group of hosted fields
494
- *
495
- * @param fields Hosted field configuration
496
- * @param styles Custom CSS configuration
497
- */
547
+ opacity: string;
498
548
  transition: string;
499
549
  "font-family": string;
500
550
  "font-size": string;
@@ -718,9 +768,6 @@ export declare const parentStyles: () => {
718
768
  "margin-bottom": string;
719
769
  };
720
770
  ".secure-payment-form div[class$='-shield']": {
721
- /**
722
- * Deletes all hosted fields within the form
723
- */
724
771
  flex: string;
725
772
  "margin-right": string;
726
773
  float: string;
@@ -732,11 +779,14 @@ export declare const parentStyles: () => {
732
779
  height: string;
733
780
  "text-align": string;
734
781
  margin: string;
782
+ display: string;
783
+ "justify-content": string;
784
+ "align-items": string;
735
785
  };
736
786
  ".secure-payment-form div[class$='-shield'] .ssl-logo_ico": {
737
787
  width: string;
738
788
  height: string;
739
- "margin-top": string;
789
+ "margin-left": string;
740
790
  "vertical-align": string;
741
791
  };
742
792
  ".secure-payment-form div[class$='-shield'] .ssl-msg": {
@@ -759,14 +809,22 @@ export declare const parentStyles: () => {
759
809
  height: string;
760
810
  "text-align": string;
761
811
  float: string;
812
+ display: string;
813
+ "justify-content": string;
762
814
  };
763
815
  ".secure-payment-form div[class$='-logo'] .security-msg": {
764
816
  color: string;
765
817
  "font-size": string;
766
818
  display: string;
767
819
  "vertical-align": string;
820
+ "white-space": string;
768
821
  "margin-right": string;
769
822
  };
823
+ ".secure-payment-form div[class$='-logo'] .security-msg strong": {
824
+ "white-space": string;
825
+ "font-weight": string;
826
+ display: string;
827
+ };
770
828
  ".secure-payment-form div[class$='-logo'] img": {
771
829
  "vertical-align": string;
772
830
  };
@@ -816,6 +874,18 @@ export declare const parentStyles: () => {
816
874
  };
817
875
  };
818
876
  "gp-default": {
877
+ ".secure-payment-form .hf-cvv-tooltip-invalid"?: {
878
+ border: string;
879
+ "border-left": string;
880
+ };
881
+ ".secure-payment-form .hf-cvv-tooltip-invalid:hover"?: {
882
+ border: string;
883
+ "border-left": string;
884
+ };
885
+ ".secure-payment-form .hf-cvv-tooltip-invalid:focus"?: {
886
+ border: string;
887
+ "border-left": string;
888
+ };
819
889
  "#googlePay": {
820
890
  height: string;
821
891
  margin: string;
@@ -900,22 +970,16 @@ export declare const parentStyles: () => {
900
970
  "background-color": string;
901
971
  color: string;
902
972
  "text-align": string;
903
- /**
973
+ "border-radius": string; /**
904
974
  * Represents logic surrounding a group of hosted fields.
905
975
  */
906
- "border-radius": string;
907
976
  border: string;
908
977
  padding: string;
909
978
  position: string;
910
979
  "z-index": string;
911
980
  "margin-left": string;
912
981
  "margin-top": string;
913
- opacity: string; /**
914
- * Instantiates a new UIForm object for a group of hosted fields
915
- *
916
- * @param fields Hosted field configuration
917
- * @param styles Custom CSS configuration
918
- */
982
+ opacity: string;
919
983
  transition: string;
920
984
  "font-family": string;
921
985
  "font-size": string;
@@ -1198,12 +1262,6 @@ export declare const parentStyles: () => {
1198
1262
  "border-bottom": string;
1199
1263
  padding: string;
1200
1264
  };
1201
- /**
1202
- * Instantiates a new UIForm object for a group of hosted fields
1203
- *
1204
- * @param fields Hosted field configuration
1205
- * @param styles Custom CSS configuration
1206
- */
1207
1265
  ".secure-payment-form .installment-plan-monthly-amount": {
1208
1266
  color: string;
1209
1267
  "font-style": string;
@@ -1493,11 +1551,14 @@ export declare const parentStyles: () => {
1493
1551
  height: string;
1494
1552
  "text-align": string;
1495
1553
  margin: string;
1554
+ display: string;
1555
+ "justify-content": string;
1556
+ "align-items": string;
1496
1557
  };
1497
1558
  ".secure-payment-form div[class$='-shield'] .ssl-logo_ico": {
1498
1559
  width: string;
1499
1560
  height: string;
1500
- "margin-top": string;
1561
+ "margin-left": string;
1501
1562
  "vertical-align": string;
1502
1563
  };
1503
1564
  ".secure-payment-form div[class$='-shield'] .ssl-msg": {
@@ -1519,17 +1580,28 @@ export declare const parentStyles: () => {
1519
1580
  width: string;
1520
1581
  height: string;
1521
1582
  "text-align": string;
1583
+ display: string;
1584
+ "justify-content": string;
1522
1585
  };
1523
1586
  ".secure-payment-form div[class$='-logo'] .security-msg": {
1524
1587
  color: string;
1525
1588
  "font-size": string;
1526
1589
  display: string;
1527
1590
  "vertical-align": string;
1591
+ "white-space": string;
1528
1592
  "margin-right": string;
1529
1593
  };
1594
+ ".secure-payment-form div[class$='-logo'] .security-msg strong": {
1595
+ "white-space": string;
1596
+ "font-weight": string;
1597
+ display: string;
1598
+ };
1530
1599
  ".secure-payment-form div[class$='-logo'] img": {
1531
1600
  "vertical-align": string;
1532
1601
  };
1602
+ /**
1603
+ * Deletes all hosted fields within the form
1604
+ */
1533
1605
  ".secure-payment-form .credit-card-submit": {
1534
1606
  margin: string;
1535
1607
  };
@@ -1711,22 +1783,16 @@ export declare const parentStyles: () => {
1711
1783
  "background-color": string;
1712
1784
  color: string;
1713
1785
  "text-align": string;
1714
- /**
1786
+ "border-radius": string; /**
1715
1787
  * Represents logic surrounding a group of hosted fields.
1716
1788
  */
1717
- "border-radius": string;
1718
1789
  border: string;
1719
1790
  padding: string;
1720
1791
  position: string;
1721
1792
  "z-index": string;
1722
1793
  "margin-left": string;
1723
1794
  "margin-top": string;
1724
- opacity: string; /**
1725
- * Instantiates a new UIForm object for a group of hosted fields
1726
- *
1727
- * @param fields Hosted field configuration
1728
- * @param styles Custom CSS configuration
1729
- */
1795
+ opacity: string;
1730
1796
  transition: string;
1731
1797
  "font-family": string;
1732
1798
  "font-size": string;
@@ -1961,12 +2027,18 @@ export declare const parentStyles: () => {
1961
2027
  width: string;
1962
2028
  height: string;
1963
2029
  "text-align": string;
2030
+ /**
2031
+ * Deletes all hosted fields within the form
2032
+ */
1964
2033
  margin: string;
2034
+ display: string;
2035
+ "justify-content": string;
2036
+ "align-items": string;
1965
2037
  };
1966
2038
  ".secure-payment-form div[class$='-shield'] .ssl-logo_ico": {
1967
2039
  width: string;
1968
2040
  height: string;
1969
- "margin-top": string;
2041
+ "margin-left": string;
1970
2042
  "vertical-align": string;
1971
2043
  };
1972
2044
  ".secure-payment-form div[class$='-shield'] .ssl-msg": {
@@ -1989,14 +2061,22 @@ export declare const parentStyles: () => {
1989
2061
  height: string;
1990
2062
  "text-align": string;
1991
2063
  float: string;
2064
+ display: string;
2065
+ "justify-content": string;
1992
2066
  };
1993
2067
  ".secure-payment-form div[class$='-logo'] .security-msg": {
1994
2068
  color: string;
1995
2069
  "font-size": string;
1996
2070
  display: string;
1997
2071
  "vertical-align": string;
2072
+ "white-space": string;
1998
2073
  "margin-right": string;
1999
2074
  };
2075
+ ".secure-payment-form div[class$='-logo'] .security-msg strong": {
2076
+ "white-space": string;
2077
+ "font-weight": string;
2078
+ display: string;
2079
+ };
2000
2080
  ".secure-payment-form div[class$='-logo'] img": {
2001
2081
  "vertical-align": string;
2002
2082
  };
@@ -2136,5 +2216,7 @@ export default class UIForm {
2136
2216
  private requestDataFromAll;
2137
2217
  setSubtotalAmount(amount: string): void;
2138
2218
  private requestInstallmentData;
2219
+ private configureHostedFieldValidations;
2220
+ private validateForm;
2139
2221
  private submitForm;
2140
2222
  }
@@ -1,6 +1,8 @@
1
- declare const _default: (fieldType: string) => void;
1
+ declare const _default: (id: string, fieldType: string) => void;
2
2
  /**
3
3
  * Hide the validation message for a hosted field
4
4
  *
5
+ * @param id The hosted field id
6
+ * @param fieldType The hosted field type
5
7
  */
6
8
  export default _default;
@@ -1,7 +1,9 @@
1
- declare const _default: (validationMessage: string, fieldType: string) => void;
1
+ declare const _default: (id: string, validationMessage: string, fieldType: string) => void;
2
2
  /**
3
3
  * Show the validation message for a hosted field
4
4
  *
5
+ * @param id The hosted field id
5
6
  * @param validationMessage The desired validation message
7
+ * @param fieldType The hosted field type
6
8
  */
7
9
  export default _default;
@@ -150,5 +150,21 @@ export declare class IframeField extends EventEmitter {
150
150
  * @param title The desired title
151
151
  */
152
152
  setTitle(title: string): void;
153
+ /**
154
+ * Show the validation of a hosted field
155
+ *
156
+ * @param validationMessage The desired validation message
157
+ */
158
+ showValidation(validationMessage: string): void;
159
+ /**
160
+ * Hide the validation of a hosted field
161
+ *
162
+ */
163
+ hideValidation(): void;
164
+ /**
165
+ * Validate hosted field
166
+ *
167
+ */
168
+ validate(): void;
153
169
  private makeFrame;
154
170
  }