Mobile Apps

Zuerst erstellst du ein zahls.ch Gateway. Du erhältst eine URL für dein Gateway. Zeige diese URL in einem iFrame an.

Nutze die URL deines erstellten Gateways oder zahls.ch Tools für den iFrame.

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

Füge am Fenster einen Event-Listener hinzu, der alle Nachrichten aus dem zahls.ch-Gateway-iFrame an die Funktion handleMessage weiterleitet.

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

Implementiere handleMessage, um zu prüfen, ob die Transaktion abgeschlossen ist.

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;
        }
      });
    }
  }
}

Zu diesem Zeitpunkt darf der iFrame noch keine Nachrichten an das Parent (deine Mobile App) senden. Deshalb brauchst du den folgenden Code, der jedes Mal ausgeführt wird, wenn der iFrame-Inhalt geladen wurde.

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

Damit teilst du dem zahls.ch Gateway mit, welchen Origin das Parent hat (bei Web-Apps oft NULL). Die zahls.ch-Seite braucht diese Information, um Nachrichten an dein Hauptfenster senden zu können.

Beispiel: React Native

Beispielcode zur Integration von zahls.ch in einer React-Native-App.

<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}
/>