globalpayments / globalpayments-js Goto Github PK
View Code? Open in Web Editor NEWJavaScript library for web applications to connect to Heartland eCommerce & Global Payments eCommerce tokenization services
JavaScript library for web applications to connect to Heartland eCommerce & Global Payments eCommerce tokenization services
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.
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
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
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!
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?
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!
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
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!
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.
I want to trigger a loading state in my application when the payment request is initialized (i.e. Submit is clicked).
All iframe input fields are created with type="tel"
, see:
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.
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!
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) => {
});
});
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
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
Injected reference in
Should be card-holder-name
instead of card-holder
https://api2.heartlandportico.com/SecureSubmit.v1/token/gp-1.1.0/globalpayments.js
is not working
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.
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.
Can you push the dist
folder to the repo for @globalpayments/js
i.e remove dist/
from packages/globalpayments-js/.gitignore
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.
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?
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.