支付流程

  • 整个支付流程分为四个步骤:

    1. 获取令牌token

    2. 创建订单

    3. 预支付,获取支付参数对象pay

    4. 发起微信支付

    5. 收尾工作。跳转到订单页面,删除购物车中已购买的商品

  • 请求方式: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',
})

微信小程序支付功能完整流程的更多相关文章

  1. 微信小程序支付功能前端流程

    只是分享一下小程序支付功能的前端流程和代码, 仅供参考(使用的是uni app). handleCreate () { /** 第一步:前台将商品数据发送到后台,后台创建订单入库并返回订单id等信息 ...

  2. 微信小程序支付功能 C# .NET开发

    微信小程序支付功能的开发的时候坑比较多,不过对于钱的事谨慎也是好事.网上关于小程序支付的实例很多,但是大多多少有些问题,C#开发的更少.此篇文档的目的是讲开发过程中遇到的问题做一个备注,也方便其他开发 ...

  3. 微信小程序支付及退款流程详解

    微信小程序的支付和退款流程 近期在做微信小程序时,涉及到了小程序的支付和退款流程,所以也大概的将这方面的东西看了一个遍,就在这篇博客里总结一下. 首先说明一下,微信小程序支付的主要逻辑集中在后端,前端 ...

  4. 实战:微信小程序支付开发具体流程

    来源:授权地址作者:会编码的熊 该文章纪录了我在开发小程序支付过程中的具体流程 1. 申请微信支付 小程序认证后进入微信支付申请小程序的微信支付 填写企业信息对公账户并上传凭证后,微信支付会打一笔随机 ...

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

    由于最近自己在做小程序的支付,就在这里简单介绍一下讲一下用python做小程序支付这个流程.当然在进行开发之前还是建议读一下具体的流程,清楚支付的过程. 1.支付交互流程 当然具体的参数配置可以参考官 ...

  6. 微信小程序支付功能讲解(1)

    前言:虽然小程序做过很多,但是一直觉得微信支付功能很是神秘,现在终于有机会接触心里还是有点小激动的,经过一番折腾发现支付也不过如此,在此记录下支付功能的实现过程 小程序的官方文档介绍到发起微信支付即调 ...

  7. 微信小程序支付功能讲解(2)

    小程序支付 业务流程时序图 官方文档 步骤: 1. Openid 在小程序初次加载的时候就已经获取(详情见 小程序登录) 2. 生成商户订单 1.商品信息由小程序端提供 2.提供支付统一下单接口所需参 ...

  8. 微信小程序支付功能讲解

    前言:虽然小程序做过很多,但是一直觉得微信支付功能很是神秘,现在终于有机会接触心里还是有点小激动的,经过一番折腾发现支付也不过如此,在此记录下支付功能的实现过程 小程序的官方文档介绍到发起微信支付即调 ...

  9. 微信小程序 支付功能(前端)的实现

    只提供微信小程序端代码: var app = getApp(); Page({ data: {}, onLoad: function (options) { // 页面初始化 options为页面跳转 ...

随机推荐

  1. 最新版Swagger 3升级指南和新功能体验!

    Swagger 3.0 发布已经有一段时间了,它于 2020.7 月 发布,但目前市面上使用的主流版本还是 Swagger 2.X 版本和少量的 1.X 版本,然而作为一名合格的程序员怎么能不折腾新技 ...

  2. MyBatis简单的CRUD操作

    Dao接口 package com.ttpfx.dao; import com.ttpfx.domain.User; import java.util.List; public interface U ...

  3. Centos7安装maven详情以及配置

    一.maven安装: 1.获取maven下载地址: 查询maven最新版本地址:https://maven.apache.org/download.cgi 当前最新版本为maven 3.6.3    ...

  4. CI/CD版本回滚Jenkins解决方案

    一.创建项目 填写项目名,关系到项目路径对应请谨慎命名 二.项目配置 1.配置字符串参数和选项参数 2.代码仓库配置 3.构建环境 4.构筑脚本配置 5.点击左下方的保存或者应用 三.使用方法 1.发 ...

  5. 以聊天的形式解决traefik2.1.X的一个问题

    海口-老男人 17:24:48 大哥,这个是啥报错呀 海口-老男人 17:27:04 E0413 09:23:13.134144 1 reflector.go:153] pkg/mod/k8s.io/ ...

  6. [图论]最短网络:prim

    最短网络 目录 最短网络 Description Input Output Sample Input Sample Output 解析 代码 Description 农民约翰被选为他们镇的镇长!他其中 ...

  7. 学习笔记-git 上传

    0.git add * (如果你需要修改源码需要在 1 之前使用,然后再回到 1) 1.git commit -m '提交文字描述' 2.git push -u origin master (上传到主 ...

  8. 「HTML+CSS」--自定义加载动画【014】【疑问未解决】

    前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...

  9. resultMap结果集映射解决属性名和字段不一致问题

    解决属性名和字段名不一致的问题 1.出现的问题 数据库中的字段 ​ 新建一个项目,拷贝之前的,测试实体类与数据库字段不一致的情况 public class User { private int id; ...

  10. dubbo支持哪些通信协议?支持哪些序列化协议?

    (1)dubbo支持不同的通信协议 1)dubbo协议 dubbo://192.168.0.1:20188 默认就是走dubbo协议的,单一长连接,NIO异步通信,基于hessian作为序列化协议 适 ...