Stripe Webhook

StripeではWebhookを用意してくれています。そのため、Stripeで商品関連、決済関連、カスタマー関連、リンク関連　作成、追加変更、支払い完了等ほぼ全てのイベントの通知を受け取ることができます。あまりにも多いので、今回は支払い完了時にイベントを受け取るWebhookを使ってみます。
local環境でもテストができるようになっているので開発がし易い点も非常にありがたいです。

Stripeで設定する

Webhookを使うにはまずstirpeのウェブページで設定をする必要があります。
開発者のwebhookのページを開いてエンドポイントを追加します。 ページを探せない場合ここからでも開けます。

ローカルの環境でテスト

まずはローカルの環境でテストをしてみます。
ローカルの環境でテストするためには、CLIソフトが必要になっています。私の場合windowsなのでwindows用のソフトをダウンロードします。

CLIをダウンロードする

解凍したら「stripe.exe」ができるのでコマンドプロンプトで起動しloginを実行します。
ブラウザーで認証の確認ページが表示されるので認証許可をします。

webhook転送を有効にし確認してみる

stripeでwebhookを転送を実行をします。 ポートは各自お好みで変更できます。

stripe listen --forward-to localhost:4242/webhook

コマンドプロンプトをもう一つ開きイベントを実行して見ます。

stripe trigger payment_intent.succeeded

成功すると次のように-->charge.succeededとなります。 ここでエラーが発生しているのはlocal:4242/webhookにpostが失敗したからです。何もサーバーを起動していないので当たり前ですが...

サーバーを起動させる

次にNext.jsでサーバーを起動させてPOSTメッセージを受け取ってみます。

import { NextResponse, NextRequest } from 'next/server';
import Stripe from 'stripe';
import { buffer } from "node:stream/consumers";
const stripe = new Stripe(process.env.NEXT_PUBLIC_STRIPE_SECKEY || '', {})
const endpointSecret = "whsec_163c10xxxxxxxxxxxxxxxxxxxxxxxxxxxf31191323h5s03013gj2852cfb46984";
//endpointSecretを変更してください

export const POST = async (req: NextRequest, res: NextResponse) => {
    const rawBody = await buffer(req.body);
    let event;
    try {
        event = stripe.webhooks.constructEvent(
            rawBody,
            req.headers.get("stripe-signature") as string,
            endpointSecret
        );
    } catch (err) {
        return NextResponse.json(
            { message: "Error" },
            { status: 400 }
        );
    }

    // Handle the event
    switch (event.type) {
            case 'payment_intent.succeeded':
            const paymentIntentSucceeded = event.data.object;
            console.log(paymentIntentSucceeded);

      break;

        default:
            console.log(`Unhandled event type ${event.type}`);
    }


    return NextResponse.json(
        { message: "successfully received" },
        { status: 200 }
    );
};

endpointSecret

ブラウザーまたは、コマンドから確認ができます。 本番環境用はまた別になりますのでご確認ください。

Nextjsで確認

1. 1.Next.jsを起動します。

npm run dev

2. 2.デフォルトでport 3000で起動するため、stripe.exeの起動もポートと、パスを変更します。

stripe listen --forward-to localhost:3000/api/webhook

3. 3.最後にテストでイベントを発生させるstirpe.exeを起動させます。

stripe trigger payment_intent.succeeded

このようにコマンドプロンプトが3つ開いてテストします。

イベントリスト

webhookのイベントはここで確認ができます。

まとめ

サーバーでイベントの取得ができました。これでstripeでイベント実行された場合でもlineや、メールに通知することですぐに状況が分かります。
bot等で自動メール送信してもいいですね。