globalpayments / rxp-js Goto Github PK

rxp-js version 1.2.1
Internet Explorer (version 11) throws an exception on line 241 when it tries to append the newly created form to the body of the document in the new tabWindow.
The cause is that the form and its sub-elements were created from the DOM of the original page, and not that of the newly created tabWindow.document.
This can be tested in IE by resizing the window to a height of less than 360px then loading the page containing the rxp-js javascript. Instead of a lightbox, a new tab is opened but the exception prevents the page from being loaded.

The fix is to change line 113 from
function createForm(doc){
to
function createForm(document){

Alternatively, all references to document in the createForm method should be changed to 'doc'.

Either fix will force the correct DOM to be used, and the page renders correctly. This fix has been tested on IE, Firefox and Chrome.

Regards

Adrian Flynn

When you use the test card for the 200 - Comms Error (Visa, 4009830000001985), the rxp-js library throws an error on the receiveMessage function.

The issue is on line 323:
if (event.data && JSON.parse(event.data).iframe) {

The value of event.data is

Error: 200
Message: [ test system ] COMMS ERROR

but the code is expecting it to be a JSON.

Hi all,

As a user, could we get better commit messages as to changes? For example:

add build files - f318626

There is way more than build files added here and changing the date and not incrementing the version release just isn't good.

You've tagged a release v1.4.0 yet you're still using that in master:

https://github.com/globalpayments/rxp-js/blob/v1.4.0/dist/rxp-js.js

Gavin.

The embedded HPP iFrame is responsive until the screen width is 360 px. The iFrame width stays 300px after that, not responsive based on screen size. Is there a way to change this?

I have used rxp-js.js using jquery and that works fine.
but i need to understand how does it work in REACT js?

i have been struggling around and went through all the documentation but did not got the break through.
any help or guidance is really appreciated.

I can't find a single person that would give me a straight answer. Is there a REST API to which I can send a POST request and receive a response if the payment was successful or not? I can't use Java, PHP or .Net. I'm on a server less platform, Next.js hosted on Netlify.

i have the address input fields which when entered does an axios post to my server and returns the customers details and with that post id i can use a get method for the request endpoint. The issue i have is i want the both to happen in the one click but i am having to click twice to bring up the hosted page. Below is my code, is there a simple fix to this?

paymentFunction(){
const data = {
//my passed data
};

const response = axios ({
url: "Myserverapitogetmodeldata",
data: data,
method: "POST"
})

//open the hosted page
this.hppFunction(response.data.id);

}

hppFunction(i) {
$.getJSON("serverapimodeldata" + i, function (
jsonFromRequestEndpoint
) {
debugger;
window.RealexHpp.setHppUrl("realexpaymentsapi");
window.RealexHpp.lightbox.init(
"payButtonId",
"responseUrl",
jsonFromRequestEndpoint
);
});
}

<MDBBtn id="payButtonId" onClick={() =>this.paymentFunction()}>Pay Now

if i call the initial function with onClick={this.paymentFunction()}, this works but it is doing the post to the Db with the onchange and posting each time a character is entered

I follow this get started tutorial but I get 506 Invalid MERCHANT_ID or ACCOUNT when try to execute the example shown in tutorial.

If I follow the tutorial the backend give to frontend an object look like this:

{
    "ACCOUNT": "aW50ZXJuZXQ=",
    "AMOUNT": "NTAw",
    "AUTO_SETTLE_FLAG": "MQ==",
    "BILLING_CO": null,
    "BILLING_CODE": null,
    "CARD_PAYMENT_BUTTON": null,
    "CARD_STORAGE_ENABLE": "MQ==",
    "COMMENT1": null,
    "COMMENT2": null,
    "CURRENCY": "ZXVy",
    "CUST_NUM": null,
    "DCC_ENABLE": null,
    "HPP_FRAUDFILTER_MODE": null,
    "HPP_LANG": null,
    "MERCHANT_ID": "bXlzZWN1cmVtZXJjaGFudGlk",
    "OFFER_SAVE_CARD": "MQ==",
    "ORDER_ID": "MjYyNjE1",
    "PAYER_EXIST": "MA==",
    "PAYER_REF": null,
    "PMT_REF": null,
    "PROD_ID": null,
    "RETURN_TSS": null,
    "SHA1HASH": "c2hhMWhhc2hnZW5lcmF0ZWRieXRoZXJlYWxleGhwcHdpdGhteXNlY3JldA==",
    "SHIPPING_CO": null,
    "SHIPPING_CODE": null,
    "TIMESTAMP": "MjAxODA2MjgxMTA2MDQ=",
    "VALIDATE_CARD_ONLY": null,
    "VAR_REF": null
}

And when in frontend I call this:

RealexHpp.setHppUrl("https://hpp.sandbox.realexpayments.com/pay");
RealexHpp.init("payButtonId2", "https://bb3d366b.ngrok.io/payment/realex/response", dataFromBackend);

I see this page:

Now... ok, it's a problem when we follow some initial steps and get a bad experience (I don't told that this bad experience it's provided by realex, maybe this problem are in my setup, we don't know so far) but after some tests I didn't convert the HppRequest with RealexHpp("MYSECRET") in the backend, I just return the plain HppRequest, it's look like this:

{
    "ACCOUNT": "internet",
    "AMOUNT": "500",
    "AUTO_SETTLE_FLAG": "1",
    "CARD_STORAGE_ENABLE": "1",
    "CURRENCY": "eur",
    "MERCHANT_ID": "mymerchantid",
    "OFFER_SAVE_CARD": "1",
    "ORDER_ID": "262615",
    "PAYER_EXIST": "0",
    "SHA1HASH": "sha1hashgeneratedwithmysecret",
    "TIMESTAMP": "20180628110336"
}

And now when I call:

RealexHpp.setHppUrl("https://hpp.sandbox.realexpayments.com/pay");
RealexHpp.init("payButtonId2", "https://bb3d366b.ngrok.io/payment/realex/response", dataFromBackend);

It's working properly and the unique difference between these requests are:

• in the first request the value of properties are base64 encoded
• in the first request the null values will go together

Somebody know about this difference in these requests and what is going wrong when I use the base64 encoded json data (provided by realex classes) instead the plain text json data?

notice: I put this question here because the final error is show up when I call this library, if this error is related with other service of other library (like the rxp-hpp-java) please let me know and give me a way to continue.

Thanks.

The library currently uses a hard-coded screen size cut off of 360 pixels to decide whether a mobile device is in use. There are many popular devices out there now with larger displays of greater than 360 pixels in width eg. iPhone 6 Plus, Nexus 5X / 6P and other large format phones. These would still benefit from the pop-up rather than light-box based payment form, so it would make sense to change this value (and make it a configurable option so that developers can adjust it in future if needed).

The file proxy-request.php from the examples directory doesn't add the parameter PAYER_EXIST when it's set to "0" in the HPP JSON configuration. Documentation says that this parameter is [M]andatory so the PHP code should take care of mandatory parameters like this that might get the value "0".

Hey Guys,

I've been looking through the issues, for a global payments provider to essentially abandon a repo is quite frankly jaw dropping - if the idea that people raise it through the dev portal then that's fine but zero responses and zero updates in almost 2 years(roughly) is nuts!

This block of code seems to be throwing errors:

Element.prototype.remove = function() {
    this.parentElement.removeChild(this);
};

Code should be modified to add something like this:
if (this.parentElement == null) return;

I haven't got a clue what's triggering this block of code, as it appears to be firing without any of my code interacting with anything.

Hi, I'm implementing checkout solution using Direct Post. I've registered for a 'message' event, but the handler never receive message for 'hpp-listener-loaded'. I checked the source code from hpp iframe, the message has been posted, so the issue is the message is posted too early. Because I do receive messages for resizing the iframe with the handler.

Much appreciated if you could investigate the issues.

In order to show the lightbox, an overlay div is created with a transpararent black color. The z-index of this overlay has to be higher than any other element in the DOM, otherwise the iframe of the lightbox will be hidden by other elements with highr z-index.

The fixed z-index of the overlay is 100 but for some case like bootstrap navigation bars, the z-index needs to be much higher, like 1050, otherwise the lightbox will be shown below the navigation bar.

The suggestion is to make this setting configurable as easy as the hppUrl variable. Something like this should be possible to do:

RealexHpp.init("<payButtonId>", "<responseUrl>", <jsonFromServerSdk>);
RealexHpp.setHppUrl('some-url');
RealexHpp.setZIndex('1000');

This is easily achieved by setting a variable (zIndex), a setter function (setZindex) and returning this function with the others (init and setHppUrl) when creating the RealexHpp object:

	return {
		init : init,
		setHppUrl : setHppUrl,
		setZIndex : setZIndex
	};

Current implementation for embedded/lightbox options forces a redirect to occur. Ideally, integrations should be able to control this behavior to adapt to any workflows they deem necessary. This is especially useful in integrations that want to control the experience client-side before passing control to the server-side.

Hi, I could not download the project. I used

npm install https://github.com/globalpayments/rxp-js and
npm install git+https://github.com/globalpayments/rxp-js.git

neither worked.

Then I manually downloaded the package, moved it to my project folder, then installed it while i'm inside /rxp-js.1.5.0 using

npm install --prefix ../

then it showed it was installed. it showed up on node module. when i tried to import it, it kept saying it could not find the module.

Could someone please help me how I can install this package? Much thanks from a noob.

Morning,

We are having a issue with the popup on Mobile safari. When the popup is triggered instead of opening a new tab we are getting this error

rxp-js.js:227 TypeError: undefined is not an object (evaluating 'tabWindow.document')

and nothing happens. We have created a workaround by disabling the mobile browser sniffing so that the popup just shows on mobile / tablet. So on line 26 we've changed this

// For IOs/Android and small screen devices always open in new tab/window
var isMobileNewTab = !isWindowsMobileOs && (isAndroidOrIOs || isMobileXS);

to this

// For IOs/Android and small screen devices always open in new tab/window
var isMobileNewTab = false;

So the javascript never opens a new tab and this seems to be working.

Cheers

I'm testing my payment form and when I try to test a card that returns a 200 auth code, I receive the following error:

core.js:7187 ERROR SyntaxError: Unexpected token E in JSON at position 0
at JSON.parse ()
at rxp-hpp.js:300

It's because the message received from GlobalPayments is not in the correct format.

When using a bootstrap navbar fixed top:

https://getbootstrap.com/docs/3.3/examples/navbar-fixed-top/

As soon as we include rxp-js.js (v1.2.1) as a script at the bottom of the page's body, the menu options stop folding/unfolding.

If this file is not included, the menu folds and unfolds just fine.

You can check the problem (and the source code) in this URL with the Magnolia CMS demo:

http://ec2-35-158-48-170.eu-central-1.compute.amazonaws.com:8080/magnoliaPublic/travel.html

Global Payment teams:

if we set the lightBox "autoload", the mobile safari will block the window.open(), I check your code:

openWindow: function (token) {
//open new window
var tabWindow = window.open();
// browsers can prevent a new window from being created
// e.g. mobile Safari
if (!tabWindow) {
return null;
}

the code just return "null" , which ask the browser do nothing...

Could you please solve this issue as quickly as possible ?

Thank you

From @globalpayments/php-sdk#2:

@slogsdon thanks, I'll see if I can provide you with a demo page sometime this week, in the meantime I've adapted my code to work with the redirect (still using the lightbox but I'm now handling the response in the redirect, unfortunately the customer, if the payment fails, has to restart the checkout from the beginning which will cause a bad user experience).

I'm now experiencing another problem with the lightbox, if I use one of the test cards provided in your documentation, the lightbox freezes and there is an error in the chrome console of an invalid JSON, in fact I see that with successful payments the response from the iframe is a JSON but with this test card the response is just a string. The error is coming from rxp-js and it is causing the iframe to freeze and nothing to happen on the page, not even the redirect.

I am using the latest version of rxp-js (1.3.1). The test card I used is 4009830000001985

Current implementation code expects the postMessage event data to always be JSON encoded, but in some cases, this data can be a simple string. The receive message handler would need to be updated to handle this here: https://github.com/globalpayments/rxp-js/blob/master/lib/rxp-hpp.js#L295-L299.

Could you please put this package on npm so I wouldn't have to copy it over to my project manually?

On line 542 of rxp-js.js there is:

document.body.append(form);

Unfortunately, this throws an error when testing with IE 11 and doesn't redirect the user to the supposed HPP. The error is: Object doesn't support property or method 'append'

I fixed it by instead changing it to the following:

document.body.appendChild(form);

In examples/hpp/process-a-payment-embedded.html and the lightbox version, the response URL is no longer working

https://dev.rlxcarts.com/mobileSDKsV2/response.php

Hi,
we have an issue with our implementation using the embedded method. Everything is working great in sandbox mode but once we remove sandbox and switch to live we get...

'505 You cannot use this service from there null Please contact the merchant.'

Looking at the request headers for the form data post to https://pay.elavonpaymentgateway.com/pay we can see Origin: null. Also no referrer header is present in the headers. Is this causing the 505 error?

Anyone ran into this issue or know of a solution?

Thanks for any help.

is this project dead?? or realex doesn't care about it????

508
Incorrect hash. Please check your code and the Developers Documentation.

Getting This error. This error does not give any specific error. Also in the example country, HPP_BILLING_COUNTRY is 826. can you please let me know from where I can get this value?

I would use v1.3.1 for now as if your users have browser extensions then they will not be able to do keyboard inputs without it breaking.
See this PR #42 for more information about a fix.
@RealexITSO @securesubmit-buildmaster you need to fix the latest version 1.5.0 before us developers will start to use this version.
Cheers
Phil

Hi,

Can this be used to do:

https://developer.globalpay.com/#!/hpp/card-payments#hpp-link

Thanks.

So we have a Embedded Hpp solution that is inside a modal window.

Current process is:

• Open modal
• Click on payment, this calls realex init and creates a transaction in our db
• Do the payment which posts the result a responseurl that contains a parameter of transaction id so we can save the realex response in the db.
• If the payment declined you have the option to process the payment again which calls init again to create the iframe.

So the responseurl does not seem to refresh if the transaction got declined. So then it updates the old transaction in our database because the latest call to init Realex did not update the url.

We also found that if you call init and you close the modal and open it up again and process the payment. Both instances of realex seem to do the post to the responseurl.

So it looks like on init the previous instance that was created is not being destroyed.

embedded iFrame
embedded iFrame autoload
embedded iFrame autoload, callback
lightbox/modal

Using RealexHpp embedded in an ionic 4 project.

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

The configuration data is coming from the server and initialising the function in the subscription.

submit() {
this.service.getConfig().subscribe((config)=> {
RealexHpp.embedded.init("payButtonId", "targetIframe", "https://example.com/response", config);
});
}
<button id="payButtonId" type="button" (click)="submit()">Pay

Issue:

The Iframe is not showing in the first click. Can see the iframe in the second click on the Pay button. Why? Please help

hello there

after so much of strugle, now the hpp popup opened and there i did enter card details, in jquery, i wrote like below

$.getJSON("pay.json", function (jsonFromRequestEndpoint) {
RealexHpp.setHppUrl("https://pay.sandbox.realexpayments.com/pay");
RealexHpp.lightbox.init("payButtonId", "https://localhost:44397/HPP/HppResponse.aspx", jsonFromRequestEndpoint);
});

before execute i put break point in rxp-hpp.js file at below line

var form = document.createElement("form");
orm.setAttribute("method", "POST");
form.setAttribute("action", merchantUrl);
RealexHpp.lightbox.init("payButtonId", "https://localhost:44397/HPP/HppResponse.aspx", jsonFromRequestEndpoint);
document.body.appendChild(form);
form.submit();

while execute i put break point and seen the hppresponse hidden is created within form tag but, after execution my HppResponse.aspx page doesnt has any such a hidden filed.
I tried in many browsers but, no luck
please let me know what is the problem and why the hidden is not present there?

thanks
jey

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.

Just installed package and got a malware critical vulnerability notification

GHSA-p4fm-f928-rr26

If this a false positive? Please confirm

Look:

Hmm, when can closeButton be undefined?

Maybe every single time after the initial load when the iframe navigates to a URL? Which .. happens every single time the user is 3DS-challenged?

Come on, did you even test this code?

I think there is an iFrame CSS problem when user go to the secure Authenticate page?

I think the width of the iframe should be increased

Thank you

Hi, I'm getting the following error with the endpoint given on the hpp guide page, all others are the same as the hpp guide page.

https://apis.sandbox.globalpay.com/ucp/hpp/transactions : not working
https://pay.sandbox.realexpayments.com/pay : working

{
"error_code": "CONFIGURATION_DOES_NOT_EXIST",
"detailed_error_code": "40041",
"detailed_error_description": "Merchant configuration does not exist for the following combination: internet,dev584231242285950808,EUR."
}

Please let me know what should I change.