定制开发微信小程序支付完整流程(前端)

 定制开发微信小程序中,定制开发常见付款给商家的场景,定制开发下面列出企业小程序中,从0起步完整。

一,定制开发注册微信支付商户号(定制开发由上级或法人注册)

 

 

此商户号,定制开发需要由主管及更上级领定制开发导进行注册,定制开发会成为公司收款账户(定制开发定制开发定制开发不是由前端程序员注册!!!不是由前端程序员注册!!!不是由前端程序员注册!!!)

定制开发注册非常简单,重点是需要提供企业资料,一般程序员没有权限获取这些材料,所以需要由上级注册

企业注册需要材料:营业执照对公银行账户信息法人身份证

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

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

三,登录商户号绑定小程序

登录之前注册好的商户账号,将当前小程序ID绑定至此商户,表明此小程序可以调用此商户支付相关接口。

四,后端工程师书写接口

返回核心数据如下:

"appId""xxxx",

        "nonceStr""xxxx",

        "packageValue""prepay_id=xxxxx",

        "paySign""xxxxxx",

        "signType""MD5",

        "timeStamp""xxxxxx"

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

五,前端工程师调用接口

1. 获取(当前用户真实id)

       openid为当前用户真实id,无法直接用任何接口获得,需要先调用微信login接口登录,获取登录凭证code,在通过此code(登录凭证,5分钟有效),向微信服务器换取用户openid。

原生小程序登录:

  1. wx.login({
  2. success (res) {
  3. if (res.code) {
  4. // code: 用户登录凭证(有效期五分钟)
  5. // 使用 code 可以换取 openid、unionid、session_key 等核心信息
  6. } else {
  7. console.log('登录失败!' + res.errMsg)
  8. }
  9. }
  10. })

uniapp登录:

  1. uni.login({
  2. provider: 'weixin',
  3. success (res) {
  4. if (res.code) {
  5. //code: 用户登录凭证(有效期五分钟)
  6. //使用 code 可以换取 openid、unionid、session_key 等核心信息
  7. } else {
  8. console.log('登录失败!' + res.errMsg)
  9. }
  10. }
  11. })

发送请求调用微信官方接口,用code凭证换取用户openid(真实用户id)

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

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

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

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

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

"appId""xxxx",

        "nonceStr""xxxx",

        "packageValue""prepay_id=xxxxx",

        "paySign""xxxxxx",

        "signType""MD5",

        "timeStamp""xxxxxx"

3. 调用微信官方支付接口,弹出支付界面

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

调用后,弹出付款界面,模拟器需要扫码支付。

点击真机调试会直接弹出微信付款界面。

六,总结

  • 前端调用uni.login/wx.login调用微信接口,获取code,code相当于临时身份证

  • 前端调公司后台获取openid的接口,获取openid

  • 前端调公司后台预支付接口,传递openid、商品id、商品单价、商品数量,获取那5个参数。【时间戳timeStamp,随机字符串nonceStr,预支付id package,签名算法signType,签名paySign】

  • 前端调用uni/wx.requestPayment调用微信支付方法,传递5个参数,获取支付结果(成功或失败)

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发