一、前言

微信小程序为电商类小程序,提供了非常完善、优秀、安全的支付功能

在小程序内可调用微信的API完成支付功能,方便、快捷

场景如下图所示:

  • 用户通过分享或扫描二维码进入商户小程序,用户选择购买,完成选购流程
  • 调起微信支付控件,用户开始输入支付密码
  • 密码验证通过,支付成功。商户后台得到支付成功的通知
  • 返回商户小程序,显示购买成功
  • 微信支付公众号下发支付凭证

二、流程

以电商小程序为例

支付流程图如下所示:

具体的做法:

  • 打开某小程序,点击直接下单
  • wx.login获取用户临时登录凭证code,发送到后端服务器换取openId
  • 在下单时,小程序需要将购买的商品Id,商品数量,以及用户的openId传送到服务器
  • 服务器在接收到商品Id、商品数量、openId后,生成服务期订单数据,同时经过一定的签名算法,向微信支付发送请求,获取预付单信息(prepay_id),同时将获取的数据再次进行相应规则的签名,向小程序端响应必要的信息
  • 小程序端在获取对应的参数后,调用wx.requestPayment()发起微信支付,唤醒支付工作台,进行支付
  • 接下来的一些列操作都是由用户来操作的包括了微信支付密码,指纹等验证,确认支付之后执行鉴权调起支付
  • 鉴权调起支付:在微信后台进行鉴权,微信后台直接返回给前端支付的结果,前端收到返回数据后对支付结果进行展示
  • 推送支付结果:微信后台在给前端返回支付的结果后,也会向后台也返回一个支付结果,后台通过这个支付结果来更新订单的状态

其中后端响应数据必要的信息则是wx.requestPayment方法所需要的参数,大致如下:

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

参数表如下所示:

三、结束

小程序支付和以往的网页、APP微信支付大同小异,可以说小程序的支付变得更加简洁,不需要设置支付目录、域名授权等操作

参考文献

  • https://pay.weixin.qq.com/wiki/doc/apiv3/open/pay/chapter2_8_0.shtml

微信小程序的支付流程的更多相关文章

  1. 前端调用微信小程序的支付流程

    目录 1,前言 2,流程 3,参数说明 4,具体代码 1,前言 分享一个完整的微信小程序支付流程中,前端要做的模块. 2,流程 在调用wx.requestPayment之前,需要准备一些参数,流程如下 ...

  2. 微信小程序发起支付流程

    小程序调起支付API 需要参数 邮件中参数 API参数名 详细说明 APPID appid appid是微信小程序后台APP的唯一标识,在小程序后台申请小程序账号后,微信会自动分配对应的appid,用 ...

  3. 微信小程序在线支付功能使用总结

    最近需要在微信小程序中用到在线支付功能,于是看了一下官方的文档,发现要在小程序里实现微信支付还是很方便的,如果你以前开发过服务号下的微信支付,那么你会发现其实小程序里的微信支付和服务号里的开发过程如出 ...

  4. 微信小程序篇(微信小程序的支付)

    微信小程序的支付和微信公众号的支付是类似的,对比起来还比公众号支付简单了一些,我们只需要调用微信的统一下单接口获取prepay_id之后我们在调用微信的支付即可. 今天我们来封装一般node的支付接口 ...

  5. 【微信小程序】支付过程详解

    一.介绍 今天跟大家分享微信小程序集成支付. 二.分析 1.小程序支付API 地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-pay.html ...

  6. 微信小程序登入流程

    微信小程序登入流程 一.首先前端先传code去后端 wx.login({ success(res) { if (res.code) { //发起网络请求 wx.request({ url: app.g ...

  7. 微信小程序后端开发流程

    微信小程序后端开发流程根据官网总结为两个步骤 1.前端调用 wx.login 返回了code,然后调用wx.getUserInfo获取到用户的昵称 头像 2.服务端根据code去微信获取openid, ...

  8. 微信小程序实现支付功能

    小程序支付,没有封装支付代码:直接上一段可用的流程代码吧:微信小程序支付官网文档有详细的说明,这里我就不再赘述啦:客户端js: wx.request({ url:'https://www.xxxx.c ...

  9. Mpvue1.0+Python3.7+Django2.0.4实现微信小程序的支付功能

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_112 其实微信支付有很多种形式,刷脸,扫码,APP支付,小程序支付等,这边只说明小程序支付的实现,不过原理上都大同小异. 首先,需 ...

随机推荐

  1. python 回归分析

    一.线性回归 1 绘制散点图 import matplotlib.pyplot as plt x = [5,7,8,7,2,17,2,9,4,11,12,9,6] y = [99,86,87,88,1 ...

  2. K8S_第一课作业_20200407

    (1)通过cgroup来限制memory ##消耗内存脚本 /tmp/xmem.sh #!/bin/bash mkdir /tmp/memory mount -t tmpfs -o size=2048 ...

  3. Webpack:打包项目报错(eslint: debugger)

    打包项目需要把项目中的debugger删除,否则会报错.

  4. xxl-job <=2.0.2 反序列化漏洞

    xxl-job <=2.0.2 反序列化漏洞 搭建 https://github.com/xuxueli/xxl-job/releases/tag/2.0.2 下载源码,导入idea,mysql ...

  5. 如何将 Ubuntu 版本升级到新版本

    @ 目录 0.将 Ubuntu 版本升级到新版本的注意事项 1.以图形方式升级到 Ubuntu 20.04(适用于桌面用户) 2.使用命令行升级到 Ubuntu 21.10 本教程通过从 Ubuntu ...

  6. leetcode-H2O生成(多线程)

    现在有两种线程,氧 oxygen 和氢 hydrogen,你的目标是组织这两种线程来产生水分子. 存在一个屏障(barrier)使得每个线程必须等候直到一个完整水分子能够被产生出来. 氢和氧线程会被分 ...

  7. php实现实例化类后自动进行错误以及异常处理(简易版)

    <?php class App { public function __construct() { /* * ini_set 设置配置项 * display_errors 是否在页面显示错误信息 ...

  8. tp5 引入 没有命名空间的类库的方法(以微信支付SDK为例)

    use think\Loader; Loader::import('Wxpay.WxPay',EXTEND_PATH,'.Api.php'); 注意扩展名的点"."不能省略 使用之 ...

  9. Hadoop的高可用搭建

    在已经安装完hadoop单机和zookeeper前提下 1.免密钥 ssh-keygen -t rsa 分发秘钥 ssh-copy-id -i master ssh-copy-id -i node1 ...

  10. 做PPT总是很难找到好看、有质感的图片,怎么办?

    1.制作PPT时,要想提升整体质感,就需要插入一些图片.当你进入到这个阶段,就意味着你剩下用来做PPT的时间,可能比较紧张了.所以,你的重中之重是,在最短的时间内找到合适的照片. 2.想快速找到好看. ...