---
title: "Viewports حوالہ | Tajo"
description: "Stripe Dashboard viewports کا مکمل حوالہ جہاں آپ کا Stripe App UI render ہو سکتا ہے"
url: https://tajo.io/ur/docs/stripe-apps/viewports/
markdown: https://tajo.io/ur/docs/stripe-apps/viewports.md
lang: ur-PK
author: "Set Noa"
author_url: https://tajo.io/ur/set-noa/
robots: noindex
---

ابتدائی رسائی کی درخواست کریں

اپنا پہلا نام اور دفتری ای میل پتہ درج کریں۔ ہم Tajo تک رسائی کی درخواست کی تصدیق کے لیے ایک لنک ای میل کریں گے۔

# Viewports حوالہ

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

Viewports یہ تعریف کرتے ہیں کہ Stripe Dashboard میں آپ کے Stripe App کے UI اجزاء کہاں ظاہر ہوتے ہیں۔ ہر viewport ایک مخصوص Dashboard صفحے یا مقام سے مطابقت رکھتا ہے جہاں آپ کی app ایک view render کر سکتی ہے۔

Caution

**صورتحال: منصوبہ بند، ابھی تیار نہیں ہوا۔** Tajo کی کوئی Stripe App نہیں ہے، اس لیے اس سیکشن کی کوئی چیز آج انسٹال نہیں کی جا سکتی۔ اس صفحے میں دیے گئے ایپ کے شناخت کار، URLs اور کریڈنشلز مثال کے طور پر رکھے گئے پلیس ہولڈرز ہیں، لائیو اینڈ پوائنٹس نہیں۔

## Viewports کیسے کام کرتے ہیں

جب آپ app manifest میں ایک view بیان کرتے ہیں، تو آپ ایک React component کو ایک viewport سے ملاتے ہیں:

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

جب صارف متعلقہ Dashboard صفحے پر جاتا ہے اور آپ کی app کھولتا ہے تو component app drawer (سائیڈ پینل) میں render ہوتا ہے۔

## Dashboard-Wide بمقابلہ Page-Specific Viewports

### Dashboard-Wide Viewports

یہ viewports Stripe Dashboard کے ہر صفحے پر دستیاب ہیں:

| Viewport ID | تفصیل |
| --- | --- |
| `stripe.dashboard.drawer.default` | پہلے سے طے شدہ drawer view، app icon کے ذریعے کسی بھی Dashboard صفحے سے قابل رسائی |
| `stripe.dashboard.home.overview` | ہوم صفحہ کا جائزہ، Dashboard landing صفحے پر دکھایا جاتا ہے |
| `stripe.dashboard.settings` | App settings صفحہ، app کے settings menu سے قابل رسائی |
| `stripe.dashboard.onboarding` | Onboarding فلو، app انسٹالیشن کے بعد دکھایا جاتا ہے |

Tip

`drawer.default` viewport ایک fallback کے طور پر کام کرتا ہے۔ اگر صارف آپ کی app کسی ایسے صفحے پر کھولے جہاں آپ نے کوئی مخصوص viewport بیان نہیں کیا، تو `drawer.default` view اس کی جگہ render ہوگا۔

### Page-Specific Viewports

یہ viewports صرف اس وقت render ہوتے ہیں جب صارف متعلقہ Dashboard صفحے پر ہو:

## ادائیگیاں

| Viewport ID | صفحہ | URL Pattern | Object کی قسم |
| --- | --- | --- | --- |
| `stripe.dashboard.payment.list` | ادائیگیوں کی فہرست | `/payments` |  |
| `stripe.dashboard.payment.detail` | ادائیگی کی تفصیل | `/payments/:id` | PaymentIntent |
| `stripe.dashboard.charge.detail` | Charge کی تفصیل | `/payments/:id` (legacy) | Charge |

## گاہک

| Viewport ID | صفحہ | URL Pattern | Object کی قسم |
| --- | --- | --- | --- |
| `stripe.dashboard.customer.list` | گاہکوں کی فہرست | `/customers` |  |
| `stripe.dashboard.customer.detail` | گاہک کی تفصیل | `/customers/:id` | Customer |

## مصنوعات اور قیمتیں

| Viewport ID | صفحہ | URL Pattern | Object کی قسم |
| --- | --- | --- | --- |
| `stripe.dashboard.product.list` | مصنوعات کی فہرست | `/products` |  |
| `stripe.dashboard.product.detail` | مصنوع کی تفصیل | `/products/:id` | Product |
| `stripe.dashboard.price.detail` | قیمت کی تفصیل | `/prices/:id` | Price |

## انوائسز

| Viewport ID | صفحہ | URL Pattern | Object کی قسم |
| --- | --- | --- | --- |
| `stripe.dashboard.invoice.list` | انوائسز کی فہرست | `/invoices` |  |
| `stripe.dashboard.invoice.detail` | انوائس کی تفصیل | `/invoices/:id` | Invoice |

## سبسکرپشنز

| Viewport ID | صفحہ | URL Pattern | Object کی قسم |
| --- | --- | --- | --- |
| `stripe.dashboard.subscription.list` | سبسکرپشنز کی فہرست | `/subscriptions` |  |
| `stripe.dashboard.subscription.detail` | سبسکرپشن کی تفصیل | `/subscriptions/:id` | Subscription |

## Checkout

