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。

备注：

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. 总结