uniapp微信小程序支付前端生成签名并调起微信支付全部代码

 更新时间:2024年07月11日 08:32:30   作者:流偌花火  
想要在uniapp中实现支付功能,通常需要使用第三方支付服务,如微信支付、支付宝支付,等这篇文章主要给大家介绍了关于uniapp微信小程序支付前端生成签名并调起微信支付的相关资料,需要的朋友可以参考下

一、安装npm包、引入npm包

npm install jsrsasign

页面引入依赖

import jsrsasign from 'jsrsasign'

签名方式使用的是SHA256withRSA

二、准备签名的数据

let str = {
    appId: 'xxxxxxxxxxx',   //appId后端返回,可在小程序开发平台获取
    timeStamp: 'xxxxxxxxxxx', //10时间戳
    nonceStr: 'xxxxxxxxxxx',  //随机字符串
    package: 'prepay_id=' + prepay_id, //通过JSAPI下单接口获取到发起支付的必要参数prepay_id
 }

①、登录小程序开发者平台获取appId,如图所示

②、前端获取10位时间戳

const time = Math.round(new Date().getTime()/1000).toString();
console.log(time);

③、前端获取随机字符串

getRandomString(length) {
      var result = ''
      var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
      var charactersLength = characters.length
      for (var i = 0; i < length; i++) {
        result += characters.charAt(Math.floor(Math.random() * charactersLength))
      }
      return result
},

④、prepay_id

调用后端发起支付接口返回,后端返回

三、签名封装

singH5(data) {
      let encipher = new jsrsasign.RSAKey()
      // 私钥 在微信端申请好后会有,一般由后端提供
      const key = `-----BEGIN PRIVATE KEY-----
xxxxxxxxxxxxxxxxxxxxxx
-----END PRIVATE KEY-----`
      // 把私钥转成16进制并设置秘钥
      encipher = jsrsasign.KEYUTIL.getKey(key)
      // 设置SHA256withRSA方式加密
      const sig = new jsrsasign.KJUR.crypto.Signature({
        alg: 'SHA256withRSA',
      })
      // 初始化
      sig.init(encipher)
      // 需要加密的字段,这里注意下一定要按每一个字段一行,切末位加上 \n
      const str = `${data.appId}\n` + 
      			  `${data.timeStamp}\n` + 
      			  `${data.nonceStr}\n` + 
      			  `${data.package}\n`
      const paySign = sig.updateString(str)
      // 加密后,转成base64
      return jsrsasign.hextob64(sig.sign())
    },

①、私钥如果找不到,可以在商户号平台获取

四、全部代码

import jsrsasign from 'jsrsasign'

//SHA256签名
singH5(data) {
      let encipher = new jsrsasign.RSAKey()
      // 私钥 在微信端申请好后会有,一般由后端提供
      // 在商户号平台可以找到
      const key = `-----BEGIN PRIVATE KEY-----
xxxxxxxxxxxxxxxxxxxxxx
-----END PRIVATE KEY-----`
      // 把私钥转成16进制并设置秘钥
      encipher = jsrsasign.KEYUTIL.getKey(key)
      // 设置SHA256withRSA方式加密
      const sig = new jsrsasign.KJUR.crypto.Signature({
        alg: 'SHA256withRSA',
      })
      // 初始化
      sig.init(encipher)
      // 需要加密的字段,这里注意下一定要按每一个字段一行,切末位加上 \n
      const str = `${data.appId}\n` + 
      			  `${data.timeStamp}\n` + 
      			  `${data.nonceStr}\n` + 
      			  `${data.package}\n`
      const paySign = sig.updateString(str)
      // 加密后,转成base64
      return jsrsasign.hextob64(sig.sign())
    },
	
	//获取随机字符串,长度可自定义
    getRandomString(length) {
      var result = ''
      var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
      var charactersLength = characters.length
      for (var i = 0; i < length; i++) {
        result += characters.charAt(Math.floor(Math.random() * charactersLength))
      }
      return result
},
 // 微信支付
    async setRecharge(price01, price02) {
      let _this = this
      let obj = {
       //个人数据
       //发起请求
      }
      let res = await setRechargeAPI(obj)
      if (res.code == 200) {
      	let prepay_id = res.data.prepay_id
 //---------------------------------------------------------------------------------------------
 //---------------------------------------------------------------------------------------------
 //---------------------------------------------------------------------------------------------
 //从这里开始,上面为发起订单支付获取  prepay_id
 //准备数据
        let str = {
          appId: 'xxxxxxxxx',  //你自己的appId
          timeStamp: Math.round(new Date().getTime() / 1000).toString(),
          nonceStr: this.getRandomString(31),
          package: 'prepay_id=' + prepay_id,
        }
        //获取签名
        let sign = this.singH5(str)
        uni.requestPayment({
          provider: 'wxpay', //支付类型-固定值 这里是微信支付
          appId: str.appId,  //appId
          timeStamp: str.timeStamp, // 时间戳(单位:秒)要和上面签名的一致
          nonceStr: str.nonceStr, // 随机字符串
          package: str.package, // 固定值
          signType: 'RSA', //固定值
          paySign: sign, //签名

          success: function (res) {
            console.log('支付成功')
            uni.showToast({
              icon: 'success',
              title: '支付成功',
            })
			//此处为自己的刷新数据方法
            //_this.getUserInfo()
          },

          fail: function (err) {
            console.log('支付失败', err)
            uni.showToast({
              icon: 'none',
              title: '支付失败',
            })
          },
        })
 //结束
 //---------------------------------------------------------------------------------------------
 //---------------------------------------------------------------------------------------------
 //---------------------------------------------------------------------------------------------
      }
    },

