---
# System prepended metadata

title: WebView Entegrasyon Dokümanı
tags: [Webview, SuperApp_TR]

---


Bu doküman, **kabuk uygulama** içerisinde **Web sayfa**larının açılmasını sağlayan **WebView Miniapp**'in **kabuk uygulama** ile iletişim kurmasını sağlayan yapıyı açıklar. Hem **iOS** hem de **Android** için desteklenen yöntemler aşağıda detaylı olarak anlatılmıştır.

**WebView Miniapp** içinde açılan web sayfaları, aşağıdaki **API**'leri kullanarak mobil uygulama ile etkileşime girebilir:
* **iOS** için: **window.webkit.messageHandlers.miniapp.postMessage(...)**,
* **Android** için: **window.miniapp.postMessage(..)**

Bu yapı kullanılarak aşağıdaki gibi işlemler yapılabilir:
* Kabuktan kullanıcıya ait bilgileri almak
* Native ödeme işlemini gerçekleştirmek

### :iphone: Desteklenen Platformlar

| Platform | Yöntem                                                 |
| -------- | ------------------------------------------------------ |
| iOS      | window.webkit.messageHandlers.miniapp.postMessage(...) |
| Android  | window.miniapp.postMessage(...)                        |


### ⚙️ Genel Kullanım Yapısı

#### iOS

```ts
window.webkit.messageHandlers.miniapp.postMessage(JSON.stringify({...payload});
```
#### Android

```ts
window.miniapp.postMessage(JSON.stringify({...payload}));
```

::: danger
**Android'de** postMessage fonksiyonu yalnızca **JSON string** alır. Bu nedenle **JSON.stringify()** kullanmanız gerekir.
:::


## ✅ Entegrasyon Adımları

### Webkit Handler'ların Kullanımı

Native tarafta aşağıdaki handler methodları tanımlıdır:


| Handler Adı |      Çağırılan Method       | Açıklama                                                                            |
|:-----------:|:---------------------------:|:----------------------------------------------------------------------------------- |
|   miniapp   |         GetIdentity         | Kabuktan kullanıcının **bilgilerini** almayı sağlar **(async)**                     |
|   miniapp   |       GetPhoneNumber        | Kabuktan kullanıcının kayıtlı **Cep Telefonu Numarasını** almayı sağlar **(async)** |
|   miniapp   |       GetMailAddress        | Kabuktan kullanıcının kayıtlı **E-Mail Adresini** almayı sağlar **(async)**         |
|   miniapp   |      GetCustomerNumber      | Kabuktan kullanıcının **Müşteri Numarasını** almayı sağlar **(async)**              |
|   miniapp   | GetCommercialCustomerNumber | Kabuktan kullanıcının **Ticari Müşteri Numarasını** almayı sağlar **(async)**       |
|   miniapp   |         GetLocation         | Kabuktan kullanıcının **Konum Bilgisini** almayı sağlar **(async)**                 |
|   miniapp   |         sendPayment         | Native **Ödeme** ekranını açar **(async)**                                          |

### Kullanım Örnekleri

#### :card_file_box: GetIdentity Methodu İçin Kullanım Örneği

```js 
let payload = {
    "callFunction": {
        "functionName": “GetIdentity”,
        "param": {}
    }
}
```


#### :phone: GetPhoneNumber Methodu İçin Kullanım Örneği

```js 
let payload = {
    "callFunction": {
        "functionName": “GetPhoneNumber”,
        "param": {}
    }
}
```

#### :email: GetMailAddress Methodu İçin Kullanım Örneği

```js 
let payload = {
    "callFunction": {
        "functionName": “GetMailAddress”,
        "param": {}
    }
}
```

#### :bust_in_silhouette: GetCustomerNumber Methodu İçin Kullanım Örneği

```js 
let payload = {
    "callFunction": {
        "functionName": “GetCustomerNumber”,
        "param": {}
    }
}
```

#### :bust_in_silhouette: GetCommercialCustomerNumber Methodu İçin Kullanım Örneği

```js 
let payload = {
    "callFunction": {
        "functionName": “GetCommercialCustomerNumber”,
        "param": {}
    }
}
```

#### :world_map: GetLocation Methodu İçin Kullanım Örneği

```js 
let payload = {
    "callFunction": {
        "functionName": “GetLocation”,
        "param": {}
    }
}
```

#### :money_with_wings: sendPayment Methodu İçin Kullanım Örneği

```js 
let payload = {
    "callFunction": {
        "functionName": "sendPayment",
        "param": {
            "amount": 100.45,
            "orderId": "343432789721256274"
        }
    }
}
```


### Kabuktan Bilgi İstemek İçin Kullanılması Gereken Kod Örneği

```js
if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.miniapp) {
    // iOS
    window.webkit.messageHandlers.miniapp.postMessage(JSON.stringify(payload));
    } else if (window.miniapp && window.miniapp.postMessage) {
    // Android
    window.miniapp.postMessage(JSON.stringify(payload));
}
```


### Kabuktan Gelen Cevabı Karşılamak İçin Kullanılması Gereken Method

