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.

Payrexx · Answer 1 · 2023-01-12T09:32:36.123

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

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Nehil Koshiya, Jan 17 '23 at 05:05

Payrexx integration in flutter webview

1 Answers1