Mobile Apps (JavaScript)

If you'd like to implement Annanow in your mobile app, there is a solution if your app is based on JavaScript code.

First of all you will need to Create a Annanow Gateway. You will get an URL for your gateway. Display this URL in an iFrame.
For the code down below, the iFrame must have the id="annanowpay".
After that, you need to add an event listener on the window which will forward all pushed messages from Annanow Gateway iFrame to the function handleMessage.

JavaScript

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

Now we need to add a function handleMessage which will check whether the transaction has been completed or not:

JavaScript

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

At this point, the iFrame won't have the rights to push any message to its parent (your mobile app).
That's why you need the following code snippet called each time the iFrame content has been loaded.

JavaScript

function showFrame() {
    var iFrame = document.getElementById('annanowpay');
    iFrame.contentWindow.postMessage(
        JSON.stringify({
            origin: window.location.origin
        }),
        iFrame.src
    )
}

This will tell our Annanow Gateway which Origin the parent has (most time it will be NULL for web apps). But it is actually necessary to tell the Annanow page this information, so it will be able to push messages to your main window.