微信小程序支付功能完整流程
支付流程
整个支付流程分为四个步骤:
获取令牌token
创建订单
预支付,获取支付参数对象pay
发起微信支付
收尾工作。跳转到订单页面,删除购物车中已购买的商品
请求方式:POST
整个支付过程中用到的网络请求较多,并且有很多的共性,建议封装到request.js中
整个支付过程都要用try-catch包裹(我没有用)
[温馨提示]:支付流程中的url已失效
获取令牌token
- 获取令牌token
// 点击支付
async handleOrderPay() {
// 从缓存中获取token
const token = wx.getStorageSync('token')
// 如果token不存在,跳转到授权页面获取token
if (!token) {
wx.navigateTo({
url: '/pages/auth/auth',
})
}
<!-- 点击按钮获取用户信息 -->
<button type="primary" plain open-type="getUserInfo" bindgetuserinfo="handleGetUserInfo">授权</button>
- 缓存中不存在token,授权!
// 授权操作
// pages/auth/auth.js
import {request} from '../../request/index.js' //网络请求
import regeneratorRuntime from '../../lib/runtime/runtime' //使用es7语法
import {login} from '../../utils/asyncWx.js' //内部封装了wx.login(),通过该方法获取一个必须参数code
Page({
// 获取用户信息
async handleGetUserInfo(e) {
try {
// 获取小程序登录成功后的五个必须参数
const {
encryptedData,
rawData,
iv,
signature
} = e.detail
const {
code
} = await login()
// 将这五个参数存入loginParams自定义对象中
const loginParams = {
encryptedData,
rawData,
iv,
signature,
code
}
// 获取token
const {
token
} = await request({
url: '/users/wxlogin',
// 传入这五个必须参数
data: loginParams,
method: 'POST'
})
// 将token存入缓存中,同时跳转到上一个页面
wx.setStorageSync('token', token)
wx.navigateBack({
// delta表示返回的层级,1表示返回上一层,2表示返回上两层
delta: 1,
})
} catch (error) {
console.log(error)
}
}
})
创建订单
- 获取到5个必须参数
// 创建订单
// 请求头参数,这个参数会贯穿整个支付过程中的网络请求
const header = {
// 授权参数即为token
Authorization: token
}
// 请求体参数
const order_price = this.data.totalPrice //总价格
const consignee_addr = this.data.address.all //详细收获地址
const cart = this.data.cart
let goods = [] //订单数组,从购物车中提取出几个所需要的属性组成的数组
goods = cart.forEach(v => {
goods_id: v.goods_id
goods_number: v.num
goods_price: v.goods_price
})
// 将所需要的订单参数存入orderParams
const orderParams = {
order_price,
consignee_addr,
goods
}
- 获取订单编号
// 获取订单编号
const {order_number} = await request({
url: '/my/orders/create',
method: 'POST',
// 将之前获得的订单参数传入
data: orderParams,
header
})
console.log(order_number)
}
预支付
- 根据订单编号获取到支付参数对象pay
const {pay} = await request({
url: '/my/orders/req_unifiedorder',
method: "POST",
header,
// 传入订单编号
data: {
order_number
}
})
console.log('pay')

