最近做商城项目用到了微信、支付宝支付,总结一下文档
一、微信支付
微信支付用的是JSAPI支付,即在微信内置浏览器中直接调起支付,详细步骤如下
(1)接入前的准备工作,目的是获取授权code
分为支付授权与网页域名授权
1.支付授权,配置你项目的域名,顶级域名即可。
2.网页域名授权,是你请求后端接口的域名,注意:域名都不可带参数
(2)前端代码的编写
代码的编写工作分为两个部分
1.获取openid
onLoad() {
this.isWeixin = this.isWechat();
if(this.isWeixin){
//获取code
let code = this.getUrlCode('code');
uni.showToast({
title:code
})
//在微信中打开支付链接时,就判断是否有code
if (code === null || code === '') {
this.checkWechatCode();
}else{
//如果拿到code,就用这个code去请求后端提供的api来获取到openId
uni.request({
method: "POST",
url: `${url_config}/crm/v1/wx/query/openId/gzh`,
data: {
code: code
},
success: (res) => {
this.openId = res.data.openid;
console.log(res.data.openid)
}
})
}
}
},
methods(){
//方法:用来判断是否是微信内置的浏览器
isWechat() {
return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
},
checkWechatCode(){
let local = encodeURIComponent(`${url_config}/h5/index.html); //获取当前页面地址作为回调地址
let appid = 你的公众号的APPID
//通过微信官方接口获取code之后,会重新刷新设置的回调地址【redirect_uri】
window.location.href =
"https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
appid +
"&redirect_uri=" +
local +
"&response_type=code&scope=snsapi_base&state=1#wechat_redirect";
},
getUrlCode (name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null
},
}
2.发起支付请求
发起支付请求又包含两部分内容,首先你需要拿到这个openid给到后端,让后端返回给你如下的值,然后拿到值之后再发起支付请求
注意:图片中的这些值都是后端给你返回的!!!!!
发起请求代码
uni.request({
url: `${url_config}/pay`, //后端api仅为示例,并非真实接口地址。
data: {
openId:openId,
.....
},
header: {
'content-type': 'application/json'
},
method:'POST',
success: (res) => {
//res.data为后端返回的网页请求参数
if(res.statusCode == 200){
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId": res.data.appid, //公众号名称,由商户传入
"timeStamp":res.data.timeStamp, //时间戳
"nonceStr":res.data.nonce_str, //随机串
"package": "prepay_id=" + res.data.prepay_id,
"signType":"MD5", //微信签名方式:
"paySign":res.data.paySign //微信签名
},
function(ress) {
if (ress.err_msg == "get_brand_wcpay_request:ok") {
uni.showToast({
icon: 'success',
title: '支付成功'
})
setTimeout(() => {
// uni.navigateBack({
// delta:2
// })
uni.navigateTo({
url: '/pages/success/success'
});
}, 500);
} else if (ress.err_msg == "get_brand_wcpay_request:cancel") {
uni.showToast({
icon: "none",
title: "'已取消支付"
})
} else {
uni.showToast({
icon: "none",
title: "支付失败"
})
setTimeout(() => {
// uni.navigateBack({
// delta:2
// })
uni.navigateTo({
url: '/pages/error/error'
});
}, 500);
}
}
);
}
},
fail() {
}
});