Web前端 支付集成

微信支付接入指南：JSAPI、H5与小程序

详解微信支付的三种核心场景：公众号支付(JSAPI)、H5支付及小程序支付的开发流程与关键配置。

本文总结了前端开发中常见的微信支付三种接入场景及其核心流程。

1. 公众号支付 (JSAPI)

适用场景：微信内置浏览器、微信客户端扫码、企业微信网页。

核心流程

  1. 网页授权获取 Code： 引导用户访问微信授权链接，获取 code。
    1

    https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_base&state=123#wechat_redirect
  2. 获取 OpenID： 后端使用 appid、secret 和前端传来的 code 换取用户的 openid。
  3. 统一下单： 后端调用微信统一下单接口，获取支付参数（timeStamp, nonceStr, package, signType, paySign）。
  4. 唤起支付： 前端使用 WeixinJSBridge.invoke 或 wx.chooseWXPay 调起支付窗口。

⚠️ 注意事项

  • 授权域名：redirect_uri 的域名必须在微信公众平台的“网页授权域名”中配置。
  • 支付目录：支付页面的路径必须在微信商户平台配置“JSAPI支付授权目录”。
  • AppID：此处使用公众号的 AppID。

2. H5 支付

适用场景：外部移动端浏览器（如 Safari, Chrome）、App 内嵌 H5（非微信环境）。

核心流程

  1. 后端下单： 后端调用微信统一下单接口（交易类型为 MWEB）。
  2. 获取跳转链接： 接口返回 mweb_url（即原文中的 pay_url）。
  3. 跳转支付： 前端直接跳转该链接，微信会中间页唤起微信客户端进行支付。
    1
2

    // 示例：跳转并指定支付后的回调页
window.location.href = mweb_url + '&redirect_url=' + encodeURIComponent(window.location.href);

⚠️ 注意事项

  • Referer 校验：微信会校验发起支付请求的域名（Referer），需在商户平台配置“H5支付域名”。
  • AppID：此处使用商户绑定的移动应用或公众号 AppID。

3. 小程序支付

适用场景：微信小程序原生环境。

核心流程

  1. 获取登录凭证： 前端调用 wx.login() 获取 code。
  2. 获取 OpenID： 后端通过 appid、secret 和 code 换取 openid。
  3. 后端下单： 后端调用统一下单接口，返回支付核心参数（paySign 等）。
  4. 唤起支付： 前端调用小程序 API 进行支付：
    1
2
3
4
5
6
7
8
9

    wx.requestPayment({
  timeStamp: '',
  nonceStr: '',
  package: '',
  signType: 'MD5',
  paySign: '',
  success (res) { },
  fail (res) { }
})

⚠️ 注意事项

  • AppID：此处必须使用小程序的 AppID。
  • 账号关联：小程序必须已关联到微信商户号。

4. 附录：前端环境判断工具

在发起支付前，我们需要根据当前运行环境（User Agent）来决定调用 JSAPI 支付还是 H5 支付。可以使用以下工具函数进行判断：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

/**
 * 获取当前运行平台
 * @returns {string} 'wecom' | 'wechat' | 'h5'
 */
function getPlat() {
    const ua = window.navigator.userAgent.toLowerCase();

    if (ua.includes('wxwork')) {
        return 'wecom'; // 企业微信环境（需使用企业微信JS-SDK或兼容JSAPI）
    } else if (ua.includes('micromessenger')) {
        return 'wechat'; // 微信内置浏览器（使用 JSAPI 支付）
    } else {
        return 'h5'; // 普通浏览器（使用 H5 支付）
    }
}

// 业务逻辑调用示例
const platform = getPlat();

if (platform === 'wechat' || platform === 'wecom') {
    // 执行 JSAPI 支付逻辑
    console.log("检测到微信环境，准备唤起 JSAPI 支付");
    // doJSAPIPay(); 
} else {
    // 执行 H5 支付逻辑
    console.log("检测到外部浏览器，准备唤起 H5 支付");
    // doH5Pay();
}

补充说明

  • 企业微信兼容性：在企业微信（wxwork）中，通常也兼容微信的 JSAPI 支付，但建议参考企业微信官方文档确认是否需要引入特定的 jweixin-module。
  • 小程序环境判断：如果您还需要判断是否在小程序 Webview 中，可以增加一个判断条件：
1
2
3

if (ua.includes('miniprogram') || window.__wxjs_environment === 'miniprogram') {
    return 'miniprogram';
}
comments powered by Disqus