微信支付

微信文档中的例子如下。

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();

}

我们主要是从后台中获取数据传入onBridgeReady这个方法中。

所以第一步是获取数据，第二步是把获取到的数据传入到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格式数据如下(这不是console出来，方便显示我就直接把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

}

第二步：把数据传给onBridgeReady函数

所以真正需要获取的内容是 res.data.data，然后再把res.data.data的值传给onBridgeReady函数

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格式的数据，如下

那么在处理后台数据的时候用下面的方法(参考网络大神)

_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() // 执行后会唤起支付宝

})

}