@globalpayments/js 1.9.20 → 1.9.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalpayments/js",
-  "version": "1.9.20",
+  "version": "1.9.21",
   "author": "Heartland Developer Portal <developers@heartland.us>",
   "license": "GPL-2.0",
   "repository": {

package/types/common/constants.d.ts

@@ -0,0 +1 @@
+export declare const HOSTED_FIELD_NAME_KEYS: string[];

package/types/common/enums.d.ts

@@ -0,0 +1,18 @@
+export declare enum CardFormFieldNames {
+    CardAccountNumber = "account-number",
+    CardNumber = "card-number",
+    CardExpiration = "card-expiration",
+    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",
+    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",
+    ValidateFormField = "hosted-field-validate-form-field",
+    ValidateFormValid = "hosted-field-validate-form-valid"
+}

package/types/common/html-element.d.ts

@@ -0,0 +1,88 @@
+export declare const createHtmlElement: (elementType: string, props?: {
+    id?: string | undefined;
+    className?: string | undefined;
+    attributes?: {
+        [key: string]: string;
+    }[] | undefined;
+} | undefined) => HTMLElement;
+export declare const createHtmlDivElement: (props?: {
+    id?: string | undefined;
+    className?: string | undefined;
+    attributes?: {
+        [key: string]: string;
+    }[] | undefined;
+} | undefined) => HTMLDivElement;
+export declare const createHtmlSpanElement: (props?: {
+    id?: string | undefined;
+    className?: string | undefined;
+    attributes?: {
+        [key: string]: string;
+    }[] | undefined;
+    textContent?: string | undefined;
+} | undefined) => HTMLSpanElement;
+export declare const createHtmlButtonElement: (props?: {
+    id?: string | undefined;
+    className?: string | undefined;
+    attributes?: {
+        [key: string]: string;
+    }[] | undefined;
+    textContent?: string | undefined;
+} | undefined) => HTMLButtonElement;
+export declare const createHtmlImageElement: (props?: {
+    id?: string | undefined;
+    className?: string | undefined;
+    attributes?: {
+        [key: string]: string;
+    }[] | undefined;
+    src: string;
+    alt: string;
+} | undefined) => HTMLImageElement;
+export declare const createHtmlUlElement: (props?: {
+    id?: string | undefined;
+    className?: string | undefined;
+    attributes?: {
+        [key: string]: string;
+    }[] | undefined;
+} | undefined) => HTMLUListElement;
+export declare const createHtmlLiElement: (props?: {
+    id?: string | undefined;
+    className?: string | undefined;
+    attributes?: {
+        [key: string]: string;
+    }[] | undefined;
+} | undefined) => HTMLLIElement;
+export declare enum HtmlAnchorTarget {
+    Blank = "_blank",
+    Self = "_self",
+    Parent = "_parent",
+    Top = "_top"
+}
+export declare const createHtmlAnchorElement: (props?: {
+    id?: string | undefined;
+    className?: string | undefined;
+    attributes?: {
+        [key: string]: string;
+    }[] | undefined;
+    textContent?: string | undefined;
+    target?: HtmlAnchorTarget | undefined;
+    href: string;
+} | undefined) => HTMLAnchorElement;
+export declare const createHtmlCheckboxElement: (props?: {
+    id?: string | undefined;
+    className?: string | undefined;
+    attributes?: {
+        [key: string]: string;
+    }[] | undefined;
+    name?: string | undefined;
+    textContent?: string | undefined;
+    checked: boolean;
+} | undefined) => HTMLInputElement;
+export declare const createHtmlLabelElement: (props?: {
+    id?: string | undefined;
+    className?: string | undefined;
+    attributes?: {
+        [key: string]: string;
+    }[] | undefined;
+    htmlFor: string;
+    textContent?: string | undefined;
+} | undefined) => HTMLLabelElement;

package/types/internal/built-in-validations/field-validator.d.ts

@@ -0,0 +1,4 @@
+export declare const validate: (fieldType: string, value: string, extraData?: any) => {
+    isValid: boolean;
+    message?: string;
+};

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

@@ -0,0 +1,2 @@
+export declare const showHostedFieldValidation: (fieldId: string | null, validationMessage: string, target?: string | undefined) => void;
+export declare const hideHostedFieldValidation: (fieldId: string | null, target?: string | undefined) => void;

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

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

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

@@ -93,6 +93,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 +138,11 @@ export default class Card {
      * @param selector
      */
     static attachCvvEvents(selector: string): void;
+    /**
+     * attachCardHolderNameEvents
+     *
+     * @param selector
+     */
+    static attachCardHolderNameEvents(selector: string): void;
+    private static handleHostedFieldValidation;
 }

package/types/internal/lib/installments/helpers/html-element.d.ts

@@ -1,3 +1,4 @@
+import { HtmlAnchorTarget as _HtmlAnchorTarget } from "../../../../common/html-element";
 export declare const createHtmlElement: (elementType: string, props?: {
     id?: string | undefined;
     className?: string | undefined;
@@ -51,12 +52,7 @@ export declare const createHtmlLiElement: (props?: {
         [key: string]: string;
     }[] | undefined;
 } | undefined) => HTMLLIElement;
-export declare enum HtmlAnchorTarget {
-    Blank = "_blank",
-    Self = "_self",
-    Parent = "_parent",
-    Top = "_top"
-}
+export declare const HtmlAnchorTarget: typeof _HtmlAnchorTarget;
 export declare const createHtmlAnchorElement: (props?: {
     id?: string | undefined;
     className?: string | undefined;
@@ -64,7 +60,7 @@ export declare const createHtmlAnchorElement: (props?: {
         [key: string]: string;
     }[] | undefined;
     textContent?: string | undefined;
-    target?: HtmlAnchorTarget | undefined;
+    target?: _HtmlAnchorTarget | undefined;
     href: string;
 } | undefined) => HTMLAnchorElement;
 export declare const createHtmlCheckboxElement: (props?: {

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

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

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

@@ -1,4 +1,164 @@
 export declare const fieldStyles: (assetBaseUrl: string) => {
+    "#secure-payment-field[type=text].field-validation-wrapper": {
+        "font-family": string;
+    };
+    "#secure-payment-field[type=tel].invalid": {
+        border: string;
+    };
+    "#secure-payment-field[type=text].invalid": {
+        border: string;
+    };
+    "img.card-number-icon.invalid": {
+        "margin-top": string;
+    };
+    "#secure-payment-field": {
+        "-o-transition": string;
+        "-webkit-box-shadow": string;
+        "-webkit-transition": string;
+        "background-color": string;
+        border: string;
+        "border-radius": string;
+        "box-shadow": string;
+        "box-sizing": string;
+        color: string;
+        display: string;
+        "font-family": string;
+        "font-size": string;
+        height: string;
+        "line-height": string;
+        margin: string;
+        "max-width": string;
+        outline: string;
+        padding: string;
+        transition: string;
+        "vertical-align": string;
+        width: string;
+    };
+    "#secure-payment-field:focus": {
+        border: string;
+        "box-shadow": string;
+        height: string;
+        outline: string;
+    };
+    "#secure-payment-field[type=button]": {
+        "-moz-user-select": string;
+        "-ms-touch-action": string;
+        "-ms-user-select": string;
+        "-webkit-user-select": string;
+        "background-color": string;
+        "background-image": string;
+        border: string;
+        "box-sizing": string;
+        color: string;
+        cursor: string;
+        display: string;
+        "font-family": string;
+        "font-size": string;
+        "font-weight": string;
+        "line-height": string;
+        "margin-bottom": string;
+        padding: string;
+        "text-align": string;
+        "text-transform": string;
+        "touch-action": string;
+        "user-select": string;
+        "vertical-align": string;
+        "white-space": string;
+    };
+    "#secure-payment-field[type=button]:focus": {
+        "background-color": string;
+        color: string;
+        outline: string;
+    };
+    "#secure-payment-field[type=button]:hover": {
+        "background-color": string;
+    };
+    ".card-cvv": {
+        background: string;
+        "background-size": string;
+    };
+    ".card-cvv.card-type-amex": {
+        background: string;
+        "background-size": string;
+    };
+    "img.card-number-icon": {
+        background: string;
+        "background-size": string;
+        width: string;
+        height: string;
+        position: 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;
+        "background-position-y": string;
+    };
+    "img.card-number-icon.invalid.card-type-amex": {
+        background: string;
+        "background-size": string;
+        "background-position-y": string;
+    };
+    "img.card-number-icon.invalid.card-type-discover": {
+        background: string;
+        "background-size": string;
+        "background-position-y": string;
+        width: string;
+    };
+    "img.card-number-icon.invalid.card-type-jcb": {
+        background: string;
+        "background-size": string;
+        "background-position-y": string;
+    };
+    "img.card-number-icon.invalid.card-type-mastercard": {
+        background: string;
+        "background-size": string;
+        "background-position-y": string;
+    };
+    "img.card-number-icon.invalid.card-type-visa": {
+        background: string;
+        "background-size": string;
+        "background-position-y": string;
+    };
+    "img.card-number-icon.valid.card-type-amex": {
+        background: string;
+        "background-size": string;
+        "background-position-y": string;
+    };
+    "img.card-number-icon.valid.card-type-discover": {
+        background: string;
+        "background-size": string;
+        "background-position-y": string;
+        width: string;
+    };
+    "img.card-number-icon.valid.card-type-jcb": {
+        background: string;
+        "background-size": string;
+        "background-position-y": string;
+    };
+    "img.card-number-icon.valid.card-type-mastercard": {
+        background: string;
+        "background-size": string;
+        "background-position-y": string;
+    };
+    "img.card-number-icon.valid.card-type-visa": {
+        background: string;
+        "background-size": string;
+        "background-position-y": string;
+    };
+    ".card-number::-ms-clear": {
+        display: string;
+    };
+    "input[placeholder]": {
+        "letter-spacing": string;
+    };
+} | {
+    "img.card-number-icon.invalid": {
+        "margin-top": string;
+    };
     "#secure-payment-field": {
         "-o-transition": string;
         "-webkit-box-shadow": string;

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

@@ -1,4 +1,127 @@
 export declare const fieldStyles: (assetBaseUrl: string) => {
+    "#secure-payment-field[type=text].field-validation-wrapper": {
+        "font-family": string;
+    };
+    "#secure-payment-field[type=tel].invalid": {
+        border: string;
+    };
+    "#secure-payment-field[type=text].invalid": {
+        border: string;
+    };
+    "img.card-number-icon.invalid": {
+        "margin-top": string;
+    };
+    "*": {
+        "box-sizing": string;
+    };
+    "::-webkit-input-placeholder": {
+        color: string;
+    };
+    "::-ms-input-placeholder": {
+        color: string;
+    };
+    "::-moz-input-placeholder": {
+        color: string;
+        opacity: number;
+    };
+    ":-moz-input-placeholder": {
+        color: string;
+        opacity: number;
+    };
+    ":-moz-placeholder": {
+        color: string;
+        opacity: string;
+    };
+    "::-moz-placeholder": {
+        color: string;
+        opacity: string;
+    };
+    "#secure-payment-field": {
+        width: string;
+        height: string;
+        padding: string;
+        border: string;
+        "border-radius": string;
+        "font-size": string;
+        "font-weight": string;
+        color: string;
+    };
+    "#secure-payment-field:focus": {
+        border: string;
+        outline: string;
+    };
+    "#secure-payment-field:hover": {
+        border: string;
+        outline: string;
+    };
+    "#secure-payment-field[type=button]": {
+        "background-color": string;
+        color: string;
+        padding: string;
+        border: string;
+        width: string;
+        "border-radius": string;
+        cursor: string;
+        "font-size": string;
+        "font-weight": string;
+        height: string;
+        "text-align": string;
+        "vertical-align": string;
+        "text-transform": string;
+    };
+    "#secure-payment-field[type=button]:focus": {
+        border: string;
+        outline: string;
+    };
+    "#secure-payment-field[type=button]:hover": {
+        "background-color": string;
+    };
+    "#secure-payment-field[type=button]::before": {
+        content: string;
+        "margin-right": string;
+    };
+    ".card-cvv": {
+        background: string;
+        "background-size": string;
+    };
+    ".card-cvv.card-type-amex": {
+        "background-image": string;
+    };
+    "img.card-number-icon": {
+        background: string;
+        position: 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;
+    };
+    "img.card-number-icon.card-type-discover": {
+        "background-image": string;
+    };
+    "img.card-number-icon.card-type-jcb": {
+        "background-image": string;
+    };
+    "img.card-number-icon.card-type-mastercard": {
+        "background-image": string;
+    };
+    "img.card-number-icon.card-type-visa": {
+        "background-image": string;
+    };
+    "img.card-number-icon.card-type-diners": {
+        "background-image": string;
+    };
+    ".card-number::-ms-clear": {
+        display: string;
+    };
+} | {
+    "img.card-number-icon.invalid": {
+        "margin-top": string;
+    };
     "*": {
         "box-sizing": string;
     };