先行利用を申し込む

お名前とメールアドレスまたは電話番号をご入力ください。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/: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

Checkout

ビューポート ID	ページ	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

ビューポート 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

Billing

ビューポート 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 の主要指標を示す、ダッシュボードのホームウィジェット
DrawerView	クイックアクションとステータス概要をまとめた汎用のアプリドロワー
SettingsView	Brevo の API キー、同期の設定、フィールドマッピングを設定します
OnboardingView	新規ユーザーの Brevo アカウント接続をガイドします

ビューポートの利用可否

すべてのビューポートが、Stripe ダッシュボードのすべてのモードで使えるわけではありません。

モード	利用できるビューポート
本番モード	すべてのビューポート
テストモード	すべてのビューポート（テストデータを使用）
サンドボックス	すべてのビューポート（`sandbox_install_compatible: true` の場合）

Caution

存在しないビューポートをマニフェストで宣言すると、アプリのアップロードは検証に失敗します。ビューポート ID は必ずこのリファレンスと照合してください。