---
title: "Viewport referansı | Tajo"
description: "Stripe App arayüzünüzün görüntülenebileceği tüm Stripe Dashboard viewport'larının eksiksiz referansı"
url: https://tajo.io/tr/docs/stripe-apps/viewports/
markdown: https://tajo.io/tr/docs/stripe-apps/viewports.md
lang: tr-TR
author: "Set Noa"
author_url: https://tajo.io/tr/set-noa/
robots: noindex
---

Erken erişim talep edin

Adınızı ve iş e-posta adresinizi girin. Tajo erişim talebinizi onaylamanız için size bir bağlantı göndereceğiz.

# Viewport referansı

[Set Noa](https://tajo.io/tr/set-noa/)

Viewport’lar, Stripe App’inizin arayüz bileşenlerinin Stripe Dashboard içinde nerede görüneceğini belirler. Her viewport, uygulamanızın bir görünüm oluşturabileceği belirli bir Dashboard sayfasına veya konumuna karşılık gelir.

Caution

**Durum: planlandı, oluşturulmadı.** Tajo’nun bir Stripe App’i yoktur, bu nedenle bu bölümdeki hiçbir şey bugün kurulamaz. Bu sayfadaki uygulama tanımlayıcıları, URL’ler ve kimlik bilgileri canlı uç noktalar değil, örnek amaçlı yer tutuculardır.

## Viewport’lar nasıl çalışır

Uygulama manifestonuzda bir görünüm tanımladığınızda, bir React bileşenini bir viewport’a eşlersiniz:

```json
{
  "ui_extension": {
    "views": [
      {
        "viewport": "stripe.dashboard.customer.detail",
        "component": "CustomerDetailView"
      }
    ]
  }
}
```

Kullanıcı ilgili Dashboard sayfasına gidip uygulamanızı açtığında bileşen, uygulama çekmecesinde (yan panelde) görüntülenir.

## Dashboard genelinde ve sayfaya özel viewport’lar

### Dashboard genelindeki viewport’lar

Bu viewport’lar Stripe Dashboard’un her sayfasında kullanılabilir:

| Viewport ID | Açıklama |
| --- | --- |
| `stripe.dashboard.drawer.default` | Varsayılan çekmece görünümü, uygulama simgesi aracılığıyla herhangi bir Dashboard sayfasından erişilebilir |
| `stripe.dashboard.home.overview` | Ana sayfa özeti, Dashboard giriş sayfasında gösterilir |
| `stripe.dashboard.settings` | Uygulama ayarları sayfası, uygulamanın ayarlar menüsünden erişilebilir |
| `stripe.dashboard.onboarding` | Uygulama kurulduktan sonra gösterilen başlangıç akışı |

Tip

`drawer.default` viewport’u yedek görünüm işlevi görür. Kullanıcı, özel bir viewport tanımlamadığınız bir sayfada uygulamanızı açarsa bunun yerine `drawer.default` görünümü oluşturulur.

### Sayfaya özel viewport’lar

Bu viewport’lar yalnızca kullanıcı ilgili Dashboard sayfasındayken görüntülenir:

## Ödemeler

| Viewport ID | Sayfa | URL kalıbı | Nesne türü |
| --- | --- | --- | --- |
| `stripe.dashboard.payment.list` | Ödeme listesi | `/payments` |  |
| `stripe.dashboard.payment.detail` | Ödeme ayrıntısı | `/payments/:id` | PaymentIntent |
| `stripe.dashboard.charge.detail` | Tahsilat ayrıntısı | `/payments/:id` (eski) | Charge |

## Müşteriler

| Viewport ID | Sayfa | URL kalıbı | Nesne türü |
| --- | --- | --- | --- |
| `stripe.dashboard.customer.list` | Müşteri listesi | `/customers` |  |
| `stripe.dashboard.customer.detail` | Müşteri ayrıntısı | `/customers/:id` | Customer |

## Ürünler ve fiyatlar

| Viewport ID | Sayfa | URL kalıbı | Nesne türü |
| --- | --- | --- | --- |
| `stripe.dashboard.product.list` | Ürün listesi | `/products` |  |
| `stripe.dashboard.product.detail` | Ürün ayrıntısı | `/products/:id` | Product |
| `stripe.dashboard.price.detail` | Fiyat ayrıntısı | `/prices/:id` | Price |

## Faturalar

| Viewport ID | Sayfa | URL kalıbı | Nesne türü |
| --- | --- | --- | --- |
| `stripe.dashboard.invoice.list` | Fatura listesi | `/invoices` |  |
| `stripe.dashboard.invoice.detail` | Fatura ayrıntısı | `/invoices/:id` | Invoice |

## Abonelikler

| Viewport ID | Sayfa | URL kalıbı | Nesne türü |
| --- | --- | --- | --- |
| `stripe.dashboard.subscription.list` | Abonelik listesi | `/subscriptions` |  |
| `stripe.dashboard.subscription.detail` | Abonelik ayrıntısı | `/subscriptions/:id` | Subscription |

## Ödeme akışı

| Viewport ID | Sayfa | URL kalıbı | Nesne türü |
| --- | --- | --- | --- |
| `stripe.dashboard.checkout.session.list` | Checkout Session listesi | `/checkout/sessions` |  |
| `stripe.dashboard.checkout.session.detail` | Checkout Session ayrıntısı | `/checkout/sessions/:id` | CheckoutSession |
| `stripe.dashboard.payment-link.list` | Ödeme bağlantısı listesi | `/payment-links` |  |
| `stripe.dashboard.payment-link.detail` | Ödeme bağlantısı ayrıntısı | `/payment-links/:id` | PaymentLink |

## Connect

| Viewport ID | Sayfa | URL kalıbı | Nesne türü |
| --- | --- | --- | --- |
| `stripe.dashboard.connect.account.list` | Bağlı hesap listesi | `/connect/accounts` |  |
| `stripe.dashboard.connect.account.detail` | Bağlı hesap ayrıntısı | `/connect/accounts/:id` | Account |
| `stripe.dashboard.transfer.list` | Transfer listesi | `/connect/transfers` |  |
| `stripe.dashboard.transfer.detail` | Transfer ayrıntısı | `/connect/transfers/:id` | Transfer |

## Faturalandırma

| Viewport ID | Sayfa | URL kalıbı | Nesne türü |
| --- | --- | --- | --- |
| `stripe.dashboard.coupon.list` | Kupon listesi | `/coupons` |  |
| `stripe.dashboard.coupon.detail` | Kupon ayrıntısı | `/coupons/:id` | Coupon |
| `stripe.dashboard.quote.list` | Teklif listesi | `/quotes` |  |
| `stripe.dashboard.quote.detail` | Teklif ayrıntısı | `/quotes/:id` | Quote |
| `stripe.dashboard.credit-note.detail` | Alacak dekontu ayrıntısı | `/credit-notes/:id` | CreditNote |

## Ödeme aktarımları

| Viewport ID | Sayfa | URL kalıbı | Nesne türü |
| --- | --- | --- | --- |
| `stripe.dashboard.payout.list` | Ödeme aktarımı listesi | `/payouts` |  |
| `stripe.dashboard.payout.detail` | Ödeme aktarımı ayrıntısı | `/payouts/:id` | Payout |

## İtirazlar

| Viewport ID | Sayfa | URL kalıbı | Nesne türü |
| --- | --- | --- | --- |
| `stripe.dashboard.dispute.list` | İtiraz listesi | `/disputes` |  |
| `stripe.dashboard.dispute.detail` | İtiraz ayrıntısı | `/disputes/:id` | Dispute |

## Terminal

| Viewport ID | Sayfa | URL kalıbı | Nesne türü |
| --- | --- | --- | --- |
| `stripe.dashboard.terminal.reader.list` | Okuyucu listesi | `/terminal/readers` |  |
| `stripe.dashboard.terminal.reader.detail` | Okuyucu ayrıntısı | `/terminal/readers/:id` | TerminalReader |
| `stripe.dashboard.terminal.location.list` | Konum listesi | `/terminal/locations` |  |
| `stripe.dashboard.terminal.location.detail` | Konum ayrıntısı | `/terminal/locations/:id` | TerminalLocation |

## Issuing

| Viewport ID | Sayfa | URL kalıbı | Nesne türü |
| --- | --- | --- | --- |
| `stripe.dashboard.issuing.card.list` | Kart listesi | `/issuing/cards` |  |
| `stripe.dashboard.issuing.card.detail` | Kart ayrıntısı | `/issuing/cards/:id` | IssuingCard |
| `stripe.dashboard.issuing.cardholder.list` | Kart sahibi listesi | `/issuing/cardholders` |  |
| `stripe.dashboard.issuing.cardholder.detail` | Kart sahibi ayrıntısı | `/issuing/cardholders/:id` | IssuingCardholder |
| `stripe.dashboard.issuing.transaction.list` | İşlem listesi | `/issuing/transactions` |  |
| `stripe.dashboard.issuing.authorization.list` | Yetkilendirme listesi | `/issuing/authorizations` |  |

## Nesne bağlamına erişim

Uygulamanız bir ayrıntı viewport’unda görüntülendiğinde, ilgili Stripe nesnesini bağlam olarak alır:

```typescript
import type { ExtensionContextValue } from '@stripe/ui-extension-sdk/context';

const CustomerDetailView = ({ environment }: ExtensionContextValue) => {
  const { objectContext } = environment;

  // objectContext contains the current Stripe object
  const customerId = objectContext?.id; // "cus_xxxxx"
  const customerEmail = objectContext?.email;

  return (
    <Box>
      <Inline>Customer: {customerEmail}</Inline>
      <Inline>Brevo Sync Status: checking...</Inline>
    </Box>
  );
};
```

### Liste ve ayrıntı bağlamı

| Viewport türü | Nesne bağlamı | Kullanım örneği |
| --- | --- | --- |
| **Liste** (örneğin `customer.list`) | Kullanılamaz, seçili belirli bir nesne yoktur | Toplu veriler, özet görünümler veya toplu işlemler gösterin |
| **Ayrıntı** (örneğin `customer.detail`) | Geçerli sayfaya ait tam Stripe nesnesi | Nesneye özel veriler, işlemler ve entegrasyonlar gösterin |

## Tajo Brevo entegrasyonu için önerilen viewport’lar

Tajo Brevo entegrasyon uygulaması için en fazla değeri şu viewport’lar sağlar:

```json
{
  "ui_extension": {
    "views": [
      {
        "viewport": "stripe.dashboard.customer.detail",
        "component": "CustomerDetailView"
      },
      {
        "viewport": "stripe.dashboard.customer.list",
        "component": "CustomerListView"
      },
      {
        "viewport": "stripe.dashboard.payment.detail",
        "component": "PaymentDetailView"
      },
      {
        "viewport": "stripe.dashboard.subscription.detail",
        "component": "SubscriptionDetailView"
      },
      {
        "viewport": "stripe.dashboard.home.overview",
        "component": "OverviewView"
      },
      {
        "viewport": "stripe.dashboard.drawer.default",
        "component": "DrawerView"
      },
      {
        "viewport": "stripe.dashboard.settings",
        "component": "SettingsView"
      },
      {
        "viewport": "stripe.dashboard.onboarding",
        "component": "OnboardingView"
      }
    ]
  }
}
```

| Bileşen | Amacı |
| --- | --- |
| **CustomerDetailView** | Belirli bir müşteri için Brevo kişi bilgilerini, senkronizasyon durumunu ve etkileşim verilerini gösterir |
| **CustomerListView** | Toplu senkronizasyon kontrollerini ve Brevo senkronizasyon istatistiklerinin toplamını gösterir |
| **PaymentDetailView** | Bu ödemenin hangi Brevo olaylarını tetiklediğini gösterir |
| **SubscriptionDetailView** | Bu abonelik için Brevo otomasyon durumunu gösterir |
| **OverviewView** | Senkronizasyon sağlığını ve temel Brevo metriklerini içeren Dashboard ana sayfa bileşeni |
| **DrawerView** | Hızlı işlemler ve durum özeti içeren genel uygulama çekmecesi |
| **SettingsView** | Brevo API anahtarını, senkronizasyon tercihlerini ve alan eşlemelerini yapılandırır |
| **OnboardingView** | Yeni kullanıcılara Brevo hesaplarını bağlama sürecinde rehberlik eder |

## Viewport kullanılabilirliği

Tüm viewport’lar her Stripe Dashboard modunda kullanılamaz:

| Mod | Kullanılabilir viewport’lar |
| --- | --- |
| **Canlı mod** | Tüm viewport’lar |
| **Test modu** | Tüm viewport’lar (test verileri kullanılır) |
| **Sandbox** | Tüm viewport’lar (`sandbox_install_compatible: true` ise) |

Caution

Manifestonuz var olmayan bir viewport tanımlarsa uygulama yüklemesi doğrulamada başarısız olur. Viewport ID’lerini her zaman bu referansa göre doğrulayın.