13. Widget Akışının Ekran Görüntüleri

1 – AccessToken Alınır (Backend)

2 – WidgetToken Üretilir (Backend)

3 – Widget Frontend’e Aktarılır

Backend tarafından üretilen WidgetToken, frontend’e iletilir.

4 – Widget Başlatılır (Frontend)

FinrotaPay.init({
   token: "WIDGET_TOKEN",
   amount: 2750,
   currency: "TRY",
   mode: "modal",
   containerId: "payment-container",
   environment: "prod"
});

5 – Kullanıcı Kart Bilgilerini Girer (Widget UI)

6 – Widget PreparePayment Çağrısı (Internal)

Kullanıcı ödeme butonuna bastığında widget

• POST /b2c/widget/preparePayment

çağrısını yapar ve

• Kart bilgileri
• Seçilen taksit (installmentToken)

Finrota’ya iletilir

Bu adım sonucunda
→ prepareToken oluşturulur

7 – onSuccess Event’i Tetiklenir (Frontend)

onSuccess(data) {

  // ödeme hazır

}

Bu event

• Ödemenin tamamlandığı anlamına gelmez
• Sadece ödeme request’inin hazır olduğunu gösterir

8 – Merchant Backend’e İstek Atılır

Frontend, kendi backend’ine aşağıdaki bilgileri gönderir:

Alan	Açıklama
prepareToken	Ödeme için oluşturulan token
amount	İşlem tutarı
diğer metadata	sipariş bilgisi vb.

9 – Payment Endpoint Çağrılır (Backend)

Merchant backend

• POST /b2c/widget/payment
• Authorization: Bearer {AccessToken}

çağrısını yapar

10 – Ödeme Sonucu

3D Secure Senaryosu

Response

{

 "paymentType": "RedirectUrl",

 "redirectTo": "3D\_URL"

}

Akış

4. Frontend → kullanıcıyı redirect eder
5. Banka → OTP doğrulaması
6. Kullanıcı → returnUrl’e döner

3D’siz Senaryo

{

 "paymentType": "DirectSale",

 "success": true

}

→ Ödeme direkt tamamlanır