# StripeとVercel Edge Functionsで銀行振込の検知をリアルタイム処理する

## 目次
1. 概要
2. 必要なツールとライブラリ
3. 環境構築
   1. Stripeアカウントの準備
   2. Vercelの設定
4. コード実装
   1. Stripe Webhookの設定
   2. Vercel Edge Functionsでのデプロイ
5. デプロイとテスト
6. まとめ

# 1. 概要

銀行振込を使った支払いの検知は、特にオンラインショップやSaaSプロバイダーにとって重要です。今回の解説では、Stripeを用いた銀行振込の検知を、VercelのEdge Functionsを利用してリアルタイムで処理する方法を説明します。この組み合わせにより、高速でスケーラブルな支払い処理フローを構築できます。

# 2. 必要なツールとライブラリ

- **Stripe**: オンライン決済処理プラットフォーム
- **Vercel**: 簡単にデプロイできるクラウドホスティングサービス
- **Node.js**: サーバサイドのJavaScript実行環境
- **@vercel/node**: VercelでNode.jsを使用するためのライブラリ
- **stripe**: Stripe APIを操作するためのNode.jsライブラリ

# 3. 環境構築

## 3-1. Stripeアカウントの準備

まず、Stripeのアカウントを作成します。以下の手順でWebhookを設定します。

1. Stripe Dashboardにログインします。
2. Settings > Webhooks に進みます。
3. Webhookエンドポイントを追加をクリックして、新しいエンドポイントを設定します。
4. イベントタイプとして `payment_intent.succeeded` など、銀行振込に関連するイベントを選択します。

## 3-2. Vercelの設定

1. Vercelアカウントを作成し、ログインします。
2. 新しいプロジェクトを作成し、Node.jsを選択します。
3. Vercel CLIを使用してプロジェクトをローカルにクローンします。

![img](/mosaic-code.jpg)

# 4. コード実装

## 4-1. Stripe Webhookの設定

VercelでNode.jsを使用するためのプロジェクトを作成します。以下のような構成でファイルを作成します。

![img](/mosaic-code.jpg)

### stripe-webhook.js

![img](/mosaic-code.jpg)

## 4-2. Vercel Edge Functionsでのデプロイ

1. .envファイルを作成してStripeのシークレットキーとWebhookシークレットキーを設定します。

![img](/mosaic-code.jpg)

2. Vercelプロジェクトのルートで以下のコマンドを実行してデプロイします。

![img](/mosaic-code.jpg)

この操作で、プロジェクトが即時にデプロイされます。

# 5. デプロイとテスト

- Stripeダッシュボードを使用して、テスト用の支払いを作成します。
- Vercelのログを確認し、Webhookが正常に受信され、処理されているか確認します。

# 6. まとめ

StripeとVercel Edge Functionsを活用すると、銀行振込のような支払いイベントを迅速に検知し、リアルタイムで処理できます。Stripeの強力なAPIとVercelのスケーラブルなエッジ機能を活用し、スピーディーで信頼性の高い決済システムを構築してください。フリマアプリやオンラインストアのようなシステムには、この設計が非常に役立つでしょう。

このガイドに従って、必要なカスタマイズを行い、実際のビジネスシステムに利用してください。

[cv:issue_marketplace_engineer]

# StripeとVercel Edge Functionsで銀行振込の検知をリアルタイム処理する

## 目次
1. 概要
2. 必要なツールとライブラリ
3. 環境構築
   1. Stripeアカウントの準備
   2. Vercelの設定
4. コード実装
   1. Stripe Webhookの設定
   2. Vercel Edge Functionsでのデプロイ
5. デプロイとテスト
6. まとめ

# 1. 概要

銀行振込を使った支払いの検知は、特にオンラインショップやSaaSプロバイダーにとって重要です。今回の解説では、Stripeを用いた銀行振込の検知を、VercelのEdge Functionsを利用してリアルタイムで処理する方法を説明します。この組み合わせにより、高速でスケーラブルな支払い処理フローを構築できます。

# 2. 必要なツールとライブラリ

- **Stripe**: オンライン決済処理プラットフォーム
- **Vercel**: 簡単にデプロイできるクラウドホスティングサービス
- **Node.js**: サーバサイドのJavaScript実行環境
- **@vercel/node**: VercelでNode.jsを使用するためのライブラリ
- **stripe**: Stripe APIを操作するためのNode.jsライブラリ

# 3. 環境構築

## 3-1. Stripeアカウントの準備

まず、Stripeのアカウントを作成します。以下の手順でWebhookを設定します。

1. Stripe Dashboardにログインします。
2. Settings > Webhooks に進みます。
3. Webhookエンドポイントを追加をクリックして、新しいエンドポイントを設定します。
4. イベントタイプとして `payment_intent.succeeded` など、銀行振込に関連するイベントを選択します。

## 3-2. Vercelの設定

1. Vercelアカウントを作成し、ログインします。
2. 新しいプロジェクトを作成し、Node.jsを選択します。
3. Vercel CLIを使用してプロジェクトをローカルにクローンします。

```bash
npm install -g vercel
vercel login
vercel init
```

# 4. コード実装

## 4-1. Stripe Webhookの設定

VercelでNode.jsを使用するためのプロジェクトを作成します。以下のような構成でファイルを作成します。

```
/api
  └─ stripe-webhook.js
```

### stripe-webhook.js

```javascript
import { buffer } from 'micro';
import * as admin from 'firebase-admin';
import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

export const config = {
  api: {
    bodyParser: false,
  },
};

const webhookSecret = process.env.STRIPE_WEBHOOK_SECRET;

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const buf = await buffer(req);
    const sig = req.headers['stripe-signature'];

    let event;

    try {
      event = stripe.webhooks.constructEvent(buf, sig, webhookSecret);
    } catch (err) {
      console.error(`Webhook signature verification failed.`, err.message);
      return res.status(400).send(`Webhook Error: ${err.message}`);
    }

    // Handle the event
    if (event.type === 'payment_intent.succeeded') {
      const paymentIntent = event.data.object;
      console.log(`PaymentIntent was successful for`, paymentIntent);
      // Firestoreや任意のサービスに通知するなどの処理を追加
    }
    
    // Other event handlers can be added here

    res.json({ received: true });
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Method Not Allowed');
  }
}
```

## 4-2. Vercel Edge Functionsでのデプロイ

1. .envファイルを作成してStripeのシークレットキーとWebhookシークレットキーを設定します。

```plaintext
STRIPE_SECRET_KEY=sk_test_XXXXXXXXXXXXXX
STRIPE_WEBHOOK_SECRET=whsec_XXXXXXXXXXXX
```

2. Vercelプロジェクトのルートで以下のコマンドを実行してデプロイします。

```bash
vercel --prod
```

この操作で、プロジェクトが即時にデプロイされます。

# 5. デプロイとテスト

- Stripeダッシュボードを使用して、テスト用の支払いを作成します。
- Vercelのログを確認し、Webhookが正常に受信され、処理されているか確認します。

# 6. まとめ

StripeとVercel Edge Functionsを活用すると、銀行振込のような支払いイベントを迅速に検知し、リアルタイムで処理できます。Stripeの強力なAPIとVercelのスケーラブルなエッジ機能を活用し、スピーディーで信頼性の高い決済システムを構築してください。フリマアプリやオンラインストアのようなシステムには、この設計が非常に役立つでしょう。

このガイドに従って、必要なカスタマイズを行い、実際のビジネスシステムに利用してください。



StripeとVercel Edge Functionsで銀行振込の検知をリアルタイム処理する

目次

続きを読むには単価診断を受けてください（30秒）