@globalpayments/js 4.1.11 → 4.1.14

package/README.md

@@ -24,7 +24,7 @@ This plugin allows you to use online payments (eCommerce) features of a variety
 ## Usage
 
 ```html
-<script src="https://js.globalpay.com/4.1.11/globalpayments.js"></script>
+<script src="https://js.globalpay.com/4.1.14/globalpayments.js"></script>
 ```
 
 > Note: Installing via NPM will only provide TypeScript types for type-checking.

package/config/rollup.js

@@ -2,6 +2,7 @@ import commonjs from "@rollup/plugin-commonjs";
 import resolve from "@rollup/plugin-node-resolve";
 import typescript from "rollup-plugin-typescript2";
 import { terser } from "rollup-plugin-terser";
+import json from '@rollup/plugin-json';
 
 const input = "./src/index.ts";
 
@@ -18,6 +19,7 @@ const plugins = [
     typescript: require("typescript"),
     useTsconfigDeclarationDir: true,
   }),
+  json()
 ];
 
 const onwarn = (warning) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalpayments/js",
-  "version": "4.1.11",
+  "version": "4.1.14",
   "author": "Heartland Developer Portal <developers@heartland.us>",
   "license": "GPL-2.0",
   "repository": {
@@ -17,15 +17,10 @@
     "clean": "rimraf dist",
     "cypress:open": "cypress open",
     "format": "prettier --write config/**/* src/**/* !src/assets/**/* !test/run.sh !test/run.ps1 test/fixtures/**/*.html",
-    
     "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",
-   
     "test": "cross-os test-cross",
-  
-
     "test:integration": "cypress run",
     "test:lint": "tslint --project tsconfig.json",
     "test:serve": "serve -p 7777"
@@ -41,9 +36,13 @@
     }
   },
   "dependencies": {
+    "@rollup/plugin-json": "^6.1.0",
+    "country-region-data": "^3.1.0",
+    "country-state-city": "^3.2.1",
     "globalpayments-lib": "^1.8.5"
   },
   "devDependencies": {
+    "@rollup/plugin-json": "^6.1.0",
     "rimraf": "*",
     "rollup": "*"
   },

package/types/common/constants.d.ts

@@ -1,3 +1,5 @@
 export declare const HOSTED_FIELD_NAME_KEYS: string[];
+export declare const HOSTED_FIELDS_ADDITIONAL_KEYS: string[];
+export declare const HOSTED_FIELDS_SHIPPING_KEYS: string[];
 export declare const HOSTED_FIELD_STYLE_NAMES: string[];
 export declare const HOSTED_FIELD_BRAND_THEMES_NAMES: string[];

package/types/common/enums.d.ts

@@ -5,6 +5,26 @@ export declare enum CardFormFieldNames {
     CardCvv = "card-cvv",
     CardHolderName = "card-holder-name"
 }
