Stripe Apps開発入門: GitHubにあるサンプルアプリを実際に動かしてみよう + ローカル開発時の注意点２つ

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

![スクリーンショット 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が公開しているサンプルアプリの紹介と、テストアカウントでの動かし方をいくつか紹介します。

## サンプルアプリは、GitHubで公開中

Stripe Appsのサンプルアプリは、GitHubの`stripe-apps`リポジトリにて公開されています。

https://github.com/stripe/stripe-apps

`examples`ディレクトリに移動すると、2022/12月時点で１０種類以上のサンプルあります。

https://github.com/stripe/stripe-apps/tree/main/examples

## サンプルアプリのコードを、ローカルで動かす方法

サンプルアプリを動かすには、`stripe-apps`リポジトリをDLしましょう。

```bash
$ git clone https://github.com/stripe/stripe-apps.git
```

DLした後は、試したいサンプルを選んで、npmライブラリをインストールします。

```bash
$ cd stripe-apps/examples/super-todo
$ npm i
```

最後にStripe CLIでアプリを起動しましょう。

```bash
$ stripe apps start
[19:13:25] compiled successfully
💻 Running development server on http://localhost:4242 (^C to quit)
✨ You can now preview SuperTodo in your Stripe account.

🌐 Press Enter to open the Stripe dashboard
```

これでサンプルアプリの開発プレビュー版がStripe Dashboardに追加されました。

![スクリーンショット 2022-12-02 19.13.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/1705dc5a-1ba3-33fa-5597-580658556cf6.png)

あとはサンプルのコードをチェックしたり、どんな操作ができるかなどを試してみましょう。

## 公開されているサンプルアプリを一部紹介

それぞれのサンプルで何ができるかは、ディレクトリ内の`README.md`にてスクリーンショット付きで紹介されています。

![スクリーンショット 2022-12-02 19.29.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/77ac622b-d7d6-40de-30e0-8925ea8c6397.png)

### 商品発送管理アプリ

「購入された商品の発送管理」をテーマに作られたデモアプリが、[Ship.IO]です。

実際の業務でどのように使えるかなどを、ざっくり把握するのに最適なサンプルの1つです。

https://github.com/stripe/stripe-apps/tree/main/examples/ship-io

ディレクトリに移動して、ライブラリを追加しましょう。

```bash
$ cd ship-io/
$ npm i
```

アプリを起動します。

```bash
$ stripe apps start
[22:53:45] compiled successfully
💻 Running development server on http://localhost:4242 (^C to quit)
✨ You can now preview Ship.IO in your Stripe account.

🌐 Press Enter to open the Stripe dashboard
```

ログイン画面が表示されますが、**ダミー**です。

![スクリーンショット 2022-12-02 22.54.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/d91b2d67-af83-a027-dbea-f69914381ee5.png)

`Sign in to Ship.io`をクリックするだけでログインできます。

ログイン後は、「発送用ラベルの印刷」・・・のデモUIが表示されます。

![スクリーンショット 2022-12-02 22.56.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/d0ab49ca-ab90-e014-b74f-6e066709e109.png)

実際にラベルを作成することなどはできませんが、**ECの決済処理やサブスクリプションの申し込み管理と並行して、同一画面で関連操作する体験**ができます。

![スクリーンショット 2022-12-02 22.57.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/fa731093-68c7-6200-c732-d086e0c2cdc1.png)

腕に自信のある方は、ぜひこのサンプルをもとにあなたのShip.ioを実際に構築してみましょう。

### Webhookの自動インストールサンプル

データ連携やオートメーション・自動化系のアプリを作る場合、`install-webhooks`サンプルでWebhookとの連携方法を学べます。

https://github.com/stripe/stripe-apps/tree/main/examples/install-webhooks

このサンプルは、[backend]と[frontend]２つを起動する必要があります。

#### Step1: サーバー側のAPIを起動する

まず、[backend]ディレクトリに移動しましょう。

今回は`node`を選びましたが、`go`や`java`などの言語でも起動できます。

```bash
$ cd install-webhooks/backend/node
$ npm install
```

続いてStripe CLIでWebhook APIをローカルにproxyします。

```bash
$ stripe listen --forward-to http://localhost:8080/webhook
```

この際、`whsec_`から始まるキーがCLI画面に表示されますので、コピーしましょう。

そして、環境変数を配置します。

```bash
$ cp ../../.env.example ./.env
```

`.env`では、２つの値を設定しましょう。

```
STRIPE_API_KEY=sk_test_から始まるStripeのシークレットAPIキー
STRIPE_WEBHOOK_SECRET=`whsec_`から始まるWebhookのシークレット
```

ここまで用意できれば、あとはサーバーを起動するだけです。

```bash
$ npm start

> install-webhooks-example-backend@1.0.0 start
> node .

Server started on http://localhost:8080
```

#### Step2: Stripe Appsアプリを起動する

サーバー側の用意ができましたので、Appsアプリも起動しましょう。

まずはこちらもライブラリをインストールします。

```bash
$ cd ../frontend
$ npm install
```

そしてアプリを起動しましょう。

```bash
$ stripe apps start
[22:44:09] compiled successfully
💻 Running development server on http://localhost:4242 (^C to quit)
✨ You can now preview Webhooks Example App in your Stripe account.

🌐 Press Enter to open the Stripe dashboard
```

アプリを起動した直後は、何も表示されていません。

![スクリーンショット 2022-12-02 22.48.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/8a9243a7-cebc-d4b4-8ad5-d3c0704fc0cb.png)

Stripe CLIで`stripe customers create`を実行したり、ダッシュボードで顧客を新しく登録してみましょう。

```bash
$ stripe customers create
{
  "id": "cus_MuOMMxv6VJwsPk",
  "object": "customer",
  "address": null,
  "balance": 0,
  "created": 1669988836,
...
```

`stripe listen --forward-to http://localhost:8080/webhook`を実行している画面のログに、`[200]`が表示されていれば、連携に成功しています。

```bash
2022-12-02 22:47:59  <--  [200] POST http://localhost:8080/webhook [evt_xxx]
```

成功している場合、アプリを再読み込みすると、データが追加されています。

![スクリーンショット 2022-12-02 22.51.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/a9e20b23-a542-83f9-3dfc-b0a29d6e8279.png)


ログに、`400`が出ている場合は、環境変数が間違っているか、読み込みできていない可能性があります。

環境変数を確認して、`npm start`を再実行してみましょう。

## Stripe Appsをローカルで動かす際の注意点

### 1: 一度に複数のアプリは起動できない

複数のサンプルを一度に試そうと、`stripe apps start`を複数同時に実行すると、エラーが発生します。

```bash
 stripe apps start
error starting dev server: localhost:4242 is already in use
Are you running stripe apps start on another terminal?

😔 Failed to start development server.
🔧 Please fix any errors before re-running the command.
listen tcp 127.0.0.1:4242: bind: address already in use
```

Stripe CLIを利用して動かすアプリは、「一度に1つ」です。

[Ctrl + C]などで起動中のアプリを一度停止してから次のアプリを起動しましょう。

### 2: ポート4242を別アプリで利用しない

サーバー側のAPIを用意する際などで、Stripe Appsアプリ以外が4242ポートを利用しないようにしましょう。

すでに利用済みの場合、`stripe apps start`を実行しても、「アプリが見つからない」エラーが出ることがあります。

![スクリーンショット 2022-12-02 22.34.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/2f0e402a-82ac-779a-9253-52806be9535b.png)


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

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

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

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

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