@globalpayments/js 3.0.8 → 3.0.12

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/3.0.8/globalpayments.js"></script>
+<script src="https://js.globalpay.com/3.0.12/globalpayments.js"></script>
 ```
 
 > Note: Installing via NPM will only provide TypeScript types for type-checking.
@@ -449,19 +449,41 @@ const cardForm = GlobalPayments.ui.form({
   fields: {
     "card-holder-name": {
       placeholder: "Jane Smith",
-      target: "#credit-card-card-holder"
+      target: "#credit-card-card-holder",
+      validationMessages: {
+        NotValidCardHolderName: 'Please enter a valid Card Holder Name',
+        CharactersMoreThan100: 'Card Holder Name can be at most 100 characters'
+      }
     },
     "card-number": {
       placeholder: "•••• •••• •••• ••••",
-      target: "#credit-card-card-number"
+      target: "#credit-card-card-number",
+      validationMessages: {
+        Required: 'A Card Number is required',
+        CharactersLessThan12: 'The Card Number must consist of at least 12 digits',
+        NumberIsNotValid: 'The Card Number is not valid',
+        NotAllowedCardType: 'Cannot process this card type, please use another Card'
+      },
     },
     "card-expiration": {
       placeholder: "MM / YYYY",
-      target: "#credit-card-card-expiration"
+      target: "#credit-card-card-expiration",
+      validationMessages: {
+        NotCompleted: 'Please enter a valid month/year',
+        YearNotValid: 'The year is not valid',
+        MonthNotValid: 'The month is not valid',
+        ExpiryDateNotValid: 'The Expiry Date is not valid',
+      }
     },
     "card-cvv": {
       placeholder: "•••",
-      target: "#credit-card-card-cvv"
+      target: "#credit-card-card-cvv",
+      validationMessages: {
+        CodeIsNotValid: 'The Card CVV is not valid',
+        CodeIsLessThan3Digits: 'Card CVV is too short',
+        CodeMustBe3Digits: 'Card CVV must be 3 digits',
+        AmexCodeMustBe4Digits: 'Card CVV for Amex must be 4 digits',
+      }
     },
     "submit": {
       value: "Submit",
@@ -473,6 +495,8 @@ const cardForm = GlobalPayments.ui.form({
 });
 ```
 
+The list of validation messages is accessible at [/packages/globalpayments-js/src/internal/lib/translations/en.ts](https://github.globalpay.com/Developer-Experience/globalpayments-js/blob/94540f9ca68bc627f4d3e038b2cec36c6bd317b0/packages/globalpayments-js/src/internal/lib/translations/en.ts#L13)
+
 ![Example: Raw credit card form](docs/images/example-raw-credit-card.png)
 
 > See demo on [JSFiddle](https://jsfiddle.net/dcy5wz2k/2/)

package/package.json

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

package/types/common/enums.d.ts

@@ -6,6 +6,7 @@ export declare enum CardFormFieldNames {
     CardHolderName = "card-holder-name"
 }
 export declare enum HostedFieldValidationEvents {
+    SetCustomValidationMessages = "hosted-field-set-custom-validation-messages",
     BuiltInValidationShow = "hosted-field-built-in-validation-show",
     BuiltInValidationHide = "hosted-field-built-in-validation-hide",
     ValidationCvvTooltipShow = "hosted-field-validation-cvv-tooltip-show",
@@ -24,3 +25,9 @@ export declare enum CardFormFieldValidationTestEvents {
     CardCvv = "card-cvv-test",
     CardHolderName = "card-holder-name-test"
 }
+export declare enum Environments {
+    Local = "local",
+    QA = "qa",
+    Sandbox = "sandbox",
+    Production = "production"
+}

package/types/internal/gateways/gp-api/index.d.ts

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

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

@@ -76,7 +76,7 @@ export interface IUrlGenerators {
     assetBaseUrl?: (result: string) => string;
     tokenization: (prod: boolean) => string;
     queryInstallmentPlans?: (prod: boolean) => string;
-    getQRCodePaymentMethodsUrl?: (prod: boolean) => string;
+    getQRCodePaymentMethodsUrl?: () => string;
 }
 export interface IGatewayModule {
     [key: string]: any;

package/types/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "3.0.8";
+declare const _default: "3.0.12";
 export default _default;

package/types/ui/iframe-field/action-set-custom-message.d.ts

@@ -0,0 +1,8 @@
+declare const _default: (type: any, customMessages: object) => void;
+/**
+ * Updates the messages for a specific validation field based on custom messages
+ *
+ * @param type - the type of the validation field (e.g., 'card-number', 'card-expiration')
+ * @param customMessages - an object containing custom messages to override the default ones
+ */
+export default _default;

package/types/ui/iframe-field/index.d.ts

@@ -12,6 +12,7 @@ export interface IUIFormField {
     value?: string;
     amount?: string;
     fieldOptions?: any;
+    validationMessages?: object;
 }
 export declare const fieldTypeAutocompleteMap: IDictionary;
 /**
@@ -150,6 +151,14 @@ export declare class IframeField extends EventEmitter {
      * @param title The desired title
      */
     setTitle(title: string): void;
+    /**
+     * Sets custom validation messages for the hosted field
+     *
+     * @param customMessages - an object containing custom validation messages
+     * The `msg` object should have keys corresponding to specific validation messages for the field.
+     * For example, { NotCompleted: 'Custom not completed message', YearNotValid: 'Custom year not valid message' }.
+     */
+    setCustomValidationMessages(customMessages: object): void;
     /**
      * Show the validation of a hosted field
      *