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判断输入字符串是否为空、空格、null的方法总结

    js判断输入字符串是否为空、空格、null的方法总结

    下面小编就为大家带来一篇js判断输入字符串是否为空、空格、null的方法总结。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • 如何使用bootstrap框架 bootstrap入门必看!

    如何使用bootstrap框架 bootstrap入门必看!

    如何使用bootstrap?这篇文章就是告诉大家如何使用bootstrap框架,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • js精准计算

    js精准计算

    这篇文章主要介绍了js精准计算,对此感兴趣的同学,可以实验一下
    2021-04-04
  • 利用JavaScript如何查询某个值是否数组内

    利用JavaScript如何查询某个值是否数组内

    这篇文章主要给大家介绍了关于利用JavaScript如何查询某个值是否数组内的相关资料,文中通过示例代码分别介绍了实现该问题的一些解决方法是否可行,需要的朋友可以参考借鉴,下面跟着小编来一起学习学习吧。
    2017-07-07
  • 微信小程序 checkbox使用实例解析

    微信小程序 checkbox使用实例解析

    这篇文章主要介绍了微信小程序 checkbox使用实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • 深入理解JavaScript系列(29):设计模式之装饰者模式详解

    深入理解JavaScript系列(29):设计模式之装饰者模式详解

    这篇文章主要介绍了深入理解JavaScript系列(29):设计模式之装饰者模式详解,装饰者用用于包装同接口的对象,不仅允许你向方法添加行为,而且还可以将方法设置成原始对象调用(例如装饰者的构造函数),需要的朋友可以参考下
    2015-03-03
  • 基于JS实现视频上传显示进度条

    基于JS实现视频上传显示进度条

    这篇文章主要介绍了基于JS实现视频上传显示进度条,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • javascript版2048小游戏

    javascript版2048小游戏

    本文给大家分享的是使用javascript制作的2048小游戏的代码,仅仅是想锻炼下自己的编程代码风格,尽量做的规范些,小伙伴们多多给些建议。
    2015-03-03
  • JSON.stringify的多种用法总结

    JSON.stringify的多种用法总结

    这篇文章主要给大家介绍了关于JSON.stringify使用的相关资料, JSON.stringify()方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串,需要的朋友可以参考下
    2021-06-06
  • javascript中的变量是传值还是传址的?

    javascript中的变量是传值还是传址的?

    一门编程语言的核心是数据结构,粗略来讲,可以把数据结构分成不可变类型(immutable)和可变类型(mutable)。
    2010-04-04

最新评论