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函数使用技巧之 setTimeout(function(){},0)
setTimeout的作用是将函数推迟第二参数设定的毫秒数后再执行,如果是0,就意味着浏览器要马上执行该函数,但是浏览器解析到setTimeout,虽然会"立刻"执行2009-02-02
最新评论