uniapp微信小程序支付前端生成簽名并調(diào)起微信支付全部代碼
更新時間：2024年07月11日 08:32:30 作者：流偌花火
想要在uniapp中實現(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時間戳
nonceStr: 'xxxxxxxxxxx', //隨機字符串
package: 'prepay_id=' + prepay_id, //通過JSAPI下單接口獲取到發(fā)起支付的必要參數(shù)prepay_id
}
①、登錄小程序開發(fā)者平臺獲取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
調(diào)用后端發(fā)起支付接口返回，后端返回
三、簽名封裝
singH5(data) {
let encipher = new jsrsasign.RSAKey()
// 私鑰 在微信端申請好后會有，一般由后端提供
const key = `-----BEGIN PRIVATE KEY-----
xxxxxxxxxxxxxxxxxxxxxx
-----END PRIVATE KEY-----`
// 把私鑰轉(zhuǎn)成16進制并設(shè)置秘鑰
encipher = jsrsasign.KEYUTIL.getKey(key)
// 設(shè)置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)
// 加密后,轉(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進制并設(shè)置秘鑰
encipher = jsrsasign.KEYUTIL.getKey(key)
// 設(shè)置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)
// 加密后,轉(zhuǎn)成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 = {
//個人數(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, // 時間戳（單位：秒）要和上面簽名的一致
nonceStr: str.nonceStr, // 隨機字符串
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)文章
這篇文章主要介紹了利用 spin.js 生成等待效果(js 等待效果),需要的朋友可以參考下2017-06-06
最近萌生了用ECMAScript6寫一個輪播圖的想法，以前就知道ECMAScript6，但是一直沒有學(xué)，現(xiàn)在終于下決心學(xué)了，本篇文章會總結(jié)在實踐中用到的ES6的知識。2016-08-08
getElementByIdx_x js自定義getElementById函數(shù)
最近看JS代碼，發(fā)現(xiàn)不少人問getElementByIdx_x是什么函數(shù)，其實就是個getElementById自定義函數(shù)2012-01-01
Javascript限制網(wǎng)頁只能在微信內(nèi)置瀏覽器中訪問
最近正在開發(fā)一個微信公眾賬號，其中有一項功能是用戶發(fā)送文字消息給公眾號，然后公眾號返回圖文消息給用戶，用戶再點擊圖文消息即可跳轉(zhuǎn)到一個網(wǎng)頁鏈接，在微信的內(nèi)置瀏覽器中打開。2014-11-11
在寫一些關(guān)于圖片操作的代碼的時候，一般都需要在圖片加載完成之后再執(zhí)行程序。然而在Chorme中（貌似Safari也是）對window.onload的理解與IE和FF有偏差。2010-03-03
這篇文章主要介紹了JavaScript小技巧整理篇(非常全)的相關(guān)資料,需要的朋友可以參考下2016-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序progress組件的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
微信小程序wx.getUserInfo授權(quán)獲取用戶信息(頭像、昵稱)的實現(xiàn)
這篇文章主要介紹了微信小程序wx.getUserInfo授權(quán)獲取用戶信息(頭像、昵稱)的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)頁面頂部選項卡效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
微信小程序骨架屏的應(yīng)用與實現(xiàn)步驟詳細(xì)記錄
所謂骨架屏就是在頁面數(shù)據(jù)尚未加載前先給用戶展示出頁面的大致結(jié)構(gòu),直到請求數(shù)據(jù)返回后再渲染頁面,補充進需要顯示的數(shù)據(jù)內(nèi)容,這篇文章主要給大家介紹了關(guān)于微信小程序骨架屏的應(yīng)用與實現(xiàn)的相關(guān)資料,需要的朋友可以參考下2022-05-05