Ajukan akses awal

Masukkan nama depan serta email atau nomor telepon Anda. Kami akan menghubungi Anda dengan detail akses Tajo.

Referensi Viewport

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.

Cara kerja viewport

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

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

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:

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