支付宝支付网页端集成

本文目录导读：

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

在网页端集成支付宝支付,主要分为 电脑网站支付 和 手机网站支付 两种场景，以下是基于官方文档的标准化集成流程，推荐使用 官方 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');
  });

测试环境（沙箱环境）

支付宝提供沙箱环境用于调试：

• 沙箱地址：https://openapi.alipaydev.com/gateway.do
• 沙箱买家账号：在支付宝沙箱应用页面获取
• 沙箱支付密码：通常是 111111
• APP_ID 使用沙箱应用的 ID
• 支付宝公钥使用沙箱环境的公钥

测试流程

1. 在开放平台 -> 沙箱应用，获取沙箱 APP_ID 和密钥
2. 后端代码中切换网关地址到沙箱
3. 使用沙箱买家账号完成支付

安全性注意事项

1. 密钥管理：私钥绝对不能暴露在前端代码中
2. 签名验证：所有回调必须验签
3. 金额校验：以实际支付金额为准，不能信任前端传入的金额
4. 幂等处理：异步通知可能重复发送，需做去重
5. 异常处理：支付超时、用户取消等情况

常见问题

Q：用户完成支付后如何跳转到自己的网站？
A：通过 return_url 参数设置回调地址

Q：如何处理并发情况下订单状态更新冲突？
A：使用数据库乐观锁（如 version 字段）或 redis 分布式锁

Q：支付金额单位是元还是分？
A：支付宝接口中金额单位为元，保留两位小数

集成过程中如果遇到具体问题,建议先查阅 支付宝开放平台文档 中的“电脑网站支付”或“手机网站支付”对应章节。