在ASP.NET Core中使用PaymentRequest API时遇事件响应错误

这个错误的核心原因是你的Service Worker（worker.js）没有监听并响应paymentrequest事件，浏览器触发支付请求后无法得到处理结果，因此抛出AbortError。以下是具体修复步骤：

1. 完善Service Worker的事件监听逻辑 #

修改worker.js文件，添加paymentrequest事件的处理代码，示例如下：

self.addEventListener('paymentrequest', async (event) => {
  // 获取支付请求中的方法数据和金额详情
  const { methodData, total } = event;
  
  // 这里可替换为实际业务的支付处理逻辑（比如调用后端支付接口）
  const paymentResponse = {
    methodName: methodData[0].supportedMethods,
    details: {
      transactionId: `txn_${Date.now()}_${Math.random().toString(16).slice(2)}`
    }
  };
  
  // 返回支付响应给浏览器，完成请求处理
  event.respondWith(Promise.resolve(paymentResponse));
});

2. 验证支付清单与PWA配置 #

• 支付清单（payment-manifest.json）：确保格式正确，default_applications指向你的PWA manifest路径，supported_origins包含当前站点域名：

{
  "default_applications": ["/manifest.json"],
  "supported_origins": ["https://localhost:7208"]
}

• PWA Manifest（manifest.json）：确认包含name、start_url、scope等必要字段，且Service Worker的注册路径正确。
• 前端Service Worker注册：确保页面中已正确注册Service Worker，示例代码：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      const registration = await navigator.serviceWorker.register('/worker.js');
      console.log('Service Worker注册成功:', registration);
    } catch (error) {
      console.error('Service Worker注册失败:', error);
    }
  });
}

3. 确认后端HEAD请求处理 #

你的后端HEAD请求处理代码逻辑正确，只需确保返回的Link头路径与实际payment-manifest.json的部署路径一致：

app.MapMethods("/pay", [HttpMethods.Head], async (context) =>
{
    context.Response.Headers["Link"] = "</pay/payment-manifest.json>; rel=\"payment-method-manifest\"";
});

完成以上修改后，重新部署并测试：点击支付按钮后，浏览器会触发Service Worker中的paymentrequest事件，处理完成后返回响应，即可正常完成PaymentRequest流程。

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