---
title: "Referensi Viewport | Tajo"
description: "Referensi lengkap viewport Stripe Dashboard tempat UI Stripe App Anda dapat dirender"
url: https://tajo.io/in/docs/stripe-apps/viewports/
markdown: https://tajo.io/in/docs/stripe-apps/viewports.md
lang: id-ID
author: "Set Noa"
author_url: https://tajo.io/in/set-noa/
robots: noindex
---

Ajukan akses awal

Masukkan nama depan dan alamat email kerja Anda. Kami akan mengirim tautan untuk mengonfirmasi permintaan akses Tajo.

# Referensi Viewport

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

Viewport menentukan di mana komponen UI Stripe App Anda muncul di dalam Stripe Dashboard. Setiap viewport berhubungan dengan satu halaman atau lokasi Dashboard tertentu tempat aplikasi Anda dapat merender sebuah tampilan.

Caution

**Status: direncanakan, belum dibangun.** Tajo tidak memiliki Stripe App, jadi saat ini tidak ada apa pun di bagian ini yang dapat dipasang. Identifier aplikasi, URL, serta kredensial pada halaman ini adalah placeholder ilustratif, bukan endpoint aktif.

## Cara kerja viewport

Saat Anda mendeklarasikan sebuah tampilan di manifest aplikasi, Anda memetakan komponen React ke sebuah viewport:

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

Komponen tersebut dirender di app drawer (panel samping) ketika pengguna membuka halaman Dashboard terkait lalu membuka aplikasi Anda.

## Viewport lingkup Dashboard vs viewport khusus halaman

### Viewport lingkup Dashboard

Viewport berikut tersedia di setiap halaman Stripe Dashboard:

| ID viewport | Deskripsi |
| --- | --- |
| `stripe.dashboard.drawer.default` | Tampilan drawer default, dapat diakses dari halaman Dashboard mana pun melalui ikon aplikasi |
| `stripe.dashboard.home.overview` | Ringkasan halaman beranda, ditampilkan di halaman utama Dashboard |
| `stripe.dashboard.settings` | Halaman pengaturan aplikasi, dapat diakses dari menu pengaturan aplikasi |
| `stripe.dashboard.onboarding` | Alur onboarding, ditampilkan setelah aplikasi dipasang |

Tip

Viewport `drawer.default` berfungsi sebagai cadangan. Jika pengguna membuka aplikasi Anda di halaman yang belum Anda deklarasikan viewport khususnya, tampilan `drawer.default` yang akan dirender.

### Viewport khusus halaman

Viewport berikut hanya dirender ketika pengguna berada di halaman Dashboard yang bersangkutan:

## Pembayaran

| ID viewport | Halaman | Pola URL | Tipe objek |
| --- | --- | --- | --- |
| `stripe.dashboard.payment.list` | Daftar pembayaran | `/payments` |  |
| `stripe.dashboard.payment.detail` | Detail pembayaran | `/payments/:id` | PaymentIntent |
| `stripe.dashboard.charge.detail` | Detail charge | `/payments/:id` (versi lama) | Charge |

## Pelanggan

| ID viewport | Halaman | Pola URL | Tipe objek |
| --- | --- | --- | --- |
| `stripe.dashboard.customer.list` | Daftar pelanggan | `/customers` |  |
| `stripe.dashboard.customer.detail` | Detail pelanggan | `/customers/:id` | Customer |

## Produk & Harga

| ID viewport | Halaman | Pola URL | Tipe objek |
| --- | --- | --- | --- |
| `stripe.dashboard.product.list` | Daftar produk | `/products` |  |
| `stripe.dashboard.product.detail` | Detail produk | `/products/:id` | Product |
| `stripe.dashboard.price.detail` | Detail harga | `/prices/:id` | Price |

## Faktur

| ID viewport | Halaman | Pola URL | Tipe objek |
| --- | --- | --- | --- |
| `stripe.dashboard.invoice.list` | Daftar faktur | `/invoices` |  |
| `stripe.dashboard.invoice.detail` | Detail faktur | `/invoices/:id` | Invoice |

## Langganan

| ID viewport | Halaman | Pola URL | Tipe objek |
| --- | --- | --- | --- |
| `stripe.dashboard.subscription.list` | Daftar langganan | `/subscriptions` |  |
| `stripe.dashboard.subscription.detail` | Detail langganan | `/subscriptions/:id` | Subscription |

## Checkout

| ID viewport | Halaman | Pola URL | Tipe objek |
| --- | --- | --- | --- |
| `stripe.dashboard.checkout.session.list` | Daftar Checkout Session | `/checkout/sessions` |  |
| `stripe.dashboard.checkout.session.detail` | Detail Checkout Session | `/checkout/sessions/:id` | CheckoutSession |
| `stripe.dashboard.payment-link.list` | Daftar Payment Link | `/payment-links` |  |
| `stripe.dashboard.payment-link.detail` | Detail Payment Link | `/payment-links/:id` | PaymentLink |

## Connect

| ID viewport | Halaman | Pola URL | Tipe objek |
| --- | --- | --- | --- |
| `stripe.dashboard.connect.account.list` | Daftar akun terhubung | `/connect/accounts` |  |
| `stripe.dashboard.connect.account.detail` | Detail akun terhubung | `/connect/accounts/:id` | Account |
| `stripe.dashboard.transfer.list` | Daftar transfer | `/connect/transfers` |  |
| `stripe.dashboard.transfer.detail` | Detail transfer | `/connect/transfers/:id` | Transfer |

