On this page

Viewport-referanse

Viewports definerer hvor Stripe Apps UI-komponenter vises i Stripe Dashboard. Hver viewport tilsvarer en spesifikk Dashboard-side eller -plassering der appen din kan gjengi en visning.

Slik fungerer viewports

Når du erklærer en visning i app-manifestet, kartlegger du en React-komponent til en viewport:

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

Komponenten gjengis i app-skuffen (sidepanel) når en bruker navigerer til tilsvarende Dashboard-side og åpner appen din.

Dashboard-dekkende viewports

Disse viewportene er tilgjengelige på alle sider i Stripe Dashboard:

Viewport-ID	Beskrivelse
`stripe.dashboard.drawer.default`	Standard skuffvisning, tilgjengelig fra alle Dashboard-sider via app-ikonet
`stripe.dashboard.home.overview`	Hjemside oversikt, vist på Dashboard-landingssiden
`stripe.dashboard.settings`	App-innstillingsside, tilgjengelig fra appens innstillingsmenyen
`stripe.dashboard.onboarding`	Onboarding-flyt, vist etter appinstallasjon

Sidespesifikke viewports

Kunder

Viewport-ID	Side	URL-mønster	Objekttype
`stripe.dashboard.customer.list`	Kundeliste	`/customers`	,
`stripe.dashboard.customer.detail`	Kundedetalj	`/customers/:id`	Customer

Betalinger

Viewport-ID	Side	URL-mønster	Objekttype
`stripe.dashboard.payment.list`	Betalingsliste	`/payments`	,
`stripe.dashboard.payment.detail`	Betalingsdetalj	`/payments/:id`	PaymentIntent

Abonnementer

Viewport-ID	Side	URL-mønster	Objekttype
`stripe.dashboard.subscription.list`	Abonnementsliste	`/subscriptions`	,
`stripe.dashboard.subscription.detail`	Abonnementsdetalj	`/subscriptions/:id`	Subscription

Anbefalte viewports for Tajo Brevo-integrasjon

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

Caution

Hvis manifestet erklærer en viewport som ikke eksisterer, vil app-opplastingen mislykkes i validering. Kontroller alltid viewport-ID-er mot denne referansen.