🖥

#Stripe + ngrok で local環境で webhook 発行 / webhook再送信のテストをする

2019/12/14に公開

問題

stripe cli でも webhook の local でのテストができるが、こちらはあくまでイベントをトリガーする仕様なので、一度発生済みのwebhookを再送する場合は、localに直接リクエストを送ることができない

global なURLを発行してlocalに転送してくれるngrokを利用する

ngrok を起動する

このようなURLが発行される

https://eb3a6a4a.ngrok.io

ここに来たリクエストがlocalに転送される

http://localhost:80

ngrok http 80
ngrok by @inconshreveable                                                                                                      (Ctrl+C to quit)

Session Status                online
Session Expires               7 hours, 59 minutes
Version                       2.3.35
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://eb3a6a4a.ngrok.io -> http://localhost:80
Forwarding                    https://eb3a6a4a.ngrok.io -> http://localhost:80

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00


ngrokは起動させたままにしておく

Stripe

Stripeでwebhookのエンドポイントを設定する
発行されたngrokのURL を入力する
トリガーするイベントを設定しておく

image

Stripeでイベントを発行される処理をする

直接Webhook送信のテストをする

image

もしくはwebhookがトリガーされる処理を実行する
例えば顧客を作成してみる
事前にwebhook設定でトリガーするイベントとして設定してある必要がある

image

ngrokでリクエストを確認する

リクエストが飛んできているのが確認できる
http://localhost:80 には何もないので BAD REQEST 扱いになっている状態

HTTP Requests
-------------

POST /                         502 Bad Gateway

node などで local に http サーバーを起動させてから webhook を試す

node ok.js

var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello New York\n');
}).listen(80);
console.log('Server running at http://localhost:80/');

200 ok を確認できた例

image

image

Webhook再送信

すでに発行済みのwebhookを再送信する場合は、エンドポイントを一時的に ngrok のものに書き換えて再送を試すと良いだろう。

image

Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2842

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ

Twitter

https://twitter.com/YumaInaura

公開日時

2019-12-14

Discussion