ビューポートリファレンス

ビューポートは、ビューの表示が可能なダッシュボード内のページを指定します。ビューポートが提供する environment.objectContext オブジェクトにより、現在のページの Stripe オブジェクトのコンテキストを受信できるようになります。詳細については、ダッシュボードで Stripe オブジェクトにアクセスするをご覧ください。

UI 拡張機能で使用できるビューポート:

アプリケーションの可用性

アプリケーションをダッシュボードのすべてのページで使用できるようにするか、 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"
      }
    ]
  }
}

エンドユーザーがダッシュボードのホームページでアプリを開くと、アプリケーションには、顧客ページと商品ページへのリンクが表示されます。ユーザーが顧客ページに移動すると、アプリには、関連情報を表示する顧客の選択をユーザーに求めるメッセージが表示されます。