globalpayments/globalpayments-js

JavaScript library for web applications to connect to Heartland eCommerce & Global Payments eCommerce tokenization services

Global Payments

Packages

• @globalpayments/js - JavaScript library for web applications to connect to Heartland eCommerce & Global Payments eCommerce tokenization services
• @globalpayments/js-loader - IN PROGRESS - Helper library for dynamically loading @globalpayments/js within web applications
• @globalpayments/js-web-components - IN PROGRESS - Exposes web components / custom elements around @globalpayments/js
• globalpayments-3ds - Helper library for leveraging 3DSecure 2 for Strong Customer Authentication (SCA)
• globalpayments-lib - Helper library for Global Payments JavaScript libraries

Development

This monorepo uses lerna. Run the below to get started within a new environment:

yarn install
yarn lerna bootstrap

This will install all dependencies as well as a local copy of lerna.

Common scripts can be ran across packages, e.g.:

yarn lerna run build

Scripts can be ran against individual packages as well, e.g.:

yarn lerna run --scope=@globalpayments/js test

Supported Browsers

The library is supported on the following browsers:

• Google Chrome
• Safari
• Microsoft Edge
• Opera
• Mozilla Firefox

globalpayments-js's Issues

High amount of Challenge Failures - How to Debug?

Hello

We have a successful 3DS2 implementation using the PHP SDK and this library.

We followed the guide here: https://developer.globalpay.com/ecommerce/3d-secure-version2/browser-authentication#step-by-step-guide-for-javascript-library---sdk-

I can see that we do have successful 3DS2 Challenge payments, therefore it is set up correctly.

Yet we are seeing a large amount of Challenge Failures - with the user trying multiple times, suggesting they are not being presented with a Challenge window.

Here's a summary of where the issue is happening.

try {
   authenticationData = await initiateAuthentication('/ThreeDSecure2/InitiateAuthentication', {
      data
   });

   if (authenticationData.result == "AUTHORIZATION_SUCCESS") {
      ...
   }

   else if (authenticationData.result == "AUTHORIZATION_FAILURE") {
      ...
   }

   else if (authenticationData.result == "AUTHENTICATION_FAILURE") {
      ...
   }

   // challenge success
   else if (authenticationData.challenge.response.data.transStatus == "Y") {
      ...
   }

   // challenge failure
   else {
      This is where we're ending up on these Challenge Failures
      ...
   }
}

catch (e) {

}

We're not seeing any errors thrown in the backend InitiateAuthentication endpoint.
In the final else above I am logging the contents of authenticationData.challenge for debugging purposes and it has the following inside it:
requestUrl: 'a url to rsa3dauth.co.uk', encodedChallengeRequest: 'the encoded challenge request' so as you can see, no challenge response.

The ChallengeWindow is configured as follows:

challengeWindow: {
  windowSize: ChallengeWindowSize.FullScreen,
  displayMode: 'lightbox',
}

Has anyone seen this before or know how best to debug this?
Thanks

Failed to construct 'PaymentRequest'

Hello,
Chrome is giving me this error when I click on a button prepared with GlobalPayments.paymentRequest.setup:

Must be in a top-level browsing context or an iframe needs to specify 'allowpaymentrequest' explicitly

I have not created an iframe, so I assume GlobalPayments.js is doing this. Is this a bug, or am I doing something wrong?

I am using 1.0.1 at https://api2-c.heartlandportico.com/SecureSubmit.v1/token/gp-1.0.1/globalpayments.js because there appears to be nothing newer at heartlandportico.com...

THanks!

James

How to process a payment?

Can you give me some Javascript example of how we can process a payment?
Like we can do in Java, c#, node, PHP We simply make a request shown in the attachment and it returns the response.

GlobalPayments.ThreeDSecure.handle3dsVersionCheck doesn't trigger the notificationUrl

I'm not sure if this is normal... we're implementing the new java sdk away from the old rxp-remote-java library in order to support 3DS2 but when submitting the hidden iframe with the encoded method data, there is no notification requests hitting our test server.

The function handle3dsVersionCheck correctly passes the encoded data and an iframe gets generated, and submits the form to https://test.portal.gpwebpay.com/pay-sim/sim/acs with a 200 OK. On our end nothing happens either server side or client side apart from the iframe being closed after timeout.

Do we proceed with authentication at this point or am I doing something strange.

Let me know if you need more details as I wasn't sure how much data you want in Github issues.

Heartland tokenization docs use new GlobalPayments code but link to old HPS example

Not sure if I should post here or email support. Just want to bring up the issues I'm running into while migrating from v2 to v3 so that it's clear for myself and others.

The v3 tokenization docs link over to the old HPS tokenization demo. I'll dive into the source here to see how to apply my own styles and figure out the other aspects of using this.

SSL No Longer Trusted

