Tajo 사전 이용 신청

이름과 이메일 주소 또는 전화번호를 입력해 주세요. Tajo 이용 방법을 안내해 드립니다.

이 페이지에서

뷰포트 레퍼런스

뷰포트는 Stripe App의 UI 컴포넌트가 Stripe 대시보드 안에서 어디에 표시될지를 정의합니다. 각 뷰포트는 앱이 뷰를 렌더링할 수 있는 특정 대시보드 페이지 또는 위치에 대응합니다.

뷰포트의 작동 방식

앱 매니페스트에서 뷰를 선언할 때 React 컴포넌트를 뷰포트에 매핑합니다.

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

사용자가 해당 대시보드 페이지로 이동해 앱을 열면 컴포넌트가 앱 드로어(사이드 패널)에 렌더링됩니다.

대시보드 전역 뷰포트와 페이지별 뷰포트

대시보드 전역 뷰포트

다음 뷰포트는 Stripe 대시보드의 모든 페이지에서 사용할 수 있습니다.

뷰포트 ID설명
stripe.dashboard.drawer.default기본 드로어 뷰로, 모든 대시보드 페이지에서 앱 아이콘을 통해 접근합니다
stripe.dashboard.home.overview홈 페이지 개요로, 대시보드 첫 화면에 표시됩니다
stripe.dashboard.settings앱 설정 페이지로, 앱의 설정 메뉴에서 접근합니다
stripe.dashboard.onboarding온보딩 흐름으로, 앱 설치 후에 표시됩니다

Tip

drawer.default 뷰포트는 폴백 역할을 합니다. 별도의 뷰포트를 선언하지 않은 페이지에서 사용자가 앱을 열면 drawer.default 뷰가 대신 렌더링됩니다.

페이지별 뷰포트

다음 뷰포트는 사용자가 해당 대시보드 페이지에 있을 때만 렌더링됩니다.

결제

뷰포트 ID페이지URL 패턴객체 유형
stripe.dashboard.payment.list결제 목록/payments
stripe.dashboard.payment.detail결제 상세/payments/:idPaymentIntent
stripe.dashboard.charge.detail청구 상세/payments/:id (레거시)Charge

고객

뷰포트 ID페이지URL 패턴객체 유형
stripe.dashboard.customer.list고객 목록/customers
stripe.dashboard.customer.detail고객 상세/customers/:idCustomer

상품 및 가격

뷰포트 ID페이지URL 패턴객체 유형
stripe.dashboard.product.list상품 목록/products
stripe.dashboard.product.detail상품 상세/products/:idProduct
stripe.dashboard.price.detail가격 상세/prices/:idPrice

청구서

뷰포트 ID페이지URL 패턴객체 유형
stripe.dashboard.invoice.list청구서 목록/invoices
stripe.dashboard.invoice.detail청구서 상세/invoices/:idInvoice

구독

뷰포트 ID페이지URL 패턴객체 유형
stripe.dashboard.subscription.list구독 목록/subscriptions
stripe.dashboard.subscription.detail구독 상세/subscriptions/:idSubscription

Checkout

뷰포트 ID페이지URL 패턴객체 유형
stripe.dashboard.checkout.session.listCheckout 세션 목록/checkout/sessions
stripe.dashboard.checkout.session.detailCheckout 세션 상세/checkout/sessions/:idCheckoutSession
stripe.dashboard.payment-link.list결제 링크 목록/payment-links
stripe.dashboard.payment-link.detail결제 링크 상세/payment-links/:idPaymentLink

Connect

뷰포트 ID페이지URL 패턴객체 유형
stripe.dashboard.connect.account.list연결된 계정 목록/connect/accounts
stripe.dashboard.connect.account.detail연결된 계정 상세/connect/accounts/:idAccount
stripe.dashboard.transfer.list이체 목록/connect/transfers
stripe.dashboard.transfer.detail이체 상세/connect/transfers/:idTransfer

Billing

뷰포트 ID페이지URL 패턴객체 유형
stripe.dashboard.coupon.list쿠폰 목록/coupons
stripe.dashboard.coupon.detail쿠폰 상세/coupons/:idCoupon
stripe.dashboard.quote.list견적 목록/quotes
stripe.dashboard.quote.detail견적 상세/quotes/:idQuote
stripe.dashboard.credit-note.detail크레딧 노트 상세/credit-notes/:idCreditNote

지급

뷰포트 ID페이지URL 패턴객체 유형
stripe.dashboard.payout.list지급 목록/payouts
stripe.dashboard.payout.detail지급 상세/payouts/:idPayout

분쟁

뷰포트 ID페이지URL 패턴객체 유형
stripe.dashboard.dispute.list분쟁 목록/disputes
stripe.dashboard.dispute.detail분쟁 상세/disputes/:idDispute

Terminal

뷰포트 ID페이지URL 패턴객체 유형
stripe.dashboard.terminal.reader.list리더 목록/terminal/readers
stripe.dashboard.terminal.reader.detail리더 상세/terminal/readers/:idTerminalReader
stripe.dashboard.terminal.location.list위치 목록/terminal/locations
stripe.dashboard.terminal.location.detail위치 상세/terminal/locations/:idTerminalLocation

Issuing

뷰포트 ID페이지URL 패턴객체 유형
stripe.dashboard.issuing.card.list카드 목록/issuing/cards
stripe.dashboard.issuing.card.detail카드 상세/issuing/cards/:idIssuingCard
stripe.dashboard.issuing.cardholder.list카드 소유자 목록/issuing/cardholders
stripe.dashboard.issuing.cardholder.detail카드 소유자 상세/issuing/cardholders/:idIssuingCardholder
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 지표를 담은 대시보드 홈 위젯
DrawerView빠른 액션과 상태 개요를 제공하는 일반 앱 드로어
SettingsViewBrevo API 키, 동기화 기본 설정, 필드 매핑을 구성
OnboardingView신규 사용자의 Brevo 계정 연결을 안내

뷰포트 지원 범위

모든 뷰포트가 Stripe 대시보드의 모든 모드에서 지원되지는 않습니다.

모드사용 가능한 뷰포트
라이브 모드모든 뷰포트
테스트 모드모든 뷰포트 (테스트 데이터 사용)
샌드박스모든 뷰포트 (sandbox_install_compatible: true인 경우)

Caution

존재하지 않는 뷰포트를 매니페스트에 선언하면 앱 업로드가 검증에 실패합니다. 뷰포트 ID는 항상 이 레퍼런스와 대조해 확인하세요.

Tajo 사전 이용 신청

이름과 이메일 주소 또는 전화번호를 입력해 주세요. Tajo 이용 방법을 안내해 드립니다.

자동 감지
AI 어시스턴트

안녕하세요! 문서에 대해 무엇이든 물어보세요.