@globalpayments/js 2.0.1 → 2.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/v1/globalpayments.js"></script>
+<script src="https://js.globalpay.com/2.1.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.0.1",
+  "version": "2.1.3",
   "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": "xcopy src\\assets dist\\ /e/y/h && node bin/replace-gp-ref.js",
+    "postbuild": "cross-os postbuild-cross",
 
     "prebuild": "yarn test:lint && node bin/update-version.js",
     "prepublish": "yarn build",

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

@@ -0,0 +1,2 @@
+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/components/redirect-action-handler.d.ts

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

package/types/apm/qr-code-payments/components/redirect-in-frame-action-handler.d.ts

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

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

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

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

@@ -0,0 +1,17 @@
+export interface IQRCodePaymentsConfiguration {
+    enabled?: boolean;
+    allowedPaymentMethods?: IQRCodePaymentsAllowedPaymentMethod[];
+}
+export interface IQRCodePaymentsAllowedPaymentMethod {
+    provider: string;
+    image: string;
+}
+export interface IPaymentMethodConfiguration {
+    provider: {
+        brand: string;
+    };
+    image: string;
+}
+export interface IPaymentMethodConfigurationNormalized extends Omit<IPaymentMethodConfiguration, 'provider'> {
+    provider: string;
+}

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

@@ -0,0 +1,10 @@
+export declare const enum QRCodePaymentsInternalEvents {
+    PaymentMethodsRequestStart = "qr-code-payment-methods-request-start",
+    PaymentMethodsRequestCompleted = "qr-code-payment-methods-request-completed",
+    NavigatesBackBySelectAnotherPaymentMethod = "qr-code-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/qr-code-payments/helpers.d.ts

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

package/types/apm/qr-code-payments/requests/get-qr-code-payment-methods.d.ts

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

package/types/common/currency.d.ts

@@ -0,0 +1,7 @@
+export declare const getCurrencySymbol: (currencyCode: string) => string;
+export declare const addCurrencyToAmount: (currency: string, amount: string | number | undefined) => string;
+export declare const availableCurrencies: {
+    description: string;
+    code: string;
+    symbol: string;
+}[];

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

@@ -86,3 +86,11 @@ export declare const createHtmlLabelElement: (props?: {
     htmlFor: string;
     textContent?: string | undefined;
 } | undefined) => HTMLLabelElement;
+export declare const createHtmlIFrameElement: (props?: {
+    id?: string | undefined;
+    src: string;
+    className?: string | undefined;
+    attributes?: {
+        [key: string]: string;
+    }[] | undefined;
+} | undefined) => HTMLIFrameElement;

package/types/internal/gateways/gp-api/get-qr-code-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/gateways/gp-api/index.d.ts

@@ -22,6 +22,7 @@ export declare const urls: {
     assetBaseUrl: (result: string) => string;
     tokenization: (prod: boolean) => string;
     queryInstallmentPlans: (prod: boolean) => string;
+    getQRCodePaymentMethodsUrl: (prod: boolean) => string;
 };
 export declare const actions: IActions;
 export declare const requiredSettings: string[];

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

@@ -70,11 +70,13 @@ export interface IActions {
     tokenize: (url: string, env: string, data: IDictionary) => Promise<any>;
     validateData: (data: IDictionary) => IErrorReason[];
     queryInstallmentPlans?: (url: string, env: string, data: IDictionary) => Promise<any>;
+    getQRCodePaymentMethods?: (url: string, env: string, data: IDictionary) => Promise<any>;
 }
 export interface IUrlGenerators {
     assetBaseUrl?: (result: string) => string;
     tokenization: (prod: boolean) => string;
     queryInstallmentPlans?: (prod: boolean) => string;
+    getQRCodePaymentMethodsUrl?: (prod: boolean) => string;
 }
 export interface IGatewayModule {
     [key: string]: any;

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

@@ -1,7 +1,8 @@
 export declare enum Apm {
     ClickToPay = "click-to-pay",
     GooglePay = "google-pay",
-    ApplePay = "apple-pay"
+    ApplePay = "apple-pay",
+    QRCodePayments = "qr-code-payments"
 }
 export declare enum CardNetwork {
     Visa = "VISA",
@@ -17,3 +18,18 @@ 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 {
+    AlipayHK = "AlipayHK",
+    Alipay = "Alipay",
+    WeChat = "WeChat"
+}
+export declare enum QRCodePaymentsWeChatProviderBrands {
+    WeChatBrand = "WeChat",
+    WeChatMethodResponse = "WECHAT",
+    WeChatAccountResponse = "WeChat Pay"
+}

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

@@ -165,6 +165,149 @@ export declare const fieldStyles: (assetBaseUrl: string) => {
     };
 };
 export declare const parentStyles: (assetBaseUrl: string) => {
+    ".secure-payment-form .credit-card-qr-code-payments"?: {
+        "font-family": string;
+    };
+    ".secure-payment-form .credit-card-qr-code-payments-target, .qr-code-payment-content, .qr-code-payment-countdown-timer"?: {
+        display: string;
+        "flex-direction": string;
+        "align-items": string;
+    };
+    ".secure-payment-form .qr-code-payment-methods-wrapper"?: {
+        width: string;
+    };
+    ".secure-payment-form .qr-code-payment-method-button"?: {
+        color: string;
+        height: string;
+        width: string;
+        "border-radius": string;
+        border: string;
+        margin: string;
+        cursor: string;
+    };
+    ".secure-payment-form .qr-code-payment-method-alipayhk"?: {
+        "background-color": string;
+        border: string;
+    };
+    ".secure-payment-form .qr-code-payment-method-alipayhk:hover"?: {
+        "background-color": string;
+        border: string;
+    };
+    ".secure-payment-form .qr-code-payment-method-alipay"?: {
+        "background-color": string;
+        border: string;
+    };
+    ".secure-payment-form .qr-code-payment-method-alipay:hover"?: {
+        "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;
+        "align-items": string;
+    };
+    ".secure-payment-form .qr-code-payment-iframe"?: {
+        border: string;
+        width: string;
+        height: string;
+    };
+    ".secure-payment-form .qr-code-payment-content"?: {
+        "font-size": 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;
+        "line-height": string;
+    };
+    ".secure-payment-form .qr-code-payment-countdown-timer-clock img"?: {
+        "margin-right": string;
+    };
+    ".secure-payment-form .qr-code-payment-countdown-timer-clock"?: {
+        display: string;
+        "align-items": string;
+        color: string;
+        "font-size": string;
+        "line-height": string;
+        "font-weight": string;
+        "justify-content": string;
+    };
+    ".secure-payment-form .payment-amount"?: {
+        color: string;
+        "font-style": string;
+        "font-weight": string;
+        "line-height": string;
+        "font-size": string;
+    };
+    ".secure-payment-form .qr-code-expired-alert"?: {
+        display: string;
+        border: string;
+        height: string;
+        "margin-top": string;
+    };
+    ".secure-payment-form .qr-code-expired-alert-icon"?: {
+        background: string;
+        display: string;
+        "align-items": string;
+        "justify-content": string;
+        width: string;
+    };
+    ".secure-payment-form .qr-code-expired-alert-message"?: {
+        display: string;
+        "flex-direction": string;
+        "justify-content": string;
+        padding: string;
+        "font-size": string;
+        "line-height": string;
+    };
+    ".secure-payment-form .qr-code-expired-alert-message-title"?: {
+        color: string;
+        "font-size": string;
+        "line-height": string;
+    };
+    ".secure-payment-form .qr-code-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"?: {
+        color: string;
+        "font-size": string;
+        "line-height": string;
+    };
     "#googlePay": {
         height: string;
         margin: string;

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

@@ -127,6 +127,149 @@ export declare const fieldStyles: (assetBaseUrl: string) => {
     };
 };
 export declare const parentStyles: (assetBaseUrl: string) => {
+    ".secure-payment-form .credit-card-qr-code-payments"?: {
+        "font-family": string;
+    };
+    ".secure-payment-form .credit-card-qr-code-payments-target, .qr-code-payment-content, .qr-code-payment-countdown-timer"?: {
+        display: string;
+        "flex-direction": string;
+        "align-items": string;
+    };
+    ".secure-payment-form .qr-code-payment-methods-wrapper"?: {
+        width: string;
+    };
+    ".secure-payment-form .qr-code-payment-method-button"?: {
+        color: string;
+        height: string;
+        width: string;
+        "border-radius": string;
+        border: string;
+        margin: string;
+        cursor: string;
+    };
+    ".secure-payment-form .qr-code-payment-method-alipayhk"?: {
+        "background-color": string;
+        border: string;
+    };
+    ".secure-payment-form .qr-code-payment-method-alipayhk:hover"?: {
+        "background-color": string;
+        border: string;
+    };
+    ".secure-payment-form .qr-code-payment-method-alipay"?: {
+        "background-color": string;
+        border: string;
+    };
+    ".secure-payment-form .qr-code-payment-method-alipay:hover"?: {
+        "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;
+        "align-items": string;
+    };
+    ".secure-payment-form .qr-code-payment-iframe"?: {
+        border: string;
+        width: string;
+        height: string;
+    };
+    ".secure-payment-form .qr-code-payment-content"?: {
+        "font-size": 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;
+        "line-height": string;
+    };
+    ".secure-payment-form .qr-code-payment-countdown-timer-clock img"?: {
+        "margin-right": string;
+    };
+    ".secure-payment-form .qr-code-payment-countdown-timer-clock"?: {
+        display: string;
+        "align-items": string;
+        color: string;
+        "font-size": string;
+        "line-height": string;
+        "font-weight": string;
+        "justify-content": string;
+    };
+    ".secure-payment-form .payment-amount"?: {
+        color: string;
+        "font-style": string;
+        "font-weight": string;
+        "line-height": string;
+        "font-size": string;
+    };
+    ".secure-payment-form .qr-code-expired-alert"?: {
+        display: string;
+        border: string;
+        height: string;
+        "margin-top": string;
+    };
+    ".secure-payment-form .qr-code-expired-alert-icon"?: {
+        background: string;
+        display: string;
+        "align-items": string;
+        "justify-content": string;
+        width: string;
+    };
+    ".secure-payment-form .qr-code-expired-alert-message"?: {
+        display: string;
+        "flex-direction": string;
+        "justify-content": string;
+        padding: string;
+        "font-size": string;
+        "line-height": string;
+    };
+    ".secure-payment-form .qr-code-expired-alert-message-title"?: {
+        color: string;
+        "font-size": string;
+        "line-height": string;
+    };
+    ".secure-payment-form .qr-code-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"?: {
+        color: string;
+        "font-size": string;
+        "line-height": string;
+    };
     ".secure-payment-form .hf-cvv-tooltip-invalid"?: {
         border: string;
         "border-left": string;

package/types/internal/lib/styles/qr-code-payments/common.d.ts

@@ -0,0 +1,151 @@
+export declare const fieldStyles: (assetBaseUrl: string) => {
+    "@font-face": {
+        "font-family": string;
+        src: string;
+    };
+};
+export declare const styles: (assetBaseUrl: string) => {
+    ".secure-payment-form .credit-card-qr-code-payments": {
+        "font-family": string;
+    };
+    ".secure-payment-form .credit-card-qr-code-payments-target, .qr-code-payment-content, .qr-code-payment-countdown-timer": {
+        display: string;
+        "flex-direction": string;
+        "align-items": string;
+    };
+    ".secure-payment-form .qr-code-payment-methods-wrapper": {
+        width: string;
+    };
+    ".secure-payment-form .qr-code-payment-method-button": {
+        color: string;
+        height: string;
+        width: string;
+        "border-radius": string;
+        border: string;
+        margin: string;
+        cursor: string;
+    };
+    ".secure-payment-form .qr-code-payment-method-alipayhk": {
+        "background-color": string;
+        border: string;
+    };
+    ".secure-payment-form .qr-code-payment-method-alipayhk:hover": {
+        "background-color": string;
+        border: string;
+    };
+    ".secure-payment-form .qr-code-payment-method-alipay": {
+        "background-color": string;
+        border: string;
+    };
+    ".secure-payment-form .qr-code-payment-method-alipay:hover": {
+        "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;
+        "align-items": string;
+    };
+    ".secure-payment-form .qr-code-payment-iframe": {
+        border: string;
+        width: string;
+        height: string;
+    };
+    ".secure-payment-form .qr-code-payment-content": {
+        "font-size": 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;
+        "line-height": string;
+    };
+    ".secure-payment-form .qr-code-payment-countdown-timer-clock img": {
+        "margin-right": string;
+    };
+    ".secure-payment-form .qr-code-payment-countdown-timer-clock": {
+        display: string;
+        "align-items": string;
+        color: string;
+        "font-size": string;
+        "line-height": string;
+        "font-weight": string;
+        "justify-content": string;
+    };
+    ".secure-payment-form .payment-amount": {
+        color: string;
+        "font-style": string;
+        "font-weight": string;
+        "line-height": string;
+        "font-size": string;
+    };
+    ".secure-payment-form .qr-code-expired-alert": {
+        display: string;
+        border: string;
+        height: string;
+        "margin-top": string;
+    };
+    ".secure-payment-form .qr-code-expired-alert-icon": {
+        background: string;
+        display: string;
+        "align-items": string;
+        "justify-content": string;
+        width: string;
+    };
+    ".secure-payment-form .qr-code-expired-alert-message": {
+        display: string;
+        "flex-direction": string;
+        "justify-content": string;
+        padding: string;
+        "font-size": string;
+        "line-height": string;
+    };
+    ".secure-payment-form .qr-code-expired-alert-message-title": {
+        color: string;
+        "font-size": string;
+        "line-height": string;
+    };
+    ".secure-payment-form .qr-code-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": {
+        color: string;
+        "font-size": string;
+        "line-height": string;
+    };
+};