如何用JS/JQUERY接收Shopify订单成功Webhook并搭建监听器？

我来帮你一步步搞定在One.com上接收Shopify订单Webhook的事儿——其实核心就是搭建一个能接收POST请求的后端端点，再处理保存数据。先给你理清楚关键逻辑：前端JS/jQuery没法直接接收Shopify的Webhook，因为Webhook是Shopify服务器主动发请求到你的服务器，前端页面只能处理浏览器发起的请求，没法监听服务器端的请求。所以必须用后端语言写接收端点，前端可以通过调用后端接口查看数据。

下面给你两个适配One.com环境的实操方案：

这是最省心的方案，因为One.com的主机默认就支持PHP，不用额外折腾环境配置。

步骤1：创建接收Webhook的PHP文件 #

在你的网站根目录（比如public_html）下新建一个文件，命名为shopify-webhook-handler.php，内容如下：

<?php
// 第一步：验证Shopify的Webhook签名（必须做，防止恶意请求）
$secret = '你的Shopify Webhook密钥'; // 从Shopify后台Webhook设置里复制
$hmac_header = $_SERVER['HTTP_X_SHOPIFY_HMAC_SHA256'];
$request_body = file_get_contents('php://input');
$calculated_hmac = base64_encode(hash_hmac('sha256', $request_body, $secret, true));

// 签名验证不通过直接返回403
if (!hash_equals($hmac_header, $calculated_hmac)) {
    http_response_code(403);
    die('Invalid signature');
}

// 签名验证通过，解析订单数据
$order_data = json_decode($request_body, true);

// 临时保存数据：写入服务器本地JSON文件
$file_path = 'shopify-orders-temp.json';
// 先读取已有数据，文件不存在则创建空数组
$existing_data = file_exists($file_path) ? json_decode(file_get_contents($file_path), true) : [];
$existing_data[] = $order_data;
// 格式化写入文件，方便查看
file_put_contents($file_path, json_encode($existing_data, JSON_PRETTY_PRINT));

// 返回Shopify要求的响应（必须返回200-299状态码，否则会不断重试）
http_response_code(200);
echo 'Webhook received successfully';
?>

步骤2：在Shopify后台配置Webhook #

• 登录Shopify后台，进入设置 > 通知 > Webhooks
• 点击创建Webhook，选择你需要的事件（比如「订单已创建」对应订单成功场景）
• 格式选JSON，URL填你的One.com域名加上PHP文件路径，比如https://你的域名.com/shopify-webhook-handler.php
• 复制页面上的Webhook密钥，替换到PHP代码里的$secret变量

步骤3：测试与权限设置 #

• 在Shopify后台点击Webhook旁的「发送测试通知」，之后去你的服务器上查看shopify-orders-temp.json文件，应该能看到测试订单数据
• 注意：要确保shopify-orders-temp.json文件有写入权限，One.com可以通过FTP或控制面板把文件权限设为644或755

如果你更熟悉JS，可以用Node.js+Express实现，但需要先在One.com控制面板开通Node.js支持。

步骤1：创建Node.js项目 #

在网站目录下新建server.js：

const express = require('express');
const bodyParser = require('body-parser');
const crypto = require('crypto');
const fs = require('fs');

const app = express();
const port = 3000; // 具体端口以One.com Node配置为准
const secret = '你的Shopify Webhook密钥';

// 解析JSON请求体
app.use(bodyParser.json());

// Webhook接收端点
app.post('/shopify-webhook', (req, res) => {
    // 验证Shopify签名
    const hmac = req.get('X-Shopify-Hmac-Sha256');
    const body = JSON.stringify(req.body);
    const calculatedHmac = crypto.createHmac('sha256', secret)
        .update(body, 'utf8')
        .digest('base64');

    if (!crypto.timingSafeEqual(Buffer.from(hmac), Buffer.from(calculatedHmac))) {
        return res.status(403).send('Invalid signature');
    }

    // 临时保存数据到本地JSON文件
    const orderData = req.body;
    const filePath = 'shopify-orders-temp.json';
    let existingData = [];
    if (fs.existsSync(filePath)) {
        existingData = JSON.parse(fs.readFileSync(filePath, 'utf8'));
    }
    existingData.push(orderData);
    fs.writeFileSync(filePath, JSON.stringify(existingData, null, 2));

    res.status(200).send('Webhook received');
});

app.listen(port, () => {
    console.log(`Webhook server running on port ${port}`);
});

然后新建package.json添加依赖：

{
  "dependencies": {
    "express": "^4.18.2",
    "body-parser": "^1.20.2"
  }
}

运行npm install安装依赖后，按照One.com的Node部署说明设置启动脚本即可。

步骤2：配置Shopify Webhook #

URL填https://你的域名.com/shopify-webhook（如果端口不是80/443，需加上端口号，One.com一般会自动反向代理）

如果需要在前端查看保存的订单数据，可以写一个简单的页面，用AJAX请求后端接口：

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Shopify订单数据</h1>
    <div id="orders-container"></div>

    <script>
        $(document).ready(function() {
            // 请求后端获取订单数据
            $.get('get-orders.php', function(data) {
                const orders = JSON.parse(data);
                let htmlContent = '';
                orders.forEach(order => {
                    htmlContent += `<div style="border:1px solid #eee; padding:10px; margin:10px 0;">
                        <h3>订单号：${order.name}</h3>
                        <p>总金额：${order.total_price} ${order.currency}</p>
                    </div>`;
                });
                $('#orders-container').html(htmlContent);
            });
        });
    </script>
</body>
</html>

再新建get-orders.php返回数据：

<?php
$file_path = 'shopify-orders-temp.json';
if (file_exists($file_path)) {
    header('Content-Type: application/json');
    echo file_get_contents($file_path);
} else {
    echo json_encode([]);
}
?>

• 签名验证必须做：否则任何人都可以伪造请求发送虚假订单数据
• 响应状态码：Shopify要求端点返回200-299状态码，否则会在48小时内不断重试Webhook
• 数据存储优化：如果订单量较大，建议用One.com提供的MySQL数据库替代本地文件，避免文件体积过大或读写问题

内容的提问来源于stack exchange，提问作者rub3eeen