WhatsApp Business API 香港電商自動化設定教學：完整實作指南

1# 驗證 Token 是否有效
2curl -X GET "https://graph.facebook.com/v21.0/YOUR_PHONE_NUMBER_ID" \
3  -H "Authorization: Bearer YOUR_ACCESS_TOKEN"

1// webhook-server.js
2import express from 'express';
3const app = express();
4app.use(express.json());
5
6const VERIFY_TOKEN = process.env.WA_VERIFY_TOKEN || 'my-secret-token';
7
8// Webhook 驗證端點（Meta 會在設定時發送 GET 請求驗證）
9app.get('/webhook', (req, res) => {
10  const mode = req.query['hub.mode'];
11  const token = req.query['hub.verify_token'];
12  const challenge = req.query['hub.challenge'];
13
14  if (mode === 'subscribe' && token === VERIFY_TOKEN) {
15    console.log('Webhook verified successfully');
16    return res.status(200).send(challenge);
17  }
18  return res.sendStatus(403);
19});
20
21// 接收訊息的 POST 端點
22app.post('/webhook', (req, res) => {
23  const body = req.body;
24
25  if (body.object === 'whatsapp_business_account') {
26    body.entry?.forEach(entry => {
27      entry.changes?.forEach(change => {
28        if (change.field === 'messages') {
29          const message = change.value.messages?.[0];
30          if (message) {
31            console.log(`收到訊息: ${message.text?.body}`);
32            console.log(`來自: ${message.from}`);
33            // 在此處觸發自動化邏輯
34          }
35        }
36      });
37    });
38    return res.sendStatus(200);
39  }
40  return res.sendStatus(404);
41});
42
43app.listen(3000, () => console.log('Webhook server running on port 3000'));

1ngrok http 3000
2# 輸出類似：Forwarding https://abc123.ngrok.io -> http://localhost:3000

1curl -X POST "https://graph.facebook.com/v21.0/YOUR_WABA_ID/message_templates" \
2  -H "Authorization: Bearer YOUR_ACCESS_TOKEN" \
3  -H "Content-Type: application/json" \
4  -d '{
5    "name": "order_confirmation_hk",
6    "language": "zh_HK",
7    "category": "UTILITY",
8    "components": [
9      {
10        "type": "HEADER",
11        "format": "TEXT",
12        "text": "訂單確認 ✅"
13      },
14      {
15        "type": "BODY",
16        "text": "{{1}} 你好！你的訂單 #{{2}} 已確認。\n\n總金額：HK${{3}}\n預計送達：{{4}}\n\n如有疑問，請直接回覆此訊息。",
17        "example": {
18          "body_text": [["陳小姐", "HK20250115001", "399", "1月17日"]]
19        }
20      },
21      {
22        "type": "FOOTER",
23        "text": "MyStore Hong Kong"
24      },
25      {
26        "type": "BUTTONS",
27        "buttons": [
28          {
29            "type": "URL",
30            "text": "查看訂單",
31            "url": "https://mystore.hk/orders/{{1}}",
32            "example": ["HK20250115001"]
33          }
34        ]
35      }
36    ]
37  }'

