مرجع Viewports

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

كيف تعمل Viewports

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

{
  "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 المعني كسياق:

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 أكبر قيمة:

{
  "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 مقابل هذا المرجع.