uniapp微信小程序支付前端生成簽名并調(diào)起微信支付全部代碼
更新時(shí)間:2024年07月11日 08:32:30 作者:流偌花火
想要在uniapp中實(shí)現(xiàn)支付功能,通常需要使用第三方支付服務(wù),如微信支付、支付寶支付,等這篇文章主要給大家介紹了關(guān)于uniapp微信小程序支付前端生成簽名并調(diào)起微信支付的相關(guān)資料,需要的朋友可以參考下
一、安裝npm包、引入npm包
npm install jsrsasign
頁面引入依賴
import jsrsasign from 'jsrsasign'
簽名方式使用的是SHA256withRSA
二、準(zhǔn)備簽名的數(shù)據(jù)
let str = {
appId: 'xxxxxxxxxxx', //appId后端返回,可在小程序開發(fā)平臺獲取
timeStamp: 'xxxxxxxxxxx', //10時(shí)間戳
nonceStr: 'xxxxxxxxxxx', //隨機(jī)字符串
package: 'prepay_id=' + prepay_id, //通過JSAPI下單接口獲取到發(fā)起支付的必要參數(shù)prepay_id
}
①、登錄小程序開發(fā)者平臺獲取appId,如圖所示

②、前端獲取10位時(shí)間戳
const time = Math.round(new Date().getTime()/1000).toString(); console.log(time);
③、前端獲取隨機(jī)字符串
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
調(diào)用后端發(fā)起支付接口返回,后端返回
三、簽名封裝
singH5(data) {
let encipher = new jsrsasign.RSAKey()
// 私鑰 在微信端申請好后會有,一般由后端提供
const key = `-----BEGIN PRIVATE KEY-----
xxxxxxxxxxxxxxxxxxxxxx
-----END PRIVATE KEY-----`
// 把私鑰轉(zhuǎn)成16進(jìn)制并設(shè)置秘鑰
encipher = jsrsasign.KEYUTIL.getKey(key)
// 設(shè)置SHA256withRSA方式加密
const sig = new jsrsasign.KJUR.crypto.Signature({
alg: 'SHA256withRSA',
})
// 初始化
sig.init(encipher)
// 需要加密的字段,這里注意下一定要按每一個(gè)字段一行,切末位加上 \n
const str = `${data.appId}\n` +
`${data.timeStamp}\n` +
`${data.nonceStr}\n` +
`${data.package}\n`
const paySign = sig.updateString(str)
// 加密后,轉(zhuǎn)成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-----`
// 把私鑰轉(zhuǎn)成16進(jìn)制并設(shè)置秘鑰
encipher = jsrsasign.KEYUTIL.getKey(key)
// 設(shè)置SHA256withRSA方式加密
const sig = new jsrsasign.KJUR.crypto.Signature({
alg: 'SHA256withRSA',
})
// 初始化
sig.init(encipher)
// 需要加密的字段,這里注意下一定要按每一個(gè)字段一行,切末位加上 \n
const str = `${data.appId}\n` +
`${data.timeStamp}\n` +
`${data.nonceStr}\n` +
`${data.package}\n`
const paySign = sig.updateString(str)
// 加密后,轉(zhuǎn)成base64
return jsrsasign.hextob64(sig.sign())
},
//獲取隨機(jī)字符串,長度可自定義
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 = {
//個(gè)人數(shù)據(jù)
//發(fā)起請求
}
let res = await setRechargeAPI(obj)
if (res.code == 200) {
let prepay_id = res.data.prepay_id
//---------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------
//從這里開始,上面為發(fā)起訂單支付獲取 prepay_id
//準(zhǔn)備數(shù)據(jù)
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, // 時(shí)間戳(單位:秒)要和上面簽名的一致
nonceStr: str.nonceStr, // 隨機(jī)字符串
package: str.package, // 固定值
signType: 'RSA', //固定值
paySign: sign, //簽名
success: function (res) {
console.log('支付成功')
uni.showToast({
icon: 'success',
title: '支付成功',
})
//此處為自己的刷新數(shù)據(jù)方法
//_this.getUserInfo()
},
fail: function (err) {
console.log('支付失敗', err)
uni.showToast({
icon: 'none',
title: '支付失敗',
})
},
})
//結(jié)束
//---------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------
}
},總結(jié)
到此這篇關(guān)于uniapp微信小程序支付前端生成簽名并調(diào)起微信支付的文章就介紹到這了,更多相關(guān)uniapp小程序支付前端生成簽名內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript條件判斷_動力節(jié)點(diǎn)Java學(xué)院整理
JavaScript使用if () { ... } else { ... }來進(jìn)行條件判斷。下通過語句代碼給大家詳細(xì)介紹js 條件判斷的基本知識,需要的的朋友參考下吧2017-06-06
JavaScript?字符串新增方法?trim()?的使用說明
這篇文章主要介紹了JavaScript字符串新增方法trim()的使用說明,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的朋友可以參考一下2022-09-09
詳解微信小程序開發(fā)聊天室—實(shí)時(shí)聊天,支持圖片預(yù)覽
這篇文章主要介紹了微信小程序?qū)崟r(shí)聊天支持圖片預(yù)覽,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05

