h5页面调起微信支付

Posted 2020-11-19 印度阿铭

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

//声明所需变量

 

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

}

});

})

 

 

 

 

 

 

 

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