Stripe CLIを使ってStripe決済をローカル環境で反映させる

Webエンジニア3ヶ月目のひよっこエンジニアです
Qiita初投稿となります

Stripe決済をローカル環境で反映させる方法を先輩エンジニアに聞きながら出来るようになったので自分なりに流れをまとめてみました
いつもやり方忘れてハマるので備忘録兼同じようなレベル感の人のために記録として残しておきます

「間違ってるよ！」とかございましたら是非コメントくださいませ！

## 前提
既に本番環境等でStripeが使用できる状態
※ Stripeの設定・導入方法については今回説明しません


## ローカル環境ではStripe決済が反映されない？

ローカル環境でStripe決済をしてもそのままではStripe側が決済を認識出来ないため決済がローカル環境に反映されません

> 1.購入処理動作（これはちゃんと動く）
> 　↓
> 2.Stripe側が決済を認識出来ないので購入したという証明（invoice）が作られない
> 　↓
> 3.証明がないのでローカル環境上では決済した情報が反映されない
>  　e.g.) 購入完了後の画面に遷移したのに実際に購入されている状態にならない


決済した情報が反映されないと購入後の動作も見れず開発に支障が出ると思います

決済を反映させるためにはngrokなどのgemを使う選択肢もあるらしいのですが
今回はより簡単に導入できる**Stripe CLI**を紹介します

## Stripe CLIの導入
Stripe CLIとはコマンドライン上でストライプの操作が出来るもの、と思って頂けたらシンプルかと思います

homebrewでStripe CLIをインストールします
terminalで下記を実行
`$ brew install stripe/stripe-cli/stripe`
これだけです


## Stripe CLIとStripeアカウントをペアリングする
Stripe CLIをインストールしたのでコマンドライン上でStripeコマンドが使えるようになっています

terminalで下記を実行
`$ stripe login`

そうすると

```bash
$ stripe login
>　Your pairing code is: avidly-salute-gaily-wisdom
>　Press Enter to open up the browser (^C to quit)
```
このように指示が出てくるので指示に従ってEnterを押す
（`pairing code`については後ほど使用します）

するとブラウザが起動し下記のようなアクセス許可のページが出ます(Stripeにログインしてなかったらログイン画面が出るのでログインしてください)
![スクリーンショット_2022-02-10_9_43_15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542581/a76fe253-1b2c-cdae-14c2-a16bbae40249.png)

さきほど出た`pairing code`が同じか確認し「アクセスを許可」をクリックします

これでStripe CLIとStripeダッシュボードがペアリングできました（開いたタブはもう閉じてもOK）
このペアリングにより**90日間だけ有効なシークレットAPIキーのペアが生成**されます

実際にStripeダッシュボードを確認してみると
「開発者」→「APIキー」の「制限付きキー」のところに作成されたAPIキーが作られています
![スクリーンショット_2022-02-17_9_26_27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542581/03a10124-6f3d-54a3-e50e-5648dcf87c30.png)


## Webhookエンドポイントを設定する
stripe CLIを使うことによってローカル環境のURLをWebhookエンドポイントに設定出来るようになる
（通常はローカル環境のエンドポイントは設定できない）

`stripe listen`コマンドを実行すると
「いつ」「どのイベントが」「どのIDで」発生したかを確認できるようになります。
更に`--forward-to`オプションをつけることによって上述のWebhookエンドポイントを指定出来ます

```bash
$ stripe listen --forward-to YourAppWebhookEndPoint
  # 各自の環境のwebhookエンドポイントに置き換えてください
  # e.g.) stripe listen --forward-to localhost:3000/webhook (localhost接続)
  # e.g.) stripe listen --forward-to myapp.test/webhook (puma-dev使用時)

A newer version of the Stripe CLI is available, please update to: v1.7.12
> Ready! You are using Stripe API Version [2019-11-05]. 
  Your webhook signing secret is whsec_xxxxx (^C to quit)
```
エンドポイントへのforwardに成功するとCLIが待機中になります（rails serverとかみたいな感じ）

## 実際にモニタリングしてみる
さて、下準備が終わったので実際にモニタリングして見てみましょう
実際のアプリケーションがある方はいきなりそっちをやっても良いですが、
本記事では一旦Stripe CLIの機能紹介の意味も込めましてコマンドでイベントを発生させてそれをlistenしてみます

`stripe trigger`コマンドを使用するとWebhookイベントを発生させることが出来ます

まず別ターミナル/もしくはタブを立ち上げてください
`stripe trigger`では色んなイベントを発生させられるのですが
とりあえず`stripe trigger payment_intent.created`コマンドを打ってみます

```bash
$ stripe trigger payment_intent.created
Setting up fixture for: payment_intent
Running fixture for: payment_intent
Trigger succeeded! Check dashboard for event details.
```

イベント生成がsucceeded!と出て成功しました

元のターミナルに戻ると待機中だったCLIにログが書き込まれています

```bash
2022-02-17 10:06:40   --> payment_intent.created [evt_3KRR7LHJf8TNEYM91PGmTQ32]
2022-02-17 10:06:52  <--  [500] POST http://localhost:xxxx/webhook [evt_3KRR7LHJf8TNEYM91PGmTQ32]
```

ちゃんとモニタリング出来ていますが400エラーが出ています（500エラーでも下記の同様の対応で大丈夫でした）
これはStripe Webhookを受け取る際の署名チェック(Signature Verification)に失敗しているから起こる現象

待機中のCLIの最初の方をみてもらうと`stripe listen`コマンドを実行した後に
> Your webhook signing secret is whsec_xxxxxxxxxxxxx

と表示されてるかと思います

これを自身のenvファイル(STRIPE_API_KEYとかを設定しているファイルだと思います)に**STRIPE_WEBHOOK_SECRET**として設定してあげてください

```bash:envファイル
STRIPE_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxx
```

これで署名チェックのシークレットキーが正しく設定できたので
再度stripe listenを立ち上げ直します

再度`stripe trigger payment_intent.created`を実行すると

```bash
2022-02-17 10:12:46   --> payment_intent.created [evt_3KRRSkHJf8TNEYM90L1MjnS1]
2022-02-17 10:12:58  <--  [200] POST http://localhost:xxxx/webhook [evt_3KRRSkHJf8TNEYM90L1MjnS1]
```

200が返ってくるようになり無事成功です！
これで動作チェックOK
自身の環境のアプリケーションでも決済情報が反映されると思いますので確認してみてください