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

अपना नाम और ईमेल या फ़ोन नंबर दर्ज करें. हम Tajo एक्सेस की जानकारी के साथ आपसे संपर्क करेंगे.

इस पेज पर

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

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

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

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

{
  "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 ऑब्जेक्ट कॉन्टेक्स्ट के रूप में मिलता है:

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 इंटीग्रेशन ऐप के लिए, ये व्यूपोर्ट सबसे ज़्यादा उपयोगी हैं:

{
  "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 हमेशा इस संदर्भ से मिलाकर जाँच लें.