當前位置:首頁 » 網頁前端 » 如何利用web後端製作支付頁面
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

如何利用web後端製作支付頁面

發布時間: 2022-07-05 12:50:30

㈠ 如何製作收費網頁

除了製作網站外,還必須要編寫程序才能夠完成網上支付功能的。否則的話,是不可能實現這樣的功能的。

㈡ 微信小程序怎麼內嵌網頁實現支付

內嵌網頁中可使用JSSDK 1.3.0提供的介面,可坑就來了,居然不支持支付介面的調用,經過一番研究,總算打通了兩邊的交互。

大概流程

1、先說明涉及到的文件,下面會用到

1.1 app.js:小程序的app.js文件,在globalData里定義一個全局變數paySuccessUrl: '',用來保存支付成功跳轉url
1.2 wxminiwebview.js:小程序中放web-view的界面 1.3 wxminipay.js:小程序原生支付界面
1.4 web_pay.vue:內嵌網頁會調起支付的路由組件界面,由於我是用vue+vue-router寫的,所以你最好了解下vue和vue-router,記得引入微信jssdk1.3.0,最新版本才包含小程序相對應方法。很遺憾,微信並沒提供npm包,github有人提供的commonjs引入方式的微信jssdk版本也只有1.2.0,所以就只能這樣引入了。

<script src="./static/jweixin-1.3.0.js">script>

2、首先我們像官網那樣正常嵌入一個內嵌網頁,url是wxmini_webview.js中data中定義的變數,webview載入的就是網頁就是這個url。

<web-view src="{{url}}">web-view>

3、在內嵌網頁web_pay.vue里判斷當前是否是微信環境。

window.wx.ready(function () {
isWxMini = window.__wxjs_environment === 'miniprogram'
})

4、在內嵌網頁web_pay.vue調用支付時把支付金額,支付說明,支付成功跳轉url...(任何你想要的參數,記得encodeURIComponent),傳給小程序原生頁面。

if (isWxMini) {
let jumpUrl = encodeURIComponent(window.location)
let path = `/page/pay/pay?amount=${amount}&title=${desc}&jumpUrl=${jumpUrl}`
window.wx.miniProgram.navigateTo({
url: path
})
}

5、在小程序支付界面wxmini_pay.js里獲取到內嵌網頁傳過來的值,這里演示方便,實際上是在page的data里存儲這些會顯示在界面的值好些。

onLoad: function (options) {
console.log(options)
// 獲取網頁傳過來的值
// TODO 用es6解構來獲取值TODO
jumpUrl = options.jumpUrl
amount = options.amount
title = options.title
...
},

6、支付成功後,把跳轉url附帶支付結果及當前時間保存到全局變數。

paySuccess () {
let currentTime = new Date().getTime()
//這是為了防止wxmini_webview.js文件里調用setData由於前後兩個url一致導致路由不觸發刷新的bug
jumpUrl = options.jumpUrl+encodeURIComponent(`?payResult=1&time=${currentTime}`)
//payResult=1表示支付成功,這里我偷懶了直接在url後面補?,實際情況比較復雜
//為了實現支付成功返回後的無刷新載入,這里的參數應該是屬於路由web_pay.vue的,而不是屬於window.location.search的
//所以要判斷路由錨點#的位置和是否已經有路由參數(如果是vue-router的history模式我沒用過,應該和window.location一樣吧)
getApp().globalData.paySuccessUrl=jumpUrl //保存跳轉url到小程序全局變數里
wx.navigateBack() //返回會上個頁面,也就是承載網頁的容器頁面wxmini_pay.js
}

7、回到小程序wxmini_webview.js,會觸發onshow,在裡面進行界面無刷新載入。

onShow: function () {
console.log('on show')
let paySuccessUrl = getApp().globalData.paySuccessUrl
getApp().globalData.paySuccessUrl="" //清空支付成功url,防止一些操作觸發onShow事件
if (paySuccessUrl) {
let url = decodeURIComponent(paySuccessUrl)
this.setData({
//這里在次說明下步驟6中的&time=${currentTime},就是因為不加這個當你第一次支付成功回來這里
//這個url跟你第二次支付成功回來這里是一樣的,會導致第二次支付開始,這里的setData方法失效
url
})
}
},

8、步驟7中的setData會觸發webview中的網頁載入,由於我採用的是vue-router,而且前後兩個url只有路由的參數query不一樣,所以並不會觸發界面刷新,也不會觸發路由的重新載入,而是只會觸發beforeRouteUpdate 這個方法,舉個例子,現在支付前界面是https://host/#/pay,然後支付成功後跳轉https://host/?payResult=1&time=123456#/pay,此時界面不會刷新,pay路由也不會重新載入,而是觸發beforeRouteUpdate (to, from, next),你要做的只是在這里界面解析to.query里的數據,然後該幹嘛幹嘛

beforeRouteUpdate (to, from, next) {
console.log('路由發生改變,很有可能是小程序的支付成功回調')
let payResult = to.query.payResult
if (payResult) { // 小程序支付成功
if (payResult === '1') {
console.log('支付成功,下班打卡走人')
}
}
next()
},

㈢ 如何製作帶有微信支付的h5網頁

方法/步驟

點擊製作欄目,進入模板選擇頁
1、選擇空模板,自由創作;
2、選擇主題模板,更快速的創作出炫麗的展示。

選擇模板後,進入創作界面

預覽樹操作
1、顯示的頁面的顯示順序;
2、右鍵調整頁面的顯示順序;
3、點擊頁面右上角的X,可以把不需要的頁面刪除。

功能—添加修改文字
1、添加文字:點擊右側的文字選項→主編輯區會出現文字輸入框→雙擊修改
2、文字屬性修改:右側文字屬性修改選項,包括字體種類,字體大小、顏色等等。

