vue項(xiàng)目支付功能代碼詳解
更新時(shí)間：2022年01月05日 16:05:52 作者：接著奏樂(lè)接著舞。
這篇文章主要介紹了vue項(xiàng)目支付功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
1.支付寶方式：
支付寶方式：點(diǎn)擊支付寶支付, 調(diào)用后臺(tái)接口(攜帶訂單號(hào))，后臺(tái)返回一個(gè)form表單(HTML字符串結(jié)構(gòu))，
提交form就可以調(diào)用支付寶支付
代碼：
// alipayWap: 后臺(tái)接口返回的form 片段
<div v-html="alipayWap" ref="alipayWap"></div>
methods: {
toAlipay () {
this.$axios.get('xxx').then (res = > {
this.alipayWap = res;
// 等待dom更新, 等頁(yè)面中有這個(gè)form表單了
this.$nextTick(() => {
this.$refs.alipayWap.children[0].submit()
})
})
}
}
2.微信支付
大部分工作量是后端的事情，訂單的生成由后端去和騰訊對(duì)接的，前端只需要負(fù)責(zé)將后端返回來(lái)的支付二維碼（由后端生成的，有些情況也可以前端去對(duì)接訂單生成之后由前端自己生成二維碼，這種情況比較少）展示在終端供用戶掃碼即可
需要自己根據(jù)后臺(tái)返回的url生成二維碼頁(yè)面，如圖所示
二維碼展示代碼：
請(qǐng)求后端的支付二維碼接口
最后，掃碼支付后，即可完成。
到此這篇關(guān)于vue項(xiàng)目支付功能的文章就介紹到這了,更多相關(guān)vue支付功能內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于如何在vue中使用unocss以及基本使用方法的相關(guān)資料,unocss是一個(gè)即時(shí)的原子CSS引擎,它可以讓你用簡(jiǎn)短的類名來(lái)控制元素的樣式,而不需要寫復(fù)雜的CSS代碼,需要的朋友可以參考下2023-07-07
Ant Design的可編輯Tree的實(shí)現(xiàn)操作
這篇文章主要介紹了Ant Design的可編輯Tree的實(shí)現(xiàn)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
這篇文章主要介紹了vue-cli3 中跨域解決方案，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04
Vue如何為GET或POST請(qǐng)求設(shè)置請(qǐng)求頭
這篇文章主要介紹了Vue如何為GET或POST請(qǐng)求設(shè)置請(qǐng)求頭，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue解決移動(dòng)端彈窗滾動(dòng)穿透問(wèn)題
這篇文章主要介紹了Vue解決移動(dòng)端彈窗滾動(dòng)穿透問(wèn)題的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
Vue.js中的插槽（slot）是一種機(jī)制，允許你在組件的模板中預(yù)留一些位置，以便父組件可以將任意內(nèi)容插入到這些位置，這使得組件更加靈活和可復(fù)用，本文主要介紹了vue中slot插槽的參數(shù)匯總及使用方案,需要的朋友可以參考下2024-03-03
vue拖拽組件vuedraggable使用說(shuō)明詳解
這篇文章主要為大家詳細(xì)介紹了vue拖拽組件vuedraggable的使用說(shuō)明，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
今天小編就為大家分享一篇淺談Vue中render中的h箭頭函數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
vue如何通過(guò)router-link或者button跳轉(zhuǎn)到一個(gè)新的頁(yè)面
這篇文章主要介紹了vue如何通過(guò)router-link或者button跳轉(zhuǎn)到一個(gè)新的頁(yè)面，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
微前端qiankun主應(yīng)用與子應(yīng)用之間的跳轉(zhuǎn)示例
這篇文章主要為大家介紹了微前端qiankun主應(yīng)用與子應(yīng)用之間的跳轉(zhuǎn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08