この記事は、Stripe Apps を25日間紹介し続ける Advent Calendar 2022 12日目の記事です。
アプリの開発を進めると、提供する機能の設定画面が必要になるケースがあります。
「連携アプリケーションの設定画面」や「表示するグラフや項目の編集」、そして「トラブルシューティングのための機能提供」など、さまざまな用途が考えられます。
今回は、Stripe Appsでこの「設定画面」を追加する方法を紹介します。
Settings Viewを追加する
設定画面についても、Viewとして追加できます。
Stripe CLIで、stripe apps add view Setting --viewport settingsを実行しましょう。
$ stripe apps add view Setting --viewport settings
✔ Added view Setting
https://dashboard.stripe.com/test/apps/settings-preview にアクセスすると、開発中アプリの設定画面ページ表示されます。
設定画面のViewは、SettingsViewを利用する
先ほどのコマンドで作成した場合、src/views/Settings.tsxが生成されています。
このファイルでは、ContextViewではなくSettingsViewが親コンポーネントとして配置されています。
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要素などを備えたコンポーネントです。
「ページタイトル」と「保存ボタン」が、デフォルトでページ上部に表示されます。
「onSaveプロパティ内に保存処理を実装する」だけで、更新した設定を保存するためのUIや処理を構築できます。
保存処理のメッセージングは、statusMessageを利用する
SettingsViewには、保存処理のステータスを表示するプロパティも用意されています。
生成されたコードを、次のように変更しましょう。
+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が表示されます。
文字列のみ受け付けるプロパティのため、文字色を変更することなどは現状できません。
入力欄ごとにエラーメッセージを個別出力したい場合なども含め、必要に応じて使い分けるようにしましょう。
アプリから設定画面に移動する方法
設定画面にURL直接アクセス以外でアクセスする方法を紹介します。
アプリの右上にある[...]アイコンをクリックすると、メニューが表示されます。
「アプリの設定をプレビュー」をクリックすると、別タブで設定画面が開きます。
これはアプリマーケットプレイスで公開されているアプリでも同様です。
もし連携内容などをカスタマイズしたい場合には、このメニューを利用しましょう。
Stripe Appsひとりアドベントカレンダー 2022
今年ベータリリースされたばかりのStripe Appsは、まだ日本語の情報が多くありません。
そこでQiita Advent Calendar 2022にて、毎日Stripe Appsについての情報を投稿します。
ノーコードで利用する方法や、開発するためのTipsなども紹介予定ですので、ぜひ購読をお願いします。