@globalpayments/js 4.0.20 → 4.1.3

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.0.20/globalpayments.js"></script>
+<script src="https://js.globalpay.com/4.1.3/globalpayments.js"></script>
 ```
 
 > Note: Installing via NPM will only provide TypeScript types for type-checking.

package/package.json

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

package/types/common/constants.d.ts

@@ -1 +1,3 @@
 export declare const HOSTED_FIELD_NAME_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

@@ -32,3 +32,9 @@ export declare enum Environments {
     Sandbox = "sandbox",
     Production = "production"
 }
+export declare enum HostedFieldStyles {
+    Default = "default",
+    Simple = "simple",
+    Blank = "blank",
+    GpDefault = "gp-default"
+}

package/types/internal/lib/add-footer-branded-icons.d.ts

@@ -0,0 +1,12 @@
+import { IUIFormOptions } from "../../ui/form";
+/**
+ * Adds the branded footer icons:
+ *  - SSL Encrypted Logo
+ *  - Branded specific Logo
+ *  - Security Emblem text ("Securely processed by Global Payments")
+ *
+ * @param formOptions
+ * @param footer
+ *
+ */
+export declare function addFooterBrandedIcons(formOptions: IUIFormOptions, footer: HTMLElement): void;

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

@@ -1,3 +1,5 @@
+import { HostedFieldStyles as HostedFieldStylesAlias } from "../../common/enums";
+import { BrandThemes as BrandThemesAlias } from "./styles/themes/brand-themes/brand-themes";
 export declare enum ApiVersion {
     default = "2021-03-22"
 }
@@ -53,3 +55,5 @@ export declare enum QRCodePaymentsWeChatProviderBrands {
     WeChatMethodResponse = "WECHAT",
     WeChatAccountResponse = "WeChat Pay"
 }
+export declare const HostedFieldStyles: typeof HostedFieldStylesAlias;
+export declare const BrandThemes: typeof BrandThemesAlias;

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

@@ -1,8 +1,4 @@
 export declare const fieldStyles: (assetBaseUrl: string) => {
-    "@font-face": {
-        "font-family": string;
-        src: string;
-    };
     "#secure-payment-field[type=text].field-validation-wrapper": {
         "font-family": string;
     };

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

@@ -8,10 +8,6 @@ export declare const fieldStyles: (assetBaseUrl: string) => {
         top: string;
         "background-position": string;
     };
-    "@font-face": {
-        "font-family": string;
-        src: string;
-    };
     "#secure-payment-field[type=text].field-validation-wrapper": {
         "font-family": string;
     };

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

@@ -7,10 +7,6 @@ export declare const fieldStyles: (assetBaseUrl: string) => {
         height: string;
         "background-size": string;
     };
-    "@font-face": {
-        "font-family": string;
-        src: string;
-    };
     "#secure-payment-field[type=text].field-validation-wrapper": {
         "font-family": string;
     };

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

@@ -10,10 +10,6 @@ export declare const fieldStyles: (assetBaseUrl: string) => {
     "#field-validation-wrapper": {
         "margin-top": string;
     };
-    "@font-face": {
-        "font-family": string;
-        src: string;
-    };
     "#secure-payment-field[type=text].field-validation-wrapper": {
         "font-family": string;
     };

package/types/internal/lib/styles/currency-conversion/common.d.ts

@@ -23,8 +23,9 @@ declare const styles: () => {
         padding: number;
         display: string;
         "font-size": string;
-        "font-weight": number;
+        "font-weight": string;
         position: string;
+        color: string;
     };
     ".secure-payment-form .credit-card-currency-conversion .radio-button": {
         display: string;
@@ -41,6 +42,7 @@ declare const styles: () => {
     };
     ".secure-payment-form .credit-card-currency-conversion .radio-button:hover": {
         "border-color": string;
+        color: string;
     };
     ".secure-payment-form .credit-card-currency-conversion fieldset:focus-within > .radio-button": {
         outline: string;
@@ -56,6 +58,9 @@ declare const styles: () => {
         color: string;
         outline: string;
     };
+    ".secure-payment-form .credit-card-currency-conversion .radio-button.checked label": {
+        color: string;
+    };
     ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']": {
         margin: string;
         appearance: string;
@@ -72,16 +77,19 @@ declare const styles: () => {
     ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']:checked": {
         "background-color": string;
         border: string;
+        color: string;
     };
     ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']:focus": {
         outline: string;
+        color: string;
     };
     ".secure-payment-form .credit-card-currency-conversion .radio-button label": {
         "font-family": string;
         "font-size": string;
-        "font-weight": number;
+        "font-weight": string;
         display: string;
         margin: string;
+        color: string;
     };
     ".secure-payment-form .credit-card-currency-conversion .card-currency-content": {
         opacity: string;
@@ -117,6 +125,8 @@ declare const styles: () => {
         "font-weight": number;
         margin: string;
         display: string;
+        "line-height": string;
+        color: string;
     };
     ".secure-payment-form .credit-card-currency-conversion .additional-info p": {
         margin: string;
@@ -187,5 +197,18 @@ declare const styles: () => {
             right: string;
         };
     };
+    "@media(max-width: 340px)": {
+        ".secure-payment-form .credit-card-currency-conversion fieldset": {
+            "flex-flow": string;
+        };
+        ".secure-payment-form .credit-card-currency-conversion .radio-button": {
+            width: string;
+            "margin-bottom": string;
+            "margin-right": string;
+        };
+        ".secure-payment-form .credit-card-currency-conversion .radio-button:last-child": {
+            "margin-bottom": string;
+        };
+    };
 };
 export default styles;

package/types/internal/lib/styles/currency-conversion/default.d.ts

@@ -77,6 +77,23 @@ export declare const styles: () => {
         "font-family": string;
         margin: string;
     };
+    "@media(max-width: 340px)": {
+        ".secure-payment-form .credit-card-currency-conversion .radio-button": {
+            "margin-right": string;
+        };
+    };
+    "@media(max-width: 768px)": {
+        ".secure-payment-form .credit-card-currency-conversion .card-currency-content": {
+            width: string;
+            "margin-top": string;
+            "margin-left": string;
+        };
+        ".secure-payment-form .credit-card-currency-conversion .merchant-currency-content": {
+            width: string;
+            "margin-top": string;
+            "margin-left": string;
+        };
+    };
     ".secure-payment-form .currency-conversion-container": {
         display: string;
         "flex-direction": string;
@@ -87,6 +104,7 @@ export declare const styles: () => {
     };
     ".secure-payment-form .credit-card-currency-conversion .radio-button:hover": {
         "border-color": string;
+        color: string;
     };
     ".secure-payment-form .credit-card-currency-conversion fieldset:focus-within > .radio-button": {
         outline: string;
@@ -118,9 +136,11 @@ export declare const styles: () => {
     ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']:checked": {
         "background-color": string;
         border: string;
+        color: string;
     };
     ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']:focus": {
         outline: string;
+        color: string;
     };
     ".secure-payment-form .credit-card-currency-conversion .card-currency-content.visible": {
         display: string;
@@ -138,6 +158,8 @@ export declare const styles: () => {
         "font-weight": number;
         margin: string;
         display: string;
+        "line-height": string;
+        color: string;
     };
     ".secure-payment-form .credit-card-currency-conversion .tooltip": {
         width: string;

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

@@ -30,8 +30,9 @@ export declare const styles: () => {
         padding: number;
         display: string;
         "font-size": string;
-        "font-weight": number;
+        "font-weight": string;
         position: string;
+        color: string;
     };
     ".secure-payment-form .credit-card-currency-conversion .radio-button": {
         display: string;
@@ -48,6 +49,7 @@ export declare const styles: () => {
     };
     ".secure-payment-form .credit-card-currency-conversion .radio-button:hover": {
         "border-color": string;
+        color: string;
     };
     ".secure-payment-form .credit-card-currency-conversion fieldset:focus-within > .radio-button": {
         outline: string;
@@ -63,6 +65,9 @@ export declare const styles: () => {
         color: string;
         outline: string;
     };
+    ".secure-payment-form .credit-card-currency-conversion .radio-button.checked label": {
+        color: string;
+    };
     ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']": {
         margin: string;
         appearance: string;
@@ -79,16 +84,19 @@ export declare const styles: () => {
     ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']:checked": {
         "background-color": string;
         border: string;
+        color: string;
     };
     ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']:focus": {
         outline: string;
+        color: string;
     };
     ".secure-payment-form .credit-card-currency-conversion .radio-button label": {
         "font-family": string;
         "font-size": string;
-        "font-weight": number;
+        "font-weight": string;
         display: string;
         margin: string;
+        color: string;
     };
     ".secure-payment-form .credit-card-currency-conversion .card-currency-content": {
         opacity: string;
@@ -124,6 +132,8 @@ export declare const styles: () => {
         "font-weight": number;
         margin: string;
         display: string;
+        "line-height": string;
+        color: string;
     };
     ".secure-payment-form .credit-card-currency-conversion .additional-info p": {
         margin: string;
@@ -194,4 +204,17 @@ export declare const styles: () => {
             right: string;
         };
     };
+    "@media(max-width: 340px)": {
+        ".secure-payment-form .credit-card-currency-conversion fieldset": {
+            "flex-flow": string;
+        };
+        ".secure-payment-form .credit-card-currency-conversion .radio-button": {
+            width: string;
+            "margin-bottom": string;
+            "margin-right": string;
+        };
+        ".secure-payment-form .credit-card-currency-conversion .radio-button:last-child": {
+            "margin-bottom": string;
+        };
+    };
 };

package/types/internal/lib/styles/currency-conversion/simple.d.ts

@@ -92,6 +92,7 @@ export declare const styles: () => {
     };
     ".secure-payment-form .credit-card-currency-conversion .radio-button:hover": {
         "border-color": string;
+        color: string;
     };
     ".secure-payment-form .credit-card-currency-conversion fieldset:focus-within > .radio-button": {
         outline: string;
@@ -123,9 +124,11 @@ export declare const styles: () => {
     ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']:checked": {
         "background-color": string;
         border: string;
+        color: string;
     };
     ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']:focus": {
         outline: string;
+        color: string;
     };
     ".secure-payment-form .credit-card-currency-conversion .card-currency-content.visible": {
         display: string;
@@ -143,6 +146,8 @@ export declare const styles: () => {
         "font-weight": number;
         margin: string;
         display: string;
+        "line-height": string;
+        color: string;
     };
     ".secure-payment-form .credit-card-currency-conversion .tooltip": {
         width: string;
@@ -201,4 +206,17 @@ export declare const styles: () => {
             right: string;
         };
     };
+    "@media(max-width: 340px)": {
+        ".secure-payment-form .credit-card-currency-conversion fieldset": {
+            "flex-flow": string;
+        };
+        ".secure-payment-form .credit-card-currency-conversion .radio-button": {
+            width: string;
+            "margin-bottom": string;
+            "margin-right": string;
+        };
+        ".secure-payment-form .credit-card-currency-conversion .radio-button:last-child": {
+            "margin-bottom": string;
+        };
+    };
 };

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

@@ -17,10 +17,6 @@ export declare const fieldStyles: (assetBaseUrl: 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;
     };
@@ -452,6 +448,23 @@ export declare const parentStyles: (assetBaseUrl: string) => {
         "font-family": string;
         margin: string;
     };
+    "@media(max-width: 340px)"?: {
+        ".secure-payment-form .credit-card-currency-conversion .radio-button": {
+            "margin-right": string;
+        };
+    };
+    "@media(max-width: 768px)"?: {
+        ".secure-payment-form .credit-card-currency-conversion .card-currency-content": {
+            width: string;
+            "margin-top": string;
+            "margin-left": string;
+        };
+        ".secure-payment-form .credit-card-currency-conversion .merchant-currency-content": {
+            width: string;
+            "margin-top": string;
+            "margin-left": string;
+        };
+    };
     ".secure-payment-form .currency-conversion-container"?: {
         display: string;
         "flex-direction": string;
@@ -462,6 +475,7 @@ export declare const parentStyles: (assetBaseUrl: string) => {
     };
     ".secure-payment-form .credit-card-currency-conversion .radio-button:hover"?: {
         "border-color": string;
+        color: string;
     };
     ".secure-payment-form .credit-card-currency-conversion fieldset:focus-within > .radio-button"?: {
         outline: string;
@@ -493,9 +507,11 @@ export declare const parentStyles: (assetBaseUrl: string) => {
     ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']:checked"?: {
         "background-color": string;
         border: string;
+        color: string;
     };
     ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']:focus"?: {
         outline: string;
+        color: string;
     };
     ".secure-payment-form .credit-card-currency-conversion .card-currency-content.visible"?: {
         display: string;
@@ -513,6 +529,8 @@ export declare const parentStyles: (assetBaseUrl: string) => {
         "font-weight": number;
         margin: string;
         display: string;
+        "line-height": string;
+        color: string;
     };
     ".secure-payment-form .credit-card-currency-conversion .tooltip"?: {
         width: string;
@@ -889,6 +907,14 @@ export declare const parentStyles: (assetBaseUrl: string) => {
         "background-size": string;
         background: string;
         "font-family": string;
+        "font-size": string;
+        "line-height": string;
+    };
+    ".secure-payment-form .tooltip h4": {
+        "font-family": string;
+        "font-size": string;
+        "line-height": string;
+        color: string;
     };
     ".secure-payment-form .tooltip:focus": {
         border: string;

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

@@ -15,10 +15,6 @@ export declare const fieldStyles: (assetBaseUrl: 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;
     };
@@ -33,6 +29,10 @@ export declare const fieldStyles: (assetBaseUrl: string) => {
         opacity: string;
         visibility: string;
     };
+    "@font-face": {
+        "font-family": string;
+        src: string;
+    };
     "*": {
         "box-sizing": string;
     };
@@ -367,8 +367,9 @@ export declare const parentStyles: (assetBaseUrl: string) => {
         padding: number;
         display: string;
         "font-size": string;
-        "font-weight": number;
+        "font-weight": string;
         position: string;
+        color: string;
     };
     ".secure-payment-form .credit-card-currency-conversion .radio-button"?: {
         display: string;
@@ -385,6 +386,7 @@ export declare const parentStyles: (assetBaseUrl: string) => {
     };
     ".secure-payment-form .credit-card-currency-conversion .radio-button:hover"?: {
         "border-color": string;
+        color: string;
     };
     ".secure-payment-form .credit-card-currency-conversion fieldset:focus-within > .radio-button"?: {
         outline: string;
@@ -400,6 +402,9 @@ export declare const parentStyles: (assetBaseUrl: string) => {
         color: string;
         outline: string;
     };
+    ".secure-payment-form .credit-card-currency-conversion .radio-button.checked label"?: {
+        color: string;
+    };
     ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']"?: {
         margin: string;
         appearance: string;
@@ -416,16 +421,19 @@ export declare const parentStyles: (assetBaseUrl: string) => {
     ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']:checked"?: {
         "background-color": string;
         border: string;
+        color: string;
     };
     ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']:focus"?: {
         outline: string;
+        color: string;
     };
     ".secure-payment-form .credit-card-currency-conversion .radio-button label"?: {
         "font-family": string;
         "font-size": string;
-        "font-weight": number;
+        "font-weight": string;
         display: string;
         margin: string;
+        color: string;
     };
     ".secure-payment-form .credit-card-currency-conversion .card-currency-content"?: {
         opacity: string;
@@ -461,6 +469,8 @@ export declare const parentStyles: (assetBaseUrl: string) => {
         "font-weight": number;
         margin: string;
         display: string;
+        "line-height": string;
+        color: string;
     };
     ".secure-payment-form .credit-card-currency-conversion .additional-info p"?: {
         margin: string;
@@ -531,6 +541,19 @@ export declare const parentStyles: (assetBaseUrl: string) => {
             right: string;
         };
     };
+    "@media(max-width: 340px)"?: {
+        ".secure-payment-form .credit-card-currency-conversion fieldset": {
+            "flex-flow": string;
+        };
+        ".secure-payment-form .credit-card-currency-conversion .radio-button": {
+            width: string;
+            "margin-bottom": string;
+            "margin-right": string;
+        };
+        ".secure-payment-form .credit-card-currency-conversion .radio-button:last-child": {
+            "margin-bottom": string;
+        };
+    };
     ".secure-payment-form .hf-cvv-tooltip-invalid"?: {
         border: string;
         "border-left": string;
@@ -1188,6 +1211,14 @@ export declare const parentStyles: (assetBaseUrl: string) => {
         "background-size": string;
         background: string;
         "font-family": string;
+        "font-size": string;
+        "line-height": string;
+    };
+    ".secure-payment-form .tooltip h4": {
+        "font-family": string;
+        "font-size": string;
+        "line-height": string;
+        color: string;
     };
     ".secure-payment-form .tooltip:focus": {
         border: string;

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

@@ -24,10 +24,6 @@ export declare const fieldStyles: (assetBaseUrl: string) => {
     "#field-validation-wrapper"?: {
         "margin-top": string;
     };
-    "@font-face"?: {
-        "font-family": string;
-        src: string;
-    };
     "#secure-payment-field[type=text].field-validation-wrapper"?: {
         "font-family": string;
     };
@@ -242,6 +238,7 @@ export declare const parentStyles: (assetBaseUrl: string) => {
     };
     ".secure-payment-form .credit-card-currency-conversion .radio-button:hover"?: {
         "border-color": string;
+        color: string;
     };
     ".secure-payment-form .credit-card-currency-conversion fieldset:focus-within > .radio-button"?: {
         outline: string;
@@ -273,9 +270,11 @@ export declare const parentStyles: (assetBaseUrl: string) => {
     ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']:checked"?: {
         "background-color": string;
         border: string;
+        color: string;
     };
     ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']:focus"?: {
         outline: string;
+        color: string;
     };
     ".secure-payment-form .credit-card-currency-conversion .card-currency-content.visible"?: {
         display: string;
@@ -293,6 +292,8 @@ export declare const parentStyles: (assetBaseUrl: string) => {
         "font-weight": number;
         margin: string;
         display: string;
+        "line-height": string;
+        color: string;
     };
     ".secure-payment-form .credit-card-currency-conversion .tooltip"?: {
         width: string;
@@ -351,6 +352,19 @@ export declare const parentStyles: (assetBaseUrl: string) => {
             right: string;
         };
     };
+    "@media(max-width: 340px)"?: {
+        ".secure-payment-form .credit-card-currency-conversion fieldset": {
+            "flex-flow": string;
+        };
+        ".secure-payment-form .credit-card-currency-conversion .radio-button": {
+            width: string;
+            "margin-bottom": string;
+            "margin-right": string;
+        };
+        ".secure-payment-form .credit-card-currency-conversion .radio-button:last-child": {
+            "margin-bottom": string;
+        };
+    };
     ".secure-payment-form .credit-card-qr-code-payments"?: {
         "font-family": string;
     };
@@ -777,6 +791,14 @@ export declare const parentStyles: (assetBaseUrl: string) => {
         "background-size": string;
         background: string;
         "font-family": string;
+        "font-size": string;
+        "line-height": string;
+    };
+    ".secure-payment-form .tooltip h4": {
+        "font-family": string;
+        "font-size": string;
+        "line-height": string;
+        color: string;
     };
     ".secure-payment-form .tooltip:focus": {
         border: string;

package/types/internal/lib/styles/themes/brand-themes/base/base-theme-preset.d.ts

@@ -0,0 +1,5 @@
+import { IThemePreset, IThemePresetBodyPaddings, IThemePresetFontFamily, IThemePresetGeneralColors } from "./contracts";
+export declare const getBaseThemePreset: () => IThemePreset;
+export declare const getBaseThemePresetGeneralColors: () => IThemePresetGeneralColors;
+export declare const getBaseThemePresetBodyPaddings: () => IThemePresetBodyPaddings;
+export declare const getBaseThemePresetFontFamily: () => IThemePresetFontFamily;