微信小程序调用支付接口的完整流程记录

 更新时间:2022年02月14日 15:06:21   作者:lilUnicorn  
我们在做小程序支付相关的开发时,总会遇到这些难题,下面这篇文章主要给大家介绍了关于微信小程序调用支付接口的完整流程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

官方的文档路径------》文档路径:developers.weixin.qq.com/miniprogram…

当然在开发之前,我们需要有下面这些东西:

  • appId(小程序分配)
  • 小程序密钥(小程序配置界面获取)
  • 商户号
  • api密钥(商家后台自己设置)

首先我们要知道把大象放进冰箱拢共需要三步(不是),那么我们调起支付也是一样的

步骤如下:

  • wx.login获取用户临时登录凭证code,发送到后端服务器换取openId

  • 在下单时,小程序需要将商品Id,商品数量,以及openId传送到服务器

  • 服务器在接收到商品Id、商品数量、openId后,生成服务期订单数据,同时经过一定的签名算法,向微信支付发送请求,获取预付单信息(prepay_id),同时将获取的数据再次进行相应规则的签名,向小程序端响应必要的信息(必须字段信息将在下文进行详细说明)

  • 小程序端在获取对应的参数后,调用wx.requestPayment()发起微信支付,唤醒支付工作台,进行支付

1.通过wx.login拿到code,然后请求接口从后台拿去openId

 login() {
    var that=this
    wx.login({
      success(res) {
        console.log(res)
        wx.request({ url: '', 
        data: { code: res.code } })
      },
    })

2.在调起微信支付前需要保证接收到所有我们要传递的值, 在这里是openId,和支付金额。openId以及相应需要的商品信息发送到后端,换取服务端的prepay_id

      let {
        money,
        openId
      } = this.data
     
      let token = wx.getStorageSync('user_token')
      let openList = await request('/接口', {
        ...需要给后端的字段
        openid: openId
      })
      this.setData({
        prepay_id: openList.data.prepay_id
      })

接下来我们就可以写一版调起微信支付接口的数据

let random = (Math.random()).toString() //这个随机数一定要变成字符串
      let timestamp = (new Date().getTime()).toString() //时间戳一定要是字符串
      let mch_key = 'FVmZcEmubX817JRKHmWo1vaVHzte2Oha'
      let obj = {
        appId: 'wxb9811d3b2e3de44c',
        nonceStr: random,
        package: "prepay_id=" + this.data.prepay_id,
        signType: 'MD5',
        timeStamp: timestamp
      }
      //参数名ASCII码从小到大排序(字典序)
      let arr = Object.keys(obj).sort().map(item => {
       return `${item}=${obj[item]}`;
      });
      //最后拼接上key(商户密钥)得到字符串
      let str = arr.join('&') + '&key=' + mch_key;
      console.log(str);
      //对str进行MD5运算,再将得到的字符串所有字符转换为大写
      let paySign = md5.hexMD5(str).toUpperCase()
      wx.requestPayment({
        "timeStamp": timestamp,
        "nonceStr": random,
        "package": "prepay_id=" + this.data.prepay_id,
        "signType": "MD5",
        "paySign": paySign,
        "success": function (res) {
          console.log('成功了');
        },
        "fail": function (res) {
          console.log(res);
          if (res.errMsg === 'requestPayment:fail cancel') {
            wx.showToast({
              title: '用户取消支付',
              icon: 'none',
              duration: 2000
            })
          } else {
            wx.showToast({
              title: res.errMsg,
              icon: 'none',
              duration: 2000
            })
          }
        },
      })

注意:以上信息中timeStamp、nonceStr、prepay_id、signType、paySign各参数均建议必须都由服务端返回(这样会尽最大可能性保证签名数据一致性),小程序端不做任何处理。大家改一下接口和传递的参数就可以啦,这已经是模板 可以直接用!

总结

到此这篇关于微信小程序调用支付接口的文章就介绍到这了,更多相关微信小程序调用支付接口内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Aptos SDK交互实现过程详解

    Aptos SDK交互实现过程详解

    这篇文章主要为大家介绍了Aptos SDK交互实现过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • JavaScript函数参数使用带参数名的方式赋值传入的方法

    JavaScript函数参数使用带参数名的方式赋值传入的方法

    这篇文章主要介绍了JavaScript函数参数使用带参数名的方式赋值传入的方法,实例分析了javascript函数传递参数的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • 脚本吧 - 幻宇工作室用到js,超强推荐expand.js

    脚本吧 - 幻宇工作室用到js,超强推荐expand.js

    脚本吧 - 幻宇工作室用到js,超强推荐expand.js...
    2006-12-12
  • 使用JavaScript 编写简单计算器

    使用JavaScript 编写简单计算器

    这篇文章主要介绍了使用JavaScript 编写简单计算器,需要的朋友可以参考下
    2014-11-11
  • js实现中国象棋游戏

    js实现中国象棋游戏

    这篇文章主要为大家详细介绍了js实现中国象棋游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • JavaScript 中的输出数据多种方式

    JavaScript 中的输出数据多种方式

    在 JavaScript 中,不像 Java 等语言,它没有任何打印或者输出方法的,在js中通过使用4种方式来输出数据,本文通过实例代码给大家详细介绍,感兴趣的朋友跟随小编一起看看吧
    2022-03-03
  • 带有定位当前位置的百度地图前端web api实例代码

    带有定位当前位置的百度地图前端web api实例代码

    这篇文章主要介绍了带有定位当前位置的百度地图前端web api实例代码 的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • JavaScript中对象的不同创建方法

    JavaScript中对象的不同创建方法

    js对象与一般的面向对象的程序设计语言有所不同的。js中的对象是基本原型的。下面给大家介绍js中对象的不同创建方法,非常不错,感兴趣的朋友一起学习吧
    2016-08-08
  • JS实现移动端按首字母检索城市列表附源码下载

    JS实现移动端按首字母检索城市列表附源码下载

    我们常见的手机通讯录或微信通讯录,联系人信息是按字母顺序排列的列表,通过点击右侧的字母,会迅速定位检索到首字母对应的联系人。下面通过本文给大家分享JS实现移动端按首字母检索城市列表功能,需要的的朋友参考下吧
    2017-07-07
  • javascript和jquery中cookie的设置方法

    javascript和jquery中cookie的设置方法

    Cookie 是浏览器访问服务器后,服务器传给浏览器的一段数据。浏览器需要保存这段数据,不会轻易删除(保存在计算机中)。此后每次浏览器访问该服务器,都必须带上这段数据。这篇文章主要介绍了javascript和jquery中cookie的设置方法
    2023-07-07

最新评论