@globalpayments/js 1.9.14 → 1.9.18

package/package.json

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

package/types/internal/gateways/gp-api/action-query-installment-plans.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

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

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

@@ -42,6 +42,10 @@ export interface ISuccess {
         orderId?: string;
         reference?: string;
         apmProvider?: string;
+        installment?: {
+            id: string;
+            reference: string;
+        };
     };
     methodName?: string;
     payerEmail?: string;
@@ -65,10 +69,12 @@ export interface IActions {
     setup?: () => any;
     tokenize: (url: string, env: string, data: IDictionary) => Promise<any>;
     validateData: (data: IDictionary) => IErrorReason[];
+    queryInstallmentPlans?: (url: string, env: string, data: IDictionary) => Promise<any>;
 }
 export interface IUrlGenerators {
     assetBaseUrl?: (result: string) => string;
     tokenization: (prod: boolean) => string;
+    queryInstallmentPlans?: (prod: boolean) => string;
 }
 export interface IGatewayModule {
     [key: string]: any;

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

@@ -0,0 +1,9 @@
+import { IUIFormOptions } from "../../ui/form";
+/**
+ * Adds the icons for "256-bit SSL encrypted" and "Securely processed by Global Payments"
+ *
+ * @param formOptions
+ * @param target
+ *
+ */
+export declare function addFooterIcons(formOptions: IUIFormOptions, target: HTMLElement): void;

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

@@ -93,6 +93,23 @@ export default class Card {
      * @param e
      */
     static validateExpiration(e: Event): void;
+    /**
+     * validateInstallments
+     *
+     * Validates a target element"s value based on the
+     * availability of use installment plans.
+     *
+     * @param e
+     */
+    static validateInstallments(e: Event, fieldType: string): void;
+    /**
+     * displayInstallmentOptions
+     *
+     * Post an event to start the installment data request
+     *
+     * @param e
+     */
+    static displayInstallmentOptions(e: Event): void;
     /**
      * attachNumberEvents
      *

package/types/internal/lib/installments/components/add-issuer-banner.d.ts

@@ -0,0 +1,2 @@
+import { IframeField } from "../../../../ui";
+export default function addIssuerBanner(iframeField: IframeField | undefined): void;

package/types/internal/lib/installments/components/modal/create-modal-component.d.ts

@@ -0,0 +1,9 @@
+export declare const createModalComponent: (modalProps: {
+    id: string;
+    htmlContent?: HTMLElement | undefined;
+}) => ModalComponent | undefined;
+export interface ModalComponent {
+    open: () => void;
+    close: () => void;
+    modalElement: HTMLDivElement;
+}

package/types/internal/lib/installments/components/modal/styles.d.ts

@@ -0,0 +1,23 @@
+declare const styles: (_assetBaseUrl: string) => {
+    ".secure-payment-form .modal-overlay": {
+        background: string;
+        position: string;
+        top: string;
+        left: string;
+        margin: string;
+        width: string;
+        height: string;
+        display: string;
+        "justify-content": string;
+        "align-items": string;
+        "z-index": string;
+    };
+    ".secure-payment-form .modal-wrapper": {
+        "font-family": string;
+        background: string;
+        "border-width": string;
+        "border-radius": string;
+        overflow: string;
+    };
+};
+export default styles;

package/types/internal/lib/installments/contracts/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const INSTALLMENTS_KEY = "installments";
+export declare const INSTALLMENTS_CONFIG_DEFAULT_CHANNEL = "CNP";
+export declare const INSTALLMENTS_CONFIG_DEFAULT_ENTRY_MODE = "ECOM";

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

@@ -0,0 +1,13 @@
+export declare enum InstallmentEvents {
+    CardInstallmentsRequestStart = "card-installments-request-start",
+    CardInstallmentsRequestCompleted = "card-installments-request-completed",
+    CardInstallmentsHide = "card-installments-hide"
+}
+export declare enum InstallmentAvailableStatus {
+    Available = "AVAILABLE",
+    NotAvailable = "NOT_AVAILABLE"
+}
+export declare enum InstallmentTermModes {
+    APR = "APR",
+    FEE = "FEE"
+}

package/types/internal/lib/installments/contracts/installment-action.d.ts

@@ -0,0 +1,20 @@
+/**
+ * InstallmentAction class model.
+ */
+export default class InstallmentAction {
+    id: string;
+    type: string;
+    timeCreated: string;
+    resultCode: string;
+    appId: string;
+    appName: string;
+    constructor(_id: string, _type: string, _timeCreated: string, _resultCode: string, _appId: string, _appName: string);
+}
+export declare function installmentActionMapper(origin: {
+    id: string;
+    type: string;
+    time_created: string;
+    result_code: string;
+    app_id: string;
+    app_name: string;
+}): InstallmentAction;

package/types/internal/lib/installments/contracts/installment-payment-method.d.ts

@@ -0,0 +1,21 @@
+/**
+ * InstallmentPaymentMethod class model.
+ */
+export default class InstallmentPaymentMethod {
+    entryMode: string;
+    card: {
+        brand: string;
+        maskedNumberLast4: string;
+    };
+    constructor(_entryMode: string, _card: {
+        brand: string;
+        maskedNumberLast4: string;
+    });
+}
+export declare function installmentPaymentMethodMapper(origin: {
+    entry_mode: string;
+    card: {
+        brand: string;
+        masked_number_last4: string;
+    };
+}): InstallmentPaymentMethod;

package/types/internal/lib/installments/contracts/installment-plans-data.d.ts

@@ -0,0 +1,50 @@
+import InstallmentAction from "./installment-action";
+import InstallmentPaymentMethod from "./installment-payment-method";
+import InstallmentTerm from "./installment-term";
+/**
+ * InstallmentPlansData class models the data returned from the server with the installment plans and terms.
+ */
+export default class InstallmentPlansData {
+    id: string;
+    timeCreated: string;
+    type: string;
+    status: string;
+    channel: string;
+    amount: string;
+    currency: string;
+    country: string;
+    merchantId: string;
+    merchantName: string;
+    accountId: string;
+    accountName: string;
+    reference: string;
+    termsAndConditionsUrl: string;
+    providerImageUrl: string;
+    terms: InstallmentTerm[];
+    paymentMethod: InstallmentPaymentMethod;
+    action: InstallmentAction;
+    constructor(_id: string, _timeCreated: string, _type: string, _status: string, _channel: string, _amount: string, _currency: string, _country: string, _merchantId: string, _merchantName: string, _accountId: string, _accountName: string, _reference: string, _termsAndConditionsUrl: string, _providerImageUrl: string, _terms: InstallmentTerm[], _paymentMethod: InstallmentPaymentMethod, _action: InstallmentAction);
+}
+export declare function installmentPlansDataMapper(origin: {
+    id: string;
+    time_created: string;
+    type: string;
+    status: string;
+    channel: string;
+    amount: string;
+    currency: string;
+    country: string;
+    merchant_id: string;
+    merchant_name: string;
+    account_id: string;
+    account_name: string;
+    reference: string;
+    terms_and_conditions_url: string;
+    provider_image_url: string;
+    terms: any[];
+    payment_method: any;
+    action: any;
+}): InstallmentPlansData;
+export declare function verifyInstallmentAvailability(installmentPlansData: {
+    status: string;
+}): boolean;

package/types/internal/lib/installments/contracts/installment-term-fees.d.ts

@@ -0,0 +1,16 @@
+/**
+ * InstallmentTermFees class model.
+ */
+export default class InstallmentTermFees {
+    currency: string;
+    totalAmount: string;
+    fixedAmount: string;
+    monthlyAmount: string;
+    constructor(_currency: string, _totalAmount: string, _fixedAmount: string, _monthlyAmount: string);
+}
+export declare function installmentTermFeesMapper(origin: {
+    currency: string;
+    total_amount: string;
+    fixed_amount: string;
+    monthly_amount: string;
+}): InstallmentTermFees;

package/types/internal/lib/installments/contracts/installment-term.d.ts

@@ -0,0 +1,35 @@
+import InstallmentTermFees from "./installment-term-fees";
+/**
+ * InstallmentTerm class model.
+ */
+export default class InstallmentTerm {
+    reference: string;
+    timeUnitAmount: string;
+    currency: string;
+    mode: string;
+    totalTimeUnitCount: string;
+    interestRate: string;
+    totalAmount?: string;
+    description: string;
+    expirationDate: string;
+    expirationInterestRate: string;
+    timeUnit: string;
+    termsAndConditionsUrl: string;
+    fees?: InstallmentTermFees;
+    constructor(_reference: string, _timeUnitAmount: string, _currency: string, _mode: string, _totalTimeUnitCount: string, _interestRate: string, _totalAmount: string, _description: string, _expirationDate: string, _expirationInterestRate: string, _timeUnit: string, _termsAndConditionsUrl: string, _fees?: InstallmentTermFees);
+}
+export declare function installmentTermMapper(origin: {
+    reference: string;
+    time_unit_amount: string;
+    currency: string;
+    mode: string;
+    total_time_unit_count: string;
+    interest_rate: string;
+    total_amount: string;
+    description: string;
+    expiration_date: string;
+    expiration_interest_rate: string;
+    terms_and_conditions_url: string;
+    time_unit: string;
+    fees?: any;
+}): InstallmentTerm;

package/types/internal/lib/installments/helpers/currency.d.ts

@@ -0,0 +1,2 @@
+export declare const getCurrencySymbol: (currency: string) => string;
+export declare const addCurrencyToAmount: (currency: string, amount: string | number | undefined) => string;

package/types/internal/lib/installments/helpers/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/lib/installments/installments-handler.d.ts

@@ -0,0 +1,48 @@
+import { IframeField } from "../../../ui";
+import InstallmentPlansData from "./contracts/installment-plans-data";
+export declare class InstallmentsHandler {
+    private readonly iframeField;
+    private readonly installmentPlans;
+    private currentStepIndex;
+    private steps;
+    private context;
+    private selectedTermIndex;
+    private tokenizationCallback;
+    constructor(_iframeField: IframeField | undefined, _installmentPlans: InstallmentPlansData, _tokenizationCallback: (installment: InstallmentPaymentData) => void);
+    init(): void;
+    private moveNext;
+    private moveToInitialStep;
+    private updateContainerContent;
+    private createContainerElement;
+    private getInstallmentSteps;
+    private getInitialContext;
+    private explorePlansHanlder;
+    private selectTermHandler;
+    private payHandler;
+    private changePaymentMethodHandler;
+    private changeCreditCardFormFieldsVisibility;
+}
+export interface InstallmentsContext {
+    installmentPlans: InstallmentPlansData;
+    selectedTerm: number;
+    hasIssuerInfo?: boolean;
+    explorePlans: () => void;
+    selectTerm: (i: number) => void;
+    changePaymentMethod: () => void;
+    pay: (e: Event) => void;
+    updateContainerContent: () => void;
+}
+export interface InstallmentStepDefinition {
+    initialize?: (context: InstallmentsContext) => void;
+    contentHandler: (context: InstallmentsContext) => HTMLElement;
+    eventsListeners: (context: InstallmentsContext) => InstallmentEventListenerDefinition[];
+}
+export interface InstallmentEventListenerDefinition {
+    elementSelector: string;
+    eventName: string;
+    eventHandler: (e: Event) => void;
+}
+export interface InstallmentPaymentData {
+    id: string;
+    reference: string;
+}

package/types/internal/lib/installments/requests/query-installment-plans.d.ts

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

package/types/internal/lib/installments/templates/common.d.ts

@@ -0,0 +1,6 @@
+export declare const getProvidedByIssuerTemplate: (props: {
+    providerImageSrc: string;
+    providerImageAlt: string;
+}) => HTMLElement;
+export declare const getChangePaymentMethodTemplate: (buttonId: string) => HTMLElement;
+export declare const getHaveVirginMoneyCreditCardBannerTemplate: () => HTMLElement;

package/types/internal/lib/installments/templates/create-step-0.d.ts

@@ -0,0 +1,3 @@
+import { InstallmentStepDefinition } from "../installments-handler";
+declare const _default: InstallmentStepDefinition;
+export default _default;

package/types/internal/lib/installments/templates/create-step-1.d.ts

@@ -0,0 +1,3 @@
+import { InstallmentStepDefinition } from "../installments-handler";
+declare const _default: InstallmentStepDefinition;
+export default _default;

package/types/internal/lib/installments/templates/modals.d.ts

@@ -0,0 +1,6 @@
+export declare const getLearnMoreModalContentTemplate: (buttonIds: {
+    closeButtonId: string;
+    explorePlansButtonId: string;
+    termsAndConditionsUrl: string;
+    providerImageSrc: string;
+}) => HTMLElement;

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

@@ -69,57 +69,73 @@ export declare const fieldStyles: (assetBaseUrl: string) => {
         background: string;
         "background-size": string;
     };
-    ".card-number": {
+    "img.card-number": {
         background: string;
         "background-size": string;
+        width: string;
+        height: string;
+        position: string;
+        right: string;
+        top: string;
+        "margin-top": string;
+        "background-position": string;
     };
-    ".card-number.invalid.card-type-amex": {
+    "img.card-number[src$='/gp-cc-generic.svg']": {
         background: string;
-        "background-position-y": string;
         "background-size": string;
+        "background-position-y": string;
     };
-    ".card-number.invalid.card-type-discover": {
+    "img.card-number.invalid.card-type-amex": {
         background: string;
-        "background-position-y": string;
         "background-size": string;
+        "background-position-y": string;
     };
-    ".card-number.invalid.card-type-jcb": {
+    "img.card-number.invalid.card-type-discover": {
         background: string;
-        "background-position-y": string;
         "background-size": string;
+        "background-position-y": string;
+        width: string;
     };
-    ".card-number.invalid.card-type-mastercard": {
+    "img.card-number.invalid.card-type-jcb": {
         background: string;
-        "background-position-y": string;
         "background-size": string;
+        "background-position-y": string;
     };
-    ".card-number.invalid.card-type-visa": {
+    "img.card-number.invalid.card-type-mastercard": {
         background: string;
-        "background-position-y": string;
         "background-size": string;
+        "background-position-y": string;
     };
-    ".card-number.valid.card-type-amex": {
+    "img.card-number.invalid.card-type-visa": {
         background: string;
         "background-size": string;
+        "background-position-y": string;
     };
-    ".card-number.valid.card-type-discover": {
+    "img.card-number.valid.card-type-amex": {
         background: string;
-        "background-position-y": string;
         "background-size": string;
+        "background-position-y": string;
     };
-    ".card-number.valid.card-type-jcb": {
+    "img.card-number.valid.card-type-discover": {
         background: string;
-        "background-position-y": string;
         "background-size": string;
+        "background-position-y": string;
+        width: string;
     };
-    ".card-number.valid.card-type-mastercard": {
+    "img.card-number.valid.card-type-jcb": {
         background: string;
+        "background-size": string;
         "background-position-y": string;
+    };
+    "img.card-number.valid.card-type-mastercard": {
+        background: string;
         "background-size": string;
+        "background-position-y": string;
     };
-    ".card-number.valid.card-type-visa": {
+    "img.card-number.valid.card-type-visa": {
         background: string;
         "background-size": string;
+        "background-position-y": string;
     };
     ".card-number::-ms-clear": {
         display: string;
@@ -443,6 +459,56 @@ export declare const parentStyles: (assetBaseUrl: string) => {
         height: string;
         "margin-bottom": string;
     };
+    ".secure-payment-form div[class$='-shield']": {
+        flex: string;
+        "margin-right": string;
+        float: string;
+    };
+    ".secure-payment-form div[class$='-shield'] .ssl-text-logo": {
+        border: string;
+        "border-radius": string;
+        width: string;
+        height: string;
+        "text-align": string;
+        margin: string;
+    };
+    ".secure-payment-form div[class$='-shield'] .ssl-logo_ico": {
+        width: string;
+        height: string;
+        "margin-top": string;
+        "vertical-align": string;
+    };
+    ".secure-payment-form div[class$='-shield'] .ssl-msg": {
+        "font-size": string;
+        "font-weight": string;
+        "font-family": string;
+        color: string;
+        "line-height": string;
+        display: string;
+        "vertical-align": string;
+        "text-align": string;
+        "margin-left": string;
+        "margin-right": string;
+        "margin-top": string;
+    };
+    ".secure-payment-form div[class$='-logo']": {
+        flex: string;
+        "margin-left": string;
+        width: string;
+        height: string;
+        "text-align": string;
+        float: string;
+    };
+    ".secure-payment-form div[class$='-logo'] .security-msg": {
+        color: string;
+        "font-size": string;
+        display: string;
+        "vertical-align": string;
+        "margin-right": string;
+    };
+    ".secure-payment-form div[class$='-logo'] img": {
+        "vertical-align": string;
+    };
     ".secure-payment-form div": {
         display: string;
     };