功能—添加修改圖片
1、上傳圖片:點擊右側圖片選項→上傳按鈕→選擇圖片→確定
2、截圖:點擊截圖按鈕→選擇圖片區域→雙擊

功能—添加修改按鈕
添加按鍵:點擊右側按鈕選項→點擊編輯區的按鈕→修改文字、鏈接

功能—添加修改表單
1、添加表單:點擊右側的添加表單按鈕,在彈出的窗口中填寫提交數據的名稱
2、修改表單樣式:在右側的屬性欄中,修改表單的顯示樣式
3、查看及下載數據:客戶提交數據後,可以在表單數據中看到,並提供下載

功能—添加修改底圖
1、修改背景顏色:點擊右側底圖選項→選擇顏色
2、上傳底圖:點擊右側底圖選項→點擊上傳按鈕→確定

功能—添加修改背景音樂
添加背景音樂:點擊右側音樂選項→點擊選擇文件按鈕→確定→點擊上傳按鈕

功能—添加修改切換效果
添加切換效果:選擇頁面→點擊配置選項→選擇切換效果

功能—添加修改動畫效果
添加動畫效果:點擊添加動畫的組件→點擊動畫選項→點擊動畫效果

保存
點擊導航欄的保存按鈕→再點擊預覽按鈕→進入發布頁面

生成
1、添加標題、描述、縮略圖
2、生成的二維碼和鏈接可以用於分享到微信、微博等
3、點擊生成按鈕,即完成了一個作品的製作過程。

END
注意事項
關於層疊關系:右擊主編輯區的組件,可以修改組件間的層疊關系。
關於保存:建議每創建完成一個組件後,點擊左上角的保存,保存一次。
關於預覽:點擊左側的預覽樹頁面,可以預覽該頁面的展示效果。

㈣ 如何在網頁上添加支付按鈕

兩種方法:
1、首先在網站首頁加入網銀在線提供的鏈接logo,然後安裝調試介面,安裝方法為首先登錄商戶管理後台首頁,進入商家工具—網銀支付網關按鈕,然後按照頁面提示操作,即可生成網上支付代碼,將這些代碼拷貝/粘貼到網站適當的位置,就可以實現網上支付了。接著與支付寶簽訂合同,支付合同文件夾中有兩種合同供選擇,即人民幣支付合同和人民幣+外幣支付合同,根據網站面向的消費者類型進行選擇,合同簽訂後,在線支付服務即可生效。
2、進入支付寶網站—點擊商家服務—網站集成支付寶—讓我的網站也能讓用戶使用支付寶來付款—銷售型網站—馬上申請,即可申請支付寶在線支付。本服務適用於數碼、服裝、家電、游戲點卡、手機充值卡等各種交易。

㈤ web網站用支付寶收款、在線支付等怎麼做,怎麼實現呢

支付寶的收款產品涵蓋各類消費場景,包括線上支付和線下支付。線上支付包含有電腦網站支付(比如在電腦上逛淘寶然後付款)、手機APP支付(比如在手機上逛淘寶然後付款);線下支付主要指線下實體店或攤位等(如街邊攤買個煎餅果子然後用手機支付寶付款)。其中web網站收款簽約的介面名字叫做【手機網站支付】,
以上所有的收款產品都可以到螞蟻金服的商家服務官網https://b.alipay.com/?ynsrc=bdss1上開通,開通成功後,技術人員做集成即可進行收款。螞蟻金服商家服務官網不僅有支付寶的各類收款產品,也提供螞蟻金服其他的各類商家服務,例如芝麻信用、餘利寶企業理財等。

㈥ php網站如何做個頁面接入網銀在線支付介面

有兩個是用來接收網銀在線的反饋傳遞頁面(這兩個頁面一般是進行下面的第四步)
一個是配置文件
一個是網銀在線的一些函數(一般不需要修改)

1 先做商品支付頁面
2 用戶確定提交訂單(同時本地寫入資料庫一個唯一的訂單號,並設定成未支付狀態)
3.提交訂單到網銀在線支付頁面
4用戶支付成功後返回網站操作頁面(對用戶進行操作,數據中的當前訂單更改成已支付)

㈦ 移動端web支付怎麼調用支付寶,微信等客戶端完成支付

通常來講支付過程是需要與後台進行交互的
原因是如果您是使用web端來拉起微信支付,一般的解決方案是顯示一下微信支付的二維碼,該二維碼需要和後台交互獲取金額;
所以除非您在支付環節由用戶手動來輸入金額,否則是需要與後台交互的

㈧ javaweb根據不同的用戶需求如何共用一個支付頁面

接受同樣的輸入參數,返回相同的數據、記住來源的頁面、返回該頁面 。。。。。。。。。。。。。

㈨ 網站如何做個頁面接入網銀在線支付介面

一、申請網銀在線;
1、注冊網銀在線 http://www.shouxufei.net/ ;
2、下載並安裝支付介面 ;
3、合同的簽訂 (需要和網銀在線的銷售人員聯系,確定收費價格,並索要合同,流程完後就是後面的一些資料寄送) ;
4、合同生效開始提供服務。
二、做頁面:
有兩個是用來接收網銀在線的反饋傳遞頁面(這兩個頁面一般是進行下面的第四步)
一個是配置文件
一個是網銀在線的一些函數(一般不需要修改)
1 、先做商品支付頁面;
2、 用戶確定提交訂單(同時本地寫入資料庫一個唯一的訂單號,並設定成未支付狀態);
3、提交訂單到網銀在線支付頁面;
4、用戶支付成功後返回網站操作頁面(對用戶進行操作,數據中的當前訂單更改成已支付)。