支付宝支付网页端集成

wen java案例 2026-07-27 2

本文目录导读：

支付宝支付网页端集成

集成前的准备工作
服务端集成（核心步骤）
前端集成（展示方式）
测试环境（沙箱环境）
安全性注意事项
常见问题

在网页端集成支付宝支付,主要分为 电脑网站支付 和 手机网站支付 两种场景，以下是基于官方文档的标准化集成流程，推荐使用 官方 SDK 或 服务端 API 方式完成。

集成前的准备工作

在写代码之前,必须先完成以下步骤：

注册企业/个体工商户账号：支付宝商家平台
创建应用：进入支付宝开放平台 -> 控制台 -> 创建应用（选择“网页/移动应用”）
配置密钥：使用 RSA2 （SHA256）密钥，生成应用公钥并上传
开通产品：在应用详情页“添加能力”中，找到 电脑网站支付 或 手机网站支付 并签约
获取网关/回调域名：设置授权回调地址（如 https://yourdomain.com/alipay/return）
获取支付宝公钥：上传应用公钥后，系统会生成支付宝公钥，需保存到服务端

服务端集成（核心步骤）

网页支付必须在服务端完成，直接在前端调用支付宝接口会泄露密钥，极其危险。

1 使用官方 SDK（推荐，语言示例：Node.js/Java）

Node.js 版（使用 alipay-sdk）

// 1. 安装SDK
// npm install alipay-sdk
const AlipaySdk = require('alipay-sdk').default;
// 2. 配置SDK
const alipaySdk = new AlipaySdk({
  appId: '你的应用APP_ID',           // 在开放平台获取
  privateKey: fs.readFileSync('./private_key.pem', 'ascii'), // 应用私钥文件路径
  alipayPublicKey: '支付宝公钥',     // 从开放平台获取
  gateway: 'https://openapi.alipay.com/gateway.do', // 正式环境地址
  signType: 'RSA2'                  // 签名算法
});
// 3. 创建支付请求（服务端API）
async function createAlipayOrder(orderData) {
  try {
    const result = await alipaySdk.exec('alipay.trade.page.pay', {  // 电脑网站支付
      bizContent: {
        out_trade_no: orderData.orderId,      // 商户订单号
        product_code: 'FAST_INSTANT_TRADE_PAY', 
        total_amount: orderData.amount,       // 金额，单位元
        subject: orderData.subject,           // 商品标题
        body: orderData.body,                 // 商品描述
        // 支付成功后的同步回调地址（前端跳转）
        return_url: 'https://yourdomain.com/alipay/return',
        // 异步通知地址（后端接收支付结果）
        notify_url: 'https://yourdomain.com/alipay/notify'
      }
    });
    // 返回的是表单HTML字符串（电脑网站）或URL（手机网站）
    return result; 
  } catch (error) {
    console.error('创建订单失败:', error);
    throw error;
  }
}

Java 版（使用官方 SDK）

// 1. 引入SDK（pom.xml）
// <dependency>
//     <groupId>com.alipay.sdk</groupId>
//     <artifactId>alipay-sdk-java</artifactId>
//     <version>4.38.10.ALL</version>
// </dependency>
// 2. 服务端接口
@RequestMapping("/createOrder")
public String createOrder(HttpServletRequest request, HttpServletResponse response) throws Exception {
    AlipayClient alipayClient = new DefaultAlipayClient(
        "https://openapi.alipay.com/gateway.do",
        "你的APP_ID",
        "你的应用私钥",
        "json",
        "utf-8",
        "支付宝公钥",
        "RSA2"
    );
    AlipayTradePagePayRequest alipayRequest = new AlipayTradePagePayRequest();
    alipayRequest.setReturnUrl("https://yourdomain.com/alipay/return");
    alipayRequest.setNotifyUrl("https://yourdomain.com/alipay/notify");
    alipayRequest.setBizContent("{" +
        "\"out_trade_no\":\"20210817010101001\"," +
        "\"product_code\":\"FAST_INSTANT_TRADE_PAY\"," +
        "\"total_amount\":88.88," +
        "\"subject\":\"测试商品\"," +
        "\"body\":\"商品描述\"" +
        "}");
    String form = alipayClient.pageExecute(alipayRequest).getBody(); // 获取自动提交表单
    return form;  // 返回给前端，直接展示即可自动跳转
}

2 处理回调（重要）

同步回调（return_url）

用户支付成功后,支付宝会跳转到该地址
只能做展示成功页面使用，不能用于更新订单状态（用户可能关闭页面）
需验证签名和商户订单号

异步回调（notify_url）

唯一可靠的支付结果通知
支付宝会发送 POST 请求，需要做以下处理：

// Node.js 异步通知处理示例
app.post('/alipay/notify', async (req, res) => {
    const params = req.body;
    // 1. 验证签名（必须）
    const isValid = alipaySdk.checkNotifySign(params);
    if (!isValid) {
        return res.send('failure');
    }
    // 2. 验证商户订单号 out_trade_no 是否与数据库一致
    // 3. 检查 trade_status 是否为 TRADE_SUCCESS
    if (params.trade_status === 'TRADE_SUCCESS') {
        // 4. 幂等性校验：防止重复通知导致的重复处理
        // 5. 更新订单状态为已支付
        // 6. 务必返回 'success'（小写）
        return res.send('success');
    }
    return res.send('failure');
});

前端集成（展示方式）

前端获取到后端返回的支付数据后,根据类型做不同处理：

1 电脑网站支付（返回表单HTML）

<!-- 后端返回的 HTML 字符串，直接渲染到页面内 -->
<script>
  // 假设后端返回的是 form 表单字符串
  const payHtml = `<form action="..." method="POST" id="alipay-submit">
    ...
    <input type="submit" value="去支付">
  </form>`;
  document.getElementById('pay-container').innerHTML = payHtml;
  // 或自动提交
  document.querySelector('#alipay-submit form').submit();
</script>

2 手机网站支付（返回跳转链接）

// 后端返回的是支付链接 URL
fetch('/api/create-alipay-order', { method: 'POST' })
  .then(res => res.json())
  .then(data => {
    // data.payUrl 是支付宝返回的支付页面 URL
    // 方式1：直接跳转
    window.location.href = data.payUrl; 
    // 方式2：新建窗口（防止用户误关闭）
    window.open(data.payUrl, '_blank');
  });