当面付扫码支付与电脑网站扫码支付有什么区别？

结论

可以。单从技术效果来看，把当面付预下单接口返回的 qr_code 生成二维码并显示在电脑网页上，用户可以正常使用支付宝扫码付款。

不过，这种方式并不等于“电脑网站支付”。它们是两种不同的支付产品，在交易场景、接口流程、开通条件、订单关闭机制和运营风控规则等方面可能存在差异：

• 当面付扫码支付主要用于线下收银，典型接口是 alipay.trade.precreate。
• 电脑网站支付主要用于 PC 网站交易，典型接口是 alipay.trade.page.pay。
• 如果交易实际发生在网站上，应优先接入电脑网站支付。不能因为当面付二维码可以显示在网页中，就直接用它替代电脑网站支付。
• 能否长期将当面付用于线上网站，应以商户签约的产品、支付宝开放平台现行规则及审核结果为准。

二维码只是支付入口的展示形式，不能说明两种产品完全相同。

两种支付方式的核心区别

接口支持的参数和页面行为可能会随接口版本、商户签约能力及开放平台规则变化。接入时应以当前官方接口文档为准。

为什么展示当面付二维码也能付款

调用 alipay.trade.precreate 创建订单后，支付宝会返回类似下面的二维码内容：

https://qr.alipay.com/xxxxxxxxxxxxxxxx

这段内容本身就是一个支付入口。商户把它编码成二维码后，无论二维码显示在收银机、广告屏还是电脑浏览器中，支付宝客户端通常都能识别并进入付款流程。

因此，以下流程在技术上可行：

1. 浏览器向商户服务器请求创建订单。
2. 商户服务器调用 alipay.trade.precreate。
3. 服务器取得响应中的 qr_code。
4. 网页将 qr_code 渲染成二维码。
5. 用户使用支付宝扫码付款。
6. 商户服务器通过异步通知或订单查询确认支付结果。
7. 网页轮询商户服务器并更新支付状态。

但这笔交易仍属于“当面付”。二维码显示在网页上，并不会让它变成“电脑网站支付”。

当面付二维码在网页上的实现流程

服务端调用预创建接口时，一般需要提供商户订单号、金额、订单标题和异步通知地址等参数。

下面是简化后的 Java 示例。具体的 SDK 类名和调用方式需要根据项目使用的支付宝 Java SDK 版本调整：

AlipayClient alipayClient = new DefaultAlipayClient(
    gatewayUrl,
    appId,
    merchantPrivateKey,
    "json",
    "UTF-8",
    alipayPublicKey,
    "RSA2"
);

AlipayTradePrecreateRequest request = new AlipayTradePrecreateRequest();
request.setNotifyUrl("https://www.example.com/payment/alipay/notify");

JSONObject bizContent = new JSONObject();
bizContent.put("out_trade_no", "ORDER_202609120001");
bizContent.put("total_amount", "99.00");
bizContent.put("subject", "订单 ORDER_202609120001");

request.setBizContent(bizContent.toJSONString());

AlipayTradePrecreateResponse response = alipayClient.execute(request);

if (response.isSuccess()) {
    String qrCode = response.getQrCode();
    // 将 qrCode 返回给网页，由前端生成二维码
} else {
    // 记录错误码和错误信息，不要向用户暴露私钥等敏感数据
    String code = response.getCode();
    String message = response.getMsg();
}

前端可以通过二维码组件渲染服务端返回的内容：

<div id="qrcode"></div>

<script src="/static/qrcode.min.js"></script>
<script>
  async function createPayment() {
    const response = await fetch("/api/payment/alipay/precreate", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        orderId: "ORDER_202609120001"
      })
    });

    const result = await response.json();

    new QRCode(document.getElementById("qrcode"), {
      text: result.qrCode,
      width: 220,
      height: 220
    });
  }

  createPayment();
</script>

网页还需要查询商户系统中的订单状态，不能把“二维码已生成”当作支付成功：

const timer = setInterval(async () => {
  const response = await fetch(
    "/api/orders/ORDER_202609120001/payment-status"
  );
  const result = await response.json();

  if (result.status === "PAID") {
    clearInterval(timer);
    window.location.href =
      "/payment/success?orderId=ORDER_202609120001";
  }

  if (result.status === "CLOSED") {
    clearInterval(timer);
    window.location.href =
      "/payment/failed?orderId=ORDER_202609120001";
  }
}, 2000);

这里查询的是商户服务端保存的支付状态。服务端可以根据异步通知更新订单，也可以在需要时调用 alipay.trade.query 核实交易状态。

电脑网站支付的典型流程

电脑网站支付通常使用 alipay.trade.page.pay 创建支付请求。服务端生成支付宝收银台请求后，再让浏览器跳转或提交表单。

简化后的 Java 示例：

AlipayClient alipayClient = new DefaultAlipayClient(
    gatewayUrl,
    appId,
    merchantPrivateKey,
    "json",
    "UTF-8",
    alipayPublicKey,
    "RSA2"
);

AlipayTradePagePayRequest request = new AlipayTradePagePayRequest();
request.setNotifyUrl("https://www.example.com/payment/alipay/notify");
request.setReturnUrl("https://www.example.com/payment/alipay/return");

