Erken erişim talep edin

Adınızı ve e-posta adresinizi veya telefon numaranızı paylaşın. Tajo erişim ayrıntıları için sizinle iletişime geçeceğiz.

Viewport referansı

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.

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:

{
  "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:

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:

{
  "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.