Stripe Apps の ContextView コンポーネントダッシュボードのみ

ContextView により、アプリをドロワーで Stripe のコンテンツの横に表示できるため、ユーザーは、それらを横並びで表示し、コンテキストを共有することができます。

SDK バージョン

アプリのルートビューは、ContextView にする必要があります。

これらのコンテキスト内のモジュールにより、アプリは既存のワークフローでユーザーと対話して、コンテキストに応じた情報とアクションが提供できます。

アプリとユーザーの対話は常に ContextView ビューと呼ばれるビュータイプで開始されます。各アプリには、(ビューポートごとに) 1 つの ContextView ビューが必要で、ページの読み込み時のデフォルトのビューとして機能します (ウェブサイトの index.html に似ています)。

ContextView のデザイン

注

既存の ContextView 内にビューを作成するには、FocusView をご覧ください。

ContextView のプロパティ

プロパティ	型
`children`	必須 `React.ReactNode` コンポーネントのコンテンツ。
`title`	必須 `string` `ContextView` のタイトル。これは、ドロワーの最上部で、アプリ名の下に表示されます。
`actions`	任意 `React.ReactNode` ヘッダーの真下で、`ContextView` の子の上に表示される、最大 3 つの `Buttons` を含む React フラグメント。
`banner`	任意 `React.ReactElement \| undefined` ヘッダーの真下で、`ContextView` の子の上に表示される `Banner` コンポーネント。
`brandColor`	任意 `string \| undefined` `brandIcon` と対照的な CSS カラー。
`brandIcon`	任意 `string \| undefined` `brandColor` と対照的な、線の端が四角い単色の SVG。
`description`	任意 `string \| undefined` ビューの目的の説明。サブタイトルとしても使用できます。
`externalLink`	任意 `ExternalLink \| undefined` 外部のウェブページへのリンク。これにより、ユーザーは、アプリドロワーで提供されるアプリの情報よりも多くのコンテキストを使用して、別のサイトの関連情報を表示できるようになります。関連型: ExternalLink。
`footerContent`	任意 `React.ReactNode` フッター内のアクションに横にある React ノード。
`primaryAction`	任意 `React.ReactElement \| undefined` フッターに配置される、1 次的な行動喚起 (「保存」または「続行」) の `Button`。
`secondaryAction`	任意 `React.ReactElement \| undefined` フッターに配置される、2 次的な行動喚起 (「キャンセル」) の `Button`。

ExternalLink

プロパティ型

プロパティ	型
`href`	必須 `string` 外部リンクの URL。
`label`	必須 `string` 外部リンクのラベル。

href

必須

string

外部リンクの URL。

label

必須

string

外部リンクのラベル。

例

import {
  Box,
  Button,
  ContextView,
} from '@stripe/ui-extension-sdk/ui';

import appIcon from './icon.svg';

const HappyView = () => (
  <ContextView
    title="Get started with Stripe Apps"
    actions={
      <>
        <Button>Action 1</Button>
        <Button>Action 2</Button>
      </>
    }
    brandColor="#635bff"
    brandIcon={appIcon}
  >
    <Box>Example Content</Box>
  </ContextView>
);

Stripe Apps の ContextView コンポーネントダッシュボードのみ

ContextView により、アプリをドロワーで Stripe のコンテンツの横に表示できるため、ユーザーは、それらを横並びで表示し、コンテキストを共有することができます。

注

ContextView のプロパティ

ExternalLink

例

参照情報