发起微信支付
- 将支付参数pay传入到requestPayment中即可
await requestPayment(pay)
收尾工作
- 跳转到订单页面,同时删除购物车中以购买的商品
await showToast('支付成功')
// 删除缓存中已经被选中的商品
let newCart = wx.getStorageSync('cart')
newCart = newCart.filter(v => !v.checked)
wx.setStorageSync('cart', newCart)
// 此时跳转到订单页面
wx.navigateTo({
url: '/pages/order/order',
})
微信小程序支付功能完整流程的更多相关文章
- 微信小程序支付功能前端流程
只是分享一下小程序支付功能的前端流程和代码, 仅供参考(使用的是uni app). handleCreate () { /** 第一步:前台将商品数据发送到后台,后台创建订单入库并返回订单id等信息 ...
- 微信小程序支付功能 C# .NET开发
微信小程序支付功能的开发的时候坑比较多,不过对于钱的事谨慎也是好事.网上关于小程序支付的实例很多,但是大多多少有些问题,C#开发的更少.此篇文档的目的是讲开发过程中遇到的问题做一个备注,也方便其他开发 ...
- 微信小程序支付及退款流程详解
微信小程序的支付和退款流程 近期在做微信小程序时,涉及到了小程序的支付和退款流程,所以也大概的将这方面的东西看了一个遍,就在这篇博客里总结一下. 首先说明一下,微信小程序支付的主要逻辑集中在后端,前端 ...
- 实战:微信小程序支付开发具体流程
来源:授权地址作者:会编码的熊 该文章纪录了我在开发小程序支付过程中的具体流程 1. 申请微信支付 小程序认证后进入微信支付申请小程序的微信支付 填写企业信息对公账户并上传凭证后,微信支付会打一笔随机 ...
- Python实现微信小程序支付功能
由于最近自己在做小程序的支付,就在这里简单介绍一下讲一下用python做小程序支付这个流程.当然在进行开发之前还是建议读一下具体的流程,清楚支付的过程. 1.支付交互流程 当然具体的参数配置可以参考官 ...
- 微信小程序支付功能讲解(1)
前言:虽然小程序做过很多,但是一直觉得微信支付功能很是神秘,现在终于有机会接触心里还是有点小激动的,经过一番折腾发现支付也不过如此,在此记录下支付功能的实现过程 小程序的官方文档介绍到发起微信支付即调 ...
- 微信小程序支付功能讲解(2)
小程序支付 业务流程时序图 官方文档 步骤: 1. Openid 在小程序初次加载的时候就已经获取(详情见 小程序登录) 2. 生成商户订单 1.商品信息由小程序端提供 2.提供支付统一下单接口所需参 ...
- 微信小程序支付功能讲解
前言:虽然小程序做过很多,但是一直觉得微信支付功能很是神秘,现在终于有机会接触心里还是有点小激动的,经过一番折腾发现支付也不过如此,在此记录下支付功能的实现过程 小程序的官方文档介绍到发起微信支付即调 ...
- 微信小程序 支付功能(前端)的实现
只提供微信小程序端代码: var app = getApp(); Page({ data: {}, onLoad: function (options) { // 页面初始化 options为页面跳转 ...
随机推荐
- 1x1卷据层的作用
1. 尽管1x1的卷据不会捕捉空间特征(spatial features/patterns,直观点说就是2D平面图的纹理特征),但是他们能很好基于通道(channel-wise/along the d ...
- 仿MSDN的帮助系统
作为软件开发人员,软件做好后,接下来就是编写文档.我自己也是做软件的,经常有用户询问软件的安装与使用, 我一直很喜欢微软的MSDN帮助系统,简介.大气,使用方便. 网上也找了很久,感觉一直没有合适的, ...
- 简单ping确定网络故障
1.ping localhost (127.0.0.1) 目的:确定TCP/IP有无问题 2.ping本机地址 用来检测网卡驱动有无问题 如何获取本机地址? win+r cmd 输入ipconfig/ ...
- 12、django.urls.exceptions.NoReverseMatch:
问题: django.urls.exceptions.NoReverseMatch: Reverse for 'project_star' with keyword arguments '{'proj ...
- PAT (Advanced Level) Practice 1035 Password (20 分) 凌宸1642
PAT (Advanced Level) Practice 1035 Password (20 分) 凌宸1642 题目描述: To prepare for PAT, the judge someti ...
- 热更新解决方案--xlua学习笔记
一.热更新方案简介 在Unity游戏工程中,C#代码(编译型语言)资源和Resources文件夹下的资源打包后都不可以更改,因此这部分内容不能进行热更新,而lua代码(解释型语言)逻辑不需要进行预编译 ...
- Istio 实践 之 Circuit breakers 断路器 (请求熔断)
参考: https://blog.51cto.com/14625168/2499406 https://istio.io/latest/zh/docs/tasks/traffic-management ...
- Elasticsearch扩展X-pack实施流程-实施
Elasticsearch扩展X-PACK实施流程 elasticsearch5.2.1安装X-PACK,对ES集群进行监控,报警,安全验证,报告,图形化操作 注意 版本号需要固定,小版本都不能差,要 ...
- 前端er必须知道的Git地址及常用工具地址
商城篇(找工作必练) 开源商城 推荐指数:5星,掌握了它,可以说,今后工作中的各种需求都不是问题,工作1~2年的也可以学习其中的思路(建议收藏). 这是一个集小程序/公众号/app为一体的商城系统,包 ...
- (十五)struts2的文件上传和下载
文件上传的原理 我们以前学习上传的时候知道需要将表单的enctype属性设置为multipart/form-data. 表单的enctype属性指定的是表单数据的编码方式,有三个值: -applica ...