uniapp實(shí)現(xiàn)支付功能
詳細(xì)參考:
https://gitee.com/copperpeas/uniapp-payment
uniapp-payment
介紹
uniapp支付
微信支付流程
測(cè)試接入的是uniapp官方預(yù)下單接口
APP應(yīng)用首先去微信等開(kāi)發(fā)平臺(tái)申請(qǐng)開(kāi)通支付,部分支付渠道需要配置支付目錄,授權(quán)域名,回調(diào)函數(shù)
預(yù)下單返回參考:
"data": {
"appid": "wx0411fa6a39d61297",
"noncestr": "Xu70l0bOQSQIDIPH",
"package": "Sign=WXPay",
"partnerid": "1230636401",
"prepayid": "wx271034552844601252843eae1384334800",
"timestamp": 1569551695,
"sign": "44B127098800419D542B688054F95A8F"
},
參考官方微信支付 https://pay.weixin.qq.com/wiki/doc/api/index.html
小程序支付:https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_3&index=1
簡(jiǎn)單流程: 第一步:調(diào)用登錄接口,獲取到用戶的openid等 第二步:Code,價(jià)格等發(fā)送給后臺(tái),后臺(tái)發(fā)送微信生成預(yù)支付訂單,并且返回訂單信息 第三步:小程序拿到預(yù)下單訂單信息,發(fā)起支付,調(diào)起支付APP 第四步:后臺(tái)驗(yàn)證支付結(jié)果
小程序第三步調(diào)起支付給APP調(diào)起支付參數(shù)不一樣,大體流程是一致的
商戶系統(tǒng)和微信支付系統(tǒng)主要交互:
1、小程序內(nèi)調(diào)用登錄接口,獲取到用戶的openid,api參見(jiàn)公共api【小程序登錄API】
2、商戶server調(diào)用支付統(tǒng)一下單,api參見(jiàn)公共api【統(tǒng)一下單API】
3、商戶server調(diào)用再次簽名,api參見(jiàn)公共api【再次簽名】
4、商戶server接收支付通知,api參見(jiàn)公共api【支付結(jié)果通知API】
5、商戶server查詢支付結(jié)果,api參見(jiàn)公共api【查詢訂單API】
拿到預(yù)下單后調(diào)用支付
uni.requestPayment({
timeStamp: paymentData.timeStamp,
nonceStr: paymentData.nonceStr,
package: paymentData.package,
signType: 'MD5',
paySign: paymentData.paySign,
success: (res) => {
uni.showToast({
title: "感謝您的贊助!"
})
},
fail: (res) => {
uni.showModal({
content: "支付失敗,原因?yàn)? " + res
.errMsg,
showCancel: false
})
},
complete: () => {
this.loading = false;
}
})
APP支付 https://pay.weixin.qq.com/wiki/doc/api/app/app.php?chapter=8_3
簡(jiǎn)單流程:
第一步:獲取支付類(lèi)型,APPid,支付金額 第二步:發(fā)送給后臺(tái),后臺(tái)發(fā)送微信生成預(yù)支付訂單,并且返回訂單信息 第三步:拿到預(yù)下單訂單信息,發(fā)起支付,調(diào)起支付APP 第四步:后臺(tái)驗(yàn)證支付結(jié)果
商戶系統(tǒng)和微信支付系統(tǒng)主要交互說(shuō)明:
步驟1:用戶在商戶APP中選擇商品,提交訂單,選擇微信支付。
步驟2:商戶后臺(tái)收到用戶支付單,調(diào)用微信支付統(tǒng)一下單接口。參見(jiàn)【統(tǒng)一下單API】。
步驟3:統(tǒng)一下單接口返回正常的prepay_id,再按簽名規(guī)范重新生成簽名后,將數(shù)據(jù)傳輸給APP。參與簽名的字段名為appid,partnerid,prepayid,noncestr,timestamp,package。注意:package的值格式為Sign=WXPay
步驟4:商戶APP調(diào)起微信支付。api參見(jiàn)本章節(jié)【app端開(kāi)發(fā)步驟說(shuō)明】
步驟5:商戶后臺(tái)接收支付通知。api參見(jiàn)【支付結(jié)果通知API】
步驟6:商戶后臺(tái)查詢支付結(jié)果。api參見(jiàn)【查詢訂單API】
拿到預(yù)下單后調(diào)用支付
uni.requestPayment({
provider: e.id,
orderInfo: orderInfo.data,
success: (e) => {
console.log("success", e);
uni.showToast({
title: "感謝您的贊助!"
})
},
fail: (e) => {
console.log("fail", e);
uni.showModal({
content: "支付失敗,原因?yàn)? " + e.errMsg,
showCancel: false
})
},
complete: () => {
this.providerList[index].loading = false;
}
})
微信有預(yù)下單,而支付寶不存在
支付寶支付流程
支付寶支付參考 https://docs.open.alipay.com/ 左邊支付欄目 支付寶APP支付 https://docs.open.alipay.com/204/105297
簡(jiǎn)單流程:
第一步:獲取支付類(lèi)型,APPid,支付金額
第二步:發(fā)送給后臺(tái),后臺(tái)針對(duì)支付寶請(qǐng)求參數(shù)說(shuō)明,組裝數(shù)據(jù),返回訂單信息
第三步:拿到組裝單訂單信息,發(fā)起支付,調(diào)起支付APP
第四步:后臺(tái)驗(yàn)證支付結(jié)果

