Stripe UI拡張機能入門: CLIでStripe Appsアプリに、新しい画面を追加・削除する方法

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

Stripe CLIで作成したアプリは、2022/12時点では「顧客の詳細ページ」用の画面のみ用意されています。

「サブスクリプションを編集するための画面」や「全ページ共通で表示したいウィジェット」などを作りたい場合、Stripe CLIで「画面（View）を追加」する必要があります。

Stripe CLIで画面を追加する方法

新しい画面を追加するには、stripe apps add viewコマンドを実行しましょう。

Step1: 追加したい画面を指定する

対話形式で、「どのページへのViewを追加するか」を聞かれます。

$ stripe apps add view

Use the arrow keys to navigate: ↓ ↑ → ← 
? Select a viewport to go into: 
  ▸ stripe.dashboard.payment.list
    stripe.dashboard.payment.detail
    stripe.dashboard.customer.list
    stripe.dashboard.customer.detail
    stripe.dashboard.invoice.list
    stripe.dashboard.invoice.detail
    stripe.dashboard.product.list
    stripe.dashboard.product.detail
    stripe.dashboard.subscription.list
    stripe.dashboard.subscription.detail
    stripe.dashboard.payment-link.list
    stripe.dashboard.payment-link.detail
    stripe.dashboard.home.overview
    stripe.dashboard.balance.overview
    stripe.dashboard.billing.overview
    stripe.dashboard.report.overview
    stripe.dashboard.revenue-recognition.overview
    stripe.dashboard.tax-report.overview
    stripe.dashboard.drawer.default

今回は、stripe.dashboard.payment.listを選びましょう。

命名規則について
それぞれの名前は、「Stripeのダッシュボードで、Resource名の一覧(list) / 詳細 (detail)」で構成されています。

ですので、「サブスクリプション詳細ページに画面を追加したい」場合は、stripe.dashboard.subscription.detailを選びましょう。

ホーム画面の場合は、stripe.dashboard.home.overviewを利用します。

Step2: Viewの名前（ファイル・コンポーネント名）を指定する

Viewの種類を選択すると、Viewの名前を入力するモードに変わります。

$ stripe apps add view
✔ stripe.dashboard.payment.list
✔ Enter view name (e.g. ExampleComponentName): PaymentListView█

ここで設定した名前が、Reactのファイル・コンポーネント名になります。

Viewの名前を設定すると、入力した名前で２つのTSXファイルがsrc/viewsに生成されます。

$ ls -a src/views/
.
..
App.test.tsx
App.tsx
+PaymentListView.test.tsx
+PaymentListView.tsx
brand_icon.svg

作成されたTSXファイルの、.test.tsxではない方を編集すると、追加したViewの中身を編集できます。

Step3: アプリのプレビューを再有効化する

Viewの追加は、Appsのマニフェストファイル（stripe-app.json）を変更します。

そのため、stripe apps add viewでViewを追加した後は、プレビューの有効化画面への移動が必要です。

有効化が完了すると、ホーム画面で表示されていたリンクに、「支払い」が追加されます。

stripe.dashboard.drawer.defaultで全ページにViewを追加する

全てのページにViewを表示させたい場合は、stripe.dashboard.drawer.defaultで設定できます。

この画面は、「別途Viewを設定している画面以外」で同じViewを表示できます。

TODOリストやクイックアクションのような、どのページからでも利用したい機能を提供する場合に活用しましょう。

stripe.dashboard.drawer.defaultでは、ページごとのID（顧客やサブスクリプションなど）が取得できません。
IDを利用して操作する系のViewについては、個別にViewを作成しましょう。

ワンライナーでViewを追加する方法

対話形式ではなく、引数でViewの種類を指定することもできます。

$ stripe apps add view Home --viewport stripe.dashboard.home.overview  
✔ Added view Home

社内の手順書などで、コピーアンドペーストで実行できるようにしたい場合には、こちらの方法をおすすめします。

追加したViewを削除する方法

追加したViewを削除するには、stripe apps remove viewコマンドを利用します。

削除するViewの名前を、対話形式で選択しましょう。

$ stripe apps remove view
Use the arrow keys to navigate: ↓ ↑ → ← 
? Select a view to remove: 
  ▸ App
    PaymentListView

ファイルの削除は手動で実施

削除は、stripe-apps.json内の設定のみ行います。

表示されたメッセージに記載されているrmコマンドを実行するなどして、View用のファイルを手動で削除しましょう。

! To remove the files, run:
$ rm src/views/PaymentListView.tsx src/views/PaymentListView.test.tsx

ワンライナーでViewを削除する方法

削除もワンライナーで実行できます。

$ stripe apps remove view PaymentListView

社内の手順書などで、コピーアンドペーストで実行できるようにしたい場合には、こちらの方法をおすすめします。

ただしこちらも、ファイルの削除は別途必要ですので、ご注意ください。

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

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

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

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