---
title: "व्यूपोर्ट संदर्भ | Tajo"
description: "Stripe Dashboard के उन सभी व्यूपोर्ट का पूरा संदर्भ जहाँ आपके Stripe App का UI रेंडर हो सकता है"
url: https://tajo.io/hi/docs/stripe-apps/viewports/
markdown: https://tajo.io/hi/docs/stripe-apps/viewports.md
lang: hi-IN
author: "Set Noa"
author_url: https://tajo.io/hi/set-noa/
robots: noindex
---

अर्ली एक्सेस का अनुरोध करें

अपना पहला नाम और कार्यस्थल का ईमेल पता दर्ज करें। Tajo एक्सेस अनुरोध की पुष्टि के लिए हम आपको एक लिंक ईमेल करेंगे।

# व्यूपोर्ट संदर्भ

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

व्यूपोर्ट तय करते हैं कि आपके Stripe App के UI कंपोनेंट Stripe Dashboard में कहाँ दिखेंगे. हर व्यूपोर्ट Dashboard के किसी खास पेज या स्थान से मेल खाता है जहाँ आपका ऐप एक व्यू रेंडर कर सकता है.

Caution

**स्थिति: नियोजित, अभी बना नहीं.** Tajo के पास कोई Stripe App नहीं है, इसलिए इस सेक्शन में से आज कुछ भी इंस्टॉल नहीं किया जा सकता. इस पेज पर दिए गए ऐप आइडेंटिफ़ायर, URL और क्रेडेंशियल उदाहरण के लिए रखे गए प्लेसहोल्डर हैं, लाइव एंडपॉइंट नहीं.

## व्यूपोर्ट कैसे काम करते हैं

जब आप अपने ऐप के मैनिफ़ेस्ट में कोई व्यू घोषित करते हैं, तो आप एक React कंपोनेंट को एक व्यूपोर्ट से मैप करते हैं:

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

जब कोई उपयोगकर्ता संबंधित Dashboard पेज पर जाता है और आपका ऐप खोलता है, तो कंपोनेंट ऐप ड्रॉअर (साइड पैनल) में रेंडर होता है.

## पूरे Dashboard के व्यूपोर्ट बनाम पेज-विशिष्ट व्यूपोर्ट

### पूरे Dashboard के व्यूपोर्ट

ये व्यूपोर्ट Stripe Dashboard के हर पेज पर उपलब्ध रहते हैं:

| व्यूपोर्ट ID | विवरण |
| --- | --- |
| `stripe.dashboard.drawer.default` | डिफ़ॉल्ट ड्रॉअर व्यू, ऐप आइकन से किसी भी Dashboard पेज पर खुलता है |
| `stripe.dashboard.home.overview` | होम पेज का अवलोकन, Dashboard के लैंडिंग पेज पर दिखता है |
| `stripe.dashboard.settings` | ऐप सेटिंग्स पेज, ऐप के सेटिंग्स मेन्यू से खुलता है |
| `stripe.dashboard.onboarding` | ऑनबोर्डिंग फ़्लो, ऐप इंस्टॉल होने के बाद दिखता है |

Tip

`drawer.default` व्यूपोर्ट एक फ़ॉलबैक की तरह काम करता है. अगर कोई उपयोगकर्ता आपका ऐप ऐसे पेज पर खोलता है जिसके लिए आपने कोई विशिष्ट व्यूपोर्ट घोषित नहीं किया है, तो उसकी जगह `drawer.default` व्यू रेंडर होता है.

### पेज-विशिष्ट व्यूपोर्ट

ये व्यूपोर्ट तभी रेंडर होते हैं जब उपयोगकर्ता संबंधित Dashboard पेज पर हो:

## भुगतान

| व्यूपोर्ट ID | पेज | URL पैटर्न | ऑब्जेक्ट प्रकार |
| --- | --- | --- | --- |
| `stripe.dashboard.payment.list` | भुगतान की सूची | `/payments` |  |
| `stripe.dashboard.payment.detail` | भुगतान का विवरण | `/payments/:id` | PaymentIntent |
| `stripe.dashboard.charge.detail` | चार्ज का विवरण | `/payments/:id` (लेगेसी) | Charge |

## ग्राहक

| व्यूपोर्ट ID | पेज | URL पैटर्न | ऑब्जेक्ट प्रकार |
| --- | --- | --- | --- |
| `stripe.dashboard.customer.list` | ग्राहकों की सूची | `/customers` |  |
| `stripe.dashboard.customer.detail` | ग्राहक का विवरण | `/customers/:id` | Customer |

## प्रोडक्ट और कीमतें

| व्यूपोर्ट ID | पेज | URL पैटर्न | ऑब्जेक्ट प्रकार |
| --- | --- | --- | --- |
| `stripe.dashboard.product.list` | प्रोडक्ट की सूची | `/products` |  |
| `stripe.dashboard.product.detail` | प्रोडक्ट का विवरण | `/products/:id` | Product |
| `stripe.dashboard.price.detail` | कीमत का विवरण | `/prices/:id` | Price |

