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

そうすると

$ stripe login
>　Your pairing code is: avidly-salute-gaily-wisdom
>　Press Enter to open up the browser (^C to quit)

このように指示が出てくるので指示に従ってEnterを押す
（pairing codeについては後ほど使用します）

するとブラウザが起動し下記のようなアクセス許可のページが出ます(Stripeにログインしてなかったらログイン画面が出るのでログインしてください)

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

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

実際にStripeダッシュボードを確認してみると
「開発者」→「APIキー」の「制限付きキー」のところに作成されたAPIキーが作られています

Webhookエンドポイントを設定する

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

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

$ 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コマンドを打ってみます

$ 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にログが書き込まれています

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として設定してあげてください

envファイル

STRIPE_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxx

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

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

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
自身の環境のアプリケーションでも決済情報が反映されると思いますので確認してみてください