+export declare enum ExpressPayFieldNames {
+    EmailId = "email-id",
+    Phone = "phone-number",
+    BillingAddress = "billing-address",
+    BillingApt = "billing-apt",
+    BillingCity = "billing-city",
+    BillingState = "billing-state",
+    BillingPostalCode = "billing-postal-code",
+    Country = "country",
+    CountryCode = "country-code",
+    EnableSaveCard = "save-card-to-express-pay",
+    ShippingSameAsBilling = "shipping-same-as-billing",
+    ShippingAddress = "shipping-address",
+    ShippingCountry = "shipping-address-country",
+    ShippingName = "shipping-name",
+    ShippingApt = "shipping-apt",
+    ShippingCity = "shipping-city",
+    ShippingState = "shipping-state",
+    ShippingPostalCode = "shipping-postal-code"
+}
 export declare enum HostedFieldValidationEvents {
     SetCustomValidationMessages = "hosted-field-set-custom-validation-messages",
     BuiltInValidationShow = "hosted-field-built-in-validation-show",
@@ -18,13 +38,30 @@ export declare enum HostedFieldValidationEvents {
     ValidateForm = "hosted-field-validate-form",
     ValidateFormValid = "hosted-field-validate-form-valid",
     ValidateFormInvalid = "hosted-field-validate-form-invalid",
-    ValidationCurrencyConversionShow = "hosted-field-validation-currency-conversion-show"
+    ValidationCurrencyConversionShow = "hosted-field-validation-currency-conversion-show",
+    EnableSubmitButton = "hosted-field-enable-submit-button"
 }
 export declare enum CardFormFieldValidationTestEvents {
     CardNumber = "card-number-test",
     CardExpiration = "card-expiration-test",
     CardCvv = "card-cvv-test",
-    CardHolderName = "card-holder-name-test"
+    CardHolderName = "card-holder-name-test",
+    EmailId = "email-test",
+    PhoneNumber = "phone-number-test",
+    BillingAddress = "billing-address-test",
+    BillingApt = "billing-apt-test",
+    BillingCity = "billing-city-test",
+    BillingState = "billing-state-test",
+    BillingPostalCode = "billing-postal-code-test",
+    Country = "country-test",
+    CountryCode = "country-code-test",
+    ShippingAddress = "shipping-address-test",
+    ShippingCountry = "shipping-address-country-test",
+    ShippingName = "shipping-name-test",
+    ShippingApt = "shipping-apt-test",
+    ShippingCity = "shipping-city-test",
+    ShippingState = "shipping-state-test",
+    ShippingPostalCode = "shipping-postal-code-test"
 }
 export declare enum Environments {
     Local = "local",
@@ -36,5 +73,6 @@ export declare enum HostedFieldStyles {
     Default = "default",
     Simple = "simple",
     Blank = "blank",
-    GpDefault = "gp-default"
+    GpDefault = "gp-default",
+    GpDefault2 = "gp-default2"
 }

package/types/credit-card/index.d.ts

@@ -8,7 +8,7 @@ export declare const defaultOptions: IUIFormOptions;
  * @param formOptions Options for the drop-in form
  * @returns
  */
-export declare function form(target: string | HTMLElement, formOptions?: IUIFormOptions): UIForm;
+export declare function form(target: string | HTMLElement, formOptions?: IUIFormOptions): UIForm | undefined;
 /**
  * Allows integrators to create a drop-in form for accepting
  * track data from a human interface device (HID).

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

@@ -2,3 +2,7 @@ export declare const validate: (fieldType: string, value: string, extraData?: an
     isValid: boolean;
     message?: string;
 };
+export declare const expressPayFieldsValidate: (fieldType: string, value: string, extraData?: any) => {
+    isValid: boolean;
+    message?: string;
+};

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

@@ -7,3 +7,4 @@ export declare const increaseValidationRoundCounter: () => void;
 export declare const removeValidationRoundCounter: () => void;
 export declare const isOpenBankingAvailable: (countryCode: string | undefined, aquirer: string | undefined) => boolean;
 export declare const isBlikAvailable: (countryCode: string | undefined, currencyCode: string | undefined, options: IApmConfiguration | undefined) => boolean;
+export declare const isExpressPayAvailable: (options: IApmConfiguration | undefined) => boolean | undefined;

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

@@ -24,4 +24,25 @@ export declare const ValidationMessages: {
     CurrencyConversion: {
         Required: any;
     };
+    EmailId: {
+        Required: string;
+        InvalidEmail: string;
+    };
+    PhoneNumber: {
+        Required: string;
+        InvalidPhone: string;
+        InvalidLength: string;
+    };
+    BillingAddress: {
+        Required: string;
+        CountryRequired: string;
+    };
+    ShippingAddress: {
+        Required: string;
+        MandatoryName: string;
+        InvalidPostalCode: string;
+        MandatoryPostalCode: string;
+        MandatoryCity: string;
+        MandatoryState: string;
+    };
 };

package/types/internal/gateways/gp-api/get-express-pay-base-url.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (result: string) => string;
+export default _default;

package/types/internal/gateways/index.d.ts

@@ -31,6 +31,7 @@ export interface ISuccess {
         cardNumber?: string;
         cardSecurityCode?: boolean;
         cardType?: string;
+        masked_number_last4?: string;
         cardholderName?: string;
         expiryMonth?: string;
         expiryYear?: string;

package/types/internal/lib/bank-selection/helpers.d.ts

@@ -3,4 +3,10 @@ export declare const isBankSelectionAvailable: (countryCode: string, currencyCod
 export declare const getAvailableBanksByCountry: (countryCode: string | undefined) => IAvailableBankData[];
 export declare const getAllAvailableBanks: (countryCode: string | undefined, aquirer: string | undefined) => IAvailableBankData[];
 export declare const getImageUrl: (assetBaseUrl: string, provider: string, countryCode?: string | undefined) => string;
+export declare const addExpressPayDetailsEventListener: () => void;
 export declare const getCountryForQRPlatbaBank: (countryCode: string) => boolean;
+export declare const getExpressPayDetailsKeys: () => Map<string, string>;
+export declare const getExpressPayQueryParams: (expressPayOptions: any, details?: any) => string;
+export declare const formatBillingAddress: (fields: any, state: string) => string;
+export declare const formatShippingAddress: (fields: any, state: string) => string;
+export declare const addIfValue: (obj: any, key: string, value: any) => void;

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

@@ -111,7 +111,21 @@ export default class Card {
      *
      * @param e
      */
-    static validateCardHolderName(e: Event): void;
+    static validateCardHolderName(e: Event, field: string): void;
+    /**
+     * validateCardHolderEmail
+     *
+     * Validates a target element"s value based on the
+     * possible Card Holder Email. Adds a class to the target
+     * element to note `valid` or `invalid`.
+     *
+     * @param e
+     */
+    static validateEmail(e: Event): void;
+    static validatePhone(e: Event): void;
+    static validatePostalCode(e: Event, field: string): void;
+    static validateBillingAddress(e: Event, field: string): void;
+    static validateCountry(e: Event, field: string): void;
     /**
      * validateInstallmentFields
      *
@@ -181,10 +195,36 @@ export default class Card {
      *
      * @param selector
      */
-    static attachCardHolderNameEvents(selector: string): void;
+    static attachCardHolderNameEvents(selector: string, field: string): void;
+    /**
+     * attachEmailEvents
+     *
+     * @param selector
+     */
+    static attachEmailEvents(selector: string): void;
+    /**
+     * attachPhoneEvents
+     *
+     * @param selector
+     */
+    static attachPhoneEvents(selector: string): void;
+    /**
+     * attachPostalCodeEvents
+     *
+     * @param selector
+     */
+    static attachPostalCodeEvents(selector: string, field: string): void;
+    static attachAddressEvents(selector: string, field: string): void;
+    /**
+     * attachCountryEvents
+     *
+     * @param selector
+     */
+    static attachCountryEvents(selector: string, field: string): void;
     private static handleHostedFieldValidation;
     private static focusOutHostedFieldValidationHandler;
     private static focusInHostedFieldValidationHandler;
     private static getFieldEventData;
     private static getCardType;
+    static validateToEnable(eventData: Event, isValid: boolean, fieldName: string): void;
 }

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

@@ -11,7 +11,8 @@ export declare enum Apm {
     OpenBankingPayment = "open-banking",
     PayPal = "paypal",
     QRCodePayments = "qr-code-payments",
-    Blik = "blik"
+    Blik = "blik",
+    ExpressPay = "express-pay"
 }
 export declare enum ApmEvents {
     PaymentMethodActionDetail = "apm-action-details",
@@ -52,13 +53,25 @@ export declare enum ApmProviders {
     OpenBanking = "OPEN_BANKING",
     PayPal = "PayPal",
     WeChat = "WeChat",
-    Blik = "blik"
+    Blik = "blik",
+    ExpressPay = "ExpressPay"
 }
 export declare enum QRCodePaymentsWeChatProviderBrands {
     WeChatBrand = "WeChat",
     WeChatMethodResponse = "WECHAT",
     WeChatAccountResponse = "WeChat Pay"
 }
+export declare const phoneNumberLength = 10;
 export declare const HostedFieldStyles: typeof HostedFieldStylesAlias;
 export declare const BrandThemes: typeof BrandThemesAlias;
 export declare const BankNames: typeof BankDisplayNames;
+export declare enum HostedFieldFooterLinks {
+    LearnMore = "learnmore.html",
+    Terms = "termsofservice.html",
+    PrivacyPolicy = "privacypolicy.html"
+}
+export declare enum ExpressPayEvents {
+    ExpressPayActionDetail = "express-pay-action-details"
+}
+export declare const OTPLength = 6;
+export declare const formMaxWidth = 1000;

package/types/internal/lib/styles/bank-selection/common.d.ts

@@ -1,4 +1,4 @@
-declare const styles: (_assetBaseUrl: string) => {
+declare const styles: (_assetBaseUrl: string, theme?: string | undefined) => {
     ".bank-selection-wrapper": {
         background: string;
         padding: string;

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

@@ -1,4 +1,4 @@
-export declare const fieldStyles: (assetBaseUrl: string) => {
+export declare const fieldStyles: (assetBaseUrl: string, theme?: string | undefined) => {
     "#secure-payment-field[type=text].field-validation-wrapper": {
         "font-family": string;
     };
@@ -9,5 +9,5 @@ export declare const fieldStyles: (assetBaseUrl: string) => {
         border: string;
     };
 };
-declare const styles: (assetBaseUrl: string) => {};
+declare const styles: (assetBaseUrl: string, theme: string) => {};
 export default styles;

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

@@ -1,11 +1,6 @@
-export declare const fieldStyles: (assetBaseUrl: string) => {
-    "img.card-number-icon": {
-        background: string;
-        right: string;
-        top: string;
-        width: string;
-        height: string;
-        "background-size": string;
+export declare const fieldStyles: (assetBaseUrl: string, theme?: string | undefined) => {
+    ".secure-payment-form label::after": {
+        content: string;
     };
     "#secure-payment-field[type=text].field-validation-wrapper": {
         "font-family": string;
@@ -17,7 +12,7 @@ export declare const fieldStyles: (assetBaseUrl: string) => {
         border: string;
     };
 };
-export declare const styles: (assetBaseUrl: string) => {
+export declare const styles: (assetBaseUrl: string, theme?: string | undefined) => {
     ".secure-payment-form .hf-cvv-tooltip-invalid": {
         border: string;
         "border-left": string;

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

@@ -90,6 +90,14 @@ export declare const fieldStyles: (assetBaseUrl: string) => {
         color: string;
         outline: string;
     };
+    "#secure-payment-field.disabled-submit-button[type=button]": {
+        "background-color": string;
+        color: string;
+    };
+    "#secure-payment-field.disabled-submit-button[type=button]:hover": {
+        "background-color": string;
+        color: string;
+    };
     "#secure-payment-field[type=button]:hover": {
         "background-color": string;
     };
@@ -378,6 +386,11 @@ export declare const parentStyles: (assetBaseUrl: string) => {
         "flex-direction": string;
         "align-items": string;
     };
+    ".secure-payment-form .express-pay-button-wrapper": {
+        display: string;
+        "flex-direction": string;
+        "align-items": string;
+    };
     ".secure-payment-form .open-banking-button::before": {
         width: string;
         height: string;
@@ -430,6 +443,33 @@ export declare const parentStyles: (assetBaseUrl: string) => {
         top: string;
         right: string;
     };
+    ".secure-payment-form .express-pay-button": {
+        "background-color": string;
+        border: string;
+        "border-radius": string;
+        position: string;
+        color: string;
+        height: string;
+        width: string;
+        margin: string;
+        cursor: string;
+    };
+    ".secure-payment-form .express-pay-button:hover": {
+        "background-color": string;
+    };
+    ".secure-payment-form .express-pay-button:focus": {
+        "background-color": string;
+    };
+    ".secure-payment-form .express-pay-button::before": {
+        width: string;
+        height: string;
+        position: string;
+        top: string;
+        right: string;
+    };
+    ".secure-payment-form .express-pay-button::after": {
+        content: string;
+    };
     ".secure-payment-form .link-button": {
         display: string;
         "flex-direction": string;
@@ -1079,7 +1119,6 @@ export declare const parentStyles: (assetBaseUrl: string) => {
         float: string;
     };
     ".secure-payment-form div[class$='-shield'] .ssl-text-logo": {
-        border: string;
         "border-radius": string;
         height: string;
         "text-align": string;
@@ -1090,7 +1129,6 @@ export declare const parentStyles: (assetBaseUrl: string) => {
         width: string;
     };
     ".secure-payment-form div[class$='-shield'] .ssl-logo_ico": {
-        width: string;
         height: string;
         "margin-left": string;
         "vertical-align": string;

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

@@ -1,19 +1,6 @@
-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;
+export declare const fieldStyles: (assetBaseUrl: string, theme?: string | undefined) => {
+    ".secure-payment-form label::after"?: {
+        content: string;
     };
     "#secure-payment-field[type=text].field-validation-wrapper"?: {
         "font-family": string;
@@ -76,6 +63,16 @@ export declare const fieldStyles: (assetBaseUrl: string) => {
         border: string;
         outline: string;
     };
+    "#secure-payment-field.disabled-submit-button[type=button]": {
+        "background-color": string;
+        color: string;
+        cursor: string;
+    };
+    "#secure-payment-field.disabled-submit-button[type=button]:hover": {
+        "background-color": string;
+        color: string;
+        cursor: string;
+    };
     "#secure-payment-field[type=button]": {
         "background-color": string;
         color: string;
@@ -109,6 +106,15 @@ 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;
     };
@@ -134,7 +140,7 @@ export declare const fieldStyles: (assetBaseUrl: string) => {
         display: string;
     };
 };
-export declare const parentStyles: (assetBaseUrl: string) => {
+export declare const parentStyles: (assetBaseUrl: string, theme?: string | undefined) => {
     ".bank-selection-wrapper": {
         background: string;
         padding: string;
@@ -344,6 +350,11 @@ export declare const parentStyles: (assetBaseUrl: string) => {
         "flex-direction": string;
         "align-items": string;
     };
+    ".secure-payment-form .express-pay-button-wrapper": {
+        display: string;
+        "flex-direction": string;
+        "align-items": string;
+    };
     ".secure-payment-form .open-banking-button::before": {
         width: string;
         height: string;
@@ -396,6 +407,33 @@ export declare const parentStyles: (assetBaseUrl: string) => {
         top: string;
         right: string;
     };
+    ".secure-payment-form .express-pay-button": {
+        "background-color": string;
+        border: string;
+        "border-radius": string;
+        position: string;
+        color: string;
+        height: string;
+        width: string;
+        margin: string;
+        cursor: string;
+    };
+    ".secure-payment-form .express-pay-button:hover": {
+        "background-color": string;
+    };
+    ".secure-payment-form .express-pay-button:focus": {
+        "background-color": string;
+    };
+    ".secure-payment-form .express-pay-button::before": {
+        width: string;
+        height: string;
+        position: string;
+        top: string;
+        right: string;
+    };
+    ".secure-payment-form .express-pay-button::after": {
+        content: string;
+    };
     ".secure-payment-form .link-button": {
         display: string;
         "flex-direction": string;
@@ -1392,7 +1430,6 @@ export declare const parentStyles: (assetBaseUrl: string) => {
         "margin-right": string;
     };
     ".secure-payment-form div[class$='-shield'] .ssl-text-logo": {
-        border: string;
         "border-radius": string;
         height: string;
         "text-align": string;
@@ -1403,7 +1440,6 @@ export declare const parentStyles: (assetBaseUrl: string) => {
         width: string;
     };
     ".secure-payment-form div[class$='-shield'] .ssl-logo_ico": {
-        width: string;
         height: string;
         "margin-left": string;
         "vertical-align": string;
@@ -1480,6 +1516,30 @@ export declare const parentStyles: (assetBaseUrl: string) => {
     ".secure-payment-form .hidden": {
         display: string;
     };
+    ".secure-payment-form .credit-card-phone-number label": {
+        visibility: string;
+    };
+    ".phone-number-wrapper, .billing-address-wrapper, .shipping-details-wrapper": {
+        display: string;
+    };
+    ".secure-payment-form .credit-card-country-code": {
+        width: string;
+        "min-width": string;
+    };
+    ".secure-payment-form .credit-card-country-code .label-div": {
+        width: string;
+    };
+    ".secure-payment-form .credit-card-phone-number": {
+        width: string;
+        "margin-left": string;
+    };
+    ".secure-payment-form .credit-card-country": {
+        "margin-left": string;
+        "min-width": string;
+    };
+    ".secure-payment-form .credit-card-billing-address": {
+        width: string;
+    };
     "@media(min-width: 800px)": {
         ".secure-payment-form .credit-card-card-expiration": {
             flex: string;
@@ -1489,5 +1549,85 @@ export declare const parentStyles: (assetBaseUrl: string) => {
             flex: string;
             "margin-left": string;
         };
+        ".secure-payment-form .credit-card-billing-address": {
+            flex: string;
+        };
+        ".secure-payment-form .credit-card-country": {
+            flex: string;
+            "margin-left": string;
+        };
+        ".secure-payment-form .credit-card-country-code": {
+            flex: string;
+        };
+        ".secure-payment-form .credit-card-country-code label": {
+            width: string;
+        };
+        ".secure-payment-form .credit-card-phone-number": {
+            flex: string;
+            "margin-left": string;
+        };
+        ".secure-payment-form .credit-card-phone-number label": {
+            visibility: string;
+        };
+    };
+    ".credit-card-save-enable": {
+        "margin-top": string;
+        "font-family": string;
+    };
+    ".credit-card-save-enable input": {
+        height: string;
+        width: string;
+    };
+    ".credit-card-save-enable span": {
+        "vertical-align": string;
+        "letter-spacing": string;
+        "margin-left": string;
+    };
+    ".credit-card-save-enable .learn-more": {
+        "vertical-align": string;
+        color: string;
+    };
+    ".terms-and-conditions": {
+        "font-size": string;
+        color: string;
+        "margin-top": string;
+    };
+    ".terms-and-conditions a": {
+        color: string;
+        "font-weight": string;
+        "text-decoration": string;
+    };
+    ".credit-card-shipping-same-as-billing": {
+        "margin-top": string;
+        "font-family": string;
+        "margin-bottom": string;
+    };
+    ".credit-card-shipping-same-as-billing input": {
+        height: string;
+        width: string;
+    };
+    ".credit-card-shipping-same-as-billing span": {
+        "vertical-align": string;
+        "letter-spacing": string;
+        color: string;
+        "margin-left": string;
+        "font-size": string;
+    };
+    ".encrypted": {
+        "font-family": string;
+        " text-align": string;
+        "font-size": string;
+        "margin-top": string;
+        color: string;
+        "font-weight": string;
+        "margin-left": string;
+    };
+    ".encrypted-shipping": {
+        "font-size": string;
+        "margin-top": string;
+        color: string;
+        "font-weight": string;
+        float: string;
+        "letter-spacing": string;
     };
 };