## Penagihan

| ID viewport | Halaman | Pola URL | Tipe objek |
| --- | --- | --- | --- |
| `stripe.dashboard.coupon.list` | Daftar kupon | `/coupons` |  |
| `stripe.dashboard.coupon.detail` | Detail kupon | `/coupons/:id` | Coupon |
| `stripe.dashboard.quote.list` | Daftar penawaran | `/quotes` |  |
| `stripe.dashboard.quote.detail` | Detail penawaran | `/quotes/:id` | Quote |
| `stripe.dashboard.credit-note.detail` | Detail nota kredit | `/credit-notes/:id` | CreditNote |

## Pencairan dana

| ID viewport | Halaman | Pola URL | Tipe objek |
| --- | --- | --- | --- |
| `stripe.dashboard.payout.list` | Daftar pencairan dana | `/payouts` |  |
| `stripe.dashboard.payout.detail` | Detail pencairan dana | `/payouts/:id` | Payout |

## Sengketa

| ID viewport | Halaman | Pola URL | Tipe objek |
| --- | --- | --- | --- |
| `stripe.dashboard.dispute.list` | Daftar sengketa | `/disputes` |  |
| `stripe.dashboard.dispute.detail` | Detail sengketa | `/disputes/:id` | Dispute |

## Terminal

| ID viewport | Halaman | Pola URL | Tipe objek |
| --- | --- | --- | --- |
| `stripe.dashboard.terminal.reader.list` | Daftar reader | `/terminal/readers` |  |
| `stripe.dashboard.terminal.reader.detail` | Detail reader | `/terminal/readers/:id` | TerminalReader |
| `stripe.dashboard.terminal.location.list` | Daftar lokasi | `/terminal/locations` |  |
| `stripe.dashboard.terminal.location.detail` | Detail lokasi | `/terminal/locations/:id` | TerminalLocation |

## Issuing

| ID viewport | Halaman | Pola URL | Tipe objek |
| --- | --- | --- | --- |
| `stripe.dashboard.issuing.card.list` | Daftar kartu | `/issuing/cards` |  |
| `stripe.dashboard.issuing.card.detail` | Detail kartu | `/issuing/cards/:id` | IssuingCard |
| `stripe.dashboard.issuing.cardholder.list` | Daftar pemegang kartu | `/issuing/cardholders` |  |
| `stripe.dashboard.issuing.cardholder.detail` | Detail pemegang kartu | `/issuing/cardholders/:id` | IssuingCardholder |
| `stripe.dashboard.issuing.transaction.list` | Daftar transaksi | `/issuing/transactions` |  |
| `stripe.dashboard.issuing.authorization.list` | Daftar otorisasi | `/issuing/authorizations` |  |

## Mengakses konteks objek

Ketika aplikasi Anda dirender di viewport detail, aplikasi menerima objek Stripe yang relevan sebagai konteks:

```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>
  );
};
```

### Konteks list vs detail

| Tipe viewport | Konteks objek | Kasus penggunaan |
| --- | --- | --- |
| **List** (mis. `customer.list`) | Tidak tersedia, tidak ada objek tertentu yang dipilih | Menampilkan data agregat, tampilan ringkasan, atau aksi massal |
| **Detail** (mis. `customer.detail`) | Objek Stripe lengkap untuk halaman saat ini | Menampilkan data, tindakan, dan integrasi khusus objek tersebut |

## Viewport yang direkomendasikan untuk integrasi Tajo Brevo

Untuk aplikasi integrasi Tajo Brevo, viewport berikut memberikan manfaat terbesar:

```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"
      }
    ]
  }
}
```

| Komponen | Tujuan |
| --- | --- |
| **CustomerDetailView** | Menampilkan info kontak Brevo, status sinkronisasi, dan data keterlibatan untuk satu pelanggan tertentu |
| **CustomerListView** | Menampilkan kontrol sinkronisasi massal dan statistik sinkronisasi Brevo secara agregat |
| **PaymentDetailView** | Menampilkan event Brevo mana saja yang dipicu oleh pembayaran ini |
| **SubscriptionDetailView** | Menampilkan status otomatisasi Brevo untuk langganan ini |
| **OverviewView** | Widget beranda dasbor dengan kesehatan sinkronisasi dan metrik utama Brevo |
| **DrawerView** | Drawer aplikasi umum dengan tindakan cepat dan ringkasan status |
| **SettingsView** | Mengatur API key Brevo, preferensi sinkronisasi, dan pemetaan field |
| **OnboardingView** | Memandu pengguna baru menghubungkan akun Brevo mereka |

## Ketersediaan viewport

Tidak semua viewport tersedia di semua mode Stripe Dashboard:

| Mode | Viewport yang tersedia |
| --- | --- |
| **Mode live** | Semua viewport |
| **Mode test** | Semua viewport (menggunakan data uji) |
| **Sandbox** | Semua viewport (jika `sandbox_install_compatible: true`) |

Caution

Jika manifest Anda mendeklarasikan viewport yang tidak ada, unggahan aplikasi akan gagal saat validasi. Selalu verifikasi ID viewport terhadap referensi ini.