总结 

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

相关文章

  • js简单判断flash是否加载完成的方法

    js简单判断flash是否加载完成的方法

    这篇文章主要介绍了js简单判断flash是否加载完成的方法,通过PercentLoaded方法对flash的加载进行判断,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • JS+CSS实现感应鼠标渐变显示DIV层的方法

    JS+CSS实现感应鼠标渐变显示DIV层的方法

    这篇文章主要介绍了JS+CSS实现感应鼠标渐变显示DIV层的方法,涉及javascript对div层的逐渐显示与隐藏的实现技巧,需要的朋友可以参考下
    2015-02-02
  • js函数使用技巧之 setTimeout(function(){},0)

    js函数使用技巧之 setTimeout(function(){},0)

    setTimeout的作用是将函数推迟第二参数设定的毫秒数后再执行,如果是0,就意味着浏览器要马上执行该函数,但是浏览器解析到setTimeout,虽然会"立刻"执行
    2009-02-02
  • 时间处理工具day.js常用方法

    时间处理工具day.js常用方法

    平时项目中笔者也常用dayjs,它确实很好用,Day.js有着几乎和Moment.js一样的API,因此如果你用过Moment.js,那么也可以轻松使用Day.js,这篇文章主要给大家介绍了关于时间处理工具day.js常用方法的相关资料,需要的朋友可以参考下
    2024-02-02
  • uniapp开发微信小程序遇到的问题笔记

    uniapp开发微信小程序遇到的问题笔记

    这篇文章主要给大家介绍了关于uniapp开发微信小程序遇到的问题的相关资料,比较适合第一次使用uniapp 开发微信小程序的伙伴,或者没有过实战经验的小伙伴参考,需要的朋友可以参考下
    2023-01-01
  • onclick和onblur冲突问题的快速解决方法

    onclick和onblur冲突问题的快速解决方法

    下面小编就为大家带来一篇onclick和onblur冲突问题的快速解决方法。小编觉得挺不错的,现在分享给大家,也给大家做个参考
    2016-04-04
  • JS实现侧边栏鼠标经过弹出框+缓冲效果

    JS实现侧边栏鼠标经过弹出框+缓冲效果

    本文主要介绍了JS实现侧边栏鼠标经过弹出框+缓冲效果的实现原理与方法步骤。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03
  • javascript中sort() 方法使用详解

    javascript中sort() 方法使用详解

    sort()方法主要是用于对数组进行排序,默认情况下该方法是将数组元素转换成字符串,然后按照ASC码进行排序,这个大家都能理解,但如果数组元素是一个Object呢,转不了字符串,难道不能进行排序?答案当然是否定的,那么我们就来详细探讨下sort()方法的使用
    2015-08-08
  • JavaScript原生对象常用方法总结(推荐)

    JavaScript原生对象常用方法总结(推荐)

    下面小编就为大家带来一篇JavaScript原生对象常用方法总结(推荐)。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • JS实现的对象去重功能示例

    JS实现的对象去重功能示例

    这篇文章主要介绍了JS实现的对象去重功能,结合实例形式分析了javascript针对json对象的遍历、判断、运算实现去重功能相关操作技巧,需要的朋友可以参考下
    2019-06-06

最新评论