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

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

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

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

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

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

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

第一种方法:使用微信浏览器内置对象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接口的页面引入如下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支付,支付成功回调会有问题:

解决方案:

通过保存待支付的订单号,调用后台接口每隔数秒轮询该订单的支付状态

开发步骤&常见问题

开发步骤&常见问题

官方体验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);
    }
}

微信支付开发文档

赞 赏