【微信小程序】微信支付

简介

微信的支付方式有以下几种，不同的支付方式适用于不同的支付场景，而本文讲的就是 小程序支付 方式：

说到支付功能就要涉及到金钱交易，必定是有比较严格的规范及流程，如要求小程序必须具备企业性质，必须拥有微信支付商户平台的账号；

PS：申请微信支付商户平台需要一个微信小程序或公众号等，建议按照以下流程进行操作

准备工作

申请微信小程序账号
· 申请成功可拿到 AppID（小程序 id）和 AppSecret（小程序密钥）；
· 申请类型为企业性质，否则无法接入微信支付；
微信小程序认证
通过认证的小程序才能接入微信支付和绑定商户平台；
申请商户平台账号
· 需要第一步申请的 AppID；
· 申请成功可拿到 MchID（商户 id）和 MchKey（商户密钥）；
微信小程序关联商户号
微信和商户都认证成功后，在微信后台微信支付菜单中进行关联；
接入微信支付
在微信后台微信支付菜单中进行接入；

小程序支付流程

简要支付流程如下：

用户发起支付请求；
后端调用统一下单接口得到 prepay_id；
把支付所需参数返回前端；
前端调用支付接口进行支付操作；
支付结果通知；
前端根据不同的支付结果给用户不同的提示；

PS：难点在第 2、3、5 步，一定要仔细查看相关接口文档，否则容易出错，接下来我们按照以上 6 个步骤详细讲解在微信小程序中的支付流程

支付前的操作

因为严格意义上来说这不属于支付流程中的步骤，但支付过程中需要用到用户唯一标识 openid，所以建议在用户进入小程序时就进行这一步的操作：

调用 wx.login() 接口获取 code，并把 code 传到服务器；
后端服务器拿到 code 后调用 code2Session 接口获取 openid 和 session_key；

建议把openid存入数据库，方便随时获取，下面的步骤也会用到

后端服务器保好 appid, secret, mch_id, mch_key（这些数据分别在小程序后台和商户平台中获得，我是把它们做成 commonjs 模块并保存在 config/wx.js 文件中以方便调用）；

PS：开发者需要自行维护用户登录状态（用户登录状态的维护本文不做展开，请自行查阅相关资料）

小程序端：用户向商户服务器发起支付请求

这步没什么好说的，当用户点击支付按钮时，给我们自己的后端接口发起一个请求，携带必要的参数（如：body, total_fee 等），接口地址需要自行编写，如我的接口地址为 https://api/prepay

  /*** 向后端发送打赏请求*/gotoPay: function (event) {// console.log(event.currentTarget.dataset.index);const totalFee = this.data.nums[event.currentTarget.dataset.index];this.setData({totalFee: totalFee,toSelectNumShow: false,paidShow: true});wx.request({url: 'https://api/prepay',method: 'post',data: {body: '打赏', // 商品描述total_fee: totalFee // 总金额，单位为元},header: {'content-type': 'application/json'},success(res) {console.log(res);if (res.data.code === 1) {try {console.log(res.data.data);// 得到接口返回的数据，向微信发起支付const result = wx.requestPayment({// 5个必传参数timeStamp: res.data.data.timeStamp,nonceStr: res.data.data.nonceStr,package: res.data.data.packages,signType: res.data.data.signType,paySign: res.data.data.paySign});console.log('支付结果：', result);} catch (err) {console.log(err);wx.showToast({title: '支付失败'});}} else {console.log('支付请求失败！');console.log(res);}},fail(msg) {console.log(msg);}});},

PS：可能会有小伙伴产生疑惑，为什么不直接通过 wx.requestPayment()
在小程序端发起请求而要先请求商户自己的服务器呢？原因很简单，安全性问题，wx.requestPayment() 需要 2 个重要参数 paySign 和 package，需要 appid, secret, openid, mch_key 等私密数据，这些私密的数据不应该在前端暴露出来，而是放在自己的服务器中更安全，所以需要向自己的服务器发起这个请求拿到这些参数，下一步才能真正发起支付。

参考文献

微信支付之小程序支付
微信支付之H5支付

【微信小程序】微信支付相关推荐

微信小程序篇（微信小程序的支付）
微信小程序的支付和微信公众号的支付是类似的,对比起来还比公众号支付简单了一些,我们只需要调用微信的统一下单接口获取prepay_id之后我们在调用微信的支付即可. 今天我们来封装一般node的支付接口 ...
微信小程序服务器支付sdk,微信小程序之支付后如何调用SDK的异步通知
微信小程序之支付后如何调用SDK的异步通知发布时间:2021-07-05 10:47:33 来源:亿速云阅读:57 作者:小新这篇文章主要介绍微信小程序之支付后如何调用SDK的异步通知,文中介绍 ...
微信小程序调用支付接口支付（tp5、小程序）
微信小程序调用支付接口支付今天记录一下学习的小程序调用微信支付接口一.先理清一下调起微信支付的整个流程. 1.就是先调用微信的支付统一下单api获取到prepay_id 2.然后后端再将这个pre ...
ios微信小程序虚拟支付解决办法
ios微信小程序虚拟支付整理介绍目前iOS端暂不支持虚拟支付,微信小程序虚拟支付仅涉及到ios端,安卓端不受影响. 小程序支付规范 https://developers.weixin.qq.com/ ...
微信小程序微信支付代码实现流程
微信小程序微信支付是一个很简单的流程微信开发文档地址:wx.requestPayment(Object object) | 微信开放文档微信公众平台申请支付功能百度一大堆例举代码官方文档 ...
微信小程序—微信小程序端支付代码
只有微信小程序端的代码,如下 Page({data: {},onLoad: function (options) {// 页面初始化 options为页面跳转所带来的参数var that = this ...
微信小程序微信支付《JSAPI支付》APIV3详细教程
文章目录前提整体介绍我的maven依赖 1.整体流程 2.openid 的获取 3.统一下单Controller(预支付订单) 4.配置类和配置文件 5.工具类 6.前端接收到必要的参数,进行调 ...
微信小程序-微信支付退款
微信小程序-微信支付退款官方接口文档及相关附件申请退款 SDK 错误集锦调用该https://api.mch.weixin.qq.com/secapi/pay/refund接口需要应程序安装AP ...
微信小程序支付返回签名错误_java 微信小程序微信支付统一下订单及数字签名错误问题（后端）...
今天来分享一下之前做微信小程序微信支付遇到的一些坑,博主这里是微信小程序支付功能,因此选择的微信支付方式是JSAPI支付方式(温馨提示左下角有音乐哦). 首先我们肯定是要在小程序后台绑定一个商户号的, ...
微信小程序配置支付（附完整代码）
微信小程序配置支付 1. 微信支付官网配置项 2. 代码配置(登录.获取openId.拉起支付等) 3. 云开发示例 1. 微信支付官网配置项初次接入,商户号管理是没有数据的,需要申请接入. 如果是 ...