微信小程序支付流程（前端）

1. 微信小程序支付流程（前端）

  小程序绑定微信支付涉及几个关键步骤：准备工作、绑定APPID、确认绑定、配置小程序微信支付3。以下是具体的操作流程：
  （1）准备工作：在开始之前，确保你已经有了一个微信小程序和一个微信支付商户号。如果你还没有微信支付商户号，需要先申请一个新的。
  （2）绑定APPID：登录微信公众平台，进入小程序后台，在“开发”-“开发设置”-“开发者ID”中获取小程序的APPID。然后进入微信商户平台，在“产品中心”-“APPID授权管理”中点击  “新增授权申请单”，填写小程序的APPID并发起授权邀请。
  （3）确认绑定：提交APPID授权申请后，返回小程序后台，在“微信支付”-“商户号管理”中查看相关商户号信息，并确认授权申请。或者在公众平台安全助手中下发的模板消息中确认授权信息。当授权关系状态显示为“正常”时，说明已经绑定成功。
  （4）配置小程序微信支付：完成小程序与微信商户号的绑定后，按照微信支付的相关指引，配置小程序的支付功能。这通常包括添加商户号和密钥等步骤。

1.1. 注册微信支付商户号

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

1.2. 小程序关联商户号

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


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

1.3. 微信支付流程

  官网地址：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文档

1.4. 具体实现

1.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等。

1.4.2. 调用预支付接口获取支付核心数据

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

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

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

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

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

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

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

1.4. 微信支付流程总结

1、获取OpenID：通过wx.login()获得code，将code传给接口获得OpenID
2、获取预支付核心数据：调用预支付接口，将OpenID与接口需要携带的其他参数，得到预支付核心数据；
数据包含：【时间戳--timeStamp，随机字符串--nonceStr，预支付id--package，签名算法--signType，签名--paySign】
3、发起微信支付：调用wx.requestPayment()，传递上一步获取的5个预支付核心数据，得到支付结果

2. 微信小程序支付完整流程

2.1. 注册微信支付商户号（由上级或法人注册）

   接入微信支付 - 微信商户平台


  此商户号，需要由主管及更上级领导进行注册，会成为公司收款账户（不是由前端程序员注册！！！不是由前端程序员注册！！！不是由前端程序员注册！！！）。
  注册非常简单，重点是需要提供企业资料，一般程序员没有权限获取这些材料，所以需要由上级注册。
  企业注册需要材料：营业执照，对公银行账户信息，法人身份证。

2.2. 注册小程序账号(由上级或者领导注册)

  注册流程简单，企业一般注册为企业小程序，非个人，需要上传营业执照等。
小程序

2.3. 登录商户号绑定小程序

  登录之前注册好的商户账号，将当前小程序ID绑定至此商户，表明此小程序可以调用此商户支付相关接口。
  微信支付 - 中国领先的第三方支付平台 ｜ 微信支付提供安全快捷的支付方式

2.4. 后端工程师书写接口

  返回核心数据如下：

"appId": "xxxx",
        "nonceStr": "xxxx",
        "packageValue": "prepay_id=xxxxx",
        "paySign": "xxxxxx",
        "signType": "MD5",
        "timeStamp": "xxxxxx"

  这个接口是你们公司后端程序员自己写的接口，由后端工程师书写，JAVA，PHP，C++，NODE，.NET等…不是前端写！不是前端写！不是前端写！如果没有此接口就与后端工程师沟通，让他书写。

2.5. 前端工程师调用接口

2.5.1. 获取openid（当前用户真实id）

  openid为当前用户真实id，无法直接用任何接口获得，需要先调用微信login接口登录，获取登录凭证code，在通过此code（登录凭证，5分钟有效），向微信服务器换取用户openid。
  （1）原生小程序登录：

wx.login({
  success (res) {
    if (res.code) {
     // code: 用户登录凭证（有效期五分钟）
     // 使用 code 可以换取 openid、unionid、session_key 等核心信息
    } else {
      console.log('登录失败！' + res.errMsg)
    }
  }
})

  （2）uniapp登录：：

uni.login({
  provider: 'weixin',
  success (res) {
    if (res.code) {
     //code: 用户登录凭证（有效期五分钟）
     //使用 code 可以换取 openid、unionid、session_key 等核心信息
    } else {
      console.log('登录失败！' + res.errMsg)
    }
  }
})

2.5.2. 发送请求调用微信官方接口，用code凭证换取用户openid（真实用户id）

  原生小程序：wx.request uniapp: uni.request， 流程无差别

uni.request({
  url: `https://api.weixin.qq.com/sns/jscode2session`, //微信官方接口
  data: {
    appid: '小程序appId',
    secret: '小程序密钥，在小程序appId下一行，放一块在',
    js_code: '刚才获取的code', 
    grant_type: 'authorization_code' //固定值
  },
  success: (res) => {
    //获取openid：用户真实唯一id
    console.log(res.data.openid);
  }
})

2.5.3. 调用公司后端接口，获取支付核心数据

// 调用后端接口
uni.request({
  url: '你们公司的后端接口地址,获取支付核心数据',
  method: 'POST',
  data: { 接口需要什么参数就传给接口,包含扣款金额,订单id等 },
  success(obj) {
    console.log(obj)
  }
})

  此接口必须返回以下6个核心数据,都是由后台计算生成。

"appId": "xxxx",

        "nonceStr": "xxxx",

        "packageValue": "prepay_id=xxxxx",

        "paySign": "xxxxxx",

        "signType": "MD5",

        "timeStamp": "xxxxxx"

2.5.4. 调用微信官方支付接口，弹出支付界面

uni.request({
  url: '你们公司的后端接口地址,获取支付核心数据',
  method: 'POST',
  data: { 接口需要什么参数就传给接口,包含扣款金额,订单id等 },
  success(obj) {
    //调用微信官方支付接口弹出付款界面,输入密码扣款
    wx.requestPayment({
      timeStamp: obj.xxxx.timeStamp,  //后端返回的时间戳
      nonceStr:  obj.xxxx.nonceStr,   //后端返回的随机字符串
      package:  obj.xxxx.packageValue, //后端返回的prepay_id
      signType: 'MD5', //后端签名算法,根据后端来,后端MD5这里即为MD5
      paySign:  obj.xxxx.paySign,  //后端返回的签名
      success (res) {
        console.log('用户支付扣款成功', res)
      },
      fail (res) { 
        console.log('用户支付扣款失败', res)
      }
     })
 
  }
})

  调用后，弹出付款界面，模拟器需要扫码支付。
  点击真机调试会直接弹出微信付款界面。

2.6. 总结