Global Payments Realex HPP - Do NOT send to merchantUrl

Question

We are trying to integrate a payment in React to our backend. After hpp.lightbox.init() successes, it automatically sends the browser to the merchantUrl. We do not want that functionality because our application is an SPA, so we do not want the user to be redirected anywhere. Instead, we would like to send it to our backend endpoint ourselves, and have the user continue on to the next section of the SPA.

Below is example code that we used.

RealexHpp.setHppUrl("https://pay.sandbox.realexpayments.com/pay");
RealexHpp.lightbox.init("payNowButtonId", "backendUrlRealexWillSendToUponReceivingResponse", jsonFromRequestEndpoint);

In this example, we do not want to send to "backendUrlRealexWillSendToUponReceivingResponse", but would like to get init()'s response and pass the data ourselves to "backendUrlRealexWillSendToUponReceivingResponse".

We looked at the source code (lines 350-362) and it seems that RealexHpp is creating a form, attaching form to the DOM, and then submitting the form with the response data.

Seeing that, we tried to listen for any form submits, listen for form creations, on both document and window, but to no avail.

So as the title suggests. How can we process the form without sending the user to another page?

Answer 1

The way the JS library behaves is exactly has you mentioned above. A form is created from HPP Response and is then sent to the response URL.

In the example below, you can leave this argument blank. Which will prevent the form from being sent and redirecting to the URl.

To capture the response you can add an event listener to lookout for the response from HPP.

RealexHpp.setHppUrl("https://pay.sandbox.realexpayments.com/pay");
RealexHpp.lightbox.init("payButtonId", "", jsonFromRequestEndpoint);
if (window.addEventListener) {
    window.addEventListener('message', function(e) { receiveMessage(e.data);}, false);
} else {
    window.attachEvent('message', receiveMessage);
}

In the above example, I have a function called receiveMessage but you can implement a similar function to execute a different task.