h5页面调起微信支付

//先判断是否支持所需接口

//声明所需变量

 

var timestamp;
var appId;
var signature;
var nonceStr;
var url = location.href;

 

//发送ajax


$.ajax({
type: "get",
url: "/public/vipreg/js/jssdk.php",
data: {
url: url
},
dataType: "jsonp",
jsonp: "callback",
jsonpCallback: "success_jsonpCallback",
success: function(data) {
timestamp = data.timestamp;
appId = data.appId;
signature = data.signature;
nonceStr = data.nonceStr;
wx.config({
debug: false,
appId: data.appId,
timestamp: data.timestamp,
nonceStr: data.nonceStr,
signature: data.signature,
jsApiList: [
‘checkJsApi‘,
‘onMenuShareTimeline‘,
‘onMenuShareAppMessage‘,
‘onMenuShareQQ‘,
‘onMenuShareWeibo‘,
‘hideMenuItems‘,
‘showMenuItems‘,
‘hideAllNonBaseMenuItem‘,
‘showAllNonBaseMenuItem‘,
‘translateVoice‘,
‘startRecord‘,
‘stopRecord‘,
‘onRecordEnd‘,
‘playVoice‘,
‘pauseVoice‘,
‘stopVoice‘,
‘uploadVoice‘,
‘downloadVoice‘,
‘chooseImage‘,
‘previewImage‘,
‘uploadImage‘,
‘downloadImage‘,
‘getNetworkType‘,
‘openLocation‘,
‘getLocation‘,
‘hideOptionMenu‘,
‘showOptionMenu‘,
‘closeWindow‘,
‘scanQRCode‘,
‘chooseWXPay‘,
‘openProductSpecificView‘,
‘addCard‘,
‘chooseCard‘,
‘openCard‘
]
});

},
error: function(data) {
console.log(data)
}

});

 

 

wx.ready(function() {

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

wx.error(function(res) {
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});

 

//点击按钮调起支付

$(‘.pay_btn‘).click(function() {

var newopenid = getCookie(‘openid‘);

$.ajax({

url: "/user/chongzhi",

data: {

uid: params.uid,
token: params.token,
type: 4,
money_type: 1,
price: ‘398‘,
openid: newopenid,
tradetype: ‘JSAPI‘

},

dataType: "JSON",

type: "post",

success: function(data) {

timestamp = data.jsapi.timeStamp;

nonceStr = data.jsapi.nonceStr;

package = data.jsapi.package;

paySign = data.jsapi.paySign;

wx.chooseWXPay({

appId: appId,

timestamp: timestamp, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符

nonceStr: nonceStr, // 支付签名随机串,不长于 32 位

package: package, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=\*\*\*)

signType: ‘MD5‘, // 签名方式,默认为‘SHA1‘,使用新版支付需传入‘MD5‘

paySign: paySign, // 支付签名

success: function(res) {
//成功后的回调,一般支付成功后,都需要给后台发送收货人,支付金额等信息

var addid=getCookie(‘addid‘);

$.ajax({

url: "/ZeroBuy/userOrderPay",

data: {

uid:params.uid,
address_id:addid,
token:params.token

},

dataType: "JSON",

type: "post",

success: function(data) {

},

error: function(data) {


}

});

$(‘.chenggong‘).removeClass(‘cgnone‘);
$(‘.chenggong‘).addClass(‘cgblock‘);

}
});

},
error: function(data) {

}

});

})

 

 

 

 

 

 

 

总结:其实逻辑并不难,但是需要传的数据很多,其中大多数都是后台生成传给前端再传回去,上面的代码复制粘贴改一改接口和命名基本就能用了

h5页面调起微信支付

上一篇:asp.net core 微信支付工具类(H5支付,扫码支付,公众号支付,app支付)之2-H5支付


下一篇:Android开发支付集成——微信集成