微信支付 結合微信支付的api文檔進行配置。參考JSAPI支付開發者文檔——微信內H5調起支付
微信文檔中的例子如下。
function onBridgeReady(){
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId":"wx2421b1c4370ec43b", //公眾號名稱,由商戶傳入
"timeStamp":"1395712654", //時間戳,自1970年以來的秒數
"nonceStr":"e61463f8efa94090b1f366cccfbbb444", //隨機串
"package":"prepay_id=u802345jgfjsdfgsdg888",
"signType":"MD5", //微信簽名方式:
"paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信簽名
},
function(res){
if(res.err_msg == "get_brand_wcpay_request:ok" ){
// 使用以上方式判斷前端返回,微信團隊鄭重提示:
//res.err_msg將在用戶支付成功后返回ok,但并不保證它絕對可靠。
}
});
}
// 下面是兼容不同瀏覽器綁定事件的方法
if (typeof WeixinJSBridge == "undefined"){
if( document.addEventListener ){
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);

}else if (document.attachEvent){
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
}
}else{
onBridgeReady();
}
我們主要是從后臺中獲取數據傳入這個方法中。
所以第一步是獲取數據,第二步是把獲取到的數據傳入到方法
第一步:發送請求獲取后臺數據
1.在對應的api文件下封裝請求(get)
export function wechatPay(type, vid, token, point, discount) {
let discount_type = discount || null
return axios.get(`${Host}/api/save_mobile`,{
params: {
pay_type: type,
video_id: vid,
token,
point,
discount_type
}
})
}
2.在對應的組件調用請求
發送支付請求
import { wechatPay } from '../../../api/pay.js'
export default {
name: 'payfooter',
computed: {
info() {
return this.$store.state.user.info
},
// 獲取選擇支付的方式
paytype() {
return this.$store.state.pay.paytype
}
},
methods: {
_wechatPay(type, vid, token, point) {
wechatPay(type, vid, token, point).then(res => {
console.log(res) // 這個res就是后臺返回的數據
})
}
}
}
3.后臺返回的json格式數據如下(這不是出來,方便顯示我就直接把json數據復制過來)
{
"code": 0,
"data": {
"appId": "wx5beac*******7c40c",
"nonceStr": "8491k3******Rs5",
"package": "prepay_id=wx07**************2653",
"paySign": "CDE21B*************40C1A",
"signType": "MD5",
"timeStamp": "15******1"
},
"msg": null
}
第二步:把數據傳給函數
所以真正需要獲取的內容是 res.data.data微信支付接口web端能用app嗎,然后再把res.data.data的值傳給函數
4.重新整理一下代碼就是
methods: {
_wechatPay(type, vid, token, point) {
wechatPay(type, vid, token, point).then(res => {
res = res.data
if(res.code === 0) {
this.onBridgeReady(res.data) // 這樣就把res.data傳給onBridgeReady函數
}

})
},
// 微信支付api相關配置文檔
onBridgeReady(data) {
if (typeof WeixinJSBridge === 'undefined') {
this.$toast({ message: '請使用微信內置瀏覽器進行支付' })
} else {
WeixinJSBridge.invoke(
'getBrandWCPayRequest',
{
appId: data.appId, // 公眾號名稱,由商戶傳入
timeStamp: data.timeStamp, // 時間戳,自1970年以來的秒數
nonceStr: data.nonceStr, // 隨機串
package: data.package,
signType: data.signType, // 微信簽名方式:
paySign: data.paySign // 微信簽名
},
res => {
if (res.err_msg === 'get_brand_wcpay_request:ok') {
this.$toast({ message: '支付成功' })
this.$router.push({path: '/videoplayer', query: { video_id: this.$route.query.video_id }}) // 支付成功之后跳轉的路由
} else {
this.$toast({ message: '支付失敗' })

}
}
)
}
},
}
支付寶支付
與微信支付不同的是,支付寶支付后臺是返回form格式的數據微信支付接口web端能用app嗎,如下
<script>document.forms[0].submit();</script>
那么在處理后臺數據的時候用下面的方法(參考網絡大神)
_wechatPay(type, vid, token, point) {
wechatPay(type, vid, token, point).then(res => {
const form = res.data
const div = document.createElement('div')
div.id = 'alipay'
div.innerHTML = form
document.body.appendChild(div)
document.querySelector('#alipay').children[0].submit() // 執行后會喚起支付寶
})
}