メインコンテンツへスキップ

はじめに

ビジネスチームをリアルタイムの支払い通知でつなげましょう。統合により、支払いイベントがリッチなAdaptive Cardsとして配信されます。これは、Teamsが主要なコラボレーションツールである企業環境に最適です。
このガイドでは、Microsoft TeamsワークスペースでWebhookを作成するための管理者アクセスがあることを前提としています。

始め方

1

Webhookセクションを開く

Dodo Paymentsダッシュボードで、Webhooks → + エンドポイントを追加に移動し、統合のドロップダウンを展開します。
エンドポイントの追加と統合のドロップダウン
2

Microsoft Teamsを選択

Microsoft Teams統合カードを選択します。
3

Teams Webhookを作成

Teamsで、チャンネル → ⋯ → コネクタ → Incoming Webhook → 設定に移動します。Webhook URLをコピーします。
4

Webhook URLを貼り付ける

TeamsのWebhook URLをエンドポイント設定に貼り付けます。
5

変換をカスタマイズ

メッセージをTeams用のAdaptive Cardsとしてフォーマットするために変換コードを編集します。
6

テストと作成

サンプルペイロードでテストし、作成をクリックしてアクティブにします。
7

完了!

🎉 あなたのTeamsチャンネルは、Dodo Paymentsの更新をAdaptive Cardsとして受信するようになります。

変換コードの例

基本的な支払いカード

payment_card.js
function handler(webhook) {
  if (webhook.eventType === "payment.succeeded") {
    const p = webhook.payload.data;
    webhook.payload = {
      type: "message",
      attachments: [{
        contentType: "application/vnd.microsoft.card.adaptive",
        content: {
          type: "AdaptiveCard",
          body: [
            {
              type: "TextBlock",
              text: "✅ Payment Successful",
              weight: "Bolder",
              size: "Medium"
            },
            {
              type: "FactSet",
              facts: [
                { title: "Amount", value: `$${(p.total_amount / 100).toFixed(2)}` },
                { title: "Customer", value: p.customer.email },
                { title: "Payment ID", value: p.payment_id }
              ]
            }
          ]
        }
      }]
    };
  }
  return webhook;
}

サブスクリプション管理

subscription_card.js
function handler(webhook) {
  const s = webhook.payload.data;
  switch (webhook.eventType) {
    case "subscription.active":
      webhook.payload = {
        type: "message",
        attachments: [{
          contentType: "application/vnd.microsoft.card.adaptive",
          content: {
            type: "AdaptiveCard",
            body: [
              {
                type: "TextBlock",
                text: "📄 Subscription Activated",
                weight: "Bolder",
                color: "Good"
              },
              {
                type: "FactSet",
                facts: [
                  { title: "Customer", value: s.customer.email },
                  { title: "Product", value: s.product_id },
                  { title: "Amount", value: `$${(s.recurring_pre_tax_amount / 100).toFixed(2)}/${s.payment_frequency_interval}` },
                  { title: "Next Billing", value: new Date(s.next_billing_date).toLocaleDateString() }
                ]
              }
            ]
          }
        }]
      };
      break;
    case "subscription.cancelled":
      webhook.payload = {
        type: "message",
        attachments: [{
          contentType: "application/vnd.microsoft.card.adaptive",
          content: {
            type: "AdaptiveCard",
            body: [
              {
                type: "TextBlock",
                text: "⚠️ Subscription Cancelled",
                weight: "Bolder",
                color: "Warning"
              },
              {
                type: "FactSet",
                facts: [
                  { title: "Customer", value: s.customer.email },
                  { title: "Product", value: s.product_id },
                  { title: "Cancelled At", value: new Date(s.cancelled_at).toLocaleDateString() }
                ]
              }
            ]
          }
        }]
      };
      break;
  }
  return webhook;
}

争議アラート

dispute_card.js
function handler(webhook) {
  if (webhook.eventType.startsWith("dispute.")) {
    const d = webhook.payload.data;
    const color = d.dispute_status === "won" ? "Good" : d.dispute_status === "lost" ? "Attention" : "Warning";
    const title = d.dispute_status === "won" ? "🏆 Dispute Won" : d.dispute_status === "lost" ? "❌ Dispute Lost" : "🚨 Dispute Update";
    
    webhook.payload = {
      type: "message",
      attachments: [{
        contentType: "application/vnd.microsoft.card.adaptive",
        content: {
          type: "AdaptiveCard",
          body: [
            {
              type: "TextBlock",
              text: title,
              weight: "Bolder",
              color: color
            },
            {
              type: "FactSet",
              facts: [
                { title: "Payment ID", value: d.payment_id },
                { title: "Amount", value: `$${(d.amount / 100).toFixed(2)}` },
                { title: "Status", value: d.dispute_status },
                { title: "Stage", value: d.dispute_stage }
              ]
            }
          ]
        }
      }]
    };
  }
  return webhook;
}

ヒント

  • リッチでインタラクティブなフォーマットのためにAdaptive Cardsを使用する
  • 適切な色を選択する: 良好(緑)、警告(黄)、注意(赤)
  • ファクトセットを簡潔で読みやすく保つ
  • デプロイ前にTeamsのWebhookテスターでテストする

トラブルシューティング

  • Webhook URLが正しくアクティブであることを確認する
  • 変換が有効なAdaptive Card JSONを返すことを確認する
  • Webhookがチャンネルに投稿する権限を持っていることを確認する
  • TeamsのWebhookテスターでAdaptive Cardスキーマを検証する
  • 必要なすべてのフィールドが存在することを確認する
  • 色の値が有効であることを確認する(良好、警告、注意、デフォルト)