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

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

Αναφορά viewports

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

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

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

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

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 προσφέρουν τη μεγαλύτερη αξία:

{
  "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 με βάση αυτήν την αναφορά.