Payrexx integration in flutter webview

Question

As described here https://developers.payrexx.com/docs/mobile-apps-javascript

I would like to interact with the javascript events of an iframe I want to create in the webview_flutter plugin.

The following example code is given in the official documentation

window.addEventListener('message', handleMessage(this), false);

and

function handleMessage(e) {
  if (typeof e.data === 'string') {
    try {
      var data = JSON.parse(e.data);
    } catch (e) {}
    if (data && data.payrexx) {
      jQuery.each(data.payrexx, function(name, value) {
        switch (name) {
          case 'transaction':
            if (typeof value === 'object') {
              if (value.status === 'confirmed') {
                //handling success
              } else {
                //handling failure
              }
            }
            break;
        }
      });
    }
    }
  }

Do you know a way to do this? I have implemented an iframe in which there is the address of my gateway, but it is impossible to check if the payment has taken place.

Answer 1

when I try to do the post, I get:

 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://myinstance.payrexx.com') does not match the recipient window's origin ('http://localhost:4200').

I understand the the origins are not the same but this should be done this way according to the documentation?

Answer 2

Sounds good. The Payrexx iFrame sends a post message with the transaction details (including transaction status) to the parent window (e.g. your Flutter webview) after the payment (on the Payrexx result page). So you only need to add an event listener for type "message" in your webview as in the example:

window.addEventListener('message', handleMessage(this), false);

Please make sure you also send a post message into the Payrexx iFrame as soon as the iFrame is loaded (onload event):

let iFrame = document.getElementById('IFRAME-ID');
if (iFrame) {
    iFrame.contentWindow.postMessage(
        JSON.stringify({
            origin: window.location.origin,
        }),
        iFrame.src,
    );
}

Now you are ready to receive and handle the messages from the Payrexx iFrame:

private handleMessage(e): void {
    try {
        let message = JSON.parse(e.data);

        if (typeof message !== 'object' ||
            !message.payrexx ||
            !message.payrexx.transaction) {
            return;
        }
        let transaction = message.payrexx.transaction;
        console.log(transaction);
    } catch (e) {
    }
};

Last but not least: Make sure you also check the transaction status via transaction webhook (server-to-server notification): https://docs.payrexx.com/developer/guides/webhook