微信小程序 实现支付流程

一、背景

开发微信小程序时，涉及到微信支付的开发环节，特此记录一下

二、前提

2.1、注册微信支付商户号

官方注册地址👉👉：接入微信支付 - 微信商户平台

备注：此商户号为超级管理员，一般由更上级领导进行注册(   非前端人员注册  )，会成为公司收款账户，主要填写超管信息并上传企业资料(如：营业执照，对公银行账户信息，法人身份证)

2.2、小程序关联商户号

微信公众平台地址👉👉：微信公众平台

已注册的小程序，登录微信公众平台，在左侧功能项找到微信支付，选择商户号管理，将小程序与商户号关联

如果已经关联了，就会显示已关联的商户号信息👇

三、微信支付流程

3.1、微信官方支付流程图

官网地址👉👉：pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_4&index=3

说明：

1、小程序内调用登录接口，获取到用户的openid,api参见公共api【小程序登录API】

2、商户server调用支付统一下单，api参见公共api【统一下单API】

3、商户server调用再次签名，api参见公共api【再次签名】

4、商户server接收支付通知，api参见公共api【支付结果通知API】

5、商户server查询支付结果，如未收到支付通知的情况，商户后台系统可调用【查询订单API】 （查单实现可参考：支付回调和查单实现指引）

6、商户小程序内使用小程序调起支付API（wx.requestPayment）发起微信支付，详见小程序API文档

四、具体实现

4.1、获取OpenID

OpenID是用户唯一标识，通过临时登录凭证 code 换取的(登录凭证code，5分钟有效期)，通过code向后端接口获取OpenID

<script>
  import {
  	getBindSocial,wxLogin_api
  } from "@/action/action";
  import {
    MINITYPE
	} from '@/constants/hostConfig';
export default{
	data() {
		return {
			phone: '', 
		}
	},
	methods: {
		wexin_login(){
			wx.login({
				success: (res) =>{
					console.log(res.code,'code')
					let userCode = res.code
					//将code传递给服务器
					getBindSocial({
						jscode: userCode,
          				type: MINITYPE,
					}).then(res =>{
						console.log('res',res);
                        //将code传递给接口会返回openid，unionid，phone
					})
				}
			})
		}
	},
}
</script>

备注：

getBindSocial()是封装的api接口，将code传递给接口之后，会得到openid，unionid，phone等。如下图👇

4.2、调用预支付接口获取支付核心数据

将获取的openid与接口需要携带的参数，调用接口，获取支付核心数据

备注：

wx_advance_pay()是封装的api接口， openid在登录的时候直接本地存储在loginInfo对象中，参数wxOpenId是从本地存储的loginInfo对象中获取的openid，同时也包含接口需要携带的其他参数；以下为接口返回的支付核心数据，如下图👇

4.3、调用微信官方支付接口 wx.requestPayment()，弹出支付界面

微信支付接口地址👉👉：wx.requestPayment(Object object) | 微信开放文档

将 wx_advance_pay()接口返回的数据对象，作为wx.requestPayment()参数值，得到支付结果👇

调用后，会弹出付款界面，微信开发者工具需要扫码支付

如果是手机支付会弹出微信付款界面，支付完成后会收到账单信息

4.4、微信支付流程总结

1、获取OpenID：通过wx.login()获得code，将code传给接口获得OpenID

2、获取预支付核心数据：调用预支付接口，将OpenID与接口需要携带的其他参数，得到预支付核心数据；

数据包含：【时间戳--timeStamp，随机字符串--nonceStr，预支付id--package，签名算法--signType，签名--paySign】

3、发起微信支付：调用wx.requestPayment()，传递上一步获取的5个预支付核心数据，得到支付结果

最后，👏👏 😀😀😀 👍👍