前言
JSAPI支付是指用户在微信中打开商户的H5页面,商户在H5页面通过调用微信支付提供的JSAPI接口调起微信支付模块来完成支付。适用于在公众号、朋友圈、聊天窗口等微信内完成支付的场景。
直接进入正题
1.首先第一步,也是最重要的一步获取wxCode
通过微信小程序官方给的url获取wxCode然后重定向到页面
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
appid:公众号的appid
redirect_uri:授权回调页面域名(如果用户同意授权,页面将跳转至 redirect_uri/?code=CODE&state=STATE)(其实就是你的支付页面的url)
state:自定义携带的参数
scope:应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且, 即使在未关注的情况下,只要用户授权,也能获取其信息 )
//获取wxCode
getUrlKey('code')
getUrlKey(name) {
//获取url中你需要的参数
return (
decodeURIComponent(
(new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(
location.href
) || ['', ''])[1].replace(/\+/g, '%20')
) || null
)
},
2.通过调用后端接口获取微信支付必须的参数(具体看你们公司业务)
3.调用微信支付(支付授权目录配置)
WeixinJSBridge.invoke(
'getBrandWCPayRequest',
{
appId:JSAPIMap.appId, //公众号名称,由商户传入
timeStamp: JSAPIMap.timeStamp, //时间戳,自1970年以来的秒数
nonceStr: JSAPIMap.nonceStr, //随机串
package: JSAPIMap.package,
signType: JSAPIMap.signType, //微信签名方式:
paySign:JSAPIMap.paySign, //微信签名
},
async function(res) {
if (res.err_msg == 'get_brand_wcpay_request:ok') {
// 使用以上方式判断前端返回,微信团队郑重提示:
//res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
} else {
}
}
)
4.支付成功跳转到小程序(采用后端调用接口获取跳转地址的方式)
一、 获取ACCESS_TOKEN 文档
https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/access-token/auth.getAccessToken.html
通过微信提供接口携带appid和appsecret请求获取到token
GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
二、获取URL Scheme 文档
https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/url-scheme/urlscheme.generate.html
通过微信提供接口携带ACCESS_TOKEN获取到URL
POST https://api.weixin.qq.com/wxa/generatescheme?access_token=ACCESS_TOKEN
请求成功之后就可以得到一个路径,通过location.href跳转即可