---
title: "مرجع Viewports | Tajo"
description: "المرجع الكامل لمواقع لوحة تحكم Stripe التي يمكن لواجهة تطبيق Stripe العرض فيها"
url: https://tajo.io/ar/docs/stripe-apps/viewports/
markdown: https://tajo.io/ar/docs/stripe-apps/viewports.md
lang: ar-SA
author: "Set Noa"
author_url: https://tajo.io/ar/set-noa/
robots: noindex
---

اطلب الوصول المبكر

أدخل اسمك الأول وعنوان بريدك الإلكتروني للعمل. سنرسل إليك رابطًا لتأكيد طلب الوصول إلى Tajo.

# مرجع Viewports

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

تحدد Viewports أين تظهر مكونات واجهة تطبيق Stripe داخل لوحة تحكم Stripe. يتوافق كل viewport مع صفحة أو موقع محدد في لوحة التحكم حيث يمكن لتطبيقك عرض واجهة.

Caution

**الحالة: مخطط له، لم يُبنَ.** ليس لدى Tajo تطبيق Stripe App، لذلك لا يمكن تثبيت أي شيء في هذا القسم اليوم. ومعرّفات التطبيق وعناوين URL وبيانات الاعتماد الواردة في هذه الصفحة أمثلة توضيحية لا نقاط نهاية فعلية.

## كيف تعمل Viewports

عندما تعلن عن عرض في manifest التطبيق، تربط مكون React بـ viewport:

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

يُعرض المكون في drawer التطبيق (اللوحة الجانبية) عندما ينتقل المستخدم إلى صفحة لوحة التحكم المقابلة ويفتح تطبيقك.

## Viewports على مستوى لوحة التحكم مقابل الخاصة بالصفحة

### Viewports على مستوى لوحة التحكم

هذه الـ viewports متاحة في كل صفحة من لوحة تحكم Stripe:

| معرف Viewport | الوصف |
| --- | --- |
| `stripe.dashboard.drawer.default` | عرض drawer الافتراضي، متاح من أي صفحة عبر أيقونة التطبيق |
| `stripe.dashboard.home.overview` | نظرة عامة على الصفحة الرئيسية، تُعرض على صفحة هبوط لوحة التحكم |
| `stripe.dashboard.settings` | صفحة إعدادات التطبيق، متاحة من قائمة إعدادات التطبيق |
| `stripe.dashboard.onboarding` | تدفق الإعداد، يُعرض بعد تثبيت التطبيق |

Tip

يعمل viewport `drawer.default` كاحتياطي. إذا فتح المستخدم تطبيقك على صفحة لم تعلن فيها عن viewport محدد، يُعرض عرض `drawer.default` بدلاً من ذلك.

### Viewports الخاصة بالصفحة

تُعرض هذه الـ viewports فقط عندما يكون المستخدم على صفحة لوحة التحكم المقابلة:

## المدفوعات

| معرف 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 | `/checkout/sessions` |  |
| `stripe.dashboard.checkout.session.detail` | تفاصيل جلسة Checkout | `/checkout/sessions/:id` | CheckoutSession |
| `stripe.dashboard.payment-link.list` | قائمة روابط الدفع | `/payment-links` |  |
| `stripe.dashboard.payment-link.detail` | تفاصيل رابط الدفع | `/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` |  |

## الوصول إلى سياق الكائن

عندما يُعرض تطبيقك في viewport تفصيلي، يتلقى كائن 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>
  );
};
```

### سياق القائمة مقابل التفاصيل

| نوع Viewport | سياق الكائن | حالة الاستخدام |
| --- | --- | --- |
| **القائمة** (مثل `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** | أداة الصفحة الرئيسية مع صحة المزامنة ومقاييس Brevo الرئيسية |
| **DrawerView** | drawer التطبيق العام مع إجراءات سريعة ونظرة عامة على الحالة |
| **SettingsView** | تكوين مفتاح Brevo API وتفضيلات المزامنة وتعيينات الحقول |
| **OnboardingView** | إرشاد المستخدمين الجدد خلال ربط حساب Brevo الخاص بهم |

## توفر Viewports

ليست جميع الـ viewports متاحة في جميع أوضاع لوحة تحكم Stripe:

| الوضع | Viewports المتاحة |
| --- | --- |
| **وضع الإنتاج** | جميع الـ viewports |
| **وضع الاختبار** | جميع الـ viewports (تستخدم بيانات اختبار) |
| **Sandbox** | جميع الـ viewports (إذا كان `sandbox_install_compatible: true`) |

Caution

إذا أعلن الـ manifest عن viewport غير موجود، سيفشل تحميل التطبيق في التحقق. تحقق دائمًا من معرفات viewport مقابل هذا المرجع.