JSONObject bizContent = new JSONObject();
bizContent.put("out_trade_no", "ORDER_202609120002");
bizContent.put("total_amount", "99.00");
bizContent.put("subject", "订单 ORDER_202609120002");
bizContent.put("product_code", "FAST_INSTANT_TRADE_PAY");

request.setBizContent(bizContent.toJSONString());

AlipayTradePagePayResponse response = alipayClient.pageExecute(request);

if (response.isSuccess()) {
    String paymentForm = response.getBody();
    // 将 paymentForm 输出给浏览器，由浏览器提交到支付宝收银台
}

不同版本 SDK 中，pageExecute 的返回类型或返回形式可能不同。例如，有些 SDK 会直接返回 HTML 表单字符串，实际接入时应以对应 SDK 的文档和方法签名为准。

电脑网站支付通常按以下流程完成：

1. 用户在网站提交订单。
2. 商户服务器生成 alipay.trade.page.pay 请求。
3. 浏览器进入支付宝收银台。
4. 用户登录、扫码或选择收银台支持的其他付款方式。
5. 支付宝通过 notify_url 通知商户服务器。
6. 浏览器通过 return_url 返回商户页面。
7. 商户根据服务端保存的订单状态显示最终结果。

return_url 只用于改善页面跳转体验，不能作为判断支付成功的唯一依据。用户付款后可能直接关闭页面，也可能伪造同步请求参数。订单是否支付成功，应以验签后的异步通知或主动查询结果为准。

应该选择哪一种

如果交易发生在门店、收银台或自助终端等线下环境，当面付扫码支付通常更合适。商户可以自行控制二维码展示、倒计时、收银状态和设备交互。

如果用户在 PC 网站上下单并付款，应优先使用电脑网站支付。它更适合网站收银台、同步返回和线上交易场景，也符合该产品本身的定位。

如果项目已经开通当面付，准备临时在网页上展示二维码，需要先确认：

1. 商户签约的当面付产品是否允许用于当前业务场景。
2. 商品或服务是否属于已经申报的经营范围。
3. 二维码有效期和订单关闭策略是否满足网页支付需求。
4. 系统是否已经实现异步通知、验签、主动查询和重复通知处理。
5. 是否可以接受用户无法自动返回原网页，需要通过轮询显示支付结果。
6. 退款、对账和交易数据是否会按照当面付渠道处理。

不能只凭“二维码可以被扫描”就认定两种产品能够互相替代。技术上可以付款，不代表产品规则、费率、风控要求和签约范围完全一致。

接入时必须注意的问题

不要在浏览器直接调用支付宝接口

应用私钥必须保存在服务端。签名、验签和交易创建都应由服务端完成，不能将私钥、签名逻辑或敏感配置放进 JavaScript。

异步通知必须验签

收到 notify_url 请求后，至少需要完成以下检查：

• 使用支付宝公钥验证签名。
• 核对 app_id。
• 核对 out_trade_no。
• 核对 total_amount。
• 核对收款方信息。
• 判断交易状态是否符合业务要求。
• 对订单更新执行幂等控制。

不能因为通知参数中出现了 TRADE_SUCCESS，就直接修改订单状态。

二维码内容不能由前端拼接

前端只能展示服务端从支付宝接口取得的 qr_code。不要自行构造二维码链接，也不能允许前端直接提交实际支付金额。

服务端应根据订单中的商品和价格重新计算应付金额：

Order order = orderService.getByOrderId(orderId);

BigDecimal payableAmount = pricingService.calculate(order);

if (order.isPaid()) {
    throw new IllegalStateException("订单已支付");
}

商户订单号必须唯一

out_trade_no 在商户系统中必须保持唯一。同一笔业务订单重复发起支付时，需要明确采用哪种处理方式：复用原支付单、查询原交易，或者关闭旧交易后创建新的支付单。否则可能出现支付金额不一致或订单状态混乱。

网页轮询不能代替服务端确认

前端轮询的作用只是及时刷新页面。即使用户关闭网页，服务端仍应通过异步通知完成订单处理。

如果异步通知延迟或交易状态存在疑问，可以调用：

alipay.trade.query

取得查询结果后，仍需校验订单号、金额和交易状态。查询接口正常返回，不等于支付已经成功。

设置超时和关单机制

二维码不应永久有效。业务系统需要设置支付倒计时，并在超时后停止前端轮询。是否需要调用：

alipay.trade.close

要根据订单状态和具体接口规则判断。关单前应再次确认支付状态，避免付款和关单同时发生，造成业务状态不一致。

最终建议

在网页中显示当面付预订单二维码，可以实现“用户在电脑上看到二维码，再用手机扫码付款”的交互。但这仍是当面付交易，只是二维码显示在网页中，并没有转换成电脑网站支付。

正式接入时，应根据实际业务场景选择产品：

• 线下收银、自助设备：使用 alipay.trade.precreate。
• PC 网站在线交易：使用 alipay.trade.page.pay。
• 已有特殊签约或统一收银方案：按照对应产品文档和签约能力实施。

如果只是验证功能，当面付二维码可以完成扫码付款。如果要用于生产环境，还需确认签约范围和场景合规性，并妥善处理异步通知、验签、订单幂等、超时关单和对账。

备注：内容仅供参考。