AlipayTradePagePayRequest成功但未跳转支付页面

2026-10-24支付阿杰

结论

AlipayTradePagePayResponse 返回 <form>，只能说明服务端已经生成了支付宝电脑网站支付请求，浏览器并不一定会自动跳转。

最常见的原因是前端通过 Ajax、Axios 或 Fetch 调用支付接口。服务端返回的表单只会作为响应数据交给前端，既不会替换当前页面，也不会自动执行表单里的提交脚本。因此，即使把 qr_pay_mode 设置为 "2"，页面也不会跳转。

qr_pay_mode 控制的是支付宝收银台的展示方式，不负责发起页面跳转。要进入支付宝收银台，浏览器必须加载并提交 SDK 返回的 <form>。

推荐处理方式

让浏览器直接访问后端支付接口，不要通过 Ajax 请求。例如：

window.location.href = "/pay/alipay?orderCode=ORDER_001";

如果需要在新窗口中打开收银台，可以使用：

window.open("/pay/alipay?orderCode=ORDER_001", "_blank");

后端仍然将 pageExecute() 返回的完整表单写入 HTTP 响应：

AlipayTradePagePayRequest request = new AlipayTradePagePayRequest();

request.setReturnUrl(aliPayConfig.getReturnUrl());
request.setNotifyUrl(aliPayConfig.getNotifyUrl());

AlipayTradePagePayModel model = new AlipayTradePagePayModel();
model.setOutTradeNo(result.getOrderCode());
model.setTotalAmount(String.valueOf(result.getPrice()));
model.setSubject(result.getRemark());
model.setProductCode("FAST_INSTANT_TRADE_PAY");
model.setQrPayMode("2");

request.setBizModel(model);

try {
    AlipayTradePagePayResponse response = alipayClient.pageExecute(request);

    if (!response.isSuccess()) {
        throw new IllegalStateException(
            "生成支付宝支付请求失败，code=" + response.getCode()
                + ", msg=" + response.getMsg()
                + ", subCode=" + response.getSubCode()
                + ", subMsg=" + response.getSubMsg()
        );
    }

    httpResponse.setCharacterEncoding("UTF-8");
    httpResponse.setContentType("text/html;charset=UTF-8");
    httpResponse.getWriter().write(response.getBody());
    httpResponse.getWriter().flush();
} catch (AlipayApiException | IOException e) {
    throw new RuntimeException("发起支付宝网页支付失败", e);
}

浏览器打开该接口后，会加载返回的 HTML，并提交其中的表单，随后进入支付宝收银台。

如果必须通过 Ajax 调用

前端需要把返回的表单插入页面，再显式调用 submit()。不要依赖 <script> 在 innerHTML 中自动运行，因为浏览器通常不会执行通过 innerHTML 插入的脚本。

const response = await fetch("/pay/alipay/create", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    orderCode: "ORDER_001"
  })
});

if (!response.ok) {
  throw new Error("创建支付请求失败");
}

const html = await response.text();
const container = document.createElement("div");
container.style.display = "none";
container.innerHTML = html;

document.body.appendChild(container);

const form = container.querySelector("form");
if (!form) {
  throw new Error("支付宝返回内容中未找到支付表单");
}

form.submit();

使用 Axios 时，需要确保响应按文本接收：

const { data } = await axios.post(
  "/pay/alipay/create",
  { orderCode: "ORDER_001" },
  { responseType: "text" }
);

const container = document.createElement("div");
container.style.display = "none";
container.innerHTML = data;
document.body.appendChild(container);

const form = container.querySelector("form");
if (!form) {
  throw new Error("支付宝支付表单不存在");
}

form.submit();

这种写法只适用于受信任后端返回的表单，不能用来插入任意外部 HTML。

还需要检查的代码问题

示例中声明了两个同名变量：

AlipayTradeWapPayRequest request = new AlipayTradeWapPayRequest();
AlipayTradePagePayRequest request = new AlipayTradePagePayRequest();

这两行不能出现在同一作用域中，否则 Java 会报变量重复定义。电脑网站支付只需保留：

AlipayTradePagePayRequest request = new AlipayTradePagePayRequest();

手机网站支付则使用：

AlipayTradeWapPayRequest request = new AlipayTradeWapPayRequest();

不要混用这两种请求类型：

AlipayTradePagePayRequest：电脑网站支付。
AlipayTradeWapPayRequest：手机网站支付。

`qr_pay_mode` 的作用

qr_pay_mode 是 AlipayTradePagePayModel 的业务参数，由后端传给支付宝，前端不需要单独设置。它只影响收银台页面的展示方式，不决定浏览器是否跳转。

所以，即使下面的设置没有问题：

model.setQrPayMode("2");

也无法解决 Ajax 响应不会自动导航的问题。首先要确保浏览器真正加载并提交了返回的 <form>。

如果没有强制要求二维码的展示方式，可以暂时去掉这个参数，让支付宝采用默认展示逻辑，以排查参数兼容性问题：

// model.setQrPayMode("2");

其他排查项

如果浏览器已经提交表单，却仍然没有正常进入收银台，可以继续检查：

打开浏览器开发者工具的 Network 面板，确认是否向支付宝网关发出了请求。
查看控制台是否出现 CSP、跨域、弹窗拦截或禁止内联脚本等错误。
确认 gateWay 与应用环境一致。沙箱应用使用沙箱网关，正式应用使用正式网关。
确认 appId、应用私钥、支付宝公钥、charset 和 signType 的配置相互匹配。
检查应用是否具备电脑网站支付能力，相关产品是否已经签约并生效。
确保 out_trade_no 唯一、total_amount 格式合法，并且 subject 不为空。
notifyUrl 必须是支付宝服务器能够访问的地址，不能使用 localhost 或只能从内网访问的地址。
不要把 response.isSuccess() 当作支付成功。它最多表示当前接口请求处理成功。最终支付结果应以验签后的异步通知或主动查询结果为准。

处理时只需把握一点：要么让浏览器直接打开返回表单的后端接口，要么由前端显式提交返回的 <form>。仅仅收到表单字符串，不会触发支付宝页面跳转。