到此這篇關(guān)于uniapp實(shí)現(xiàn)支付功能的文章就介紹到這了,更多相關(guān)uniapp 支付內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js數(shù)組轉(zhuǎn)json并在后臺(tái)對(duì)其解析具體實(shí)現(xiàn)
這篇文章主要介紹了js數(shù)組轉(zhuǎn)json并在后臺(tái)對(duì)其解析具體實(shí)現(xiàn),有需要的朋友可以參考一下2013-11-11
fireworks菜單生成器mm_menu.js在 IE 7.0 顯示問(wèn)題的解決方法
由于公司官網(wǎng)采用的是dreamwaver / fireworks 內(nèi)建的彈出式菜單的JS,在IE7下發(fā)現(xiàn)菜單項(xiàng)文字顯示都變成一排,無(wú)法正確瀏覽.2009-10-10
javascript實(shí)現(xiàn)不同顏色Tab標(biāo)簽切換效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)不同顏色Tab標(biāo)簽切換效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-04-04
獲取3個(gè)數(shù)組不重復(fù)的值的具體實(shí)現(xiàn)
先用concat拼接數(shù)組 ,再使用一個(gè)對(duì)象、一個(gè)新數(shù)組(用于存放不重復(fù)的數(shù)組)具體實(shí)現(xiàn)如下,感興趣的朋友可以參考2013-12-12
js使用generator函數(shù)同步執(zhí)行ajax任務(wù)
這篇文章主要為大家詳細(xì)介紹了js使用generator函數(shù)同步執(zhí)行ajax任務(wù),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09
利用百度echarts實(shí)現(xiàn)圖表功能簡(jiǎn)單入門(mén)示例【附源碼下載】
這篇文章主要介紹了利用百度echarts實(shí)現(xiàn)圖表功能簡(jiǎn)單,結(jié)合簡(jiǎn)單示例形式分析了echarts插件的圖標(biāo)繪制功能相關(guān)實(shí)現(xiàn)技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2019-06-06
uniApp獲取當(dāng)前位置經(jīng)緯度的示例代碼
這篇文章主要介紹了uniApp獲取當(dāng)前位置經(jīng)緯度,以下是使用uni.getLocation獲取當(dāng)前位置的示例代碼,需要的朋友可以參考下2024-01-01
JavaScript合并兩個(gè)數(shù)組并去除重復(fù)項(xiàng)的方法
這篇文章主要介紹了JavaScript合并兩個(gè)數(shù)組并去除重復(fù)項(xiàng)的方法,涉及javascript操作數(shù)組的合并與去重的相關(guān)技巧,需要的朋友可以參考下2015-06-06

