---
title: "Αναφορά viewports | Tajo"
description: "Πλήρης αναφορά των viewports του Stripe Dashboard όπου μπορεί να αποδοθεί το περιβάλλον χρήστη της εφαρμογής σας για το Stripe"
url: https://tajo.io/gr/docs/stripe-apps/viewports/
markdown: https://tajo.io/gr/docs/stripe-apps/viewports.md
lang: el-GR
author: "Set Noa"
author_url: https://tajo.io/gr/set-noa/
robots: noindex
---

Ζητήστε πρώιμη πρόσβαση

Συμπληρώστε το μικρό σας όνομα και την επαγγελματική διεύθυνση email. Θα σας στείλουμε σύνδεσμο για να επιβεβαιώσετε το αίτημα πρόσβασης στο Tajo.

# Αναφορά viewports

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

Τα viewports καθορίζουν πού εμφανίζονται τα στοιχεία περιβάλλοντος χρήστη της εφαρμογής σας για το Stripe μέσα στο Stripe Dashboard. Κάθε viewport αντιστοιχεί σε μια συγκεκριμένη σελίδα ή θέση του Dashboard όπου η εφαρμογή σας μπορεί να αποδώσει μια προβολή.

Caution

**Κατάσταση: προγραμματισμένο, δεν έχει κατασκευαστεί.** Το Tajo δεν έχει εφαρμογή Stripe, οπότε τίποτα σε αυτή την ενότητα δεν μπορεί να εγκατασταθεί σήμερα. Τα αναγνωριστικά εφαρμογής, τα URL και τα διαπιστευτήρια σε αυτή τη σελίδα είναι ενδεικτικά παραδείγματα, όχι ενεργά endpoints.

## Πώς λειτουργούν τα viewports

Όταν δηλώνετε μια προβολή στο manifest της εφαρμογής σας, αντιστοιχίζετε ένα στοιχείο React σε ένα viewport:

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

Το στοιχείο αποδίδεται στο συρτάρι της εφαρμογής (πλευρικό πάνελ) όταν ένας χρήστης μεταβαίνει στην αντίστοιχη σελίδα του Dashboard και ανοίγει την εφαρμογή σας.

## Viewports σε όλο το Dashboard έναντι viewports ανά σελίδα

### Viewports σε όλο το Dashboard

Αυτά τα viewports είναι διαθέσιμα σε κάθε σελίδα του Stripe Dashboard:

| Αναγνωριστικό viewport | Περιγραφή |
| --- | --- |
| `stripe.dashboard.drawer.default` | Προεπιλεγμένη προβολή συρταριού, προσβάσιμη από οποιαδήποτε σελίδα του Dashboard μέσω του εικονιδίου της εφαρμογής |
| `stripe.dashboard.home.overview` | Επισκόπηση αρχικής σελίδας, εμφανίζεται στην αρχική σελίδα του Dashboard |
| `stripe.dashboard.settings` | Σελίδα ρυθμίσεων της εφαρμογής, προσβάσιμη από το μενού ρυθμίσεων της εφαρμογής |
| `stripe.dashboard.onboarding` | Ροή onboarding, εμφανίζεται μετά την εγκατάσταση της εφαρμογής |

Tip

Το viewport `drawer.default` λειτουργεί ως εφεδρική επιλογή. Αν ένας χρήστης ανοίξει την εφαρμογή σας σε σελίδα για την οποία δεν έχετε δηλώσει συγκεκριμένο viewport, αποδίδεται η προβολή `drawer.default`.

### Viewports ανά σελίδα

Αυτά τα viewports αποδίδονται μόνο όταν ο χρήστης βρίσκεται στην αντίστοιχη σελίδα του Dashboard:

## Πληρωμές

| Αναγνωριστικό viewport | Σελίδα | Μοτίβο URL | Τύπος αντικειμένου |
| --- | --- | --- | --- |
| `stripe.dashboard.payment.list` | Λίστα πληρωμών | `/payments` |  |
| `stripe.dashboard.payment.detail` | Λεπτομέρειες πληρωμής | `/payments/:id` | PaymentIntent |
| `stripe.dashboard.charge.detail` | Λεπτομέρειες χρέωσης | `/payments/:id` (παλαιού τύπου) | Charge |

## Πελάτες

| Αναγνωριστικό viewport | Σελίδα | Μοτίβο URL | Τύπος αντικειμένου |
| --- | --- | --- | --- |
| `stripe.dashboard.customer.list` | Λίστα πελατών | `/customers` |  |
| `stripe.dashboard.customer.detail` | Λεπτομέρειες πελάτη | `/customers/:id` | Customer |

## Προϊόντα και τιμές

