基于HTML5之APP微信支付集成实现

来源：互联网发布：产品标贴制作软件编辑：程序博客网时间：2024/04/30 11:14

一摘要

这里HTML5集成微信支付跟iOS,安卓集成微信支付过程是一样的,iOS微信集成参考之前的文章.
http://blog.csdn.net/baihuaxiu123/article/details/51415717
这里引用之前文章的集成过程.如下:

商户系统和微信支付系统主要交互说明：

步骤1：用户在商户APP中选择商品，提交订单，选择微信支付。步骤2：商户后台收到用户支付单，调用微信支付统一下单接口。参见统一下单API。步骤3：统一下单接口返回正常的prepay_id，再按签名规范重新生成签名后，将数据传输给APP。参与签名的字段名为appId，partnerId，prepayId，nonceStr，timeStamp，package。注意：package的值格式为Sign=WXPay步骤4：商户APP调起微信支付。步骤5：商户后台接收支付通知。步骤6：商户后台查询支付结果。

二效果

1)横屏效果

这里写图片描述

2)竖屏效果

这里写图片描述

三具体代码实现

1)全局变量

var payType; //支付方式：200 微信支付， 310 到店支付        var fromType; //代表从哪里过来的        var orderNbr; // 订单号        var orderId; // 订单id        var orderPrice; // 订单价格        var orderName; // 订单价格        var projectId; // 项目id        var serviceType; // 服务类型        var merchantId; // 商家id        var parentId;

2)实现过程

