公众号中调微信支付功能

179 阅读1分钟

第一次发文,随便说说公众号中调微信支付功能吧

1.信息授权获取code,参考下面地址或者官网地址进入重定向后会在url返回code,咱们可以拿到code后期去获取用户openId

const encodeUrls = '转码后的页面地址'
var tempUrl ='https://open.weixin.qq.com/connect/oauth2/authorizeappid=''&connect_redirect=1&redirect_uri=' +encodeUrls +'&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'

2.前端简要支付代码

// 请求参数
const payParams = {patType: 11, openId, patInfo}
// 拿到微信签名等信息data
const data = axios({url, method, data: payParams})
//准备好微信sdk部分
jsSdk()
function jsSdk() {
  // 判断微信的WeixinJSBridge
  if (typeof WeixinJSBridge == 'undefined') {
    if (document.addEventListener) {
      document.addEventListener(
        'WeixinJSBridgeReady',
       onBridgeReady,
        false
      )
    } else if (document.attachEvent) {
      document.attachEvent('WeixinJSBridgeReady', onBridgeReady)
      document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)
    }
  } else {
    onBridgeReady()
  }
}

function onBridgeReady() {
  let payData = {
    appId, // 公众号名称,由商户传入
    timeStamp, // 时间戳,自1970年以来的秒数
    nonceStr, // 随机串
    package, //用等式的格式
    signType: 'MD5', // 微信签名方式:
    paySign // 微信签名
  }
  // 触发微信支付
  WeixinJSBridge.invoke('getBrandWCPayRequest', payData, function(res) {
    if (res.err_msg === 'get_brand_wcpay_request:ok') {
      // 支付成功
      setTimeout(() => {
       toDetails()
      }, 300)
    } else {
      // 支付成功
    }
  })
}

3.大体流程

graph TD
点击缴费 --> 通过code获取openId -->
将支付信息连同openId传给后端 -->
后端拿到参数调用微信平台预下单接口 -->
微信平台入库预下单信息并返回给后端微信签名等相关信息 -->
后端拿到微信平台的返回数据进行返回给前端  -->
前端唤起微信支付弹窗并将这些信息传入 -->
微信收到付款信息进行微信签名认证进行入库 -->
返回前端成功标识