Mobile Apps

First of all you will need to Create a zahls.ch Gateway. You will get an URL for your gateway. Display this URL in an iFrame.

Use the URL from your created Gateway or zahls.ch Tool for the iFrame.

<iframe id="zahls" src="{URL}" width="530" height="700">
</iframe>

Now add an event listener on the window which will forward all pushed messages from zahls.ch Gateway iFrame to the function handleMessage.

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

Implement the function handleMessage which will check whether the transaction has been completed or not.

function handleMessage(e) {
  if (typeof e.data === 'string') {
    try {
      let data = JSON.parse(e.data);
    } catch (e) {}
    if (data && data.zahls) {
      jQuery.each(data.zahls, 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.

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

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

Example: React Native

Example code how to integrate zahls.ch in a React Native application.

<WebView
    injectedJavaScriptBeforeContentLoaded={`
        window.addEventListener("message", function(event) {
            window.ReactNativeWebView.postMessage(JSON.stringify(event.data));
        }, false);
    `}
    injectedJavaScript={(Platform.OS === 'android')
        ? `window.postMessage(JSON.stringify(
            {origin: window.location.origin}), window.location.href);`
        : ``
    }
    onMessage={async (e) => {
        let response = JSON.parse(e.nativeEvent.data);
        if (typeof response === 'string') {
            try { const data = JSON.parse(response); } catch (e) { }
            if (data && data.zahls && data.zahls.transaction) {
                // ...
            }
        }
    }}
    onLoadEnd={() => {
        if (Platform.OS === 'ios') {
            webviewRef.current.postMessage(
                JSON.stringify(
                    { origin: 'https://company.zahls.ch/' }
                ), 'url_gateway'
            );
        }

    }}
    source={{ uri: 'url_gateway' }}
    ref={webviewRef}
/>