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



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

![スクリーンショット 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 CLIで作成したアプリは、2022/12時点では「顧客の詳細ページ」用の画面のみ用意されています。

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

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

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

### Step1: 追加したい画面を指定する
対話形式で、「どのページへのViewを追加するか」を聞かれます。

```bash
$ 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`を選びましょう。

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

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

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

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

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

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

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

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

```diff
$ 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を追加した後は、プレビューの有効化画面への移動が必要です。

![スクリーンショット 2022-12-09 13.50.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/9d77012f-040c-50a7-ffe1-e9b58cfa1253.png)

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

![スクリーンショット 2022-12-09 13.50.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/5ef7d615-dae2-75ea-a93a-5debede21c61.png)


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

```bash
$ stripe apps remove view PaymentListView
```

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

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

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

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

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

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

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