The SSL Certificate for https://api2-c.heartlandportico.com/SecureSubmit.v1/token/gp-1.0.2/globalpayments.js is no longer trusted by Google Chrome.

function inside frames : SetValue, SetText not working.

As you see in above, there is no affect to current screen, the data still appear.

Meanwhile I'm able to list down all function of frames.

Please give me sum advices to not reload entire of screen, I want to reload data only.
Thanks

Invalid ui.form configuration on globalpayments example

There's an error trying to reproduce the globalpayments HPP given in the example folder.
It always returns the error INVALID_CARD_HOLDER_NAME

As stated in this validator

globalpayments-js/src/internal/gateways/globalpayments/action-validate-data.ts

Line 28 in 6743dc3

if (!data["card-holder-name"]) {

Injected reference in

globalpayments-js/examples/globalpayments.html

Line 65 in 6743dc3

"card-holder": {

Should be card-holder-name instead of card-holder

All inputs created with type="tel"

All iframe input fields are created with type="tel", see:

globalpayments-js/src/ui/iframe-field/index.ts

Line 53 in b19eeb5

input.setAttribute("type", type === "button" ? "button" : "tel");

This causes issue for alphanumeric fields(like card holder name) on modern mobile devices.
User is not able to fill such fields properly, as on mobile devices such field will switch keyboard layout to "phone", allowing only numeric values to be typed in.

Does enableAutocomplete work?

We have a Heartland integration that works fine except that I can't get browser autocomplete to work in the card number field. I'm configuring GlobalPayments with:

	GlobalPayments.configure(
		publicApiKey: '....'
		enableAutocomplete: true
	)

then constructing the form with GlobalPayments.ui.form.

We're current using globalpayments.js from here: https://api2.heartlandportico.com/SecureSubmit.v1/token/gp-1.3.0/globalpayments.js

No browser autocomplete happens when clicking/typing into the card number field. Is there something I'm missing on how to get this feature working?

Thanks!

Remember Me options in embedded form

Hi,

I am currently a developer and Im implementing Heartland/global payments solution to one of my clients. And My client request that maybe we can add "remember me" option in the embedded secure submit form, is it posible in the current library? If so, can someone walk me through on how to do it?

Thanks,
Algie

fetch() call in makeRequest() omits credentials

The fetch() call in makeRequest() omits credentials( "credentials" : "omit" ). This interferes with a session based payment flow.
What is the reason for this value?

Wouldn't "same-origin" be a more sane alternative?

Npm package failing to install

Hi,
I'm not sure where to find help on Npm packages installation, hopefully it's here.

I'm trying to install the Npm package that I found here
https://www.npmjs.com/package/@globalpayments/js

when I do the command
npm i @globalpayments/js

I get this error

npm ERR! code ETARGET
npm ERR! notarget No matching version found for globalpayments-lib@^1.8.6.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

From what I can see https://www.npmjs.com/package/globalpayments-lib
is only up to 1.8.5 but globalpayments-lib is requesting 1.8.6 somewhere in.

Typescript typings prevent data from being passed to event listeners

We are using the library with the Typescript types provided in this repository.

In your docs, you give this as an example of how to listen for errors:

GlobalPayments.on("error", (error) => {
  console.error(error);
});

The issue is that, the .on function is defined as:

on: (ev: string, listener: IEventListener) => void;

and IEventListener is defined as:

export declare type IEventListener = () => void;

So this type dictates that no data should be passed through an event listener.

I know that the code is actually passing the data through these listeners, but this mis-typing prevents our Typescript project from compiling without explicitly ignoring typings for the .on function.

`dist` folder missing for @globalpayments/js

Can you push the dist folder to the repo for @globalpayments/js

i.e remove dist/ from packages/globalpayments-js/.gitignore

submit value is not changing

im implementing the form on our site and i need to change the submit text on the form
< const cardForm = window.GlobalPayments.ui.form({
fields: {
....
"submit": {
value: 'ADD',
target: "#credit-card-submit"
}
},
....

but the value is not updating for some reason, any thing i can do?

Are there any events emitted for when tokenization is requested?

I want to trigger a loading state in my application when the payment request is initialized (i.e. Submit is clicked).

How to tokenize CC without submit iFrame

I am trying to tokenize credit card data without using an iframe submit button. In the Heartland example I see cardExternalTrigger as the solution to this; however no requests are made and the token-success event does not fire.

document.getElementById('place-order-btn').addEventListener('click', function(event) {
	event.preventDefault();

	for (var type in cardForm.fields) {
		if (type === "submit") {
			continue;
		}

		var field = cardForm.frames[type];
		
		if (!field) {
			continue;
		}

		GlobalPayments.internal.postMessage.post(
			{
				data: {
					fields: cardForm.fields,
					target: field.id
				},
				id: field.id,
				type: "ui:iframe-field:request-data",
			},
			field.id
		);
	}

	cardForm.on("token-success", (resp) => {
		// Save payment token
		this.paymentToken = resp.paymentReference;
		console.log('token recieved')

		// Submit data to the integration's backend for processing
		// that.submitForm();
	});

	cardForm.on("token-error", (resp) => {

	});
});

EventListener in postToIframe consumes events from 3rd party libraries

Hi,

Our customer uses globalpayments-3ds library and also Dynatrace Session Replay agent (the library that records user sessions) on the same webpage.

Session Replay agent uses postMessage for communication between a web worker and the main page, the same channel that globalpayments-3ds library uses when doing the challenge (as a part of the payment flow), which leads to a conflict.

Inside globalpayments-3ds, postToIframe sets up the listener, provided by getWindowMessageEventHandler (packages\globalpayments-3ds\src\lib\post-to-iframe.ts):

function getWindowMessageEventHandler(
  resolve: (data: IMessageEventData | PromiseLike<IMessageEventData>) => void,
  data: IIframeData,
) {
  return (e: MessageEvent) => {
    const origin = data.origin || window.location.origin;

    if (origin !== e.origin) {
      return;
    }

    ensureIframeClosed(data.timeout || 0);
    resolve(e.data);
  };
}

The event handler is supposed to receive the message with event: 'challengeNotification', but it first sees the message that was sent by the Dynatrace Session Replay agent, and tries to process it.

For both messages, data.origin is undefined and e.origin is the customer's domain, so you cannot tell them apart based on the origin alone. getWindowMessageEventHandler does not perform any further checks and simply resolves the promise with the event that originates from the Dynatrace Session Replay agent, breaking the 3ds integration.

This is not unique to the Dynatrace Session Replay recorder and globalpayments-3ds interaction. This also happens when you enable Angular Dev Tools, basically any 3rd party library that would use postMessage could potentially "trick" the globalpayments-3ds into consuming its event.

Dynatrace Session Replay agent never consumes the events from globalpayments-3ds, as we check for the message type (the custom property in the payload of the message).

Could globalpayments-3ds implement the extra check in the getWindowMessageEventHandler to make sure it only consumes the relevant events and ignores all the rest? Thank you!

How to set usage_mode to 'MULTIPLE' without the edit endpoint from GP api?

3ds2 initiate authentication does not display challenge popup to the end user

Re-logging from deprecated repository: globalpayments/globalpayments-3ds-js#29:

When an initiate authentication response (IInitiateAuthenticationResponseData) is received with the following data, the user is not prompted for a challenge response and the 3ds2 process fails, which blocks payments from moving forward:

challenge_mandated: false
status: "CHALLENGE_REQUIRED"

thanks,
Andrew

Error when importing from globalpayments-js module

Hi. I was trying to import your library and implement the demo example.

Here is what I got: ERROR in node_modules/globalpayments-js/types/global-type.d.ts(1,17): error TS2307: Cannot find module './'.. Is there any solution?

Btw, are you going to publish the package to NPM?

How to access the response from HPP card form submission?

I am using embedded iframe like this, similar to the example.

React.useEffect(() => {
    const loadRealexHpp = async () => {
      try {
        const response = await fetch('http://localhost:4000/api/hppReq');

        const jsonFromRequestEndpoint = await response.json();

        RealexHpp.setHppUrl('https://pay.sandbox.realexpayments.com/pay');

        RealexHpp.embedded.init(
          'payButtonId',
          'iframeId',
          (answer: any) => {
            console.log('embed answer: ', answer);

            if (answer.AUTHCODE) {
              console.log('HPP SUCCESSSS!!!');
            } else {
              console.log('HPP FAIL!!!');
            }
          },
          jsonFromRequestEndpoint
        );
      } catch (error) {
        console.error('An error occurred:', error);
      }


    };

    loadRealexHpp();
  }, []);
  

The form with the card details appears without problems and is also submitted, but the callback is never executed, so I have no information about the result of the HPP form submission. I need to do actions inside that callback, based on the call result.

the url of globalpayments.js is 404

https://api2.heartlandportico.com/SecureSubmit.v1/token/gp-1.1.0/globalpayments.js
is not working

Finer control on form submit

I'm working on implementing GlobalPayments in react based application, but I need more control over the form submit process and thus action & method form attributes are not enough - I need a specific data structure for the back end consumption.

Is there a way I can grab all the form fields after I get the temporary token and before form.submit() is called?

In normal form this would be a no-brainer, but these iFrames have been leading me down a rabbit hole for a better part of the day :(

Thank you for your selfless (sorry for the previous typo) and hard work on this open source package.

Cheers!

LGPL

Would you please consider relicensing this as LGPL? GPL is somewhat ambiguous in the case of a web page, and LGPL would make things clear. Thank you!