@globalpayments/js 1.9.29 → 2.0.0

package/README.md

@@ -146,7 +146,7 @@ The tokenization account name for the given merchant account. Only required if t
 
 > Note: Applies to GP API only.
 
-The target API version. Default is `2020-10-22`.
+The target API version. Default is `2021-03-22`.
 
 ##### `reference` - `string` (Optional)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalpayments/js",
-  "version": "1.9.29",
+  "version": "2.0.0",
   "author": "Heartland Developer Portal <developers@heartland.us>",
   "license": "GPL-2.0",
   "repository": {
@@ -18,7 +18,7 @@
     "cypress:open": "cypress open",
     "format": "prettier --write config/**/* src/**/* !src/assets/**/* !test/run.sh !test/run.ps1 test/fixtures/**/*.html",
     
-    "postbuild": "cross-os postbuild-cross",
+    "postbuild": "xcopy src\\assets dist\\ /e/y/h && node bin/replace-gp-ref.js",
 
     "prebuild": "yarn test:lint && node bin/update-version.js",
     "prepublish": "yarn build",

package/types/common/browser-helpers.d.ts

@@ -0,0 +1,2 @@
+export declare const isSafari: boolean;
+export declare const isIE: boolean;

package/types/common/enums.d.ts

@@ -5,3 +5,15 @@ export declare enum CardFormFieldNames {
     CardCvv = "card-cvv",
     CardHolderName = "card-holder-name"
 }
+export declare enum HostedFieldValidationEvents {
+    BuiltInValidationShow = "hosted-field-built-in-validation-show",
+    BuiltInValidationHide = "hosted-field-built-in-validation-hide",
+    ValidationCvvTooltipShow = "hosted-field-validation-cvv-tooltip-show",
+    ValidationCvvTooltipHide = "hosted-field-validation-cvv-tooltip-hide",
+    ValidationShow = "hosted-field-validation-show",
+    ValidationHide = "hosted-field-validation-hide",
+    Validate = "hosted-field-validate",
+    ValidatePassData = "hosted-field-validate-pass-data",
+    ValidateForm = "hosted-field-validate-form",
+    ValidateFormValid = "hosted-field-validate-form-valid"
+}

package/types/index.d.ts

@@ -9,7 +9,7 @@ import Events from "./internal/lib/events";
 import * as paymentRequest from "./payment-request";
 import * as configure from "./tools/configure";
 import * as ui from "./ui";
-import * as enums from "./internal/lib/eums";
+import * as enums from "./internal/lib/enums";
 declare const _default: {
     configure: (options: configure.IConfiguration) => void;
     creditCard: typeof creditCard;

package/types/internal/built-in-validations/english-characters-validation.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Validate a string to accept only english characters
+ *
+ * @param value
+ * @returns escaped text
+ */
+export default function containsOnlyEnglishCharacters(value: string): boolean;

package/types/internal/built-in-validations/messages.d.ts

@@ -1,24 +1,24 @@
 export declare const ValidationMessages: {
     CardNumber: {
-        Required: string;
-        CharactersLessThan12: string;
-        NumberIsNotValid: string;
+        Required: any;
+        CharactersLessThan12: any;
+        NumberIsNotValid: any;
+        NotAllowedCardType: any;
     };
     CardExpiration: {
-        Required: string;
-        NotCompleted: string;
-        YearNotValid: string;
-        MonthNotValid: string;
-        HasExpired: string;
+        NotCompleted: any;
+        YearNotValid: any;
+        MonthNotValid: any;
+        ExpiryDateNotValid: any;
     };
     CardCvv: {
-        CodeIsNotValid: string;
-        CodeIsLessThan3Digits: string;
-        CodeMustBe3Digits: string;
-        AmexCodeMustBe4Digits: string;
+        CodeIsNotValid: any;
+        CodeIsLessThan3Digits: any;
+        CodeMustBe3Digits: any;
+        AmexCodeMustBe4Digits: any;
     };
     CardHolderName: {
-        Required: string;
-        CharactersLessThan2: string;
+        NotValidCardHolderName: any;
+        CharactersMoreThan100: any;
     };
 };

package/types/internal/lib/card.d.ts

@@ -52,6 +52,15 @@ export default class Card {
      * @param e
      */
     static restrictNumeric(e: KeyboardEvent): void;
+    /**
+     * restrictNumericOnInput
+     *
+     * Restricts input in a target element to only
+     * numeric data for input event type.
+     *
+     * @param e
+     */
+    static restrictNumericOnInput(e: Event): void;
     /**
      * deleteProperly
      *
@@ -93,6 +102,16 @@ export default class Card {
      * @param e
      */
     static validateExpiration(e: Event): void;
+    /**
+     * validateCardHolderName
+     *
+     * Validates a target element"s value based on the
+     * possible Card Holder name. Adds a class to the target
+     * element to note `valid` or `invalid`.
+     *
+     * @param e
+     */
+    static validateCardHolderName(e: Event): void;
     /**
      * validateInstallmentFields
      *
@@ -128,4 +147,15 @@ export default class Card {
      * @param selector
      */
     static attachCvvEvents(selector: string): void;
+    /**
+     * attachCardHolderNameEvents
+     *
+     * @param selector
+     */
+    static attachCardHolderNameEvents(selector: string): void;
+    private static handleHostedFieldValidation;
+    private static focusOutHostedFieldValidationHandler;
+    private static focusInHostedFieldValidationHandler;
+    private static getFieldEventData;
+    private static getCardType;
 }

package/types/internal/lib/detectLanguage.d.ts

@@ -0,0 +1,3 @@
+import { Language } from "./enums";
+export declare function setCurrentLanguage(lang?: Language): string;
+export declare function getCurrentLanguage(): string;

package/types/internal/lib/{eums.d.ts → enums.d.ts}

@@ -9,3 +9,11 @@ export declare enum CardNetwork {
     Amex = "AMEX",
     Discover = "DISCOVER"
 }
+export declare enum CharacterValidation {
+    englishOnly = "englishOnly",
+    none = "none"
+}
+export declare enum Language {
+    en = "en",
+    zh = "zh"
+}

package/types/internal/lib/styles/built-in-validations/common.d.ts

@@ -1,16 +1,17 @@
 export declare const fieldStyles: (assetBaseUrl: string) => {
+    "@font-face": {
+        "font-family": string;
+        src: string;
+    };
     "#secure-payment-field[type=text].field-validation-wrapper": {
         "font-family": string;
     };
-    "#secure-payment-field[type=tel].invalid": {
+    "#secure-payment-field[type=tel].hf-invalid": {
         border: string;
     };
-    "#secure-payment-field[type=text].invalid": {
+    "#secure-payment-field[type=text].hf-invalid": {
         border: string;
     };
-    "img.card-number-icon.invalid": {
-        "margin-top": string;
-    };
 };
 declare const styles: (assetBaseUrl: string) => {};
 export default styles;

package/types/internal/lib/styles/built-in-validations/default.d.ts

@@ -0,0 +1,25 @@
+export declare const fieldStyles: (assetBaseUrl: string) => {
+    "img.card-number-icon": {
+        background: string;
+        "background-size": string;
+        width: string;
+        height: string;
+        right: string;
+        top: string;
+        "background-position": string;
+    };
+    "@font-face": {
+        "font-family": string;
+        src: string;
+    };
+    "#secure-payment-field[type=text].field-validation-wrapper": {
+        "font-family": string;
+    };
+    "#secure-payment-field[type=tel].hf-invalid": {
+        border: string;
+    };
+    "#secure-payment-field[type=text].hf-invalid": {
+        border: string;
+    };
+};
+export declare const styles: (assetBaseUrl: string) => {};

package/types/internal/lib/styles/built-in-validations/gp-default.d.ts

@@ -0,0 +1,37 @@
+export declare const fieldStyles: (assetBaseUrl: string) => {
+    "img.card-number-icon": {
+        background: string;
+        right: string;
+        top: string;
+        width: string;
+        height: string;
+        "background-size": string;
+    };
+    "@font-face": {
+        "font-family": string;
+        src: string;
+    };
+    "#secure-payment-field[type=text].field-validation-wrapper": {
+        "font-family": string;
+    };
+    "#secure-payment-field[type=tel].hf-invalid": {
+        border: string;
+    };
+    "#secure-payment-field[type=text].hf-invalid": {
+        border: string;
+    };
+};
+export declare const styles: (assetBaseUrl: string) => {
+    ".secure-payment-form .hf-cvv-tooltip-invalid": {
+        border: string;
+        "border-left": string;
+    };
+    ".secure-payment-form .hf-cvv-tooltip-invalid:hover": {
+        border: string;
+        "border-left": string;
+    };
+    ".secure-payment-form .hf-cvv-tooltip-invalid:focus": {
+        border: string;
+        "border-left": string;
+    };
+};

package/types/internal/lib/styles/built-in-validations/simple.d.ts

@@ -0,0 +1,24 @@
+export declare const fieldStyles: (assetBaseUrl: string) => {
+    "img.card-number-icon": {
+        background: string;
+        "background-size": string;
+        width: string;
+        height: string;
+        right: string;
+        top: string;
+    };
+    "@font-face": {
+        "font-family": string;
+        src: string;
+    };
+    "#secure-payment-field[type=text].field-validation-wrapper": {
+        "font-family": string;
+    };
+    "#secure-payment-field[type=tel].hf-invalid": {
+        border: string;
+    };
+    "#secure-payment-field[type=text].hf-invalid": {
+        border: string;
+    };
+};
+export declare const styles: (assetBaseUrl: string) => {};

package/types/internal/lib/styles/default.d.ts

@@ -1,4 +1,35 @@
 export declare const fieldStyles: (assetBaseUrl: string) => {
+    "img.card-number-icon": {
+        background: string;
+        "background-size": string;
+        width: string;
+        height: string;
+        right: string;
+        top: string;
+        "background-position": string;
+    } | {
+        background: string;
+        "background-size": string;
+        width: string;
+        height: string;
+        right: string;
+        top: string;
+        "margin-top": string;
+        "background-position": string;
+    };
+    "@font-face"?: {
+        "font-family": string;
+        src: string;
+    };
+    "#secure-payment-field[type=text].field-validation-wrapper"?: {
+        "font-family": string;
+    };
+    "#secure-payment-field[type=tel].hf-invalid"?: {
+        border: string;
+    };
+    "#secure-payment-field[type=text].hf-invalid"?: {
+        border: string;
+    };
     "#secure-payment-field": {
         "-o-transition": string;
         "-webkit-box-shadow": string;
@@ -69,16 +100,6 @@ export declare const fieldStyles: (assetBaseUrl: string) => {
         background: string;
         "background-size": string;
     };
-    "img.card-number-icon": {
-        background: string;
-        "background-size": string;
-        width: string;
-        height: string;
-        right: string;
-        top: string;
-        "margin-top": string;
-        "background-position": string;
-    };
     "img.card-number-icon[src$='/gp-cc-generic.svg']": {
         background: string;
         "background-size": string;
@@ -470,11 +491,14 @@ export declare const parentStyles: (assetBaseUrl: string) => {
         height: string;
         "text-align": string;
         margin: string;
+        display: string;
+        "justify-content": string;
+        "align-items": string;
     };
     ".secure-payment-form div[class$='-shield'] .ssl-logo_ico": {
         width: string;
         height: string;
-        "margin-top": string;
+        "margin-left": string;
         "vertical-align": string;
     };
     ".secure-payment-form div[class$='-shield'] .ssl-msg": {
@@ -497,14 +521,22 @@ export declare const parentStyles: (assetBaseUrl: string) => {
         height: string;
         "text-align": string;
         float: string;
+        display: string;
+        "justify-content": string;
     };
     ".secure-payment-form div[class$='-logo'] .security-msg": {
         color: string;
         "font-size": string;
         display: string;
         "vertical-align": string;
+        "white-space": string;
         "margin-right": string;
     };
+    ".secure-payment-form div[class$='-logo'] .security-msg strong": {
+        "white-space": string;
+        "font-weight": string;
+        display: string;
+    };
     ".secure-payment-form div[class$='-logo'] img": {
         "vertical-align": string;
     };

package/types/internal/lib/styles/gp-default.d.ts

@@ -1,4 +1,33 @@
 export declare const fieldStyles: (assetBaseUrl: string) => {
+    "img.card-number-icon": {
+        background: string;
+        right: string;
+        top: string;
+        width: string;
+        height: string;
+        "background-size": string;
+    } | {
+        background: string;
+        right: string;
+        top: string;
+        width: string;
+        height: string;
+        "margin-top": string;
+        "background-size": string;
+    };
+    "@font-face"?: {
+        "font-family": string;
+        src: string;
+    };
+    "#secure-payment-field[type=text].field-validation-wrapper"?: {
+        "font-family": string;
+    };
+    "#secure-payment-field[type=tel].hf-invalid"?: {
+        border: string;
+    };
+    "#secure-payment-field[type=text].hf-invalid"?: {
+        border: string;
+    };
     "*": {
         "box-sizing": string;
     };
@@ -75,15 +104,6 @@ export declare const fieldStyles: (assetBaseUrl: string) => {
     ".card-cvv.card-type-amex": {
         "background-image": string;
     };
-    "img.card-number-icon": {
-        background: string;
-        right: string;
-        top: string;
-        width: string;
-        height: string;
-        "margin-top": string;
-        "background-size": string;
-    };
     "img.card-number-icon.card-type-amex": {
         "background-image": string;
     };
@@ -107,6 +127,18 @@ export declare const fieldStyles: (assetBaseUrl: string) => {
     };
 };
 export declare const parentStyles: (assetBaseUrl: string) => {
+    ".secure-payment-form .hf-cvv-tooltip-invalid"?: {
+        border: string;
+        "border-left": string;
+    };
+    ".secure-payment-form .hf-cvv-tooltip-invalid:hover"?: {
+        border: string;
+        "border-left": string;
+    };
+    ".secure-payment-form .hf-cvv-tooltip-invalid:focus"?: {
+        border: string;
+        "border-left": string;
+    };
     "#googlePay": {
         height: string;
         margin: string;
@@ -770,11 +802,14 @@ export declare const parentStyles: (assetBaseUrl: string) => {
         height: string;
         "text-align": string;
         margin: string;
+        display: string;
+        "justify-content": string;
+        "align-items": string;
     };
     ".secure-payment-form div[class$='-shield'] .ssl-logo_ico": {
         width: string;
         height: string;
-        "margin-top": string;
+        "margin-left": string;
         "vertical-align": string;
     };
     ".secure-payment-form div[class$='-shield'] .ssl-msg": {
@@ -796,14 +831,22 @@ export declare const parentStyles: (assetBaseUrl: string) => {
         width: string;
         height: string;
         "text-align": string;
+        display: string;
+        "justify-content": string;
     };
     ".secure-payment-form div[class$='-logo'] .security-msg": {
         color: string;
         "font-size": string;
         display: string;
         "vertical-align": string;
+        "white-space": string;
         "margin-right": string;
     };
+    ".secure-payment-form div[class$='-logo'] .security-msg strong": {
+        "white-space": string;
+        "font-weight": string;
+        display: string;
+    };
     ".secure-payment-form div[class$='-logo'] img": {
         "vertical-align": string;
     };

package/types/internal/lib/styles/simple.d.ts

@@ -1,4 +1,34 @@
 export declare const fieldStyles: (assetBaseUrl: string) => {
+    "img.card-number-icon": {
+        background: string;
+        "background-size": string;
+        width: string;
+        height: string;
+        right: string;
+        top: string;
+    } | {
+        background: string;
+        "background-size": string;
+        width: string;
+        height: string;
+        right: string;
+        top: string;
+        "margin-top": string;
+        "background-position": string;
+    };
+    "@font-face"?: {
+        "font-family": string;
+        src: string;
+    };
+    "#secure-payment-field[type=text].field-validation-wrapper"?: {
+        "font-family": string;
+    };
+    "#secure-payment-field[type=tel].hf-invalid"?: {
+        border: string;
+    };
+    "#secure-payment-field[type=text].hf-invalid"?: {
+        border: string;
+    };
     html: {
         "font-size": string;
     };
@@ -51,16 +81,6 @@ export declare const fieldStyles: (assetBaseUrl: string) => {
         background: string;
         "background-size": string;
     };
-    "img.card-number-icon": {
-        background: string;
-        "background-size": string;
-        width: string;
-        height: string;
-        right: string;
-        top: string;
-        "margin-top": string;
-        "background-position": string;
-    };
     "img.card-number-icon[src$='/gp-cc-generic.svg']": {
         background: string;
         "background-size": string;
@@ -455,11 +475,14 @@ export declare const parentStyles: (assetBaseUrl: string) => {
         height: string;
         "text-align": string;
         margin: string;
+        display: string;
+        "justify-content": string;
+        "align-items": string;
     };
     ".secure-payment-form div[class$='-shield'] .ssl-logo_ico": {
         width: string;
         height: string;
-        "margin-top": string;
+        "margin-left": string;
         "vertical-align": string;
     };
     ".secure-payment-form div[class$='-shield'] .ssl-msg": {
@@ -482,14 +505,22 @@ export declare const parentStyles: (assetBaseUrl: string) => {
         height: string;
         "text-align": string;
         float: string;
+        display: string;
+        "justify-content": string;
     };
     ".secure-payment-form div[class$='-logo'] .security-msg": {
         color: string;
         "font-size": string;
         display: string;
         "vertical-align": string;
+        "white-space": string;
         "margin-right": string;
     };
+    ".secure-payment-form div[class$='-logo'] .security-msg strong": {
+        "white-space": string;
+        "font-weight": string;
+        display: string;
+    };
     ".secure-payment-form div[class$='-logo'] img": {
         "vertical-align": string;
     };

package/types/internal/lib/translate.d.ts

@@ -0,0 +1,5 @@
+declare function translateMessage(lang: string, message: string): any;
+declare function translateObj(lang: string, object: any): {
+    [key: string]: string;
+};
+export { translateMessage, translateObj };

package/types/internal/lib/translations/en.d.ts

@@ -0,0 +1,50 @@
+declare const en: {
+    labels: {
+        "card-number": string;
+        "card-expiration": string;
+        "card-cvv": string;
+        "card-holder-name": string;
+        submit: string;
+    };
+    values: {
+        "card-track": string;
+        submit: string;
+    };
+    validationMessages: {
+        CardNumber: {
+            Required: string;
+            CharactersLessThan12: string;
+            NumberIsNotValid: string;
+            NotAllowedCardType: string;
+        };
+        CardExpiration: {
+            NotCompleted: string;
+            YearNotValid: string;
+            MonthNotValid: string;
+            ExpiryDateNotValid: string;
+        };
+        CardCvv: {
+            CodeIsNotValid: string;
+            CodeIsLessThan3Digits: string;
+            CodeMustBe3Digits: string;
+            AmexCodeMustBe4Digits: string;
+        };
+        CardHolderName: {
+            NotValidCardHolderName: string;
+            CharactersMoreThan100: string;
+        };
+    };
+    footer: {
+        "ssl-msg-alt": string;
+        "ssl-msg": string;
+        "security-msg-alt": string;
+        "security-msg": string;
+    };
+    tooltip: {
+        title: string;
+        "aria-label": string;
+        text: string;
+    };
+    "other-cards-label": string;
+};
+export default en;

package/types/internal/lib/translations/translations.d.ts

@@ -0,0 +1,6 @@
+import { IDictionary } from "../util";
+declare type Translations = {
+    [key: string]: IDictionary;
+};
+declare const translations: Translations;
+export default translations;

package/types/internal/lib/translations/zh.d.ts

@@ -0,0 +1,49 @@
+declare const zh: {
+    labels: {
+        "card-cvv": string;
+        "card-expiration": string;
+        "card-holder-name": string;
+        "card-number": string;
+        submit: string;
+    };
+    values: {
+        submit: string;
+    };
+    validationMessages: {
+        CardNumber: {
+            Required: string;
+            CharactersLessThan12: string;
+            NumberIsNotValid: string;
+            NotAllowedCardType: string;
+        };
+        CardExpiration: {
+            NotCompleted: string;
+            YearNotValid: string;
+            MonthNotValid: string;
+            ExpiryDateNotValid: string;
+        };
+        CardCvv: {
+            CodeIsNotValid: string;
+            CodeIsLessThan3Digits: string;
+            CodeMustBe3Digits: string;
+            AmexCodeMustBe4Digits: string;
+        };
+        CardHolderName: {
+            NotValidCardHolderName: string;
+            CharactersMoreThan100: string;
+        };
+    };
+    footer: {
+        "ssl-msg-alt": string;
+        "ssl-msg": string;
+        "security-msg-alt": string;
+        "security-msg": string;
+    };
+    tooltip: {
+        title: string;
+        "aria-label": string;
+        text: string;
+    };
+    "other-cards-label": string;
+};
+export default zh;

package/types/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.9.29";
+declare const _default: "2.0.0";
 export default _default;

package/types/tools/configure.d.ts

@@ -21,6 +21,7 @@ export interface IConfiguration extends IDictionary {
     customerReference?: string;
     validateOnly?: boolean;
     env?: string;
+    allowedCardTypes?: string[];
     apms?: {
         allowedCardNetworks?: string[];
         currencyCode?: string;
@@ -78,6 +79,10 @@ export interface IConfiguration extends IDictionary {
         mcc: string;
         currency: string;
     };
+    fieldValidation?: {
+        enabled?: boolean;
+        characterValidation?: string;
+    };
 }
 declare const _default: (options: IConfiguration) => void;
 /**

package/types/ui/form/index.d.ts

@@ -5,6 +5,37 @@ export { IUIFormField } from "../iframe-field";
 export declare const fieldStyles: () => {
     blank: {};
     default: {
+        "img.card-number-icon": {
+            background: string;
+            "background-size": string;
+            width: string;
+            height: string;
+            right: string;
+            top: string;
+            "background-position": string;
+        } | {
+            background: string;
+            "background-size": string;
+            width: string;
+            height: string;
+            right: string;
+            top: string;
+            "margin-top": string;
+            "background-position": string;
+        };
+        "@font-face"?: {
+            "font-family": string;
+            src: string;
+        };
+        "#secure-payment-field[type=text].field-validation-wrapper"?: {
+            "font-family": string;
+        };
+        "#secure-payment-field[type=tel].hf-invalid"?: {
+            border: string;
+        };
+        "#secure-payment-field[type=text].hf-invalid"?: {
+            border: string;
+        };
         "#secure-payment-field": {
             "-o-transition": string;
             "-webkit-box-shadow": string;
@@ -75,16 +106,6 @@ export declare const fieldStyles: () => {
             background: string;
             "background-size": string;
         };
-        "img.card-number-icon": {
-            background: string;
-            "background-size": string;
-            width: string;
-            height: string;
-            right: string;
-            top: string;
-            "margin-top": string;
-            "background-position": string;
-        };
         "img.card-number-icon[src$='/gp-cc-generic.svg']": {
             background: string;
             "background-size": string;
@@ -122,17 +143,16 @@ export declare const fieldStyles: () => {
             "background-position-y": string;
         };
         "img.card-number-icon.valid.card-type-discover": {
-            background: string;
+            background: string; /**
+             * Appends additional CSS rules to the group of hosted fields
+             *
+             * @param json New CSS rules
+             */
             "background-size": string;
             "background-position-y": string;
             width: string;
         };
         "img.card-number-icon.valid.card-type-jcb": {
-            /**
-             * Appends additional CSS rules to the group of hosted fields
-             *
-             * @param json New CSS rules
-             */
             background: string;
             "background-size": string;
             "background-position-y": string;
@@ -155,6 +175,35 @@ export declare const fieldStyles: () => {
         };
     };
     "gp-default": {
+        "img.card-number-icon": {
+            background: string;
+            right: string;
+            top: string;
+            width: string;
+            height: string;
+            "background-size": string;
+        } | {
+            background: string;
+            right: string;
+            top: string;
+            width: string;
+            height: string;
+            "margin-top": string;
+            "background-size": string;
+        };
+        "@font-face"?: {
+            "font-family": string;
+            src: string;
+        };
+        "#secure-payment-field[type=text].field-validation-wrapper"?: {
+            "font-family": string;
+        };
+        "#secure-payment-field[type=tel].hf-invalid"?: {
+            border: string;
+        };
+        "#secure-payment-field[type=text].hf-invalid"?: {
+            border: string;
+        };
         "*": {
             "box-sizing": string;
         };
@@ -231,15 +280,6 @@ export declare const fieldStyles: () => {
         ".card-cvv.card-type-amex": {
             "background-image": string;
         };
-        "img.card-number-icon": {
-            background: string;
-            right: string;
-            top: string;
-            width: string;
-            height: string;
-            "margin-top": string;
-            "background-size": string;
-        };
         "img.card-number-icon.card-type-amex": {
             "background-image": string;
         };
@@ -263,6 +303,36 @@ export declare const fieldStyles: () => {
         };
     };
     simple: {
+        "img.card-number-icon": {
+            background: string;
+            "background-size": string;
+            width: string;
+            height: string;
+            right: string;
+            top: string;
+        } | {
+            background: string;
+            "background-size": string;
+            width: string;
+            height: string;
+            right: string;
+            top: string;
+            "margin-top": string;
+            "background-position": string;
+        };
+        "@font-face"?: {
+            "font-family": string;
+            src: string;
+        };
+        "#secure-payment-field[type=text].field-validation-wrapper"?: {
+            "font-family": string;
+        };
+        "#secure-payment-field[type=tel].hf-invalid"?: {
+            border: string;
+        };
+        "#secure-payment-field[type=text].hf-invalid"?: {
+            border: string;
+        };
         html: {
             "font-size": string;
         };
@@ -315,18 +385,10 @@ export declare const fieldStyles: () => {
             background: string;
             "background-size": string;
         };
-        "img.card-number-icon": {
-            background: string;
-            "background-size": string;
-            width: string;
-            height: string;
-            right: string;
-            top: string;
-            "margin-top": string;
-            "background-position": string;
-        };
         "img.card-number-icon[src$='/gp-cc-generic.svg']": {
-            background: string;
+            background: string; /**
+             * Represents logic surrounding a group of hosted fields.
+             */
             "background-size": string;
             "background-position-y": string;
         };
@@ -479,9 +541,6 @@ export declare const parentStyles: () => {
             "background-color": string;
             color: string;
             "text-align": string;
-            /**
-             * Represents logic surrounding a group of hosted fields.
-             */
             "border-radius": string;
             border: string;
             padding: string;
@@ -489,12 +548,7 @@ export declare const parentStyles: () => {
             "z-index": string;
             "margin-left": string;
             "margin-top": string;
-            opacity: string; /**
-             * Instantiates a new UIForm object for a group of hosted fields
-             *
-             * @param fields Hosted field configuration
-             * @param styles Custom CSS configuration
-             */
+            opacity: string;
             transition: string;
             "font-family": string;
             "font-size": string;
@@ -718,9 +772,6 @@ export declare const parentStyles: () => {
             "margin-bottom": string;
         };
         ".secure-payment-form div[class$='-shield']": {
-            /**
-             * Deletes all hosted fields within the form
-             */
             flex: string;
             "margin-right": string;
             float: string;
@@ -732,11 +783,14 @@ export declare const parentStyles: () => {
             height: string;
             "text-align": string;
             margin: string;
+            display: string;
+            "justify-content": string;
+            "align-items": string;
         };
         ".secure-payment-form div[class$='-shield'] .ssl-logo_ico": {
             width: string;
             height: string;
-            "margin-top": string;
+            "margin-left": string;
             "vertical-align": string;
         };
         ".secure-payment-form div[class$='-shield'] .ssl-msg": {
@@ -759,14 +813,22 @@ export declare const parentStyles: () => {
             height: string;
             "text-align": string;
             float: string;
+            display: string;
+            "justify-content": string;
         };
         ".secure-payment-form div[class$='-logo'] .security-msg": {
             color: string;
             "font-size": string;
             display: string;
             "vertical-align": string;
+            "white-space": string;
             "margin-right": string;
         };
+        ".secure-payment-form div[class$='-logo'] .security-msg strong": {
+            "white-space": string;
+            "font-weight": string;
+            display: string;
+        };
         ".secure-payment-form div[class$='-logo'] img": {
             "vertical-align": string;
         };
@@ -816,6 +878,18 @@ export declare const parentStyles: () => {
         };
     };
     "gp-default": {
+        ".secure-payment-form .hf-cvv-tooltip-invalid"?: {
+            border: string;
+            "border-left": string;
+        };
+        ".secure-payment-form .hf-cvv-tooltip-invalid:hover"?: {
+            border: string;
+            "border-left": string;
+        };
+        ".secure-payment-form .hf-cvv-tooltip-invalid:focus"?: {
+            border: string;
+            "border-left": string;
+        };
         "#googlePay": {
             height: string;
             margin: string;
@@ -900,9 +974,6 @@ export declare const parentStyles: () => {
             "background-color": string;
             color: string;
             "text-align": string;
-            /**
-             * Represents logic surrounding a group of hosted fields.
-             */
             "border-radius": string;
             border: string;
             padding: string;
@@ -910,12 +981,7 @@ export declare const parentStyles: () => {
             "z-index": string;
             "margin-left": string;
             "margin-top": string;
-            opacity: string; /**
-             * Instantiates a new UIForm object for a group of hosted fields
-             *
-             * @param fields Hosted field configuration
-             * @param styles Custom CSS configuration
-             */
+            opacity: string;
             transition: string;
             "font-family": string;
             "font-size": string;
@@ -1198,12 +1264,6 @@ export declare const parentStyles: () => {
             "border-bottom": string;
             padding: string;
         };
-        /**
-         * Instantiates a new UIForm object for a group of hosted fields
-         *
-         * @param fields Hosted field configuration
-         * @param styles Custom CSS configuration
-         */
         ".secure-payment-form .installment-plan-monthly-amount": {
             color: string;
             "font-style": string;
@@ -1493,11 +1553,14 @@ export declare const parentStyles: () => {
             height: string;
             "text-align": string;
             margin: string;
+            display: string;
+            "justify-content": string;
+            "align-items": string;
         };
         ".secure-payment-form div[class$='-shield'] .ssl-logo_ico": {
             width: string;
             height: string;
-            "margin-top": string;
+            "margin-left": string;
             "vertical-align": string;
         };
         ".secure-payment-form div[class$='-shield'] .ssl-msg": {
@@ -1510,6 +1573,12 @@ export declare const parentStyles: () => {
             "vertical-align": string;
             "text-align": string;
             "margin-left": string;
+            /**
+             * Sets a special-case event listener that fires when all hosted
+             * fields in a form have registered / loaded
+             *
+             * @param fn The listener function
+             */
             "margin-right": string;
             "margin-top": string;
         };
@@ -1519,14 +1588,22 @@ export declare const parentStyles: () => {
             width: string;
             height: string;
             "text-align": string;
+            display: string;
+            "justify-content": string;
         };
         ".secure-payment-form div[class$='-logo'] .security-msg": {
             color: string;
             "font-size": string;
             display: string;
             "vertical-align": string;
+            "white-space": string;
             "margin-right": string;
         };
+        ".secure-payment-form div[class$='-logo'] .security-msg strong": {
+            "white-space": string;
+            "font-weight": string;
+            display: string;
+        };
         ".secure-payment-form div[class$='-logo'] img": {
             "vertical-align": string;
         };
@@ -1711,9 +1788,6 @@ export declare const parentStyles: () => {
             "background-color": string;
             color: string;
             "text-align": string;
-            /**
-             * Represents logic surrounding a group of hosted fields.
-             */
             "border-radius": string;
             border: string;
             padding: string;
@@ -1721,12 +1795,7 @@ export declare const parentStyles: () => {
             "z-index": string;
             "margin-left": string;
             "margin-top": string;
-            opacity: string; /**
-             * Instantiates a new UIForm object for a group of hosted fields
-             *
-             * @param fields Hosted field configuration
-             * @param styles Custom CSS configuration
-             */
+            opacity: string;
             transition: string;
             "font-family": string;
             "font-size": string;
@@ -1962,11 +2031,14 @@ export declare const parentStyles: () => {
             height: string;
             "text-align": string;
             margin: string;
+            display: string;
+            "justify-content": string;
+            "align-items": string;
         };
         ".secure-payment-form div[class$='-shield'] .ssl-logo_ico": {
             width: string;
             height: string;
-            "margin-top": string;
+            "margin-left": string;
             "vertical-align": string;
         };
         ".secure-payment-form div[class$='-shield'] .ssl-msg": {
@@ -1989,14 +2061,22 @@ export declare const parentStyles: () => {
             height: string;
             "text-align": string;
             float: string;
+            display: string;
+            "justify-content": string;
         };
         ".secure-payment-form div[class$='-logo'] .security-msg": {
             color: string;
             "font-size": string;
             display: string;
             "vertical-align": string;
+            "white-space": string;
             "margin-right": string;
         };
+        ".secure-payment-form div[class$='-logo'] .security-msg strong": {
+            "white-space": string;
+            "font-weight": string;
+            display: string;
+        };
         ".secure-payment-form div[class$='-logo'] img": {
             "vertical-align": string;
         };
@@ -2136,5 +2216,7 @@ export default class UIForm {
     private requestDataFromAll;
     setSubtotalAmount(amount: string): void;
     private requestInstallmentData;
+    private configureHostedFieldValidations;
+    private validateForm;
     private submitForm;
 }

package/types/ui/iframe-field/action-hide-validation.d.ts

@@ -1,6 +1,8 @@
-declare const _default: (fieldType: string) => void;
+declare const _default: (id: string, fieldType: string) => void;
 /**
  * Hide the validation message for a hosted field
  *
+ * @param id The hosted field id
+ * @param fieldType The hosted field type
  */
 export default _default;

package/types/ui/iframe-field/action-show-validation.d.ts

@@ -1,7 +1,9 @@
-declare const _default: (validationMessage: string, fieldType: string) => void;
+declare const _default: (id: string, validationMessage: string, fieldType: string) => void;
 /**
  * Show the validation message for a hosted field
  *
+ * @param id The hosted field id
  * @param validationMessage The desired validation message
+ * @param fieldType The hosted field type
  */
 export default _default;

package/types/ui/iframe-field/index.d.ts

@@ -150,5 +150,21 @@ export declare class IframeField extends EventEmitter {
      * @param title The desired title
      */
     setTitle(title: string): void;
+    /**
+     * Show the validation of a hosted field
+     *
+     * @param validationMessage The desired validation message
+     */
+    showValidation(validationMessage: string): void;
+    /**
+     * Hide the validation of a hosted field
+     *
+     */
+    hideValidation(): void;
+    /**
+     * Validate hosted field
+     *
+     */
+    validate(): void;
     private makeFrame;
 }