手机app html5手机支付,基于HTML5之APP微信支付集成实现（转载）

一 摘要

这里HTML5集成微信支付跟iOS,安卓集成微信支付过程是同样的,iOS微信集成参考以前的文章.

http://blog.csdn.net/baihuaxiu123/article/details/51415717

这里引用以前文章的集成过程.以下:javascript

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

步骤1：用户在商户APP中选择商品，提交订单，选择微信支付。

步骤2：商户后台收到用户支付单，调用微信支付统一下单接口。参见统一下单API。

步骤3：统一下单接口返回正常的prepay_id，再按签名规范从新生成签名后，将数据传输给APP。参与签名的字段名为appId，partnerId，prepayId，nonceStr，timeStamp，package。注意：package的值格式为Sign=WXPay

步骤4：商户APP调起微信支付。

步骤5：商户后台接收支付通知。

步骤6：商户后台查询支付结果。

1

2

3

4

5

6

7

二 效果

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;

1

2

3

4

5

6

7

8

9

10

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();

});

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

29

30

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);

});

1

2

3

4

5

6

7

8

9

10

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)

}

}

}

1

2

3

4

5

6

7

8

9

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;

}

}

}

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

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

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('网络异常，请稍后再试！');

}

});

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

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('网络异常，请稍后再试！');

}

});

}

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

29

30

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

}

});

}

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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();

}

});

}

}