1// shopify-to-whatsapp.js
2import express from 'express';
3import crypto from 'crypto';
4
5const SHOPIFY_WEBHOOK_SECRET = process.env.SHOPIFY_WEBHOOK_SECRET;
6const WA_ACCESS_TOKEN = process.env.WA_ACCESS_TOKEN;
7const WA_PHONE_NUMBER_ID = process.env.WA_PHONE_NUMBER_ID;
8
9const app = express();
10app.use(express.json({ verify: (req, res, buf) => { req.rawBody = buf; } }));
11
12// 驗證 Shopify Webhook 簽名
13function verifyShopifyWebhook(req) {
14  const hmac = req.headers['x-shopify-hmac-sha256'];
15  const hash = crypto
16    .createHmac('sha256', SHOPIFY_WEBHOOK_SECRET)
17    .update(req.rawBody)
18    .digest('base64');
19  return hmac === hash;
20}
21
22// 發送 WhatsApp 模板訊息
23async function sendWhatsAppTemplate(phone, templateName, parameters) {
24  const response = await fetch(
25    `https://graph.facebook.com/v21.0/${WA_PHONE_NUMBER_ID}/messages`,
26    {
27      method: 'POST',
28      headers: {
29        'Authorization': `Bearer ${WA_ACCESS_TOKEN}`,
30        'Content-Type': 'application/json'
31      },
32      body: JSON.stringify({
33        messaging_product: 'whatsapp',
34        to: phone,
35        type: 'template',
36        template: {
37          name: templateName,
38          language: { code: 'zh_HK' },
39          components: [
40            {
41              type: 'body',
42              parameters: parameters.map(p => ({ type: 'text', text: p }))
43            }
44          ]
45        }
46      })
47    }
48  );
49  return response.json();
50}
51
52app.post('/shopify/orders/create', async (req, res) => {
53  if (!verifyShopifyWebhook(req)) {
54    return res.sendStatus(401);
55  }
56
57  const order = req.body;
58  const phone = order.phone?.replace(/[^0-9]/g, '');
59
60  if (!phone) {
61    console.log('訂單無電話號碼，跳過 WhatsApp 通知');
62    return res.sendStatus(200);
63  }
64
65  // 格式化為國際號碼（香港號碼加 852 前綴）
66  const intlPhone = phone.startsWith('852') ? phone : `852${phone}`;
67
68  try {
69    const result = await sendWhatsAppTemplate(
70      intlPhone,
71      'order_confirmation_hk',
72      [
73        order.customer?.first_name || '顧客',
74        order.name,
75        order.total_price,
76        '2-3 個工作天'
77      ]
78    );
79    console.log('WhatsApp 訊息已發送:', result);
80  } catch (err) {
81    console.error('發送失敗:', err);
82  }
83
84  return res.sendStatus(200);
85});
86
87app.listen(4000, () => console.log('Shopify webhook handler on port 4000'));

1// cart-abandonment.js
2import { setTimeout } from 'timers/promises';
3
4async function handleCartAbandonment(cartData) {
5  // 等待 1 小時
6  await setTimeout(3600000);
7
8  // 檢查訂單是否已完成
9  const orderCompleted = await checkOrderStatus(cartData.checkoutId);
10  if (orderCompleted) {
11    console.log('客戶已完成結帳，無需提醒');
12    return;
13  }
14
15  // 發送購物車提醒
16  await sendWhatsAppTemplate(
17    cartData.phone,
18    'cart_reminder_hk',
19    [
20      cartData.customerName,
21      cartData.itemSummary,
22      `HK$${cartData.totalAmount}`
23    ]
24  );
25}

1function detectLanguage(phoneNumber) {
2  const prefix = phoneNumber.substring(0, 3);
3  const langMap = {
4    '852': 'zh_HK',
5    '886': 'zh_TW',
6    '65': 'en',
7    '60': 'en',
8    '61': 'en'
9  };
10  return langMap[prefix] || langMap[phoneNumber.substring(0, 2)] || 'en';
11}

1# 測試 Webhook 端點是否正常
2curl -X GET "https://your-domain.com/webhook?hub.mode=subscribe&hub.verify_token=my-secret-token&hub.challenge=test123"
3# 預期輸出: test123

1# 正確做法：使用環境變數
2export WA_ACCESS_TOKEN="your-token-here"
3export WA_PHONE_NUMBER_ID="your-phone-id"
4
5# 錯誤做法：硬編碼在程式中（永遠不要這樣做）
6# const token = "EAABx1234...";

1async function handleIncomingMessage(message, senderPhone) {
2  // 1. 查詢客戶歷史訂單
3  const customerOrders = await getOrdersByPhone(senderPhone);
4
5  // 2. 構建 LLM 提示
6  const systemPrompt = `你是 MyStore 的客服助手。
7以下是客戶的訂單記錄：${JSON.stringify(customerOrders)}
8用繁體中文回覆，語氣友善專業。
9如果無法回答，告知客戶將轉接真人客服。`;
10
11  // 3. 呼叫 LLM API
12  const aiResponse = await callLLM(systemPrompt, message.text.body);
13
14  // 4. 透過 WhatsApp 回覆
15  await sendFreeformMessage(senderPhone, aiResponse);
16}