@globalpayments/js 2.1.2 → 3.0.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/v1/globalpayments.js"></script>
+<script src="https://js.globalpay.com/3.0.3/globalpayments.js"></script>
 ```
 
 > Note: Installing via NPM will only provide TypeScript types for type-checking.
@@ -174,6 +174,37 @@ Enables a mandatory restriction for card holdername field
 
 enables the use of the fingerprint mode with "ALWAYS" value 
 
+##### `fieldValidation` - `object` (Optional)
+
+> Note: Applies to GP API only.
+
+enables the use of the HF Built-in Validations. The object structure is:
+```javascript
+  fieldValidation?: {
+    enabled?: boolean, // (Optional)
+    characterValidation?: string // Supported values: [`englishOnly`, `none`] (Optional)
+  }
+```
+The optional `characterValidation` string config can be set as `englishOnly` or `none` and this will indicate if the Card Holder name contains or not English characters.
+
+##### `qrCodePayments` - `object` (Optional - under `apms` configs)
+
+> Note: Applies to GP API only.
+
+enables the use of the QR Code Payments. The object structure is:
+```javascript
+  apms.qrCodePayments?: {
+    enabled?: boolean, // (Optional)
+    allowedPaymentMethods?: [ // Array of allowed Payment Methods (Optional)
+      {
+        provider: string,
+        image: string,
+      },
+    ]
+  }
+```
+The optional `allowedPaymentMethods` object config can be set to manually add the preferred Payment methods.
+
 #### Examples
 
 ##### Heartland eCommerce

package/package.json

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

package/types/apm/enums.d.ts

@@ -0,0 +1,10 @@
+export declare const enum ApmInternalEvents {
+    PaymentMethodsRequestStart = "payment-methods-request-start",
+    PaymentMethodsRequestCompleted = "payment-methods-request-completed",
+    NavigatesBackBySelectAnotherPaymentMethod = "payment-navigates-back-select-another-payment-method"
+}
+export declare const enum QRCodePaymentsActions {
+    RedirectAction = "REDIRECT",
+    RedirectInFrameAction = "REDIRECT_IN_FRAME",
+    PresentQRCodeAction = "PRESENT_QR_CODE"
+}

package/types/apm/non-card-payments/components/common.d.ts

@@ -0,0 +1,5 @@
+import { ApmProviders } from "../../../internal/lib/enums";
+import { PaymentMethod } from "../contracts";
+export declare function isApmProviderConfigured(configuration: PaymentMethod[], desiredProvider: ApmProviders): boolean;
+export declare const getSelectAnotherPaymentMethodButton: (id: string, onClickCallback: any) => HTMLDivElement;
+export declare function isUrlValid(url: string): boolean;

package/types/apm/non-card-payments/components/constants.d.ts

@@ -0,0 +1 @@
+export declare const REDIRECT_ACTION_DELAY_IN_SECONDS = 2000;

package/types/apm/non-card-payments/components/redirect-action-handler.d.ts

@@ -0,0 +1 @@
+export default function handleRedirectAction(content: HTMLDivElement, props: any): void;

package/types/apm/non-card-payments/contracts.d.ts

@@ -0,0 +1,8 @@
+export interface IApmConfiguration {
+    allowedPaymentMethods?: PaymentMethod[];
+}
+export interface PaymentMethod {
+    provider: string;
+    category?: string;
+    image?: string;
+}

package/types/apm/qr-code-payments/components/common.d.ts

@@ -1 +1 @@
-export declare const getSelectAnotherPaymentMethodButton: (id: string, onClickCallback: any) => HTMLDivElement;
+export declare function getCountdownCounter(secondsToExpire: string, onFinishCallback: any): HTMLDivElement;

package/types/apm/qr-code-payments/components/generate-qr-code.d.ts

@@ -0,0 +1,3 @@
+export declare function removeScriptById(scriptId: string): void;
+export declare function loadQRCodeLibraryAndGenerate(text: string): Promise<string>;
+export declare function generateQRCode(text: string): Promise<string>;

package/types/apm/qr-code-payments/components/present-qr-code-action-handler.d.ts

@@ -0,0 +1 @@
+export default function handlePresentQRCodeAction(content: HTMLDivElement, props: any): void;

package/types/apm/qr-code-payments/components/qr-code-expired-handler.d.ts

@@ -0,0 +1 @@
+export default function handleQRCodeExpiredScreen(content: HTMLDivElement, props: any): void;

package/types/apm/qr-code-payments/contracts.d.ts

@@ -1,12 +1,8 @@
-export interface IQRCodePaymentsConfiguration {
+import { IApmConfiguration } from "../non-card-payments/contracts";
+export interface IQRCodePaymentsConfiguration extends IApmConfiguration {
     enabled?: boolean;
-    allowedPaymentMethods?: IQRCodePaymentsAllowedPaymentMethod[];
 }
-export interface IQRCodePaymentsAllowedPaymentMethod {
-    provider: string;
-    image: string;
-}
-export interface IPaymentMethodConfiguration {
+export interface IPaymentMethodConfiguration extends IApmConfiguration {
     provider: {
         brand: string;
     };

package/types/apm/qr-code-payments/helpers.d.ts

@@ -1,2 +1,3 @@
 import { IPaymentMethodConfiguration, IPaymentMethodConfigurationNormalized } from "./contracts";
 export declare const normalizePaymentMethodConfigurations: (paymentMethodConfigurations: IPaymentMethodConfiguration) => IPaymentMethodConfigurationNormalized;
+export declare const validateProviderBrand: (providerBrand: string) => string;

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

@@ -94,3 +94,4 @@ export declare const createHtmlIFrameElement: (props?: {
         [key: string]: string;
     }[] | undefined;
 } | undefined) => HTMLIFrameElement;
+export declare const changeCreditCardFormFieldsVisibility: (visible: boolean) => void;

package/types/internal/gateways/gp-api/get-apm-payment-methods.d.ts

@@ -0,0 +1,3 @@
+import { IDictionary } from "../../lib/util";
+declare const _default: (url: string, _env: string, data: IDictionary) => Promise<any>;
+export default _default;

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

@@ -1,14 +1,19 @@
 export declare enum Apm {
+    ApplePay = "apple-pay",
     ClickToPay = "click-to-pay",
     GooglePay = "google-pay",
-    ApplePay = "apple-pay",
+    OpenBankingPayment = "open-banking",
     QRCodePayments = "qr-code-payments"
 }
+export declare enum ApmEvents {
+    PaymentMethodActionDetail = "apm-action-details",
+    PaymentMethodSelection = "apm-payment-method"
+}
 export declare enum CardNetwork {
-    Visa = "VISA",
-    Mastercard = "MASTERCARD",
     Amex = "AMEX",
-    Discover = "DISCOVER"
+    Discover = "DISCOVER",
+    Mastercard = "MASTERCARD",
+    Visa = "VISA"
 }
 export declare enum CharacterValidation {
     englishOnly = "englishOnly",
@@ -18,12 +23,22 @@ export declare enum Language {
     en = "en",
     zh = "zh"
 }
-export declare enum QRCodePaymentsMerchantInteractionEvents {
-    PaymentMethodSelection = "apm-payment-method",
-    ProvideQRCodeDetailsMerchantEvent = "apm-action-details",
-    TransactionCompletedMerchantEvent = "apm-success-message"
-}
 export declare enum QRCodePaymentsProviderBrands {
+    Alipay = "Alipay",
     AlipayHK = "AlipayHK",
-    Alipay = "Alipay"
+    WeChat = "WeChat"
+}
+export declare enum OpenBanking {
+    title = "Bank Payment"
+}
+export declare enum ApmProviders {
+    Alipay = "Alipay",
+    AlipayHK = "AlipayHK",
+    OpenBanking = "OPEN_BANKING",
+    WeChat = "WeChat"
+}
+export declare enum QRCodePaymentsWeChatProviderBrands {
+    WeChatBrand = "WeChat",
+    WeChatMethodResponse = "WECHAT",
+    WeChatAccountResponse = "WeChat Pay"
 }

package/types/internal/lib/styles/apple-pay/common.d.ts

@@ -0,0 +1,12 @@
+declare const styles: (assetBaseUrl: string) => {
+    "apple-pay-button": {
+        "--apple-pay-button-width": string;
+        "--apple-pay-button-height": string;
+        "--apple-pay-button-border-radius": string;
+        "--apple-pay-button-padding": string;
+        "--apple-pay-button-box-sizing": string;
+        display: string;
+        margin: string;
+    };
+};
+export default styles;

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

@@ -185,6 +185,10 @@ export declare const parentStyles: (assetBaseUrl: string) => {
         margin: string;
         cursor: string;
     };
+    ".secure-payment-form .qr-code-payment-method-button:focus"?: {
+        outline: string;
+        "outline-offset": string;
+    };
     ".secure-payment-form .qr-code-payment-method-alipayhk"?: {
         "background-color": string;
         border: string;
@@ -201,6 +205,14 @@ export declare const parentStyles: (assetBaseUrl: string) => {
         "background-color": string;
         border: string;
     };
+    ".secure-payment-form .qr-code-payment-method-wechat"?: {
+        "background-color": string;
+        border: string;
+    };
+    ".secure-payment-form .qr-code-payment-method-wechat:hover"?: {
+        "background-color": string;
+        border: string;
+    };
     ".secure-payment-form .qr-code-payment-iframe-wrapper"?: {
         display: string;
         "flex-direction": string;
@@ -216,28 +228,6 @@ export declare const parentStyles: (assetBaseUrl: string) => {
         "line-height": string;
         width: string;
     };
-    ".secure-payment-form .link-button"?: {
-        background: string;
-        border: string;
-        color: string;
-        "font-style": string;
-        "font-weight": string;
-        "line-height": string;
-        "font-size": string;
-        padding: string;
-        cursor: string;
-        margin: string;
-    };
-    ".secure-payment-form .link-button:hover"?: {
-        color: string;
-    };
-    ".secure-payment-form .link-button:active"?: {
-        color: string;
-    };
-    ".secure-payment-form .link-button:focus"?: {
-        color: string;
-        border: string;
-    };
     ".secure-payment-form .qr-code-payment-countdown-timer-message"?: {
         color: string;
         "font-size": string;
@@ -288,15 +278,78 @@ export declare const parentStyles: (assetBaseUrl: string) => {
         "font-size": string;
         "line-height": string;
     };
-    ".secure-payment-form .qr-code-redirecting-to-page"?: {
+    ".secure-payment-form .open-banking-button-wrapper": {
+        display: string;
+        "flex-direction": string;
+        "align-items": string;
+    };
+    ".secure-payment-form .open-banking-button::before": {
+        content: string;
+        width: string;
+        height: string;
+        position: string;
+        top: string;
+        right: string;
+    };
+    ".secure-payment-form .open-banking-button": {
+        position: string;
+        background: string;
+        color: string;
+        height: string;
+        width: string;
+        "border-radius": string;
+        border: string;
+        margin: string;
+        cursor: string;
+        "-webkit-box-shadow": string;
+        "-moz-box-shadow": string;
+        "box-shadow": string;
+    };
+    ".secure-payment-form .open-banking-button:hover": {
+        "border-color": string;
+        "-webkit-box-shadow": string;
+        "-moz-box-shadow": string;
+        "box-shadow": string;
+    };
+    ".secure-payment-form .open-banking-button:focus": {
+        outline: string;
+        "outline-offset": string;
+    };
+    ".secure-payment-form .link-button": {
+        display: string;
+        "flex-direction": string;
+        "align-items": string;
+        background: string;
+        border: string;
+        color: string;
+        "font-style": string;
+        "font-weight": string;
+        "line-height": string;
+        "font-size": string;
+        padding: string;
+        cursor: string;
+        margin: string;
+    };
+    ".secure-payment-form .link-button:hover": {
+        color: string;
+    };
+    ".secure-payment-form .link-button:active": {
+        color: string;
+    };
+    ".secure-payment-form .link-button:focus": {
+        color: string;
+        border: string;
+    };
+    ".secure-payment-form .apms-redirecting-to-page": {
         "justify-content": string;
         height: string;
         display: string;
         "flex-direction": string;
         "align-items": string;
     };
-    ".secure-payment-form .qr-code-redirecting-to-page-message"?: {
+    ".secure-payment-form .apms-redirecting-to-page-message": {
         color: string;
+        "font-family": string;
         "font-size": string;
         "line-height": string;
     };
@@ -304,6 +357,10 @@ export declare const parentStyles: (assetBaseUrl: string) => {
         height: string;
         margin: string;
     };
+    "#googlePay button:focus": {
+        outline: string;
+        "outline-offset": string;
+    };
     ".secure-payment-form .ctp-panel": {
         border: string;
         "box-shadow": string;

package/types/internal/lib/styles/google-pay/common.d.ts

@@ -0,0 +1,11 @@
+declare const styles: (assetBaseUrl: string) => {
+    "#googlePay": {
+        height: string;
+        margin: string;
+    };
+    "#googlePay button:focus": {
+        outline: string;
+        "outline-offset": string;
+    };
+};
+export default styles;

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

@@ -147,6 +147,10 @@ export declare const parentStyles: (assetBaseUrl: string) => {
         margin: string;
         cursor: string;
     };
+    ".secure-payment-form .qr-code-payment-method-button:focus"?: {
+        outline: string;
+        "outline-offset": string;
+    };
     ".secure-payment-form .qr-code-payment-method-alipayhk"?: {
         "background-color": string;
         border: string;
@@ -163,6 +167,14 @@ export declare const parentStyles: (assetBaseUrl: string) => {
         "background-color": string;
         border: string;
     };
+    ".secure-payment-form .qr-code-payment-method-wechat"?: {
+        "background-color": string;
+        border: string;
+    };
+    ".secure-payment-form .qr-code-payment-method-wechat:hover"?: {
+        "background-color": string;
+        border: string;
+    };
     ".secure-payment-form .qr-code-payment-iframe-wrapper"?: {
         display: string;
         "flex-direction": string;
@@ -178,28 +190,6 @@ export declare const parentStyles: (assetBaseUrl: string) => {
         "line-height": string;
         width: string;
     };
-    ".secure-payment-form .link-button"?: {
-        background: string;
-        border: string;
-        color: string;
-        "font-style": string;
-        "font-weight": string;
-        "line-height": string;
-        "font-size": string;
-        padding: string;
-        cursor: string;
-        margin: string;
-    };
-    ".secure-payment-form .link-button:hover"?: {
-        color: string;
-    };
-    ".secure-payment-form .link-button:active"?: {
-        color: string;
-    };
-    ".secure-payment-form .link-button:focus"?: {
-        color: string;
-        border: string;
-    };
     ".secure-payment-form .qr-code-payment-countdown-timer-message"?: {
         color: string;
         "font-size": string;
@@ -250,15 +240,78 @@ export declare const parentStyles: (assetBaseUrl: string) => {
         "font-size": string;
         "line-height": string;
     };
-    ".secure-payment-form .qr-code-redirecting-to-page"?: {
+    ".secure-payment-form .open-banking-button-wrapper": {
+        display: string;
+        "flex-direction": string;
+        "align-items": string;
+    };
+    ".secure-payment-form .open-banking-button::before": {
+        content: string;
+        width: string;
+        height: string;
+        position: string;
+        top: string;
+        right: string;
+    };
+    ".secure-payment-form .open-banking-button": {
+        position: string;
+        background: string;
+        color: string;
+        height: string;
+        width: string;
+        "border-radius": string;
+        border: string;
+        margin: string;
+        cursor: string;
+        "-webkit-box-shadow": string;
+        "-moz-box-shadow": string;
+        "box-shadow": string;
+    };
+    ".secure-payment-form .open-banking-button:hover": {
+        "border-color": string;
+        "-webkit-box-shadow": string;
+        "-moz-box-shadow": string;
+        "box-shadow": string;
+    };
+    ".secure-payment-form .open-banking-button:focus": {
+        outline: string;
+        "outline-offset": string;
+    };
+    ".secure-payment-form .link-button": {
+        display: string;
+        "flex-direction": string;
+        "align-items": string;
+        background: string;
+        border: string;
+        color: string;
+        "font-style": string;
+        "font-weight": string;
+        "line-height": string;
+        "font-size": string;
+        padding: string;
+        cursor: string;
+        margin: string;
+    };
+    ".secure-payment-form .link-button:hover": {
+        color: string;
+    };
+    ".secure-payment-form .link-button:active": {
+        color: string;
+    };
+    ".secure-payment-form .link-button:focus": {
+        color: string;
+        border: string;
+    };
+    ".secure-payment-form .apms-redirecting-to-page": {
         "justify-content": string;
         height: string;
         display: string;
         "flex-direction": string;
         "align-items": string;
     };
-    ".secure-payment-form .qr-code-redirecting-to-page-message"?: {
+    ".secure-payment-form .apms-redirecting-to-page-message": {
         color: string;
+        "font-family": string;
         "font-size": string;
         "line-height": string;
     };
@@ -278,6 +331,10 @@ export declare const parentStyles: (assetBaseUrl: string) => {
         height: string;
         margin: string;
     };
+    "#googlePay button:focus": {
+        outline: string;
+        "outline-offset": string;
+    };
     ".secure-payment-form .ctp-panel": {
         border: string;
         "box-shadow": string;