Vue的H5頁面喚起支付寶支付功能
更新時間：2019年04月18日 10:24:06 投稿：mrr
目前項目中比較常用的第三方支付無非就是支付寶支付和微信支付。下面介紹一下Vue中H5頁面如何使用支付寶支付。這篇文章主要介紹了Vue的H5頁面喚起支付寶支付,需要的朋友可以參考下
目前項目中比較常用的第三方支付無非就是支付寶支付和微信支付。下面介紹一下Vue中H5頁面如何使用支付寶支付。其實很簡單的，只不過是調自己后臺的一個接口而已（后臺根據支付寶文檔，寫好支付接口）。
觸發(fā)支付寶支付調用后臺接口，后臺會返回支付寶提供的form表單，我們只要在vue里面創(chuàng)建新節(jié)點，將返回的form表單append進去，并提交就可以喚起支付寶支付。另在此說一下這個 returnUrl , 它是支付后支付寶回調的頁面。具體可以根據自身業(yè)務，后臺寫死或者由前端控制。
methods () {
/**
* 支付寶支付
*/
goAlipay () {
this.$loading.show()
const data = {
/* 自身接口所需的一些參數 */
...
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就是后臺返回接收到的數據 */
div.innerHTML = res.data.data.alipayInfo
document.body.appendChild(div)
document.forms[0].submit()
}
}, error => {
this.$loading.hide()
console.log(error)
})
}
}
總結
以上所述是小編給大家介紹的Vue的H5頁面喚起支付寶支付功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
相關文章
詳解auto-vue-file:一個自動創(chuàng)建vue組件的包
這篇文章主要介紹了auto-vue-file:一個自動創(chuàng)建vue組件的包,需要的朋友可以參考下2019-04-04
這篇文章主要為大家詳細介紹了Vue如何使用pdf-lib實現為文件流添加水印并預覽的功能，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起了解一下2023-03-03
今天小編就為大家分享一篇解決vue單頁路由跳轉后scrollTop的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue 出現data-v-xxx的原因及解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了Vue?各種loader的基本配置與使用，本文結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
本文主要介紹了VUE側邊導航欄實現篩選過濾的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
這篇文章主要為大家介紹了vue-print-nb只打印一頁解決方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪<BR>2023-11-11
本文主要介紹了Vue3封裝登錄功能的兩種實現，文中根據實例編碼詳細介紹的十分詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了基于Vue實現關鍵詞實時搜索高亮顯示關鍵詞，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了vue 開發(fā)之路由配置方法,結合實例形式詳細分析了了vue.js路由原理、配置方法及相關操作注意事項,需要的朋友可以參考下2019-12-12