微信小程序中JSAPI支付

原创已于 2023-12-12 10:26:10 修改 · 1.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

于 2023-12-08 17:55:34 首次发布

前言

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