mui.plusReady(function() {            var self = plus.webview.currentWebview();            fromType = self.fromType;            orderNbr = self.orderNbr;            orderId = self.orderId;            orderPrice = self.orderPrice;            orderName = self.orderName;            projectId = self.projectId;            serviceType = self.serviceType;            merchantId = self.merchantId;            parentId = self.parentId;            // 设置展示数据            document.getElementById('order-price').innerHTML = '¥' + orderPrice;            document.getElementById('pay-price').innerHTML = '¥' + orderPrice;            /*             * 获取支付通道             */            plus.payment.getChannels(function(channels) {                for (var i in channels) {                    var channel = channels[i];                    pays[channel.id] = channel;                    checkServices(channel); //检测是否安装支付服务                    console.log('======安的支付服务=====' + channel.id)                }            }, function(e) {                mui.toast("获取支付失败");            });            //选择支付模式            radioOnChange();        });

3)赋值

document.getElementById('wxpay').addEventListener('tap', function() {            this.querySelector('input').checked = true;            payType = '200';            //          console.log("payType"+payType);        });        document.getElementById('ddpay').addEventListener('tap', function() {            this.querySelector('input').checked = true;            payType = '310';            //          console.log("payType"+payType);        });

4)选择支付模式

function radioOnChange() {            var payRadio = document.getElementsByName("radio1");            for (var i = 0; i < payRadio.length; i++) {                if (payRadio[i].checked) {                    payType = payRadio[i].value;                    console.log('====支付方式payType=====' + payType)                }            }        }

5)支付

function pay(id) {            if (w) {                return;            } //检查是否请求订单中            var url = PAYSERVER;            if (mui.os.ios) {                systemtype = 'IOS';            }            if (wxappid == 'wx741484d992c17831') {                url += 'orderSn=' + orderNbr + '&cMerchantId=' + MERCHANTID + '&type=' + systemtype + '&payType_appId=2';            } else {                url += 'orderSn=' + orderNbr + '&cMerchantId=' + MERCHANTID + '&type=' + systemtype;            }            w = plus.nativeUI.showWaiting();            // 请求支付订单            var xhr = new XMLHttpRequest();            xhr.open('GET', url);            console.log("请求支付订单：" + url)            xhr.send();            xhr.onreadystatechange = function() {                switch (xhr.readyState) {                    case 4:                        w.close();                        w = null;                        if (xhr.status == 200) {                            var data = xhr.responseText;                            console.log("-----请求订单成功-----" + data)                            var prepayid = JSON.parse(data).data.prepayId; //商户订单号                            var timestamp = new Date().getTime(); //当前时间戳                            if (mui.os.ios) {                                timestamp = parseInt(timestamp / 1000);                            }                            var noncestr = generateMixed(16); //16位随机字符串                            var signStr = "appid=" + wxappid + "&noncestr=" + noncestr + "&package=" + "Sign=WXPay" + "&partnerid=" + wxpartnerid + "&prepayid=" + prepayid + "&timestamp=" + timestamp + "&key=" + partnerKey;                            var sign = hex_md5(signStr).toUpperCase(); //生成签名                            var order = '{"appid":"' + wxappid + '","noncestr":"' + noncestr + '","package":"Sign=WXPay","partnerid":"' + wxpartnerid + '","prepayid":"' + prepayid + '","timestamp":' + timestamp + ',"sign":"' + sign + '"}';                            plus.payment.request(pays[id], order, function(result) {                                plus.nativeUI.alert("支付成功", function() {                                    orderQueryStatus('0');                                    //                                  back();                                }, "支付");                            }, function(e) {                                //                              orderQueryStatus('-1');                                plus.nativeUI.alert("支付失败", null, "支付失败"); // + e.code+e.message                            });                        } else {                            plus.nativeUI.alert("获取订单信息失败！", null, "支付");                        }                        break;                    default:                        break;                }            }        }

6)支付成功或失败时返回的状态

function orderQueryStatus(wxCode) {            var URL_PAY = SERVER_URL + 'wxpay/order/cartOrderQuery.do';            mui.ajax(URL_PAY, {                data: {                    orderSn: orderNbr, //730348977370697729订单号                    cMerchantId: MERCHANTID,                    wx_errcode: wxCode,                    type: systemtype                },                dataType: 'json',                type: 'post',                timeout: 10000,                success: function(data) {                    /*                     * 跳到我的订单                     */                    goMyOrder();                },                error: function(xhr, type, errorThrown) {                    mui.toast('网络异常，请稍后再试！');                }            });        }

7)我的订单里付款，根据订单orderId改变订单状态

function updatePayStatusByOrderid() {            var URL_1 = SERVER_URL + 'updateOrderPayStatusById.do';            mui.ajax(URL_1, {                data: {                    orderId: orderId, // 订单号                    payStatus: payType                },                dataType: 'json',                type: 'post',                timeout: 10000,                success: function(data) {                    if (data.status == 100) {                        if (payType == 310) {                            if (plus.webview.getWebviewById(parentId)) {                                plus.webview.getWebviewById(parentId).reload();                            }                            if (plus.webview.getWebviewById('order-detail')) {                                plus.webview.getWebviewById('order-detail').close();                            }                            plus.webview.currentWebview().close();                        }                    } else {                        mui.toast(data.msg);                    }                },                error: function(xhr, type, errorThrown) {                    mui.toast('网络异常，请稍后再试！');                }            });        }

8)跳转到我的订单

function goMyOrder() {            if (plus.webview.getWebviewById('../order/order-main.html')) {                mui.fire(plus.webview.getWebviewById('../order/order-main.html'), 'refersh');                plus.webview.currentWebview().close();            } else {                mui.openWindow({                    id: '../order/order-main.html',                    url: '../order/order-main.html',                    waiting: {                        autoShow: true                    }                });            }        }

9)返回事件

/*返回事件*/        mui.back = function() {            if (fromType != '') {                // 从我的订单进来                plus.webview.currentWebview().close();            } else {                // 购物车或立即预约，提示订单已经生成                var btnArray = ['确定', '取消'];                mui.confirm('\n订单已经生成可以在订单管理查看\n', '', btnArray, function(e) {                    if (e.index == 0) {                        // 确定                        goMyOrder();                    } else {                        // 取消                        var cartOrderView = plus.webview.getWebviewById('cart-order');                        if (cartOrderView) {                            cartOrderView.close();                        }                        var orderView = plus.webview.getWebviewById('order');                        if (orderView) {                            orderView.close();                        }                        plus.webview.currentWebview().close();                    }                });            }        }

四结束

集成差不多就完成了,这个集成跟iOS或安卓集成过程是一样的,这里大家可以参考一下.
下面是我的微信:
这里写图片描述

0 0