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

前言

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

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

小程序支付交互流程图

举个栗子?:

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

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

小结

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

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

  1. 使用wx.login获取临时登录凭证code,发送到后端获取openId wx.login({ success (res) { if (res.code) { // 发起请求,换取openId wx.request({ url: '', data: { code: res.code } }) } } })
  2. openId以及相应需要的商品信息发送到后端,换取服务端进行的签名等信息 wx.request({ url: '', data: { openId: '', num: 1, id: '111' } })
  3. 接收返回的信息(必须要包含发起微信支付wx.requestPayment的参数),发起微信支付 wx.requestPayment({ // 时间戳 timeStamp: '', // 随机字符串 nonceStr: '', // 统一下单接口返回的 prepay_id 参数值 package: '', // 签名类型 signType: '', // 签名 paySign: '', // 调用成功回调 success () {}, // 失败回调 fail () {}, // 接口调用结束回调 complete () {} }) 注意:以上信息中timeStampnonceStrprepay_idsignTypepaySign各参数均建议必须都由服务端返回(这样会尽最大可能性保证签名数据一致性),小程序端不做任何处理

基于Taro的微信支付实例

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>
    )
  }
}

效果图

唤起微信支付工作台

结语

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

后记

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

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

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

胡哥有话说

本文分享自微信公众号 - 胡哥有话说(hugeyouhuashuo)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-07-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏matlab爱好者

科研小助手推荐 第四期

大家好,感谢大家对matlab爱好者公众号的厚爱!如果公众号文章对您有帮助,别忘了分享和点赞哦!若您对公众号有什么意见或建议,请在公众号中回复或在任意文章底部留...

13030
来自专栏谭小谭

多个系统间是怎么保证统一登录的

比如:淘宝网(www.taobao.com),天猫网(www.tmall.com),聚划算(ju.taobao.com),飞猪网(www.fliggy.com)...

51420
来自专栏物流IT圈

微服务系统之认证管理详解

微服务大行其道,微服务安全也是非常热门的话题。本文向大家分享微服务系统中认证管理相关技术。其中包括用户认证、网关和 API 认证、系统间和系统内的认证。

9420
来自专栏萝卜大杂烩

实战 Google Colab,一起用 GPU

今天一起来看看尝试下 Google Colab 工具,一款由 Google 出品,免费面向大众的、可使用 GPU、TPU 来训练模型的给力在线工具!!

24110
来自专栏matlab爱好者

matlab调用IP Cam网络摄像头

感谢大家关注matlab爱好者微信公众号,今天给大家介绍一下如何使用matlab调用网络摄像头。在聊天栏中回复“017”、“摄像头”或“IP”即可快速获取本视频...

18120
来自专栏FreeBuf

Sniffglue:一款多线程数据包安全嗅探工具

Sniffglue是一款使用Rust开发的网络嗅探工具,该工具使用了线程池来利用所有的CPU核心并对多个网络数据包同时进行解析处理。该工具的主要目标就是帮助研究...

11530
来自专栏达达前端

微信小程序微信登录

开发接口 登录 wx.login wx.checkSession 签名加密

32220
来自专栏MixLab科技+设计实验室

「Get智能写作」V1.4.11使用说明

「Get智能写作」是优秀新媒体人必备的写作神器,减少脑力劳动,提高写作效率,快速写作变现。

40730
来自专栏Leetcode名企之路

为什么要用自增主键?

这固然没错,但是不那么具有说服力。最近在做商业账号的项目的时候,对这点体会尤为深刻。我觉得设置自增主键的最主要目的是:应对变化。

41740
来自专栏用户3577214的专栏

ftp服务器的搭建

http://blog.sina.com.cn/s/blog_459ced7a0101ou76.html

35060

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励