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

FocusView を使用して、顧客が特定のタスクを実行する専用スペースを開きます。

SDK バージョン

FocusView コンポーネントは他の View コンポーネントから開くことができ、開発者はエンドユーザーが特定のタスクを実行する専用スペースを開くことができます。以下はその例です。

データベースに新しいエントリーを作成するための詳細を入力する
ウィザードを経て次のステップを決定する
指示されたアクションをユーザーが実行することを確認する

FocusView のデザイン

FocusView は、ContextView の子にする必要があります。FocusView を条件でラップするのではなく、shown プロパティを使用して表示状態を管理します。詳細については、ContextView をご覧ください。

FocusView コンポーネントをアプリに追加するには、以下のようにします。

import {FocusView} from '@stripe/ui-extension-sdk/ui';

FocusView のプロパティ

プロパティ	型
`children`	必須 `React.ReactNode` コンポーネントのコンテンツ。
`title`	必須 `string` `FocusView` のタイトル。これは、ドロワーの最上部で、アプリ名の下に表示されます。
`confirmCloseMessages`	任意 `ConfirmCloseMessages \| undefined` 指定がある場合、ユーザーが `FocusView` を閉じたときに confirmCloseMessages が表示されます。関連型: ConfirmCloseMessages。
`footerContent`	任意 `React.ReactNode` フッター内のアクションに横にある React ノード。
`primaryAction`	任意 `React.ReactElement \| undefined` フッターに配置される、1 次的な行動喚起 (「保存」または「続行」) の `Button`。
`secondaryAction`	任意 `React.ReactElement \| undefined` フッターに配置される、2 次的な行動喚起 (「キャンセル」) の `Button`。
`setShown`	任意 `((shown: boolean) => void) \| undefined` ユーザーがウィンドウを閉じるようにリクエストした場合、または確認ダイアログを閉じたためウィンドウを開いたままにする必要がある場合に、`FocusView` は表示状態を管理できます。
`shown`	任意 `boolean \| undefined` `FocusView` を表示するかどうか。このプロパティは、親ビューによって管理されます。
`onClose`	任意非推奨代わりに `setShown` を使用してください。ユーザーが `FocusView` 外をクリックするか、エスケープボタンを押した場合に、ユーザーがビューを閉じたことを拡張機能に通知します。 `(() => void) \| undefined`

ConfirmCloseMessages

プロパティ	型
`cancelAction`	必須 `string`
`description`	必須 `string`
`exitAction`	必須 `string`
`title`	必須 `string`

確認ダイアログを閉じる

confirmCloseMessages を渡す際に、終了の確認ダイアログがすべての終了シナリオで正しく機能するように、setShown プロパティを渡して、FocusView が shown のステータスを管理できるようにします。確認ダイアログを表示するタイミングを制御するには、次の例のように、ステータスを使用して条件付きで confirmCloseMessages を FocusView に渡します。

例

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

type Mood = 'Happy' | 'Sad';

const confirmCloseMessages = {
  title: 'Your mood will not be saved',
  description: 'Are you sure you want to exit?',
  cancelAction: 'Cancel',
  exitAction: 'Exit',
};

const MoodView = () => {
  const [mood, setMood] = React.useState<Mood>('Happy');
  const [shown, setShown] = React.useState<boolean>(false);
  const [confirmClose, setConfirmClose] = React.useState<boolean>(false);

  const open = () => {
    setConfirmClose(true);
    setShown(true);
  };

  const closeWithoutConfirm = () => {
    setConfirmClose(false);
    setShown(false);
  };

  const closeWithConfirm = () => {
    setShown(false);
  };

  const updateMood = (newMood: Mood) => {
    setMood(newMood);
    closeWithoutConfirm();
  };

  return (
    <ContextView
      title="Mood picker"
      description="This section communicates my extension's feelings"
    >
      <FocusView
        title="Pick your mood"
        shown={shown}
        setShown={setShown}
        confirmCloseMessages={confirmClose ? confirmCloseMessages : undefined}
        secondaryAction={<Button onPress={closeWithConfirm}>Cancel</Button>}
      >
        <Select onChange={(e) => updateMood(e.target.value as Mood)}>
          <option label="">Select mood</option>
          <option label="Happy">Happy</option>
          <option label="Sad">Sad</option>
        </Select>
      </FocusView>
      <Box css={{stack: 'x', gap: 'medium'}}>
        <Box
          css={{
            font: 'subheading',
            color: mood === 'Happy' ? 'success' : 'info',
          }}
        >
          {mood}
        </Box>
        <Button onPress={open}>Change mood</Button>
      </Box>
    </ContextView>
  );
};

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

FocusView を使用して、顧客が特定のタスクを実行する専用スペースを開きます。

FocusView のプロパティ

ConfirmCloseMessages

確認ダイアログを閉じる

例

参照情報