微信内部浏览器 H5 支付(JSAPI 支付)和微信外部浏览器 H5 支付总结

微信内部浏览器 H5 支付(JSAPI 支付)和微信外部浏览器 H5 支付总结

微信内部浏览器 H5 支付(JSAPI 支付)

使用场景：用户通过微信扫码、关注公众号等方式进入商家 H5 页面，并在微信内调用 JSSDK 完成支付。

调用微信支付和微信分享有一个区别，微信支付必须要获取 openid，而分享不需要。

微信公众平台：openid 是微信用户在公众号 appid 下的唯一用户标识（appid 不同，则获取到的 openid 就不同），可用于永久标记一个用户，同时也是微信 JSAPI 支付的必传参数。

在微信浏览器 H5 支付有两种方式：

• 使用微信浏览器特有的内置对象WeixinJSBridge（注意：WeixinJSBridge 内置对象在其他浏览器中无效）中的方法调用微信支付
• 使用微信 JS-SDK，调用微信支付请求接口wx.chooseWXPay接口

第一种方法：使用微信浏览器内置对象WeixinJSBridge调起微信支付

微信内 H5 调起支付，使用该方法具体代码如下：

// data为网页端接口请求参数列表
function onBridgeReady(data) {
  WeixinJSBridge.invoke(
    "getBrandWCPayRequest",
    {
      // 公众号名称，由商户传入
      appId: data.appId,
      // 时间戳，自1970年以来的秒数
      timeStamp: data.timeStamp,
      // 随机串
      nonceStr: data.nonceStr,
      package: data.package,
      // 微信签名方式：
      signType: "MD5",
      // 微信签名
      paySign: data.paySign,
    },
    function (res) {
      if (res.err_msg == "get_brand_wcpay_request:ok") {
        // 使用以上方式判断前端返回,微信团队郑重提示：
        // res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
      }
    }
  );
}

if (typeof WeixinJSBridge == "undefined") {
  if (document.addEventListener) {
    document.addEventListener("WeixinJSBridgeReady", onBridgeReady, false);
  } else if (document.attachEvent) {
    document.attachEvent("WeixinJSBridgeReady", onBridgeReady);
    document.attachEvent("onWeixinJSBridgeReady", onBridgeReady);
  }
} else {
  onBridgeReady();
}

第二种方法：使用微信 JS-SDK 调用微信支付

JSSDK 使用步骤

微信 JS-SDK 是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。

通过使用微信 JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。

步骤一：绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS 接口安全域名”。

备注：登录后可在“开发者中心”查看对应的“接口权限”。

如图：

配置“JS 接口安全域名”

接口权限，有些接口公众号必须微信认证才能使用，比如分享接口、支付接口等，微信认证公众号主体必须是企业，个人不能认证

步骤二：引入 JS 文件

在需要调用 JS 接口的页面引入如下 JS 文件，我这里引入的是 1.2.0 版本的，每个版本可能有区别，有些接口可能被废弃掉了，具体以微信 JS-SDK 说明文档为准

步骤三：通过 config 接口注入权限验证配置

所有需要使用 JS-SDK 的页面必须先注入配置信息，否则将无法调用（同一个 url 仅需调用一次，对于变化 url 的 SPA 的 web app 可在每次 url 变化时进行调用,目前 Android 微信客户端不支持 pushState 的 H5 新特性，所以使用 pushState 来实现 web app 的页面会导致签名失败，此问题会在 Android6.2 中修复）。

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: "", // 必填，公众号的唯一标识
  timestamp: "", // 必填，生成签名的时间戳
  nonceStr: "", // 必填，生成签名的随机串
  signature: "", // 必填，签名
  jsApiList: [], // 必填，需要使用的JS接口列表
});

步骤四：通过 ready 接口处理成功验证

