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小程序支付前端生成签名内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript条件判断_动力节点Java学院整理

    JavaScript条件判断_动力节点Java学院整理

    JavaScript使用if () { ... } else { ... }来进行条件判断。下通过语句代码给大家详细介绍js 条件判断的基本知识,需要的的朋友参考下吧
    2017-06-06
  • JavaScript 字符串新增方法 trim() 的使用说明

    JavaScript 字符串新增方法 trim() 的使用说明

    这篇文章主要介绍了JavaScript字符串新增方法trim()的使用说明,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的朋友可以参考一下
    2022-09-09
  • javascript:以前写的xmlhttp池,代码

    javascript:以前写的xmlhttp池,代码

    用javascript写的xmlhttp池代码,最下面有调用方法
    2008-05-05
  • 手把手教你写一个微信小程序(推荐)

    手把手教你写一个微信小程序(推荐)

    最近接了一个微信小程序的项目,项目需求是小程序语音识别,全景图片观看,登录授权,获取个人基本信息。非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-10-10
  • 详解微信小程序开发聊天室—实时聊天,支持图片预览

    详解微信小程序开发聊天室—实时聊天,支持图片预览

    这篇文章主要介绍了微信小程序实时聊天支持图片预览,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • js防止表单重复提交实现代码

    js防止表单重复提交实现代码

    重复提交、重复刷新、防止后退等等都是属于系统为避免重复记录而需要解决的问题,在客户端去处理需要针对每一种的可能提出相应的解决方案,然而在服务器端看来只不过是对于数据真实性的检验问题
    2012-09-09
  • webpack的pitching loader详解

    webpack的pitching loader详解

    这篇文章主要介绍了webpack的pitching loader详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • 微信小程序switch组件使用详解

    微信小程序switch组件使用详解

    这篇文章主要为大家详细介绍了微信小程序switch组件的实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • 解读函数的节流与防抖问题

    解读函数的节流与防抖问题

    这篇文章主要介绍了解读函数的节流与防抖问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • js简单粗暴的发布订阅示例代码

    js简单粗暴的发布订阅示例代码

    这篇文章主要给大家介绍了js简单粗暴的发布订阅的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01

最新评论