Viewports और UI Components
Viewports और UI Components
Viewports Stripe Dashboard में वो specific locations हैं जहाँ आपका app UI render कर सकता है।
Available Viewports
Dashboard Views
| Viewport | Location | Use Case |
|---|---|---|
stripe.dashboard.customer.detail | Customer detail page | Per-customer Brevo sync status |
stripe.dashboard.home.overview | Dashboard home | Overall integration health |
stripe.dashboard.payment.detail | Payment detail page | Payment-triggered campaign info |
stripe.dashboard.invoice.detail | Invoice detail page | Invoice-based email campaigns |
Customer Detail Viewport
यह Tajo Brevo integration का primary viewport है।
import { Box, Button, Badge, Inline, Banner,} from '@stripe/ui-extension-sdk/ui';import type { ExtensionContextValue } from '@stripe/ui-extension-sdk/context';
const CustomerDetailView = ({ environment, userContext }: ExtensionContextValue) => { const customerId = environment.objectContext?.id;
return ( <Box css={{ padding: 'large' }}> <Inline css={{ fontWeight: 'bold', marginBottom: 'medium' }}> Brevo Contact Sync </Inline>
<Banner title="Synced to Brevo" description="यह customer Brevo में synced है।" variant="default" />
<Button type="primary" css={{ marginTop: 'medium' }} onPress={() => {/* sync trigger */}} > Brevo में Sync करें </Button> </Box> );};
export default CustomerDetailView;Home Overview Viewport
const HomeView = ({ environment }: ExtensionContextValue) => { return ( <Box css={{ padding: 'large' }}> <Inline css={{ fontWeight: 'bold', marginBottom: 'medium' }}> Tajo, Brevo Integration </Inline> <Box css={{ marginTop: 'medium' }}> <Inline>Synced Contacts: 1,234</Inline> <Inline>Campaigns Triggered: 56</Inline> <Inline>Last Sync: 5 minutes ago</Inline> </Box> </Box> );};Tip
stripe.dashboard.customer.detail viewport से शुरू करें। यह Tajo Brevo integration के लिए सबसे useful viewport है और review के दौरान best first impression देता है।
अगले कदम
- Embedded Apps, App embedding patterns
- Post-Install, Installation के बाद onboarding