移動端h5網(wǎng)頁調(diào)用支付寶支付接口

來源 | https://www.dsiab.com/post/4181
領(lǐng)導(dǎo)第一次讓我做h5支付寶支付的時候,去了支付寶開放平臺,一頓上上下下左左右右,看完了長呼一口氣。
這個支付好像沒我啥事兒??!小伙伴兒們自行查看:https://opendocs.alipay.com/open/203/105285
關(guān)于手機網(wǎng)頁內(nèi)支付寶支付,核心代碼就是,后端會返回給你一個form,然后你拿著這個form去調(diào)用就行了。
這樣就需要你準備兩網(wǎng)頁。一個是你寫好的盛裝后臺返回的支付頁面,一個是支付成功后,給return_url跳轉(zhuǎn)的成功頁面。
并且你可以通過獲取網(wǎng)頁url參數(shù)的方法去根據(jù)參數(shù)在這個回調(diào)頁面里做些什么。
首先,我們先請求后端給我們的支付接口。
//點擊支付業(yè)務(wù)頁面<template><div><button @click="handlePay" class="pay_money_button" type="info" :loading="load" loading-text="支付中">去支付</button></div></template><script>export default {data(){return {load:false}},methods:{//點擊支付handlePay(){this.load = true;//請求支付參數(shù)let data = {orderId:this.payForm.orderId}aliPaySignH5(data).then((res) => {if (res.status == 1000) {if (res.data !== null) {//這里我用了緩存來處理返回值,用router傳參,一個會顯示在瀏覽器上,//一個強制刷新會消失參數(shù),而且form表單過長。個人喜好,自行更改sessionStorage.setItem('html',res.data);this.$router.push({path:'/bigdatapay'})}}}).finally((res)=>{this.load = false;Toast.fail(res.data.msg);}).catch((err) => {//你想吃點啥吃點啥吧})},}}</script>
//支付寶返回表單前端調(diào)用頁面<template><div class="container"><div v-html="apply"></div></div></template><script>export default {data(){return {apply:'',}},mounted(){let form = sessionStorage.getItem('html')this.apply = form;this.$nextTick(()=>{document.forms[0].submit()})},methods:{}}</script>
學(xué)習(xí)更多技能
請點擊下方web前端開發(fā)
![]()

評論
圖片
表情
