Stripe UI拡張機能入門: SettingViewで設定ページを用意する



この記事は、[Stripe Apps を25日間紹介し続ける Advent Calendar 2022](https://qiita.com/advent-calendar/2022/stripe-apps) 12日目の記事です。

![スクリーンショット 2022-11-24 17.56.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/e0261865-0418-daa2-423a-5f4d70558b1b.png)

アプリの開発を進めると、提供する機能の設定画面が必要になるケースがあります。

「連携アプリケーションの設定画面」や「表示するグラフや項目の編集」、そして「トラブルシューティングのための機能提供」など、さまざまな用途が考えられます。

今回は、Stripe Appsでこの「設定画面」を追加する方法を紹介します。

## Settings Viewを追加する

設定画面についても、Viewとして追加できます。

Stripe CLIで、`stripe apps add view Setting --viewport settings`を実行しましょう。

```bash
$ stripe apps add view Setting --viewport settings
✔ Added view Setting
```


https://dashboard.stripe.com/test/apps/settings-preview にアクセスすると、開発中アプリの設定画面ページ表示されます。

![スクリーンショット 2022-12-12 14.47.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/681c4032-6d56-7e61-5156-4e69225d6752.png)


## 設定画面のViewは、`SettingsView`を利用する

先ほどのコマンドで作成した場合、`src/views/Settings.tsx`が生成されています。

このファイルでは、`ContextView`ではなく`SettingsView`が親コンポーネントとして配置されています。

```tsx
import {
  Box,
  Icon,
  Inline,
  Link,
  SettingsView,
} from "@stripe/ui-extension-sdk/ui";
import type { ExtensionContextValue } from "@stripe/ui-extension-sdk/context";

const Setting = ({userContext, environment}: ExtensionContextValue) => {
  return (
    <SettingsView onSave={()=>{}}>
      <Box
        css={{
          background: "container",
          borderRadius: "medium",
          padding: "large",
        }}>
        <Box css={{ marginBottom: "small" }}>
          <Icon name="settings" size="medium" />
        </Box>
...
```

`SettingsView`は、設定画面で必要なUI要素などを備えたコンポーネントです。

https://stripe.com/docs/stripe-apps/components/settingsview

「ページタイトル」と「保存ボタン」が、デフォルトでページ上部に表示されます。

![スクリーンショット 2022-12-12 14.54.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/0c7b892f-796f-9218-ba91-bff11806de9a.png)

「`onSave`プロパティ内に保存処理を実装する」だけで、更新した設定を保存するためのUIや処理を構築できます。

### 保存処理のメッセージングは、`statusMessage`を利用する

`SettingsView`には、保存処理のステータスを表示するプロパティも用意されています。

生成されたコードを、次のように変更しましょう。

```diff_typescript
+import { useState } from "react";

const Setting = ({userContext, environment}: ExtensionContextValue) => {
+  const [statusMessage, setStatusMessage] = useState("");
  return (
-    <SettingsView onSave={()=>{}}>
+    <SettingsView
+      statusMessage={statusMessage}
+      onSave={()=>{
+        setStatusMessage("Updating...");
+        setTimeout(() => {
+          setStatusMessage("Saved");
+        }, 2000);
+      }}
+    >
```

変更後、設定画面で[変更を保存]ボタンをクリックしてみましょう。

クリックから2秒間`Updating...`テキストが表示されたのち、`Saved`が表示されます。

![スクリーンショット 2022-12-12 15.00.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/2b497cd4-e83b-5a28-a73e-fc82cda02be1.png)

文字列のみ受け付けるプロパティのため、文字色を変更することなどは現状できません。

入力欄ごとにエラーメッセージを個別出力したい場合なども含め、必要に応じて使い分けるようにしましょう。

## アプリから設定画面に移動する方法

設定画面にURL直接アクセス以外でアクセスする方法を紹介します。

アプリの右上にある[...]アイコンをクリックすると、メニューが表示されます。

![スクリーンショット 2022-12-12 14.48.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/6c4bf8fc-5cc4-7136-df9b-df9e88f20411.png)

「アプリの設定をプレビュー」をクリックすると、別タブで設定画面が開きます。

![スクリーンショット 2022-12-12 14.47.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/681c4032-6d56-7e61-5156-4e69225d6752.png)

これは[アプリマーケットプレイス](https://marketplace.stripe.com/)で公開されているアプリでも同様です。

もし連携内容などをカスタマイズしたい場合には、このメニューを利用しましょう。


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

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

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

https://qiita.com/advent-calendar/2022/stripe-apps

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