微信小程序支付流程(前端)
微信小程序的支付只要用到官方的支付API : wx.requestPayment(Object object)
官方文档地址:https://developers.weixin.qq.com/miniprogram/dev/api/payment/wx.requestPayment.html
1、总体流程
一般情况下,前端接触到的支付流程是这样的:商品页选择商品 ——> 提交商品订单(跳转到确认订单页) ——> 确认/选择收货地址 ——> 确认提交订单 ——> 支付 ——> 支付成功/失败
2、wx.requestPayment(Object object)
调用 wx.requestPayment(Object object) 需要携带的参数如下,支付成功后在success成功的回调内做对应操作
wx.requestPayment({timeStamp: 1414561699, // 时间戳,从 1970 年 1 月 1 日 00:00:00 至今的秒数,即当前的时间nonceStr: 'xxxxxx', // 随机字符串,长度为32个字符以下package: 'xxxxxxxxxxxx', // 统一下单接口返回的 prepay_id 参数值,提交格式如:prepay_id=***signType: 'MD5', // 签名算法,应与后台下单时的值一致paySign: 'xxxxxxxxxx', // 签名,具体见微信支付文档success (res) { // 成功的回调wx.showToast({title: '付款成功'})}, fail (res) { // 失败的回调wx.showToast({title: '支付失败',icon: 'none'})}})
})
3、支付
支付成功后在success的回调内做对应操作,可以跳转到支付成功页面,让用户在此页面点击查看订单或者在此页面点击浏览更多商品。
如果支付失败,就跳转到待付款页面,用户可以在15分钟内继续完成支付
注意:
1、在操作商品数量计算价格这里,请求计算价格的接口,此处可如果有接口,一定要请求接口计算,因为前端计算价格不安全。
2、在计算价格这块,优惠券选择了也要重新计算价格。通常在点击购买的这一步就直接请求优惠券接口,返回当前最优的优惠券搭配以及计算价格并渲染到页面,用户自主更改优惠券搭配后需要重新计算价格。
4、完整的微信支付流程(前端、后端、微信后台)
1、打开某小程序,点击直接下单
2、wx.login获取用户临时登录凭证code,发送到后端服务器换取openId
3、 在下单时,小程序需要将购买的商品Id,商品数量,以及用户的openId传送到服务器
4、服务器在接收到商品Id、商品数量、openId后,生成服务期订单数据,同时经过一定的签名算法,向微信支付发送请求,获取预付单信息(prepay_id),同时将获取的数据再次进行相应规则的签名,向小程序端响应必要的信息
5、小程序端在获取对应的参数后,调用wx.requestPayment()发起微信支付,唤醒支付工作台,进行支付
6、接下来的一些列操作都是由用户来操作的包括了微信支付密码,指纹等验证,确认支付之后执行鉴权调起支付
7、鉴权调起支付:在微信后台进行鉴权,微信后台直接返回给前端支付的结果,前端收到返回数据后对支付结果进行展示
8、推送支付结果:微信后台在给前端返回支付的结果后,也会向后台也返回一个支付结果,后台通过这个支付结果来更新订单的状态
微信小程序支付流程(前端)相关推荐
- 微信小程序支付流程(新手教程)
微信小程序支付流程: 一.前期申请准备工作 1.小程序注册,要以公司的以身份去注册一个小程序,才能开通微信支付权限: 个人申请的小程序是不具备"微信支付"功能的! 但个人小程序可以 ...
- 微擎支付返回商户单号_微信小程序支付流程
微信支付之小程序支付 微信的支付方式有以下几种,不同的支付方式适用于不同的支付场景,而今天要给大家讲的就是 小程序支付 方式 说到支付功能就要涉及到金钱交易,必定是有比较严格的规范及流程,如要求小程序 ...
- 天使童装微信小程序支付流程:
(商城余额支付,优惠支付,积分抵消,微信支付) 前台后台 系统后台 微信后台 :三部分 流程:点击下单按钮,请求下单支付,后端返回支付参数,收到5个参数之后输入密码确认用户支付 输入密码是跟小程序 小 ...
- 小程序:微信小程序支付流程
微信小程序支付流程 小程序微信支付的流程图: 1. 登录微信公众平台, 开通微信支付功能 这是准备工作的第一步, 确保小程序对应的支付功能已经开启 2. 登录微信商户平台 该步骤需要获取两个参数, 一 ...
- 小程序下单账号与支付账号不一致不让支付_微信小程序支付流程
微信支付之小程序支付 微信的支付方式有以下几种,不同的支付方式适用于不同的支付场景,而今天要给大家讲的就是 小程序支付 方式 说到支付功能就要涉及到金钱交易,必定是有比较严格的规范及流程,如要求小程序 ...
- 微信小程序支付流程!
谈一下微信小程序支付的流程 不整什么花里胡哨的,这边博客只是为了我个人理清思路,面临毕业,应对接下来的秋招,仅供参考,有什么不对的也可以提出意见,多多指教 在面试的时候说到微信小程序那么登录支付是一个 ...
- 微信小程序支付流程详解
原创 Dr Hydra 码农参上 2020-11-22 11:00 收录于合集#微信开发技术3个 最近在工作中接入了一下微信小程序支付的功能,虽然说官方文档已经比较详细了,但在使用过程中还是踩了不少的 ...
- 微信小程序支付流程(Java后端)
微信小程序支付(Java后端) 一.小程序支付的交互图如下 按住ctrl点击 微信支付平台开发文档 二.准备工作 第一步:在pom文件中导入微信支付SDK 有可能自动下载不了,可以到微信支付平台下载手 ...
- spring boot接入微信小程序支付流程
前言 正好最近项目中有需要做微信支付,跟着官方文档写下来坑还是踩了不少,于是写了这篇流程给自己长长记性,代码比较粗糙大家图一乐就好. 官方文档 官方接入指引--微信支付开发者文档 所用依赖 <d ...
最新文章
- 30万奖金等你拿,“信也科技杯”第五届数据解决方案应用大赛火热报名中!...
- java web轻量级开发面试教程内容精粹:哪些简历得不到面试机会
- 一段简单的模拟服务器的代码(Selector)
- 创建consumer服务
- java List 排序 Collections.sort() 对 List 排序
- BZOJ 3304: [Shoi2005]带限制的最长公共子序列( LCS )
- The prefix mvc for element mvc:annotation-driven is not bound 的解决方法
- Financial Management
- 双系统bios如何设置默认启动系统_BIOS(主板)常用功能:设置启动磁盘顺序,迁移系统必备...
- h5与微信小程序直播开发
- HTML时间日期选择器
- 第12课:生活中的构建模式——想要车还是庄园
- nodejs+mp2+mbtiles+实现google底图服务(centos7)
- jieBa analyse.extract_tags
- linux strace php,在Linux下使用strace窥视Oracle LGWR进程
- 【k8s系列十四】nginx-ingress原理
- 构造Linux的图形化安装程序(4)(转)
- 手机模拟器或手机设置代理服务器,以及手动设置的代理ip无法保存的问题解决
- 最硬核的独立蒙特卡洛抽样法
- 我的世界服务器修改宠物属性,我的世界怎么改宠物名字?