# Mobile Apps

First of all you will need to [Create a Payrexx Gateway](/developer/guides/gateway.md). You will get an URL for your gateway. Display this URL in an iFrame.

Use the **URL** from your created Gateway or Payrexx Tool for the iFrame.

```markup
<iframe id="payrexx" src="{URL}" width="530" height="700">
</iframe>
```

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

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

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

```javascript
function handleMessage(e) {
  if (typeof e.data === 'string') {
    try {
      let 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;
        }
      });
    }
  }
}
```

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() {
    const iFrame = document.getElementById('payrexx');
    iFrame.contentWindow.postMessage(
        JSON.stringify({
            origin: window.location.origin
        }),
        iFrame.src
    )
}
```

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

## Example: React Native

Example code how to integrate Payrexx in a React Native application.

```javascript
<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.payrexx && data.payrexx.transaction) {
                // ...
            }
        }
    }}
    onLoadEnd={() => {
        if (Platform.OS === 'ios') {
            webviewRef.current.postMessage(
                JSON.stringify(
                    { origin: 'https://company.payrexx.com/' }
                ), 'url_gateway'
            );
        }

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.payrexx.com/developer/guides/embedding/mobile-apps.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.