---
title: payment
---

Ödeme Bileşeni Nedir?
===

Ödeme bileşeni, Mini Uygulama'ların ödeme işlemlerinde kullanmanız için hazırlanmış olan bir **template UI bileşenidir**. Bu bileşen aracılığı ile Mini Uygulama'larınızın kabuk uygulamadan alınacak kart bilgileri aracılığı ile ödeme işlemlerini yürütebilirsiniz.

:::info Not
Bu bileşeni kullanabilmeniz için Plateau Studio'da ödeme bileşeninin bulunduğu organizasyon grubuna dahil olmanız gerekir. Plateau Studio'da **organizasyon ve organizasyon grup yapıları** hakkında detaylı bilgi için **[tıklayın.](https://docs.onplateau.com/Getting-Started/creating-organisation)**
:::

Ödeme Bileşeni Mini Uygulama'ya Nasıl Eklenir?
===

Ödeme bileşenini uygulamanıza nasıl ekleyeceğinize **[buradan](https://docs.onplateau.com/Getting-Started/miniApp-development-starter-quide#using-the-payment-component-in-miniapps)** ulaşabilirsiniz.

Ödeme Bileşeni Nasıl Kullanılır?
===

**Uygulamanıza eklediğiniz ödeme bileşenini kullanmak için:**

- Ödeme bileşeni üzerinde bulunan **SubProps** altındaki **miniappId** kısmına gidin.
- SuperApp Portal üzerinde oluşturduğunuz uygulamaya ait **id** bilgisini **String** olarak ilgili **prop** üzerinde tanımlayın.
- Ödeme bileşeninin kullanıldığı ekranda herhangi bir başka komponent üzerinden, ödeme bileşeninde tanımlı olan **doPayment** methodunu çağırın.

İlgili method içerisine ödemeye ilişkin **required** olarak 2 parametre vardır: **sipariş numarası** ve **tutar**.

**Örnek:** Aşağıdaki gibi bir kod ile ödeme işlemini tetikleyebilirsiniz.

(async () => {
    let paymentResponse;
    paymentResponse = await (<any>components.paymentCompQID.doPayment)({ amount: String, orderId: String })
}();

Ödeme bileşeninde zorunlu olmayan, ödeme işleminin tipinin belirtildiği bir parametre daha bulunur: **paymentType**

Aşağıdaki tablodaki şekilde eklendiği ve eklenmediği durumlarda nasıl kullanabileceğinizi bulabilirsiniz.

| Ödeme Tipi | Parametre | Tutar |
| --------------------- | --------- | -------------- |
| Peşin | - | Zorunlu |
| Peşin Auth | Auth | Zorunlu |
| Ön Otorizasyon Açma | PreAuth | Zorunlu |
| Ön Otorizasyon Kapama | PostAuth | İsteğe Bağlı |
| Satış İptal | Void | Kullanılmamalı |
| Satış İade | Refund | İsteğe Bağlı |

## Ödeme Tiplerinin Kullanım Örnekleri

### Peşin

(async () => {
    let paymentResponse;
    paymentResponse = await (<any>components.paymentCompQID.doPayment)({ amount: String, orderId: String })
}();

### Peşin Auth

(async () => {
    let paymentResponse;
    paymentResponse = await (<any>components.paymentCompQID.doPayment)({ amount: String, orderId: String, paymentType: 'Auth' })
}();

### Ön Otorizasyon Açma

(async () => {
    let paymentResponse;
        paymentResponse = await (<any>components.paymentCompQID.doPayment)({ amount: String, orderId: String, installment: Number, paymentType: 'PreAuth' })
}();

### MiniApp Backend'i Üzerinden Ön Otorizasyon Kapama

Miniapp sahipleri kendi backend'leri ile **Ön Otorizasyon Kapama** işlemi gerçekleştirebilirler. Bunun için yapılması gerekenler aşağıdaki gibidir:

- https://mobil.isbank.com.tr/superapp-backend/pay adresine **Post** request ile işleme ait gerekli data'lar gönderilecektir.
- Request'in body'sinde olması gereken bilgiler:
- **MiniAppId (String)**: Portal üzerinde ki app'e ait id bilgisi
- **OrderId (String)**: İşleme ait sipariş numarası
- **Total (Double)**: Kısmi veya Tüm tutar bilgisi verilebilir, null olarak da gönderilebilir.
- **Type (String)**: **PostAuth** olarak verilmelidir.

### Ön Otorizasyon Kapama

(async () => {
    let paymentResponse;
    paymentResponse = await (<any>components.paymentCompQID.doPayment)({ orderId: String, paymentType: 'PostAuth' })
}();

### MiniApp Backend'i Üzerinden Satış İptal

Miniapp sahipleri kendi backend'leri ile **Satış İptal** işlemi gerçekleştirebilirler. Bunun için yapılması gerekenler aşağıdaki gibidir:

- https://mobil.isbank.com.tr/superapp-backend/pay adresine **Post** request ile işleme ait gerekli data'lar gönderilecektir.
- Request'in body'sinde olması gereken bilgiler:
- **MiniAppId (String)**: Portal üzerinde ki app'e ait id bilgisi
- **OrderId (String)**: İşleme ait sipariş numarası
- **Type (String)**: **Void** olarak verilmelidir.

### Satış İptal

(async () => {
    let paymentResponse;
    paymentResponse = await (<any>components.paymentCompQID.doPayment)({ orderId: String, paymentType: 'Void' })
}();

### MiniApp Backend'i Üzerinden Satış İade

Miniapp sahipleri kendi backend'leri ile **Satış İade** işlemi gerçekleştirebilirler. Bunun için yapılması gerekenler aşağıdaki gibidir:

- https://mobil.isbank.com.tr/superapp-backend/pay adresine **Post** request ile işleme ait gerekli data'lar gönderilecektir.
- Request'in body'sinde olması gereken bilgiler:
- **MiniAppId (String)**: Portal üzerinde ki app'e ait id bilgisi
- **OrderId (String)**: İşleme ait sipariş numarası
- **Total (Double)**: Kısmi veya Tüm tutar bilgisi verilebilir, null olarak da gönderilebilir.
- **Type (String)**: **Refund** olarak verilmelidir.

### Satış İade

(async () => {
    let paymentResponse;
    paymentResponse = await (<any>components.paymentCompQID.doPayment)({ orderId: String, paymentType: 'Refund' })
}();

Ödeme işlemini tetikledikten sonra, işlemin sonucu bileşen üzerinden döner. İşlem sonucuna göre, eklediğiniz ödeme bileşeni üzerinde **Events** kısmına gelin ve **Add Custom Event** butonu ile yeni event ekleyin.

Yeni eklenecek event ve kullanım şekilleri aşağıda belirtildiği şekildedir.

## callParent

Bu event sadece **doPayment** methodu tetiklendiğinde çalışır. Eğer ödeme işlemi başarılı olarak tamamlandıysa bu event üzerinden ödemenin başarılı olduğu durumda alınması gereken aksiyonlara ait kod içerikleri eklenebilir.

**Event üzerinden erişilebilir olan bir adet parametre bulunmaktadır: customParam**

declare var customParam;

let orderId = customParam.orderId;
let isSuccess = customParam.isSuccess;

- **orderId:** **doPayment** methodu ile gönderilmiş olan ilgili ödemeye ait **sipariş numarası**dır.

- **isSuccess:** Ödemenin başarılı döndüğünü belirtir. **boolean** olarak **true** değer dönecektir.

## paymentFail

Bu event sadece **doPayment** methodu tetiklendiğinde çalışır. Eğer ödeme işlemi başarısız olarak tamamlandıysa bu event üzerinden ödemenin başarısız olduğu durumda alınması gereken aksiyonlara ait kod içerikleri eklenebilir.

**Event üzerinden erişilebilir olan bir adet parametre bulunmaktadır: customParam**

declare var customParam;

let orderId = customParam.orderId;
let errors = customParam.errors;

- **orderId:** **doPayment** methodu ile gönderilmiş olan ilgili ödemeye ait **sipariş numarası**dır.

- **errors:** Ödemenin neden başarısız döndüğünü belirtir. **String[]** olarak **hata mesajlarını** dönecektir.

Diğer Kullanılabilir Event'ler
===

Aşağıda belirtilen event'ler de ödeme bileşeni üzerinde **events** kısmına gelindiğinde **Add Custom Event** butonu ile yeni event olarak eklemek gerekmektedir.

## isCardSelected

Bu event, sadece kullanıcı ekranda listelenen kartlarından birini seçtiğinde tetiklenir. Ödeme işlemi tetiklenmeden önce bir kart seçilmiş olması gerektiğinden kullanıcının **kart seçimi yapma durumu** bu event içerisinde kontrol edilecektir.

## noAvailableCard

Bu event, sadece kullanıcının ödeme işlemi için kullanılabilir bir kart bilgisi olmadığında tetiklenir. Kullanıcıya ödeme için gerekli kart bulunmadığına dair bilgi vermek için kullanılacaktır.