PaymentRequest.show()报错：需瞬时用户激活或委托支付请求权限

你遇到的这个错误是浏览器安全机制导致的——PaymentRequest.show()必须由用户主动交互触发（比如点击按钮、触摸屏幕这类操作），不能在页面加载完成后自动执行，目的是避免恶意网站未经用户许可就弹出支付界面。

你的代码里直接在页面加载时调用了paymentRequest.show()，违反了这个安全限制，所以触发了报错。

修改方案 #

添加一个用户可点击按钮，把支付请求的显示逻辑放到按钮的点击事件回调里：

完整代码示例

<!-- 添加触发支付的按钮 -->
<button id="payButton">发起支付</button>

<script>
if (window.PaymentRequest) {
  // 提前创建支付请求对象（这一步可在页面加载时完成）
  const methodData = [{
    supportedMethods: ['basic-card'],
    data: {
      supportedNetworks: ['visa', 'mastercard'],
      supportedTypes: ['debit', 'credit']
    }
  }];

  const details = {
    total: {
      label: 'Total amount',
      amount: {
        currency: 'USD',
        value: '50.00'
      }
    }
  };

  const paymentRequest = new PaymentRequest(methodData, details);

  // 在用户点击按钮时调用show()
  document.getElementById('payButton').addEventListener('click', async () => {
    try {
      const response = await paymentRequest.show();
      console.log("Response: ", response);
      // 这里可添加支付响应处理逻辑，比如确认支付
      // response.complete('success');
    } catch (error) {
      console.error('Payment request failed: ', error);
    }
  });
} else {
  console.error('Payment Request API is not supported');
}
</script>

关键说明 #

• 只有在用户主动触发的事件（如click、touchstart）回调中调用PaymentRequest.show()，才符合浏览器安全要求
• 支付请求对象的创建可以提前完成，无需等到用户交互时才创建
• 若需重复发起支付，注意PaymentRequest对象调用show()后会进入已使用状态，可能需要重新创建（取决于浏览器实现）

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