支付流程示意图

  1. 预支付（请求后台，后台请求微信服务获取支付信息）
  2. 调用 API 发起支付：wx.requestPayment({})

image

jsAPI、jsSDK、小程序支付的对比(开发步骤)

对比栏目 JSAPI JSSDK 小程序
统一下单 都需要先获取到Openid，调用相同的API 同 同
调起数据签名 五个字段参与签名(区分大小写)：appId,nonceStr,package,signType,timeStamp 同 同
调起支付页面协议 HTTP或HTTPS HTTP或HTTPS HTTPS
支付目录 有 有 无
授权域名 有 有 无
回调函数 有 success回调 complete、fail、success回调函数

小程序调起支付 API 说明

1
2
3
4
5
6
7
8
9
10
11
wx.requestPayment(
{
  'timeStamp': '',
  'nonceStr': '',
  'package': '',
  'signType': 'MD5',
  'paySign': '',
  'success':function(res){},
  'fail':function(res){},
  'complete':function(res){}
})
  • paySign 字段包含信息说明：
1
paySign = MD5(appId=wxd678efh567hg6787&nonceStr=5K8264ILTKCH16CQ2502SI8ZNMTM67VS&package=prepay_id=wx2017033010242291fcfe0db70013231072&signType=MD5&timeStamp=1490840662&key=qazwsxedcrfvtgbyhnujmikolp111111) = 22D9B4E54AB1950F51E0649E8810ACD6
字段名 变量名 必填 类型 示例值 描述
小程序ID appId 是 String wx***6787 微信分配的小程序ID
时间戳 timeStamp 是 String 14***662 时间戳从1970年1月1日00:00:00至今的秒数,即当前的时间
随机串 nonceStr 是 String 5K***67VS 随机字符串，不长于32位。推荐随机数生成算法
数据包 package 是 String prepay_id=wx***1072 统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=wx**1072
签名方式 signType 是 String MD5 签名类型，默认为MD5，支持HMAC-SHA256和MD5。注意此处需与统一下单的签名类型一致
  • 参数说明：
参数 类型 必填 说明
timeStamp String 是 时间戳从1970年1月1日00:00:00至今的秒数,即当前的时间
nonceStr String 是 随机字符串，长度为32个字符以下。
package String 是 统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=*
signType String 是 签名类型，默认为MD5，支持HMAC-SHA256和MD5。注意此处需与统一下单的签名类型一致
paySign String 是 签名,具体签名方案参见微信公众号支付帮助文档;
success Function 否 接口调用成功的回调函数
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）
  • 回调说明：
回调类型 errMsg 说明
success requestPayment:ok 调用支付成功
fail requestPayment:fail cancel 用户取消支付
fail requestPayment:fail (detail message) 调用支付失败，其中 detail message 为后台返回的详细失败原因

预支付流程

前端提交需支付的信息到开发者服务器，开发者服务器再提交到微信，而后返回需要的信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
    "sign":"A2****************A6",

    "timestamp":"14****************68",

    "package":"Sign=WXPay",

    "partnerId":"14****************02",

    "appid":"wx****************ab",

    "nonceStr":"9f****************37",

    "prepayId":"wx****************54"

}

发起支付

md5下载链接：https://code.csdn.net/snippets/2019875/master/download

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var MD5Util = require('../../../utils/md5.js');
var sign = '';
var signA = "appId="+app.appId+"&nonceStr="+res.data.nonceStr+"&package=prepay_id="+res.data.prepayId+"&signType=MD5&timeStamp="+res.data.timestamp;
var signB = signA+"&key="+app.key;
sign = MD5Util.MD5(signB).toUpperCase();

wx.requestPayment({
    nonceStr: res.data.nonceStr,
    package: "prepay_id="+res.data.prepayId,
    signType: 'MD5',
    timeStamp: res.data.timestamp,
    paySign: sign,
    success: function(res){
      console.log("支付成功");
    },
    fail: function() {
    },
    complete: function() {
    }
})

代码Demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
wx.request({
  url: 'https://调用服务器获取微信统一下单数据',
  method: 'GET',
  data: { uid: uid, id: id },
  success: function (res) {
    var nowTime = new Date()
    var appId = res.data.appid
    var timeStamp1 = Math.round((nowTime.getTime()) / 1000)
    var timeStamp = timeStamp1.toString()
    var nonceStr = res.data.nonce_str
    var package = "prepay_id=" + res.data.prepay_id
    var signType = "MD5"
    var key = "Niskh5234234WYk4323HyE78m2sE"//商户平台的key
    var sign = res.data.sign
    var paySign = md5.hexMD5("appId=" + appId + "&nonceStr=" + nonceStr + "&package=" + package + "&signType=MD5&timeStamp=" + timeStamp + "&key=" + key)
    wx.requestPayment({
      timeStamp: timeStamp,
      //随机字符串，长度为32个字符以下。
      nonceStr: nonceStr,
      //统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=*
      package: package,
      //签名算法，暂支持 MD5
      signType: 'MD5',
      paySign: paySign,
      success: function (res) {
      },
      fail: function (res) {
      },
      complete: function (res) {
      }
    })
  }
})