Realex HPP Payment in Angular 6

Question

I am having trouble using the rxp-js library in a Angular 6 project.

So I added the rxp-js in the angular.json so I can use it in the component since there is no module or types for the library yet;

Above the Component I have

declare let RealexHpp;

OnInit I just get the JSON from the server to init the lightbox.

this.realexJSON  = await this.dataService.getRealexJson();

RealexHpp.setHppUrl("https://pay.sandbox.realexpayments.com/pay");
RealexHpp.init("realex-button", 'http://localhost:1337/responseurl', this.realexJSON);

This all works perfectly. I am able to add dummy card details and submit payment.

This is where it get's tricky. rxp-js does a html post which in angular causes the page to redirect to the response url. So How do you not mess up the entire user experience.

Redirects to whatever the api responds with, so You could have a page that says redirecting back to client.

But this all in the same window.

So I went into rxp-js and added a line to open the form in a new window like this

//Create a form and submit the hpp response to the merchant's response url
var form = document.createElement("form");
form.setAttribute("method", "POST");
form.setAttribute("action", merchantUrl);
form.setAttribute("target",'_blank');
form.appendChild(internal.createFormHiddenInput("hppResponse", response));
document.body.appendChild(form)
form.submit()

So then It opens in a new window, the server response returns with a message saying it will redirect back and then closes the window.

But now the lightbox is still open.

All in all hacking the library to get it working is less than ideal.

Is there no way you can handle the HPP_Hosted_Response without doing the html post. Or at least knowing when the response is received.

Realex is not really the easies payment integration to be honest.