```js
function functionCallback(functionName, result) {
    switch (functionName) {
        case "GetIdentity":
            // Dönen değeri işlemek için eklenebilir method örneği
            GetIdentityCallback(result);
            break;
        case "GetPhoneNumber":
            // Dönen değeri işlemek için eklenebilir method örneği
            GetPhoneNumberCallback(result);
            break;
        case "GetMailAddress":
            // Dönen değeri işlemek için eklenebilir method örneği
            GetMailAddressCallback(result);
            break;
        case "GetCustomerNumber":
            // Dönen değeri işlemek için eklenebilir method örneği
            GetCustomerNumberCallback(result);
            break;
        case "GetCommercialCustomerNumber":
            // Dönen değeri işlemek için eklenebilir method örneği
            GetCommercialCustomerNumberCallback(result);
            break;
        case "GetLocation":
            // Dönen değeri işlemek için eklenebilir method örneği
            GetLocationCallback(result);
            break;
        case "sendPayment":
            // Dönen değeri işlemek için eklenebilir method örneği
            sendPaymentCallback(result);
            break;
        default:
            break;
    }
}
```


### Kabuktan Gelen Cevabı Custom Method İçerisinde Kullanma Örnekleri

#### :card_file_box: GetIdentity İçin Gelen Cevabı Kullanma Örneği

```js
function GetIdentityCallback(result) {
    try {
        let parsedResult = JSON.parse(result);
        if (parsedResult.isSuccess && parsedResult.retVal.isApproved) {
            document.getElementById(“name”).innerHTML = parsedResult.retVal.funcRetVal.Name;
            document.getElementById(“surname”).innerHTML = parsedResult.retVal.funcRetVal.Surname;
            document.getElementById(“identityNumber”).innerHTML = parsedResult.retVal.funcRetVal.TCKN;
        }
    } catch(error) {
        console.error('JSON verisi işlenirken bir hata oluştu:', error);
    }
}
```

#### :phone: GetPhoneNumber İçin Gelen Cevabı Kullanma Örneği

```js
function GetPhoneNumberCallback(result) {
    try {
        let parsedResult = JSON.parse(result);
        if (parsedResult.isSuccess && parsedResult.retVal.isApproved) {
            document.getElementById(“phone”).innerHTML = parsedResult.retVal.funcRetVal.PhoneNumber;
        }
    } catch(error) {
        console.error('JSON verisi işlenirken bir hata oluştu:', error);
    }
}
```

#### :email: GetMailAddress İçin Gelen Cevabı Kullanma Örneği

```js
function GetMailAddressCallback(result) {
    try {
        let parsedResult = JSON.parse(result);
        if (parsedResult.isSuccess && parsedResult.retVal.isApproved) {
            document.getElementById(“mail”).innerHTML = parsedResult.retVal.funcRetVal.Email;
        }
    } catch(error) {
        console.error('JSON verisi işlenirken bir hata oluştu:', error);
    }
}
```

#### :bust_in_silhouette: GetCustomerNumber İçin Gelen Cevabı Kullanma Örneği

```js
function GetCustomerNumberCallback(result) {
    try {
        let parsedResult = JSON.parse(result);
        if (parsedResult.isSuccess && parsedResult.retVal.isApproved) {
            document.getElementById(“customerNumber”).innerHTML = parsedResult.retVal.funcRetVal.CustomerNumber;
        }
    } catch(error) {
        console.error('JSON verisi işlenirken bir hata oluştu:', error);
    }
}
```

#### :bust_in_silhouette: GetCommercialCustomerNumber İçin Gelen Cevabı Kullanma Örneği

```js
function GetCommercialCustomerNumberCallback(result) {
    try {
        let parsedResult = JSON.parse(result);
        if (parsedResult.isSuccess && parsedResult.retVal.isApproved) {
            document.getElementById(“commercialCustomerNumber”).innerHTML = parsedResult.retVal.funcRetVal.CommercialCustomerNumber;
        }
    } catch(error) {
        console.error('JSON verisi işlenirken bir hata oluştu:', error);
    }
}
```

#### :world_map: GetLocation İçin Gelen Cevabı Kullanma Örneği

```js
function GetLocationCallback(result) {
    try {
        let parsedResult = JSON.parse(result);
        if (parsedResult.isSuccess && parsedResult.retVal.isApproved) {
            document.getElementById("currentLocationResult").innerHTML = `Latitude: ${parsedResult.retVal.funcRetVal.coords.latitude}, Longitude: ${parsedResult.retVal.funcRetVal.coords.longitude}`;
        }
    } catch(error) {
        console.error('JSON verisi işlenirken bir hata oluştu:', error);
    }
}
```

#### :money_with_wings: sendPayment İçin Gelen Cevabı Kullanma Örneği

```js
function sendPaymentCallback(result) {
    try {
        let parsedResult = JSON.parse(result);
        if (parsedResult.isSuccess) {
            document.getElementById(“paymentResult”).innerHTML = parsedResult.retVal;
        }
    } catch(error) {
        console.error('JSON verisi işlenirken bir hata oluştu:', error);
    }
}
```