| Αναγνωριστικό viewport | Σελίδα | Μοτίβο URL | Τύπος αντικειμένου |
| --- | --- | --- | --- |
| `stripe.dashboard.product.list` | Λίστα προϊόντων | `/products` |  |
| `stripe.dashboard.product.detail` | Λεπτομέρειες προϊόντος | `/products/:id` | Product |
| `stripe.dashboard.price.detail` | Λεπτομέρειες τιμής | `/prices/:id` | Price |

## Τιμολόγια

| Αναγνωριστικό viewport | Σελίδα | Μοτίβο URL | Τύπος αντικειμένου |
| --- | --- | --- | --- |
| `stripe.dashboard.invoice.list` | Λίστα τιμολογίων | `/invoices` |  |
| `stripe.dashboard.invoice.detail` | Λεπτομέρειες τιμολογίου | `/invoices/:id` | Invoice |

## Συνδρομές

| Αναγνωριστικό viewport | Σελίδα | Μοτίβο URL | Τύπος αντικειμένου |
| --- | --- | --- | --- |
| `stripe.dashboard.subscription.list` | Λίστα συνδρομών | `/subscriptions` |  |
| `stripe.dashboard.subscription.detail` | Λεπτομέρειες συνδρομής | `/subscriptions/:id` | Subscription |

## Checkout

| Αναγνωριστικό viewport | Σελίδα | Μοτίβο URL | Τύπος αντικειμένου |
| --- | --- | --- | --- |
| `stripe.dashboard.checkout.session.list` | Λίστα Checkout Sessions | `/checkout/sessions` |  |
| `stripe.dashboard.checkout.session.detail` | Λεπτομέρειες Checkout Session | `/checkout/sessions/:id` | CheckoutSession |
| `stripe.dashboard.payment-link.list` | Λίστα Payment Links | `/payment-links` |  |
| `stripe.dashboard.payment-link.detail` | Λεπτομέρειες Payment Link | `/payment-links/:id` | PaymentLink |

## Connect

| Αναγνωριστικό viewport | Σελίδα | Μοτίβο URL | Τύπος αντικειμένου |
| --- | --- | --- | --- |
| `stripe.dashboard.connect.account.list` | Λίστα συνδεδεμένων λογαριασμών | `/connect/accounts` |  |
| `stripe.dashboard.connect.account.detail` | Λεπτομέρειες συνδεδεμένου λογαριασμού | `/connect/accounts/:id` | Account |
| `stripe.dashboard.transfer.list` | Λίστα μεταφορών | `/connect/transfers` |  |
| `stripe.dashboard.transfer.detail` | Λεπτομέρειες μεταφοράς | `/connect/transfers/:id` | Transfer |

## Χρεώσεις και συνδρομές

| Αναγνωριστικό viewport | Σελίδα | Μοτίβο URL | Τύπος αντικειμένου |
| --- | --- | --- | --- |
| `stripe.dashboard.coupon.list` | Λίστα κουπονιών | `/coupons` |  |
| `stripe.dashboard.coupon.detail` | Λεπτομέρειες κουπονιού | `/coupons/:id` | Coupon |
| `stripe.dashboard.quote.list` | Λίστα προσφορών | `/quotes` |  |
| `stripe.dashboard.quote.detail` | Λεπτομέρειες προσφοράς | `/quotes/:id` | Quote |
| `stripe.dashboard.credit-note.detail` | Λεπτομέρειες πιστωτικού σημειώματος | `/credit-notes/:id` | CreditNote |

## Εκταμιεύσεις

| Αναγνωριστικό viewport | Σελίδα | Μοτίβο URL | Τύπος αντικειμένου |
| --- | --- | --- | --- |
| `stripe.dashboard.payout.list` | Λίστα εκταμιεύσεων | `/payouts` |  |
| `stripe.dashboard.payout.detail` | Λεπτομέρειες εκταμίευσης | `/payouts/:id` | Payout |

## Αμφισβητήσεις

| Αναγνωριστικό viewport | Σελίδα | Μοτίβο URL | Τύπος αντικειμένου |
| --- | --- | --- | --- |
| `stripe.dashboard.dispute.list` | Λίστα αμφισβητήσεων | `/disputes` |  |
| `stripe.dashboard.dispute.detail` | Λεπτομέρειες αμφισβήτησης | `/disputes/:id` | Dispute |

## Terminal

| Αναγνωριστικό viewport | Σελίδα | Μοτίβο URL | Τύπος αντικειμένου |
| --- | --- | --- | --- |
| `stripe.dashboard.terminal.reader.list` | Λίστα αναγνωστών | `/terminal/readers` |  |
| `stripe.dashboard.terminal.reader.detail` | Λεπτομέρειες αναγνώστη | `/terminal/readers/:id` | TerminalReader |
| `stripe.dashboard.terminal.location.list` | Λίστα τοποθεσιών | `/terminal/locations` |  |
| `stripe.dashboard.terminal.location.detail` | Λεπτομέρειες τοποθεσίας | `/terminal/locations/:id` | TerminalLocation |

