Vue的H5頁面喚起支付寶支付功能
更新時間：2019年04月18日 10:24:06 投稿：mrr
目前項目中比較常用的第三方支付無非就是支付寶支付和微信支付。下面介紹一下Vue中H5頁面如何使用支付寶支付。這篇文章主要介紹了Vue的H5頁面喚起支付寶支付,需要的朋友可以參考下
目前項目中比較常用的第三方支付無非就是支付寶支付和微信支付。下面介紹一下Vue中H5頁面如何使用支付寶支付。其實很簡單的，只不過是調(diào)自己后臺的一個接口而已（后臺根據(jù)支付寶文檔，寫好支付接口）。
觸發(fā)支付寶支付調(diào)用后臺接口，后臺會返回支付寶提供的form表單，我們只要在vue里面創(chuàng)建新節(jié)點，將返回的form表單append進去，并提交就可以喚起支付寶支付。另在此說一下這個 returnUrl , 它是支付后支付寶回調(diào)的頁面。具體可以根據(jù)自身業(yè)務(wù)，后臺寫死或者由前端控制。
methods () {
/**
* 支付寶支付
*/
goAlipay () {
this.$loading.show()
const data = {
/* 自身接口所需的一些參數(shù) */
...
amount: this.price,
/* 支付后支付寶return的url */
// returnUrl: 'www.baidu.com'
returnUrl: window.location.origin + window.location.pathname + '?userParams=' + this.userParams
}
this.$http(
this.$apiSetting.alipay,
data
).then(res => {
this.$loading.hide()
if (res.data.statusCode === '000000') {
const div = document.createElement('div')
/* 此處form就是后臺返回接收到的數(shù)據(jù) */
div.innerHTML = res.data.data.alipayInfo
document.body.appendChild(div)
document.forms[0].submit()
}
}, error => {
this.$loading.hide()
console.log(error)
})
}
}
總結(jié)
以上所述是小編給大家介紹的Vue的H5頁面喚起支付寶支付功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
這篇文章主要介紹了vue中使用vue-touch插件的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
工作中vue表單使用的最多的莫過于input、textarea、select等，原生js的基礎(chǔ)上vue通過雙向數(shù)據(jù)綁定等，實現(xiàn)了自己獨有的一套指令，這是react中沒有的部分，也算是vue的一大特色2022-09-09
Vue框架可以很方便的引入各種插件,但是也因此會經(jīng)常遇到種編譯報錯,這篇文章主要給大家介紹了關(guān)于vue前端編譯報錯解決的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2024-03-03
vue使用axios獲取不到響應(yīng)頭Content-Disposition的問題及解決
這篇文章主要介紹了vue使用axios獲取不到響應(yīng)頭Content-Disposition的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了詳解vue渲染從后臺獲取的json數(shù)據(jù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
在Vue中,我們可以使用unplugin-generate-component-name插件自動基于目錄名稱生成組件名稱,這個插件使得在大型代碼庫中找到和管理組件更加容易和直觀,這篇文章主要介紹了Vue自動生成組件示例總結(jié),需要的朋友可以參考下2023-12-12
vue3.0基于views批量實現(xiàn)動態(tài)路由的方法(示例代碼)
以前vue項目中也有很多實現(xiàn)動態(tài)路由的方法,比如有一些項目涉及權(quán)限的可能會使用api請求路由數(shù)據(jù)在來createRouter,或者本地構(gòu)建使用routes.push來動態(tài)構(gòu)建路由, 今天介紹一種新的方式來基于某個文件夾批量構(gòu)建動態(tài)路由的方法,感興趣的朋友一起看看吧2024-12-12
Vue 2.0學(xué)習(xí)筆記之Vue中的computed屬性
本篇文章主要介紹了Vue 2.0學(xué)習(xí)筆記之Vue中的computed屬性，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了vxe-table中vxe-grid的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue中實現(xiàn)圖片壓縮 file文件的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05