微信小程序支付功能全流程实践

jiezi

5 年前

微信小程序为电商类小程序，提供了非常完善、优秀、安全的支付功能。在小程序内可调用微信的 API 完成支付功能，方便、快捷。小程序开发者在开发小程序时，支付流程是必然要接触到，今天胡哥就小程序支付的全流程为大家一一细说，让小伙伴能快速得掌握小程序支付能力，避免踩坑！

某用户小明在某电商小程序上购买一块肥皂，从浏览、下单到支付经历了什么样的过程呢？

打开电商小程序，搜索浏览到某雕肥皂，点击查看详情后，发现大小、丝滑程度都很合适，点击直接下单
wx.login 获取用户临时登录凭证 code，发送到后端服务器换取 openId
在下单时，小程序需要将小明购买的商品 Id，商品数量，以及小明这个用户的 openId 传送到服务器
服务器在接收到商品 Id、商品数量、openId 后，生成服务期订单数据，同时经过一定的签名算法，向微信支付发送请求，获取预付单信息(prepay_id)，同时将获取的数据再次进行相应规则的签名，向小程序端响应必要的信息(必须字段信息将在下文进行详细说明)
小程序端在获取对应的参数后，调用 wx.requestPayment()发起微信支付，唤醒支付工作台，进行支付

进行微信支付，在小程序端我们主要做三件事：

注：服务端调用统一下单 API、签名算法不再本次分享讨论范围内，请期待胡哥的另外一次分享。

使用 wx.login 获取临时登录凭证 code, 发送到后端获取 openId

wx.login({success (res) {if (res.code) {
      // 发起请求，换取 openId
      wx.request({
        url: '',
        data: {code: res.code}
      })
    }
  }
})

将 openId 以及相应需要的商品信息发送到后端，换取服务端进行的签名等信息
```
wx.request({
  url: '',
  data: {
    openId: '',
    num: 1,
    id: '111'
  }
})
```

接收返回的信息（必须要包含发起微信支付wx.requestPayment 的参数），发起微信支付

wx.requestPayment({
  // 时间戳
  timeStamp: '',
  // 随机字符串
  nonceStr: '',
  // 统一下单接口返回的 prepay_id 参数值
  package: '',
  // 签名类型
  signType: '',
  // 签名
  paySign: '',
  // 调用成功回调
  success () {},
  // 失败回调
  fail () {},
  // 接口调用结束回调
  complete () {}
})

注意：以上信息中 timeStamp、nonceStr 、prepay_id、signType、paySign 各参数均建议必须都由服务端返回（这样会尽最大可能性保证签名数据一致性），小程序端不做任何处理

import Taro, {Component} from '@tarojs/taro'
import {View, Text, Button} from '@tarojs/components'
import './index.scss'

export default class Index extends Component {

  config = {navigationBarTitleText: '首页'}

  componentWillMount () {}

  async componentDidMount () {}

  componentWillUnmount () {}

  componentDidShow () {}

  componentDidHide () {}

  /**
   * sendOrderInfo()
   * @description 提交订单信息，获取支付凭证，唤起支付
   */
  async sendOrderInfo () {
    // 获取临时登录凭证 code
    let codeData = await Taro.login()
    // 换取 openId
    let openId = ''
    if (codeData.code) {
      let res = await Taro.request({
        // 定义的后端换取 openId 的接口
        url: 'https://www.justbecoder.com/getLogin',
        data: {code: codeData.code}
      })
      if (res && res.code === 0) {openId = res.openId}
    }
    // 发送 openId 以及对应的商品信息
    let data = await Taro.requrest({
      url: 'https://www.justbecoder.com/createdOrder',
      data: {
        openId,
        // 实际情况的商品数量
        num: 1,
        // 实际情况的商品 Id
        id: 111,
      }
    })
    // code === 0 表示提交订单成功，返回需要的签名信息等
    if (data && data.code === 0) {
      let {
        timeStamp,
        nonceStr,
        prepay_id,
        signType,
        paySign
      } = data.payInfo
      // 唤起支付，按小程序要求格式发送参数
      let payData = await Taro.requestPayment({
        timeStamp,
        nonceStr,
        package: 'prepay_id=' + prepay_id,
        signType,
        paySign
      })
      if (payData && payData.errMsg === 'requestPayment:ok') {
        Taro.showModal({
          title: '操作提示',
          content: '支付成功',
          showCancel: false,
          confirmText: '确定'
        })
      } else {
        Taro.showModal({
          title: '操作提示',
          content: '支付失败，请重新尝试',
          showCancel: false,
          confirmText: '确定'
        })
      }
    }
  }

  render () {
    return (
      <View className='index'>
        <Button onClick={this.sendOrderInfo}> 立即下单 </Button>
      </View>
    )
  }
}

在实际项目操作中，大家把接口换成自己的可用接口即可。

以上就是胡哥今天给大家分享的内容，喜欢的小伙伴记得 收藏 、 转发 、点击右下角按钮 在看，推荐给更多小伙伴呦，欢迎多多留言交流 …

胡哥有话说，一个有技术，有情怀的胡哥！京东开放平台首席前端攻城狮。与你一起聊聊大前端，分享前端系统架构，框架实现原理，最新最高效的技术实践！

长按扫码关注，更帅更漂亮呦！关注胡哥有话说公众号，可与胡哥继续深入交流呦！

微信小程序支付功能全流程实践

前言

知己知彼，方能百战不殆 – 小程序支付流程图

举个栗子????：

小结

基于 Taro 的微信支付实例

效果图

结语

后记