| Viewport ID | صفحہ | URL Pattern | Object کی قسم |
| --- | --- | --- | --- |
| `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 ID | صفحہ | URL Pattern | Object کی قسم |
| --- | --- | --- | --- |
| `stripe.dashboard.connect.account.list` | منسلک اکاؤنٹس کی فہرست | `/connect/accounts` |  |
| `stripe.dashboard.connect.account.detail` | منسلک اکاؤنٹ کی تفصیل | `/connect/accounts/:id` | Account |
| `stripe.dashboard.transfer.list` | Transfers کی فہرست | `/connect/transfers` |  |
| `stripe.dashboard.transfer.detail` | Transfer کی تفصیل | `/connect/transfers/:id` | Transfer |

## بلنگ

| Viewport ID | صفحہ | URL Pattern | Object کی قسم |
| --- | --- | --- | --- |
| `stripe.dashboard.coupon.list` | Coupons کی فہرست | `/coupons` |  |
| `stripe.dashboard.coupon.detail` | Coupon کی تفصیل | `/coupons/:id` | Coupon |
| `stripe.dashboard.quote.list` | Quotes کی فہرست | `/quotes` |  |
| `stripe.dashboard.quote.detail` | Quote کی تفصیل | `/quotes/:id` | Quote |
| `stripe.dashboard.credit-note.detail` | Credit note کی تفصیل | `/credit-notes/:id` | CreditNote |

## Payouts

| Viewport ID | صفحہ | URL Pattern | Object کی قسم |
| --- | --- | --- | --- |
| `stripe.dashboard.payout.list` | Payouts کی فہرست | `/payouts` |  |
| `stripe.dashboard.payout.detail` | Payout کی تفصیل | `/payouts/:id` | Payout |

## تنازعات

| Viewport ID | صفحہ | URL Pattern | Object کی قسم |
| --- | --- | --- | --- |
| `stripe.dashboard.dispute.list` | تنازعات کی فہرست | `/disputes` |  |
| `stripe.dashboard.dispute.detail` | تنازعہ کی تفصیل | `/disputes/:id` | Dispute |

## Terminal

| Viewport ID | صفحہ | URL Pattern | Object کی قسم |
| --- | --- | --- | --- |
| `stripe.dashboard.terminal.reader.list` | Readers کی فہرست | `/terminal/readers` |  |
| `stripe.dashboard.terminal.reader.detail` | Reader کی تفصیل | `/terminal/readers/:id` | TerminalReader |
| `stripe.dashboard.terminal.location.list` | Locations کی فہرست | `/terminal/locations` |  |
| `stripe.dashboard.terminal.location.detail` | Location کی تفصیل | `/terminal/locations/:id` | TerminalLocation |

## Issuing

| Viewport ID | صفحہ | URL Pattern | Object کی قسم |
| --- | --- | --- | --- |
| `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` |  |

## Object Context تک رسائی

جب آپ کی app ایک detail viewport میں render ہوتی ہے، تو اسے متعلقہ Stripe object 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>
  );
};
```

### List بمقابلہ Detail Context

| Viewport کی قسم | Object Context | استعمال کا معاملہ |
| --- | --- | --- |
| **List** (مثلاً `customer.list`) | دستیاب نہیں, کوئی مخصوص object منتخب نہیں | مجموعی ڈیٹا، خلاصہ views، یا batch actions دکھائیں |
| **Detail** (مثلاً `customer.detail`) | موجودہ صفحے کے لیے مکمل Stripe object | object-specific ڈیٹا، اعمال اور انٹیگریشنز دکھائیں |

## Tajo Brevo انٹیگریشن کے لیے تجویز کردہ Viewports

Tajo Brevo انٹیگریشن app کے لیے، یہ 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"
      }
    ]
  }
}
```

| Component | مقصد |
| --- | --- |
| **CustomerDetailView** | ایک مخصوص گاہک کے لیے Brevo contact معلومات، sync status اور engagement ڈیٹا دکھائیں |
| **CustomerListView** | Batch sync controls اور مجموعی Brevo sync اعداد و شمار دکھائیں |
| **PaymentDetailView** | دکھائیں کہ اس ادائیگی نے کون سے Brevo events ٹرگر کیے |
| **SubscriptionDetailView** | اس سبسکرپشن کے لیے Brevo automation status دکھائیں |
| **OverviewView** | sync health اور اہم Brevo metrics کے ساتھ Dashboard ہوم widget |
| **DrawerView** | عام app drawer با quick actions اور status کا جائزہ |
| **SettingsView** | Brevo API key، sync ترجیحات اور field mappings کنفیگر کریں |
| **OnboardingView** | نئے صارفین کو اپنا Brevo اکاؤنٹ منسلک کرنے میں رہنمائی کریں |

## Viewport کی دستیابی

تمام viewports تمام Stripe Dashboard modes میں دستیاب نہیں ہیں:

| موڈ | دستیاب Viewports |
| --- | --- |
| **Live موڈ** | تمام viewports |
| **Test موڈ** | تمام viewports (test ڈیٹا استعمال کرتے ہیں) |
| **Sandbox** | تمام viewports (اگر `sandbox_install_compatible: true`) |

Caution

اگر آپ کا manifest کوئی ایسا viewport بیان کرے جو موجود نہیں تو app upload validation میں ناکام ہو جائے گی۔ ہمیشہ اس حوالے کے خلاف viewport IDs کی تصدیق کریں۔