详解微信小程序调用支付接口支付

下面是详解微信小程序调用支付接口支付的完整攻略。

1.注册商户号并开通支付功能

首先要进行商户号的注册和支付功能的开通，具体可以参考微信支付的官方文档。

2.生成预支付订单

生成预支付订单需要调用支付接口，具体步骤如下：

2.1.获取access_token

在请求之前需要获取access_token，如果已获取，则跳过此步骤。获取方法可以参考微信小程序的官方文档。

2.2.获取openid

获取openid需要用户授权，可以参考微信小程序的官方文档。

2.3.构造请求参数

请求参数的构造包括以下字段：

• 应用ID（appid）
• 商户号（mch_id）
• 随机字符串（nonce_str）
• 商品描述（body）
• 商户订单号（out_trade_no）
• 标价金额（total_fee）
• 终端IP（spbill_create_ip）
• 通知地址（notify_url）
• 交易类型（trade_type）
• 用户openid（openid）
• 签名（sign）

其中，签名的构造需要使用商户密钥（key）和签名类型（sign_type），具体可以参考微信支付的官方文档。

2.4.发送请求获取预支付ID

构造完请求参数后，将其转换为xml格式，发送请求获取预支付ID，具体可以参考微信支付的官方文档。请求成功后，将返回以下参数：

• 预支付ID（prepay_id）
• 随机字符串（nonce_str）

3.调起支付

调起支付需要构造以下字段：

• 应用ID（appId）
• 时间戳（timeStamp）
• 随机字符串（nonceStr）
• 订单详情扩展字符串（package）
• 签名类型（signType）
• 签名（paySign）

其中，订单详情扩展字符串的构造需要使用预支付ID和签名类型（signType），具体可以参考微信支付的官方文档。

示例1：生成预支付订单

// 获取access_token
wx.request({
  url: 'https://api.weixin.qq.com/cgi-bin/token',
  data: {
    grant_type: 'client_credential',
    appid: 'your_appid',
    secret: 'your_secret'
  },
  success(res) {
    // 获取openid
    wx.login({
      success(res) {
        wx.request({
          url: 'https://api.weixin.qq.com/sns/jscode2session',
          data: {
            appid: 'your_appid',
            secret: 'your_secret',
            js_code: res.code,
            grant_type: 'authorization_code'
          },
          success(res) {
            const openid = res.openid
            const nonce_str = Math.random().toString(36).substr(2, 15)

            // 构造请求参数
            const params = {
              appid: 'your_appid',
              mch_id: 'your_mch_id',
              nonce_str: nonce_str,
              body: 'test',
              out_trade_no: 'your_trade_no',
              total_fee: 1,
              spbill_create_ip: 'your_ip',
              notify_url: 'your_notify_url',
              trade_type: 'JSAPI',
              openid: openid
            }

            // 构造签名
            const sign = wxpaysign({ key: 'your_key', ...params })

            // 构造xml格式参数
            const xmlParams = Object.keys(params).map(key => `<${key}>${params[key]}</${key}>`).join('') + `<sign>${sign}</sign>`

            // 发送请求获取预支付ID
            wx.request({
              url: 'https://api.mch.weixin.qq.com/pay/unifiedorder',
              method: 'POST',
              header: {
                'Content-Type': 'application/xml'
              },
              data: xmlParams,
              success(res) {
                const result = parseXml(res.data)

                console.log(result)
              }
            })
          }
        })
      }
    })
  }
})

// 解析xml格式数据
function parseXml(xml) {
  const xmlParser = new DOMParser().parseFromString(xml, 'text/xml')
  const nodes = xmlParser.childNodes[0].childNodes

  const result = {}
  for (let i = 0; i < nodes.length; i++) {
    result[nodes[i].nodeName] = nodes[i].textContent
  }

  return result
}

// 签名算法
function wxpaysign(params) {
  const str = Object.keys(params).sort().map(key => `${key}=${params[key]}`).join('&') + '&key=' + params.key
  return md5(str).toUpperCase()
}

示例2：调起支付

const nonceStr = Math.random().toString(36).substr(2, 15)
const timeStamp = Math.floor(Date.now() / 1000)

// 构造订单详情扩展字符串
const packageStr = `prepay_id=your_prepay_id`

// 构造签名
const sign = wxpaysign({
  appId: 'your_appid',
  timeStamp: timeStamp,
  nonceStr: nonceStr,
  package: packageStr,
  signType: 'MD5',
  key: 'your_key'
})

// 调起支付
wx.requestPayment({
  timeStamp: timeStamp.toString(),
  nonceStr: nonceStr,
  package: packageStr,
  signType: 'MD5',
  paySign: sign,
  success(res) {
    console.log(res)
  },
  fail(res) {
    console.log(res)
  }
})