支付宝 App 扫码打开网页后调用支付需接入哪个 SDK？

2026-10-10支付阿杰

明确结论

这种场景通常应接入支付宝网页端的 JSAPI 支付能力。前端在支付宝 App 内通过 AlipayJSBridge 调用 tradePay，服务端则使用支付宝开放平台服务端 SDK 调用交易创建接口，例如 alipay.trade.create。

网页不需要接入 Android 或 iOS 支付宝客户端支付 SDK。这类原生 SDK 适用于商户自己的 App，不适用于支付宝 App WebView 中运行的普通网页。

调用流程

完整流程通常如下：

用户使用支付宝 App 扫码进入商户网页。
网页确认当前环境支持 AlipayJSBridge。
用户点击支付按钮。
网页请求商户服务端创建订单。
商户服务端调用支付宝交易创建接口，取得支付宝交易号 trade_no。
网页调用 AlipayJSBridge.call('tradePay')，拉起支付宝收银台。
商户服务端接收支付宝异步通知，并主动查询订单状态。
服务端确认交易成功后，更新业务订单。

其中，前端负责拉起支付，服务端负责创建交易、签名、验签和确认支付结果。

前端调用示例

下面是支付宝 App 内网页调用支付的基本写法：

<button id="payButton">立即支付</button>

<script>
function ready(callback) {
  if (window.AlipayJSBridge) {
    callback();
    return;
  }

  document.addEventListener('AlipayJSBridgeReady', callback, false);
}

document.getElementById('payButton').addEventListener('click', async function () {
  try {
    // 向商户服务端创建订单
    const response = await fetch('/api/alipay/create-order', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        productId: 'PRODUCT_001'
      })
    });

    const result = await response.json();

    if (!result.tradeNo) {
      throw new Error(result.message || '创建支付宝订单失败');
    }

    ready(function () {
      AlipayJSBridge.call('tradePay', {
        tradeNO: result.tradeNo
      }, function (payResult) {
        console.log('支付宝支付返回结果：', payResult);

        // 此处只能用于更新页面提示，不能作为最终支付依据
        // 应继续向商户服务端查询订单状态
        queryOrderStatus();
      });
    });
  } catch (error) {
    console.error(error);
    alert('支付发起失败，请稍后重试');
  }
});

async function queryOrderStatus() {
  const response = await fetch('/api/orders/current/status');
  const result = await response.json();

  if (result.status === 'PAID') {
    window.location.href = '/pay/success';
  }
}
</script>

tradePay 的回调只表示客户端调用结果。用户中断操作、网络异常或页面切换，都可能导致前端结果与实际交易状态不一致，因此不能直接根据该回调发货或开通服务。

服务端创建交易示例

以下 Java 代码只演示核心结构。具体的依赖坐标、接口字段和用户标识字段，应以当前支付宝开放平台文档及已签约产品为准。

import com.alipay.api.AlipayApiException;
import com.alipay.api.AlipayClient;
import com.alipay.api.DefaultAlipayClient;
import com.alipay.api.domain.AlipayTradeCreateModel;
import com.alipay.api.request.AlipayTradeCreateRequest;
import com.alipay.api.response.AlipayTradeCreateResponse;

public class AlipayOrderService {

    private final AlipayClient alipayClient = new DefaultAlipayClient(
        "https://openapi.alipay.com/gateway.do",
        "YOUR_APP_ID",
        "YOUR_APP_PRIVATE_KEY",
        "json",
        "UTF-8",
        "ALIPAY_PUBLIC_KEY",
        "RSA2"
    );

    public String createOrder(
        String outTradeNo,
        String subject,
        String totalAmount,
        String buyerId
    ) throws AlipayApiException {

        AlipayTradeCreateModel model = new AlipayTradeCreateModel();
        model.setOutTradeNo(outTradeNo);
        model.setSubject(subject);
        model.setTotalAmount(totalAmount);
        model.setBuyerId(buyerId);

        AlipayTradeCreateRequest request = new AlipayTradeCreateRequest();
        request.setBizModel(model);
        request.setNotifyUrl("https://www.example.com/api/alipay/notify");

        AlipayTradeCreateResponse response = alipayClient.execute(request);

        if (!response.isSuccess()) {
            throw new IllegalStateException(
                "创建支付宝交易失败：" +
                response.getCode() + " " +
                response.getSubCode() + " " +
                response.getSubMsg()
            );
        }

        return response.getTradeNo();
    }
}

服务端返回给网页的数据可以很简单：

{
  "tradeNo": "支付宝返回的交易号"
}

私钥、支付宝公钥和应用配置必须保存在服务端，不能写入 HTML 或 JavaScript。

支付用户标识的获取

使用 alipay.trade.create 创建交易时，通常需要关联当前支付宝用户。常见做法是在网页进入支付流程前完成支付宝网页授权，再由服务端使用授权码换取用户标识，用于创建交易。

不同应用类型和接口使用的字段可能不同，例如 buyer_id、buyer_open_id。具体选择应依据应用接入模式、开放平台接口定义和当前产品权限，不能把手机号、登录名或前端自行生成的值当作支付宝用户标识。

用户授权流程和授权域名也需要提前在支付宝开放平台完成配置。

接入时需要注意

先在支付宝开放平台创建应用，并开通或签约适用于当前业务的支付产品。
网页应通过 HTTPS 提供服务，并按平台要求配置授权域名、回调地址等信息。
商户订单号 out_trade_no 必须唯一。对于重复点击，订单创建操作应具备幂等性。
金额和商品信息必须由服务端根据业务数据生成，不能直接信任前端提交的金额。
支付结果应以服务端异步通知和主动查询结果为准。
收到异步通知后必须验签，同时校验 app_id、商户订单号、金额、交易状态等字段。
前端调用前应等待 AlipayJSBridgeReady，否则页面加载较快时，可能遇到对象尚未注入的问题。
如果网页还要支持普通手机浏览器或微信等环境，需要单独设计降级方案。支付宝 App 内的 AlipayJSBridge 无法直接用于普通浏览器。
选择 alipay.trade.wap.pay 时，通常会进入手机网站支付的页面跳转流程。如果网页确定运行在支付宝 App 内，并希望直接拉起收银台，通常更适合使用 JSAPI 配合交易创建接口。

这个需求并不是单独选择某个前端“支付 SDK”，而是组合使用 支付宝 JSAPI 和支付宝服务端 SDK：网页通过 AlipayJSBridge.tradePay 发起支付，服务端调用支付宝开放接口并处理支付结果。