您好!欢迎来到五福铺素材

微信小程序支付完整流程(前端)

  • 计算机/互联网
  • 时间:2022-12-21 13:47
  • 阅读:356
资讯详情页摘要上方横幅-928*?

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


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

 

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


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


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


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


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

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


小程序


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

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


微信支付 - 中国领先的第三方支付平台 | 微信支付提供安全快捷的支付方式


四,后端工程师书写接口



返回核心数据如下:

"appId": "xxxx",

        "nonceStr": "xxxx",

        "packageValue": "prepay_id=xxxxx",

        "paySign": "xxxxxx",

        "signType": "MD5",

        "timeStamp": "xxxxxx"


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


五,前端工程师调用接口

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

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


原生小程序登录:

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

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


发送请求调用微信官方接口,用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);
  }
})


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"


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

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)
      }
     })
 
  }
})


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


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


六,总结


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


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


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


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

全部评论(0)
资讯详情页最新发布上方横幅
推荐阅读
  • AI与CDR哪个更实用
  • AI与CDR哪个更实用
  • ai与cdr哪个更实用?客观上讲,ai和cdr都是矢量图形制作工具软件,如果比较两款软件哪个更好用,其实,是见仁见智的。在操控概念的设计上,两款软件有着各自的理念与标准:Ai是与PHOTOSHOP出自同一家公司的,所以在软件操作理念上、菜单命令、快捷键布局上是几乎一致。Cdr是Corel公司出品的矢量图形制作工具软件。基于的图形概念的区别,ai是动态的图形概念,即路径与轮廓;cdr是固态的图形概念,即线与形状。而且轮廓与形状概念之间,也
  • 计算机/互联网
  • 时间:2022-12-21 08:49
  • 阅读:362
联系我们
联系客服
购买源码 源码咨询 订制开发 联系客服
0755-33942237
手机版

扫一扫进手机版
返回顶部