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