mcpField
W
woocommerce-webhooks

woocommerce-webhooks

github.com/hookdeck開発95212 回インストール今日更新
リポジトリ

woocommerce-webhooks について

woocommerce-webhooksは、WooCommerceのWebhookを統合する開発者向けのスキルです。署名検証やイベントペイロードの説明に加え、複数のフレームワーク用ハンドラー例を掲載しています。

主な機能

  1. 01Webhook署名検証の例
  2. 02注文・商品・顧客イベントの資料
  3. 03Express、Next.js、FastAPIの例
  4. 04ローカルトンネルでのテスト手順

活用シーン

  1. 01注文変更を受けて通知を送信
  2. 02商品データを外部カタログと同期
  3. 03署名検証の失敗を調査
  4. 04ローカルでWebhookリクエストを確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/hookdeck/webhook-skills --skill woocommerce-webhooks

インストール後、Claude Code で/woocommerce-webhooksを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

examples/express/
.env.example
package.json
README.md
examples/express/src/
index.js
examples/express/test/
webhook.test.js
examples/fastapi/
.env.example
main.py
README.md
requirements.txt
test_webhook.py
examples/nextjs/
.env.example
package.json
README.md
vitest.config.ts
examples/nextjs/app/webhooks/woocommerce/
route.ts
examples/nextjs/test/
webhook.test.ts
references/
overview.md
setup.md
verification.md

詳細

WooCommerce Webhook

このスキルを使用する場面

  • WooCommerce の Webhook ハンドラーを設定する
  • 署名検証の失敗をデバッグする
  • WooCommerce のイベントタイプとペイロードを理解する
  • 注文、商品、または顧客のイベントを処理する
  • WooCommerce ストアと連携する

重要なコード(必ず使用)

WooCommerce の署名検証(JavaScript)
const crypto = require('crypto');

function verifyWooCommerceWebhook(rawBody, signature, secret) {
  if (!signature || !secret) return false;
  
  const hash = crypto
    .createHmac('sha256', secret)
    .update(rawBody)
    .digest('base64');
  
  try {
    return crypto.timingSafeEqual(
      Buffer.from(signature), 
      Buffer.from(hash)
    );
  } catch {
    return false;
  }
}
Express の Webhook ハンドラー
const express = require('express');
const app = express();

// CRITICAL: Use raw body for signature verification
app.use('/webhooks/woocommerce', express.raw({ type: 'application/json' }));

app.post('/webhooks/woocommerce', (req, res) => {
  const signature = req.headers['x-wc-webhook-signature'];
  const secret = process.env.WOOCOMMERCE_WEBHOOK_SECRET;
  
  if (!verifyWooCommerceWebhook(req.body, signature, secret)) {
    return res.status(400).send('Invalid signature');
  }
  
  const payload = JSON.parse(req.body);
  const topic = req.headers['x-wc-webhook-topic'];
  
  console.log(`Received ${topic} event:`, payload.id);
  res.status(200).send('OK');
});
Next.js API ルート(App Router)
import crypto from 'crypto';
import { NextRequest } from 'next/server';

export async function POST(request: NextRequest) {
  const signature = request.headers.get('x-wc-webhook-signature');
  const secret = process.env.WOOCOMMERCE_WEBHOOK_SECRET;
  
  const rawBody = await request.text();
  
  if (!verifyWooCommerceWebhook(rawBody, signature, secret)) {
    return new Response('Invalid signature', { status: 400 });
  }
  
  const payload = JSON.parse(rawBody);
  const topic = request.headers.get('x-wc-webhook-topic');
  
  console.log(`Received ${topic} event:`, payload.id);
  return new Response('OK', { status: 200 });
}
FastAPI ハンドラー
import hmac
import hashlib
import base64
from fastapi import FastAPI, Request, HTTPException

app = FastAPI()

def verify_woocommerce_webhook(raw_body: bytes, signature: str, secret: str) -> bool:
    if not signature or not secret:
        return False
    
    hash_digest = hmac.new(
        secret.encode(),
        raw_body,
        hashlib.sha256
    ).digest()
    expected_signature = base64.b64encode(hash_digest).decode()
    
    return hmac.compare_digest(signature, expected_signature)

@app.post('/webhooks/woocommerce')
async def handle_webhook(request: Request):
    raw_body = await request.body()
    signature = request.headers.get('x-wc-webhook-signature')
    secret = os.getenv('WOOCOMMERCE_WEBHOOK_SECRET')
    
    if not verify_woocommerce_webhook(raw_body, signature, secret):
        raise HTTPException(status_code=400, detail='Invalid signature')
    
    payload = await request.json()
    topic = request.headers.get('x-wc-webhook-topic')
    
    print(f"Received {topic} event: {payload.get('id')}")
    return {'status': 'success'}

一般的なイベントタイプ

イベント発生するタイミング一般的な用途
order.created新しい注文が行われたとき注文確認メールの送信、在庫の更新
order.updated注文ステータスが変更されたときフルフィルメントの追跡、通知の送信
order.deleted注文が削除されたとき外部システムのクリーンアップ
product.created商品が追加されたとき外部カタログとの同期
product.updated商品が変更されたとき価格、在庫の更新
customer.created新しい顧客が登録されたときウェルカムメールの送信、CRM との同期
customer.updated顧客情報が変更されたときプロフィール、設定の更新

環境変数

WOOCOMMERCE_WEBHOOK_SECRET=your_webhook_secret_key

ヘッダーのリファレンス

WooCommerce の Webhook には、次のヘッダーが含まれます。

  • X-WC-Webhook-Signature - HMAC SHA256 署名(base64)
  • X-WC-Webhook-Topic - イベントタイプ(例:「order.created」)
  • X-WC-Webhook-Resource - リソースタイプ(例:「order」)
  • X-WC-Webhook-Event - アクション(例:「created」)
  • X-WC-Webhook-Source - ストアの URL
  • X-WC-Webhook-ID - Webhook ID
  • X-WC-Webhook-Delivery-ID - 一意の配信 ID

ローカル開発

ローカルで Webhook をテストするには、Hookdeck CLI をインストールします。

次に、トンネルを起動します。

npx hookdeck-cli listen 3000 woocommerce --path /webhooks/woocommerce

アカウントは不要です。ローカルトンネルと、リクエストを確認できる Web UI を利用できます。

参考資料

  • overview.md - WooCommerce Webhook の概要、一般的なイベントタイプ
  • setup.md - WooCommerce 管理画面での Webhook の設定、署名シークレットの取得
  • verification.md - 署名検証の詳細と注意点
  • examples/ - 各フレームワーク向けの、実行可能な完全なサンプル

推奨:webhook-handler-patterns

本番環境に対応した Webhook ハンドラーを実装するには、webhook-handler-patterns スキルもインストールしてください。以下を利用できます。

関連スキル

コメント