## Issuing

| Αναγνωριστικό viewport | Σελίδα | Μοτίβο URL | Τύπος αντικειμένου |
| --- | --- | --- | --- |
| `stripe.dashboard.issuing.card.list` | Λίστα καρτών | `/issuing/cards` |  |
| `stripe.dashboard.issuing.card.detail` | Λεπτομέρειες κάρτας | `/issuing/cards/:id` | IssuingCard |
| `stripe.dashboard.issuing.cardholder.list` | Λίστα κατόχων καρτών | `/issuing/cardholders` |  |
| `stripe.dashboard.issuing.cardholder.detail` | Λεπτομέρειες κατόχου κάρτας | `/issuing/cardholders/:id` | IssuingCardholder |
| `stripe.dashboard.issuing.transaction.list` | Λίστα συναλλαγών | `/issuing/transactions` |  |
| `stripe.dashboard.issuing.authorization.list` | Λίστα εξουσιοδοτήσεων | `/issuing/authorizations` |  |

## Πρόσβαση στο context του αντικειμένου

Όταν η εφαρμογή σας αποδίδεται σε ένα viewport λεπτομερειών, λαμβάνει το σχετικό αντικείμενο του Stripe ως context:

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

### Context λίστας έναντι context λεπτομερειών

| Τύπος viewport | Context αντικειμένου | Περίπτωση χρήσης |
| --- | --- | --- |
| **Λίστα** (π.χ. `customer.list`) | Μη διαθέσιμο, δεν έχει επιλεγεί συγκεκριμένο αντικείμενο | Εμφανίστε συγκεντρωτικά δεδομένα, συνοπτικές προβολές ή μαζικές ενέργειες |
| **Λεπτομέρειες** (π.χ. `customer.detail`) | Πλήρες αντικείμενο Stripe για την τρέχουσα σελίδα | Εμφανίστε δεδομένα, ενέργειες και ενσωματώσεις που αφορούν το αντικείμενο |

## Προτεινόμενα viewports για την ενσωμάτωση Tajo Brevo

Για την εφαρμογή ενσωμάτωσης Tajo Brevo, αυτά τα viewports προσφέρουν τη μεγαλύτερη αξία:

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

| Στοιχείο | Σκοπός |
| --- | --- |
| **CustomerDetailView** | Εμφανίζει τα στοιχεία επαφής στο Brevo, την κατάσταση συγχρονισμού και τα δεδομένα αλληλεπίδρασης για έναν συγκεκριμένο πελάτη |
| **CustomerListView** | Εμφανίζει τα χειριστήρια μαζικού συγχρονισμού και συγκεντρωτικά στατιστικά συγχρονισμού με το Brevo |
| **PaymentDetailView** | Εμφανίζει ποια συμβάντα του Brevo ενεργοποιήθηκαν από αυτήν την πληρωμή |
| **SubscriptionDetailView** | Εμφανίζει την κατάσταση αυτοματοποίησης του Brevo για αυτήν τη συνδρομή |
| **OverviewView** | Widget αρχικής σελίδας του Dashboard με την υγεία του συγχρονισμού και τις βασικές μετρήσεις του Brevo |
| **DrawerView** | Γενικό συρτάρι εφαρμογής με γρήγορες ενέργειες και επισκόπηση κατάστασης |
| **SettingsView** | Διαμορφώνει το κλειδί API του Brevo, τις προτιμήσεις συγχρονισμού και τις αντιστοιχίσεις πεδίων |
| **OnboardingView** | Καθοδηγεί τους νέους χρήστες στη σύνδεση του λογαριασμού τους στο Brevo |

## Διαθεσιμότητα viewports

Δεν είναι όλα τα viewports διαθέσιμα σε όλες τις λειτουργίες του Stripe Dashboard:

| Λειτουργία | Διαθέσιμα viewports |
| --- | --- |
| **Live mode** | Όλα τα viewports |
| **Test mode** | Όλα τα viewports (χρησιμοποιεί δοκιμαστικά δεδομένα) |
| **Sandbox** | Όλα τα viewports (αν ισχύει `sandbox_install_compatible: true`) |

Caution

Αν το manifest σας δηλώνει ένα viewport που δεν υπάρχει, η μεταφόρτωση της εφαρμογής θα αποτύχει στην επικύρωση. Επαληθεύετε πάντα τα αναγνωριστικά viewport με βάση αυτήν την αναφορά.