wx.ready(function () {
  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

步骤五：使用微信 JS-SDK 接口 chooseWXPay 调用微信支付

使用微信 JS-SDK 发起微信支付请求，具体代码如下：

wx.chooseWXPay({
  timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
  nonceStr: "", // 支付签名随机串，不长于 32 位
  package: "", // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
  signType: "", // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
  paySign: "", // 支付签名
  success: function (res) {
    // 支付成功后的回调函数
  },
});

注意：prepay_id 通过微信支付统一下单接口拿到，paySign 采用统一的微信支付 Sign 签名生成方法，注意这里 appId 也要参与签名，appId 与 config 中传入的 appId 一致，即最后参与签名的参数有 appId, timeStamp, nonceStr, package, signType。

微信外部浏览器 H5 支付

使用场景：用户在微信以外的手机浏览器请求微信支付的场景唤起微信支付

提醒：H5 支付不建议在 APP 端使用，如需要在 APP 中使用微信支付，请接 APP 支付

内嵌 app 的 H5 页面使用微信 H5 支付，支付成功回调会有问题：

• 安卓手机 app 内嵌的 H5 页面使用微信 H5 支付：支付成功没有跳转到指定的支付成功页，（我们遇到的问题是跳转到了首页），而且回跳发生在调取微信支付之后，支付完成之前
• ios 手机 app 内嵌的 H5 页面使用微信 H5 支付：支付成功会回跳到指定的支付成功页，但是回跳页面会触发在调取微信支付之后，支付完成之前

解决方案：

通过保存待支付的订单号，调用后台接口每隔数秒轮询该订单的支付状态(也可以设置轮询多少秒以后提供一个按钮，让用户自己手动去刷新支付状态)

在 ios 手机内嵌 app 的 H5 页面使用微信 H5 支付，还有遇到过一个问题：

• ios 手机 H5 页面内嵌到第三方 app => 使用微信 H5 支付 => 支付成功 => 点击“完成”，苹果手机会跳出第三方 app 打开默认浏览器 Safari，然后会回跳到指定支付成功页面
• 由于之前的订单号、渠道编号、登录态都需要通过附加在支付成功的回调地址上，所以导致回调地址 frontUrl 携带参数过多导致调不起微信 H5 支付和银联支付的 bug
• 但是这些参数又是必须携带的，否则在 Safari 浏览器打开的支付成功页会因缺少参数，调用接口报错

目前解决的方案是：

1. 判断是否为 ios 手机
2. 通过历史记录长度history.length是否小于某个值（比如：小于 3），来判断是不是由 app 自动打开 Safari 浏览器的(这里可能会有 bug，比如用户之前已经在 Safari 打开过好几个页面了)
3. 如果满足上面两个条件则进行特殊处理，给出一个提示框，让用户返回 app 继续操作，用户点击“确定”按钮，关闭提示弹窗和当前页面
4. JS 关闭浏览器当前页面的方法：window.open("about:blank","_self").close();

开发步骤&常见问题

官方体验 demo

微信官方体验链接：https://wxpay.wxutil.com/mch/pay/h5.v2.php，请在微信外浏览器打开。

兼容微信内部 JSAPI 支付和微信外部 H5 支付用法

/**
*  @desc   微信内H5调起支付
*  @param  configObj 微信jsapi支付参数
*  @param  successCb 支付成功回调函数
*  @param  failCb 支付失败回调函数
*/
wxJSPay(configObj, successCb, failCb) {
    function onBridgeReady() {
        WeixinJSBridge.invoke(
            'getBrandWCPayRequest', {
                // "appId": "wx2421b1c4370ec43b",     //公众号名称，由商户传入
                // "timeStamp": "1395712654",         //时间戳，自1970年以来的秒数
                // "nonceStr": "e61463f8efa94090b1f366cccfbbb444", //随机串
                // "package": "prepay_id=u802345jgfjsdfgsdg888",
                // "signType": "MD5",         //微信签名方式：
                // "paySign": "70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名
                "appId": configObj.appid,     //公众号名称，由商户传入
                "timeStamp": configObj.timestamp || (Date.now() / 1000) + "",         //时间戳，自1970年以来的秒数
                "nonceStr": configObj.nonce_str, //随机串
                "package": `prepay_id=${configObj.prepay_id}`,
                "signType": "MD5",         //微信签名方式：
                "paySign": configObj.sign //微信签名
            },
            function (res) {
                if (res.err_msg == "get_brand_wcpay_request:ok") {
                    // 使用以上方式判断前端返回,微信团队郑重提示：
                    //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                    successCb && successCb();
                }
            });
    }
    if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
        } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
        }
    } else {
        onBridgeReady();
    }
}

/**
*  @desc   兼容微信内部JSAPI支付和微信外部H5支付用法
*  @param  payEnvironment 支付环境：微信浏览器 JSAPI 微信外部浏览器 WX_WAP
*  @param  successRedirectUrl 支付成功回调地址
*/
function wxJSApiAndH5Pay (payEnvironment, successRedirectUrl) {
    // 微信内使用JSAPI支付，微信浏览器外使用H5支付
    if (payEnvironment === 'WX_WAP') {
        console.log('微信外部H5支付');
        let redirect_url = data.mweb_url + '&redirect_url=' + encodeURIComponent(successRedirectUrl);
        window.location.href = redirect_url;
    } else {
        console.log('微信JSAPI支付');
        function successCb () {
            // 支付成功回调地址
            window.location.href = decodeURIComponent(successRedirectUrl);
        };
        wxJSPay(data, successCb);
    }
}

微信支付开发文档

本文由mdnice多平台发布