Stripe UI拡張機能入門: FocusViewを使って、詳細画面や追加のステップ用の画面を追加する

この記事は、Stripe Apps を25日間紹介し続ける Advent Calendar 2022 10日目の記事です。

昨日の記事にて、顧客情報やサブスクリプションの情報を更新するフォームの作り方を紹介しました。

しかしフォームを作り始めると、「もう少し表示幅を広くとりたい」ケースも増えてきます。

今回の記事では、より多くの情報・フォームを表示できるFocusViewを紹介します。

デフォルトの表示幅はあまり広くない

Stripe Appsのアプリは、ダッシュボード右側のウィジェットとして表示されます。

そのため、横幅は320px程度と、多くの情報を出すにはすこし手狭です。

FocusViewで大きな画面を利用する

FocusViewは、モーダルのような扱いをするコンポーネントです。

useStateなどで表示・非表示を制御されつつ、子要素のより広い画面で表示できます。

import { Box, Button, FocusView } from "@stripe/ui-extension-sdk/ui";
import { FC, useState} from 'react'

const MegaMenu:FC = () => {
  const [open, isOpen] = useState(false)
  return (
    <>
      <Box>
        <Button
          type="primary"
          css={{ width: 'fill', alignX: 'center' }}
          onPress={() => isOpen(!open)}
        >Open Editor</Button>
      </Box>
      <FocusView
        title="Menu"
        shown={open}
        setShown={isOpen}
      >
        <Box>Hello</Box>
      </FocusView>
    </>
  )
}

このコンポーネントを表示させると、アプリ上にボタンが表示されます。

ボタンをクリックすると、オーバーレイする形で、新しい画面が出てきます。

「保存」「キャンセル」などのアクションを設定する

FocusViewには、保存・キャンセル・閉じるなどのアクションを表示するためのプロパティが用意されています。

      <FocusView
        title="Menu"
        shown={open}
        setShown={isOpen}
+        primaryAction={(
+          <Button type="primary">Save</Button>
+        )}
+        secondaryAction={(
+          <Button>Cancel</Button>
+        )}
      >
        <Box>Hello</Box>
      </FocusView>

それぞれのプロパティを追加すると、画面下部にアクションボタンが表示されます。

画面を閉じたい場合は、secondaryActionのButtonタグを使います。

isOpenなどのuseStateで作成した表示非表示を制御する関数を設定しましょう。

        secondaryAction={(
-          <Button>Cancel</Button>
+          <Button onPress={() => isOpen(false)}>Cancel</Button>
        )}

閉じる前に、確認メッセージを出す

複数ステップにわたるウィザードの途中や、情報入力が完了していない状態では、FocusViewを閉じる前に確認画面を出す要件が発生します。

その場合、confirmCloseMessagesを利用して、本当に画面を閉じて良いかを確認できます。

      <FocusView
        title="Menu"
        shown={open}
        setShown={isOpen}
        primaryAction={(
          <Button type="primary">Save</Button>
        )}
        secondaryAction={(
          <Button onPress={() => isOpen(false)}>Cancel</Button>
        )}
+        confirmCloseMessages={{
+          title: "Are you sure?",
+          description: "Your form data will be cleared",
+          cancelAction: "Cancel",
+          exitAction: "Understand"
+        }}
      >

この値を設定すると、FocusViewを閉じようとした際に、確認画面が開きます。

exitActionに設定したラベルのボタンをクリックすると、このままクローズされます。

ドキュメント

Stripe Appsひとりアドベントカレンダー 2022

今年ベータリリースされたばかりのStripe Appsは、まだ日本語の情報が多くありません。

そこでQiita Advent Calendar 2022にて、毎日Stripe Appsについての情報を投稿します。

ノーコードで利用する方法や、開発するためのTipsなども紹介予定ですので、ぜひ購読をお願いします。