ビューポートリファレンス
ビューポートは、ビューの表示が可能なダッシュボード内のページを指定します。ビューポートが提供する environment.objectContext
オブジェクトにより、現在のページの Stripe オブジェクトのコンテキストを受信できるようになります。詳細については、ダッシュボードで Stripe オブジェクトにアクセスするをご覧ください。
UI 拡張機能で使用できるビューポート:
Viewport (ビューポート) ID | ページ | URL | オブジェクトタイプ | |
---|---|---|---|---|
stripe.dashboard.payment.list | 支払いページ | dashboard.stripe.com/payments | null | |
stripe.dashboard.payment.detail | 支払いの詳細ページ | dashboard.stripe.com/payments/:id | charge 、payment_intent | |
stripe.dashboard.customer.list | 顧客ページ | dashboard.stripe.com/customers | null | |
stripe.dashboard.customer.detail | 顧客の詳細ページ | dashboard.stripe.com/customers/:id | customer | |
stripe.dashboard.invoice.list | インボイスページ | dashboard.stripe.com/invoices | null | |
stripe.dashboard.invoice.detail | インボイスの詳細ページ | dashboard.stripe.com/invoices/:id | invoice | |
stripe.dashboard.product.list | 商品ページ | dashboard.stripe.com/products/ | null | |
stripe.dashboard.product.detail | 商品の詳細ページ | dashboard.stripe.com/products/:id | product | |
stripe.dashboard.subscription.list | サブスクリプションページ | dashboard.stripe.com/subscriptions | null | |
stripe.dashboard.subscription.detail | サブスクリプションの詳細ページ | dashboard.stripe.com/subscriptions/:id | subscription | |
stripe.dashboard.payment-link.list | Payment Links ページ | dashboard.stripe.com/payment-links | null | |
stripe.dashboard.payment-link.detail | Payment Links の詳細ページ | dashboard.stripe.com/payment-links/:id | payment_link | |
stripe.dashboard.home.overview | ダッシュボードのホームページ | dashboard.stripe.com/dashboard | null | |
stripe.dashboard.balance.overview | 残高ページ | dashboard.stripe.com/balance/overview | null | |
stripe.dashboard.billing.overview | Billing ページ | dashboard.stripe.com/billing | null | |
stripe.dashboard.report.overview | レポート > 概要ページ | dashboard.stripe.com/reports/hub | null | |
stripe.dashboard.revenue-recognition.overview | Revenue Recognition ページ | dashboard.stripe.com/revenue-recognition | null | |
stripe.dashboard.tax-report.overview | レポート > 税金ページ | dashboard.stripe.com/tax/reporting | null | |
stripe.dashboard.drawer.default | すべてのページで使用可能 (詳細については、ダッシュボード全体での可用性をご覧ください) | null | ||
settings | アプリの設定ページ (詳細については、アプリの設定ページを追加する方法をご覧ください。) | null |
アプリケーションの可用性
アプリケーションをダッシュボードのすべてのページで使用できるようにするか、 1 つのページに固有のものにすることができます。
ダッシュボード全体での可用性
アプリが stripe.dashboard.drawer.default
ビューポートのビューを指定する場合、このビューは、ページ固有のビューが定義されているページを除く、ダッシュボードのすべてのページに表示されます。
たとえば、アプリの stripe-app.json
マニフェストの ui_extension.views
フィールドが以下のようであるとします。
{ "id": "com.example.app", "version": "1.2.3", "name": "Example App", "icon": "./example_icon_32.png", "permissions": [ { "permission": "customer_read", "purpose": "Receive access to the customer information" } ], "ui_extension": { "views": [ { "viewport": "stripe.dashboard.customer.detail", "component": "CustomerView" }, { "viewport": "stripe.dashboard.drawer.default", "component": "EverywhereElseView" } ] } }
アプリケーションが顧客の詳細ページで開かれる場合は “CustomerView” が表示され、ダッシュボードのその他すべてのページでは “EverywhereElseView” が表示されます。
stripe.dashboard.drawer.default
ビューは、ページ固有のビューと同じ方法では objectContext
データを受信しません。アプリが「請求書の詳細」ページに表示される請求書の id
などの情報にアクセスする必要がある場合は、stripe.dashboard.invoice.detail
ビューポートを使用するビューを作成する必要があります。詳細については、ページ固有の可用性をご覧ください。
ページ固有の可用性
ページ固有のビューは、ユーザーが表示している現在のページに関連付けられます。また、アプリでは environment
プロパティーを使用してページに関する追加のコンテキストを受信できるようにします。詳細については、ダッシュボードで Stripe オブジェクトにアクセスするをご覧ください。
たとえば、アプリに stripe.dashboard.product.detail
ビューポートのビューがある場合、ユーザーが商品の詳細ページでアプリを開くと、そのビューがアプリに表示されます。
アプリに現在のページのページ固有のビューもアプリ固有のデフォルトのビューもない場合は、ドロワーには、ユーザーにアプリへのアクセス方法を示す一般的なデフォルトのビューが表示されます。
たとえば、アプリで、以下のアプリのマニフェストに表示される、ページ固有のビューポートに 2 つのビューがあるとします。
{ "id": "com.example.app", "version": "1.2.3", "name": "Example App", "icon": "./example_icon_32.png", "permissions": [ { "permission": "customer_read", "purpose": "Receive access to the customer information" } ], "ui_extension": { "views": [ { "viewport": "stripe.dashboard.customer.detail", "component": "CustomerView" }, { "viewport": "stripe.dashboard.product.detail", "component": "ProductView" } ] } }
エンドユーザーがダッシュボードのホームページでアプリを開くと、アプリケーションには、顧客ページと商品ページへのリンクが表示されます。ユーザーが顧客ページに移動すると、アプリには、関連情報を表示する顧客の選択をユーザーに求めるメッセージが表示されます。