小程序和H5支付

发布日期: 2020-11-12

一、小程序支付流程：

调接口获取用户token
1 button按钮中绑定open-type="getUserInfo", @getuserinfo="getuserinfo" 在绑定事件回调中获取用户信息参数
```
const { encryptedData, rawData, iv, signature } = e.detail;
```

2 获取小程序登录成功后的 code

wx.login({
  success: (res)=> {
      console.log(res.code)
  }
})

3 使用上面五个参数调接口取 token值
```
let { token } = await this.$http(...)
```
调接口创建订单（即获取订单号）
请求参数：token，总价格，收货地址，购买的商品
返回值：订单号
发起预支付，调用pay接口，获取小程序支付所需参数
返回值：nonceStr, package, paySign, signType, timeStamp

调起微信支付

wx.requestPayment({
timeStamp: '',
nonceStr: '',
package: '',
signType: 'MD5',
paySign: '',
success (res) { },
fail (res) { }
})

查询订单状态（返回成功才算支付成功）
请求参数：token，订单号
查单成功后跳转到订单页面等

二、h5支付（在浏览器的调起支付）

调接口创建订单（即获取订单号）
请求参数：总价格，收货地址，购买的商品
返回值：订单号和跳转的url

直接跳转返回的url，再拼接上redirect_url支付成功后回调的地址即可

this.$http.CustomerOrder_ConfirmSubmitByPostageWeChatPayH5({
json:Jsons
}).then(data => {
if (data.id == 1) {
 //存储订单号
 window.localStorage.setItem("OrderCodeNew", data.data.OrderCode)
 //存储支付地址
 window.localStorage.setItem("WechatPayUrlNew", data.data.url + '&redirect_url=' + encodeURI('http://teelishar.hyxmt.cn/a/Manager/assets/SaveMoneyOnlineQuery2.aspx?OrderId='+data.data.OrderCode))
 window.location.href = data.data.url + '&redirect_url='+ encodeURI('http://teelishar.hyxmt.cn/a/Manager/assets/SaveMoneyOnlineQuery2.aspx?OrderId='+data.data.OrderCode);
}else {
 this.submiting = false;
 this.$Toast((data.data&&data.data.messages)||data.messages);
}
});
}

三、微信内JSAPI支付

调接口创建订单（即获取订单号）
请求参数：总价格，收货地址，购买的商品
返回值：订单号和微信支付所需参数
初始化后调起微信支付

成功后跳回订单页

let orderNum = data.data.OrderCode;
var wxConfig = JSON.parse(data.data.url);
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: wxConfig.appId, // 必填，公众号的唯一标识
timestamp: wxConfig.timeStamp, // 必填，生成签名的时间戳
nonceStr: wxConfig.nonceStr, // 必填，生成签名的随机串
signature: wxConfig.paySign, // 必填，签名
jsApiList: ['chooseWXPay'], // 必填，需要使用的JS接口列表
fail: function () {
 alert('wx初始化失败');
 console.log('wx初始化失败')
}
});
wx.ready(function () {
wx.chooseWXPay({
 timestamp: wxConfig.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
 nonceStr: wxConfig.nonceStr, // 支付签名随机串，不长于 32 位
 package: wxConfig.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
 signType: wxConfig.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
 paySign: wxConfig.paySign, // 支付签名
 success: function (res) {
   console.log("支付后", res);
   if (res.errMsg == "chooseWXPay:ok") {
     window.location.href =
       'http://teelishar.hyxmt.cn/a/Manager/assets/SaveMoneyOnlineQuery2.aspx?OrderId='+data.data.OrderCode;
   } else {
     window.location.href =
       'http://teelishar.hyxmt.cn/a/Manager/'
   }
 },
 fail: function (res) {
   console.log('唤起支付失败', res)
     window.location.href = 'http://teelishar.hyxmt.cn/a/Manager/Cart.aspx';
 },
 cancel: function (res) {
     window.location.href = 'http://teelishar.hyxmt.cn/a/Manager/Cart.aspx';
 }
});

/判断是否在微信端/

is_weixn: function() {
  var ua = navigator.userAgent.toLowerCase();
  if (ua.match(/MicroMessenger/i) == "micromessenger") {
    return true;
  } else {
    return false;
  }
},