## इनवॉइस

| व्यूपोर्ट ID | पेज | URL पैटर्न | ऑब्जेक्ट प्रकार |
| --- | --- | --- | --- |
| `stripe.dashboard.invoice.list` | इनवॉइस की सूची | `/invoices` |  |
| `stripe.dashboard.invoice.detail` | इनवॉइस का विवरण | `/invoices/:id` | Invoice |

## सब्सक्रिप्शन

| व्यूपोर्ट ID | पेज | URL पैटर्न | ऑब्जेक्ट प्रकार |
| --- | --- | --- | --- |
| `stripe.dashboard.subscription.list` | सब्सक्रिप्शन की सूची | `/subscriptions` |  |
| `stripe.dashboard.subscription.detail` | सब्सक्रिप्शन का विवरण | `/subscriptions/:id` | Subscription |

## चेकआउट

| व्यूपोर्ट ID | पेज | 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

| व्यूपोर्ट ID | पेज | 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 |

## बिलिंग

| व्यूपोर्ट ID | पेज | 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 |

## पेआउट

| व्यूपोर्ट ID | पेज | URL पैटर्न | ऑब्जेक्ट प्रकार |
| --- | --- | --- | --- |
| `stripe.dashboard.payout.list` | पेआउट की सूची | `/payouts` |  |
| `stripe.dashboard.payout.detail` | पेआउट का विवरण | `/payouts/:id` | Payout |

## विवाद

| व्यूपोर्ट ID | पेज | URL पैटर्न | ऑब्जेक्ट प्रकार |
| --- | --- | --- | --- |
| `stripe.dashboard.dispute.list` | विवादों की सूची | `/disputes` |  |
| `stripe.dashboard.dispute.detail` | विवाद का विवरण | `/disputes/:id` | Dispute |

## Terminal

| व्यूपोर्ट ID | पेज | 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

| व्यूपोर्ट ID | पेज | 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` |  |

## ऑब्जेक्ट कॉन्टेक्स्ट तक पहुँच

जब आपका ऐप किसी डिटेल व्यूपोर्ट में रेंडर होता है, तो उसे संबंधित Stripe ऑब्जेक्ट कॉन्टेक्स्ट के रूप में मिलता है:

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

### सूची बनाम विवरण कॉन्टेक्स्ट

| व्यूपोर्ट का प्रकार | ऑब्जेक्ट कॉन्टेक्स्ट | उपयोग का मामला |
| --- | --- | --- |
| **सूची** (जैसे, `customer.list`) | उपलब्ध नहीं, कोई विशिष्ट ऑब्जेक्ट चुना नहीं गया | कुल आँकड़े, सारांश व्यू या बैच कार्रवाइयाँ दिखाएं |
| **विवरण** (जैसे, `customer.detail`) | मौजूदा पेज का पूरा Stripe ऑब्जेक्ट | ऑब्जेक्ट-विशिष्ट डेटा, कार्रवाइयाँ और इंटीग्रेशन दिखाएं |

## Tajo Brevo इंटीग्रेशन के लिए सुझाए गए व्यूपोर्ट

Tajo Brevo इंटीग्रेशन ऐप के लिए, ये व्यूपोर्ट सबसे ज़्यादा उपयोगी हैं:

```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** | सिंक की सेहत और अहम Brevo मेट्रिक्स वाला Dashboard होम विजेट |
| **DrawerView** | त्वरित कार्रवाइयों और स्थिति के अवलोकन वाला सामान्य ऐप ड्रॉअर |
| **SettingsView** | Brevo API की, सिंक प्राथमिकताएँ और फ़ील्ड मैपिंग कॉन्फ़िगर करें |
| **OnboardingView** | नए उपयोगकर्ताओं को उनका Brevo अकाउंट कनेक्ट करने में मार्गदर्शन दें |

## व्यूपोर्ट की उपलब्धता

Stripe Dashboard के हर मोड में सभी व्यूपोर्ट उपलब्ध नहीं होते:

| मोड | उपलब्ध व्यूपोर्ट |
| --- | --- |
| **Live mode** | सभी व्यूपोर्ट |
| **Test mode** | सभी व्यूपोर्ट (टेस्ट डेटा का उपयोग करता है) |
| **Sandbox** | सभी व्यूपोर्ट (अगर `sandbox_install_compatible: true` हो) |

Caution

अगर आपका मैनिफ़ेस्ट ऐसा व्यूपोर्ट घोषित करता है जो मौजूद नहीं है, तो ऐप अपलोड वैलिडेशन में फ़ेल हो जाएगा. व्यूपोर्ट ID हमेशा इस संदर्भ से मिलाकर जाँच लें.