H5 微信支付、支付宝支付简介

发表于 2018-07-01 分类于前端笔记

目前，国内的移动支付具有快速、简便、使用人数众多的特点。作为前端开发者，我们也会遇到一些对接移动支付的需求。最近刚好接手一个移动支付的需求，在 H5 页面内需要接入微信支付以及支付宝支付，因此将其支付流程整理如下。

场景

本次总结的使用场景是用户通过移动端扫码/输入链接进入 H5 页面后，选择相应的订单，发出订单信息后，调起微信支付模块或者支付宝支付模块。

在支付方式中，分别对应微信的公众号支付、H5支付，以及支付宝的手机网站支付。

微信支付

微信支付开发者文档中，根据场景将微信支付分为以下几类：

公众号支付
APP 支付
扫码支付
刷卡支付
H5 支付
小程序支付

本次介绍的只要是公众号支付和 H5 支付。他们都属于移动端访问 H5 页面发起的支付，主要区别在于：公众号支付对应的 H5 页面必须通过微信浏览器打开，而 H5 支付则面向用户在微信浏览器以外的移动端浏览器访问 H5 页面的场景。

公众号支付

公众号支付是在微信内访问 H5 页面的支付流程，可以直接唤起支付弹窗。具体的逻辑流程如下：

前端项目中引入微信 JS-SDK

1	<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

用户在微信内进入 H5 页面，进行相应操作后，提交订单信息
前端将订单信息发送给服务端，服务端与微信支付系统通信，生成预付单
服务端将预付单信息发送给前端

检测微信 JS API 对象是否已被初始化，如果没有初始化，则尝试初始化。微信 JS API 封装在 WeixinJSBridge 这个对象中，进入 H5 页面时，并不能保证该对象已经初始化完毕，因此需要对它进行初始化检验，没有被初始化时通过事件的方式进行初始化。

// 函数 regWeixin 为支付逻辑，具体代码在后续的步骤中进行介绍
// data 参数为服务端传过来的预支付订单信息
callWeixin(data) {
    if (window.WeixinJSBridge === undefined) {
        if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', () => { this.regWeixin(data); }, false);
        } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', () => { this.regWeixin(data); });
            document.attachEvent('onWeixinJSBridgeReady', () => { this.regWeixin(data); });
        }
    } else {
        this.regWeixin(data);
    }
}

JS-API 被初始化后，调用微信支付 API getBrandWCPayRequest，唤起支付的窗口，此时需要将之前服务端传过来的部分预订单信息通过参数传入该 API 中。

regWeixin(opts) {
    window.WeixinJSBridge.invoke('getBrandWCPayRequest', {
        // 以下为支付 API 所需要的参数，必传，缺一不可
        appId: opts.appId, // 公众号名称，由商户传入
        timeStamp: opts.timeStamp.toString(), // 时间戳，自1970年以来的秒数
        nonceStr: opts.nonceStr, // 随机串
        package: opts.package,
        signType: opts.signType, // 微信签名方式：
        paySign: opts.paySign // 微信签名
    }, (res) => {
        // 支付成功
        if (res.err_msg === 'get_brand_wcpay_request:ok') {
            this.doms.jsAppContent.html(this.getTemplate('finish'));
        } else {
            // 支付失败
            DYToast.toast('支付失败');
        }
    });
}