Realex listener

I am developing a card payment page using Realex Payments' HPP API with an iFrame for hosting the Realex page. On the Realex request form I have the fields HPP_POST_DIMENSIONS and HPP_POST_RESPONSE set to my URL as follows:

Payment page:

www.example.com/account/payment.html

<input type="hidden" name="HPP_POST_DIMENSIONS" value="https://www.example.com">
<input type="hidden" name="HPP_POST_RESPONSE" value="https://www.example.com">

The hidden field values are used to post back data from Realex, using event listeners, to my page when the size of the HPP page changes and when the transaction is complete.

My listeners are defined as:

<script>
        window.addEventListener("HPP_POST_DIMENSIONS", function (size) {
            alert("resize event");
        });
        window.addEventListener("HPP_POST_RESPONSE", function (data) {
            alert("transaction data event");
        });
</script>

however they are not being triggered. I have tried a number of variants to the above without success and wonder if anyone can help?

The first argument you pass to addEventListener should be the event type it's listening for. In this case, you can use message.

    window.addEventListener("message", function (size) {
        alert("resize event");
    });

So you don't need two listeners, since you're just listening generally for message events which covers both HPP_POST_DIMENSIONS and HPP_POST_RESPONSE

For more information please refer to:

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

& https://developer.mozilla.org/en-US/docs/Web/Events

Best,

Seán

Realex Payments