HPP_POST_RESPONSE - field missing?

[peppeocchi]

Hi, the field HPP_POST_RESPONSE seems to be missing from the serialized token, how can I let the iframe post back to the parent window without doing a full page redirect?

[eric-vest]

Hi peppeocchi,

The only values passed to our javascript library are the injected fields credit card number, cvv, and expiration date. To pass this information to your back-end, use the success handler in your javascript to put the response/token into a hidden field on your form for submission. Any other value from your form can be passed in normally, the success handler just needs to submit the form once the token is returned.

If you need to avoid full page reloads, instead of calling submit on the form, you can put an ajax call in your success handler.

Let us know if this helps!

[peppeocchi]

@eric-vest thanks for the reply, unfortunately I am not able to avoid the full page redirect.

So I am using the rxp-js library to load the lightbox with the form . The form is loaded in an iframe and I don't seem to be able to have control over it from the parent window. As soon as the user clicks on "Pay Now" there is a redirect happening to the url provided when initialising the iframe.

RealexHpp.lightbox.init("payButtonId", "responseEndpoint", jsonFromRequestEndpoint);

As mentioned here https://developer.realexpayments.com/#!/hpp/card-payments#iframe-optimization there should be a HPP_POST_RESPONSE field that if set should send the response back from the iframe to the parent window.

HPP_POST_RESPONSE
Once the transaction is complete, this field tells HPP to post the response back to the parent frame or window, instead of to a nominated URL in your application. Your event listener will receive the following JSON name/value pair string, with the values Base64 encoded.

Now, the trouble is that every time I set that field (manually by adding a line here https://github.com/globalpayments/rxp-js/blob/master/examples/hpp/json/process-a-payment.json as there doesn't seem to be a way of setting it with this sdk, although if you see here https://github.com/realexpayments/rxp-hpp-php/blob/master/src/main/php/com-realexpayments-hpp-sdk/utils/RequestMapper.php#L101 it's possible to pass in that field when the json request is encoded - is that repository a valid repository?) after I click on "Pay Now" a javascript error appears in the console saying

If I set the field in the JSON used to load the iframe, it results on a duplication of the domain on that hidden field inside the iframe

<input type="hidden" name="HPP_POST_RESPONSE" value="https://someurl.com,https://someurl.com">

Is there anything I am missing? Do you have a working example that avoids the redirect to a different page? (PS: I tried sending out emails to your support team but I only got a reply after 12 days and now no reply at all...)
You mentioned a "success handler", where should that be? Where I can find documentation about that? I am not making any ajax request other than the one to generated the json request used to initialize the lightbox. After that point the iframe is "in control" of what happens next. As a side note, if I stop the redirect before that happens, I can se that the response is sent back to the parent window but to see it I have to "press esc" on my keyboard when I see the page being redirected.

The ideal scenario for me would be:
The lightbox with the iframe form gets loaded on the page, the user fills in the details, clicks on "Pay Now", the response is sent back to the parent window and from the parent window I can have control on what to do with the response without redirecting the user.

I understand this might not be the right place for these questions, if so can you point me to the right place where to ask those questions?

[slogsdon]

@peppeocchi The HPP_POST_RESPONSE field should be set automatically by rxp-js when not leveraging the redirect option exposed through the library, so you shouldn't need to manually set that. After removing any code from your integration that manually sets this, please let us know if you're seeing issues with this field being set on your end.

To handle the postMessage from the HPP iframe to the parent window, you will want to ensure your integration has an event listener for the window's message event. MDN has some good information that covers this process, but a minimal example would look something like:

window.addEventListener('message', function (ev) {
    // review event data
    console.log(ev.data);
}, false);

Doing so should allow for the ideal scenario you outlined.

[peppeocchi]

@slogsdon thanks for your reply, sorry I wasn't clear on the previous message, I have that event listener but the redirect still happens. As I said if I manually stop the page from redirecting (by pressing ESC on my keyboard when I see the page redirecting) I can see that the message is intercepted by the event listener and it has the correct response in it, but there doesn't seem to be a way of stopping the redirect programmatically.

Unless I need to initialise the lighbox in a different way? I tried setting the "responseEndpoint" as null, false, but the user gets redirected to https://mydomain.com/null or https://mydomain.com/false. Setting as empty string redirects to https://mydomain.com.

As a reference I've tested it using this example and added the code you mentioned before

window.addEventListener('message', function (e) {
    console.log(e);
}, false);

[peppeocchi]

I think this shows the behaviour I am seeing, as you can see I have the event listener logging the event in the console. If you pause the attached video at 00:16 you can see that just before the redirect happens a new message is intercepted and it has the JSON response with the result of the payment like the one in the screenshot below (I don't seem to be able to stop the redirect while recording the screen)

Video --> https://we.tl/t-qVJzgAPWBq

[slogsdon]

@peppeocchi Thanks for sending over the video, but sadly, our corporate firewall blocks us from watching it. Do you have a publicly accessible link for your integration that you can send over to us via email? [email protected] reaches our team.

We're also working on creating a small example project to help you get this sorted.

[peppeocchi]

@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

[slogsdon]

@peppeocchi I see what you're talking about. The implementation for rxp-js's internal postMessage handler expects the event data to always be JSON, but you're experiencing a case where it's not. I've opened up an issue to track this.

I've also opened another issue to allow integrations to control/opt-out of the redirect process: globalpayments/rxp-js#23.

Since these seem to be issues stemming from rxp-js, I'm going to close this issue and defer to the above two, but feel free to open it back up if you feel the need.

[peppeocchi]

@slogsdon I completely understand this is related to rxp-js and it's better to track these issues on that repository, thank you very much for all your help!