Stripe Apps開発入門: Stripe CLIでアプリをセットアップする

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

![スクリーンショット 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を利用したアプリを開発する場合、[Stripe CLI]()を利用してプロジェクトを立ち上げます。

今回はStripe CLIでStripe Appをセットアップする方法と、環境や設定のカスタマイズ方法を紹介します。

## Stripe CLIでStripe Appsアプリをセットアップする方法

### Stripe CLIをインストール・アップグレードする

Stripe CLIはMacOSの場合、Homebrewでインストールできます。

```bash
$ brew install stripe/stripe-cli/stripe
```

WindowsやDockerで利用する方法は、ドキュメントをご覧ください。

https://stripe.com/docs/stripe-cli

`stripe version`コマンドで、**1.8.11よりも古い**バージョンが表示された場合は、次のドキュメントを参考にCLIをアップグレードしましょう。

https://stripe.com/docs/stripe-cli/upgrade

### Stripe CLIで、アプリをテストするStripeアカウントにログインする

Stripe CLIを利用するには、Stripeアカウントとの連携が必要です。

`stripe login`で、連携させたいStripeアカウントにログインしましょう。

```bash
% stripe login
Your pairing code is: amuse-revive-timely-sturdy
This pairing code verifies your authentication with Stripe.
Press Enter to open the browser (^C to quit)
```

### Stripe Appsプラグインをインストールする

Stripe CLIには、Stripe Apps用のプラグインが用意されています。

```bash
$ stripe plugin install apps
```

インストールに成功した場合、`apps --help`でコマンドの説明が表示されます。

```bash
$ stripe apps --help
Commands for building Stripe apps

Usage:
  stripe apps [command]

Available Commands:
  add         Add a building block for developing your app
  create      Create a new Stripe app
  grant       Grant configuration access to your app
  help        Help about any command
  remove      Remove a building block from your stripe-app json
  revoke      Revoke configuration access to your app
  start       Start a development server for viewing your app in the Stripe dashboard
  upload      Upload your app to be submitted for review
```

### Stripe CLIでStripe Appsをセットアップする

いよいよアプリをセットアップします。

`stripe apps create <アプリのディレクトリ名>`を実行しましょう。

```bash
$ stripe apps create first-stripe-app
```

`🖊️ Enter details of your new Stripe app (these can be changed later)`と、アプリ設定の質問が表示されます。

#### アプリIDを入力する

1つ目はアプリのIDです。デフォルトでは、「com.example.`apps create <ここに入力した値>`」が入力されています。

```bash
✔ App ID: com.example.first-stripe-app█
```

このIDは、グローバルで１つしか選べません。

iOSアプリなどのように、`<サービスのドメイン>.<アプリ名>`で命名すると、重複などが発生しにくくなります。

#### アプリの表示名を設定する

続いてアプリの表示名を入力します。

```bash
✔ Display name: First Stripe App█
```

こちらも、CLIで設定した値をベースにデフォルト値が設定されますので、デモや動作確認ではこのまま利用しましょう。

#### ファイルの配置やライブラリインストール

項目を入力し終わると、ファイルの配置やnpmからのライブラリインストールなどが行われます。

```bash
Display name: First Stripe App
✔ Created skeleton files
✔ Created default view
✔ Wrote package.json
...

```

`npm install`が実行されるため、ネットワーク環境が安定しない場合や、転送量制限が近い環境ではご注意ください。

#### 完了メッセージの例

セットアップに完了すると、以下のようなメッセージが表示されます。

```bash
Inside that directory, you can run several commands:

$ stripe apps start
Start a development server locally for viewing your app in the Stripe dashboard

$ stripe apps add view
Add a new view to your app

$ stripe apps upload
Upload your app to be submitted for review

To get started, try starting the development server from the app directory:

$ cd first-stripe-app
$ stripe apps start
```

## 作成したアプリをテスト環境で実行する

セットアップしたアプリを起動するには、アプリのディレクトリ内で`stripe apps start`を実行します。

実行すると、`localhost:4242`などにアプリが起動し、Stripeダッシュボードが開きます。

```bash
[16:16:18] compiled successfully
💻 Running development server on http://localhost:4242 (^C to quit)
✨ You can now preview First Stripe App in your Stripe account.

🌐 Press Enter to open the Stripe dashboard
```

Stripeアカウントで初めてアプリを開発する場合は、まず利用規約への同意が求められます。

![スクリーンショット 2022-11-28 16.17.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/651ed01a-822b-2d41-940c-556fa40f9172.png)

その後、アプリのプレビューモードを有効にする画面が開きますので、[続行]を選びましょう。

![スクリーンショット 2022-11-28 16.18.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/92e67082-1378-391e-3f6b-f3c24cda91dc.png)

ダッシュボード右側にウィジェットのような画面が表示されれば、セットアップ完了です。

![スクリーンショット 2022-11-28 16.20.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/f9edda9f-3116-3257-3876-50ba6222b171.png)

## Stripe Appsでのアプリ開発で利用する言語やフレームワークとTips

2022/11時点で、Stripe Appsでのアプリ開発には以下の知識が必要です。

- React (v17)
- TypeScript
- [リントツール] ESLint
- [テストツール] Jest

### Stripe AppsでJavaScriptを利用する

デフォルトではTypeScript(TSX)でファイルが作成されますが、JavaScriptでコンポーネントを定義することも可能です。

```jsx
import { Box } from "@stripe/ui-extension-sdk/ui";

export const JSDemo = () => (
    <Box>Demo jsx file</Box>
)
```

ただし、UI Extensionライブラリのパラメータ定義などの確認や、静的な型検証によるバグの予防効果などを失うことになりますので、推奨はしていません。

### TypeScriptの設定をカスタマイズする

2022/11時点では、プロジェクトの型定義は次のようになっています。

```json
 {
  "$schema": "https://json.schemastore.org/tsconfig",
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "jsx": "react-jsx",
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "moduleResolution": "node",
    "noEmit": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true,
    "strict": true
  },
  "exclude": ["node_modules", ".build"]
}
```

`tsconfig.json`を編集することで、プロジェクトのルールに合わせたカスタマイズができます。

```diff_json
{
-  "extends": "@stripe/ui-extension-tools/tsconfig.ui-extension"
+  "extends": "@stripe/ui-extension-tools/tsconfig.ui-extension",
+  "compilerOptions": {
+    "allowJs": false,
+    "noUnusedParameters": true
+  }
}
```

### アプリのIDや名称を変更する方法

`stripe apps create`で設定したIDや表示名は、`stripe-app.json`に保存されています。

```json
{
  "id": "com.example.first-stripe-app",
  "version": "0.0.1",
  "name": "First Stripe App",
  "icon": "",
...
```

アプリのアップロード・マーケットプレイスへの公開前であれば、変更するリスクはあまりありません。

もし開発の中で名称を変更する必要が出た場合などでは、`stripe-app.json`を変更しましょう。



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

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

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

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

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