微信支付
結合微信支付的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();
}
我們主要是從後臺中獲取數據傳入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.在對應的組件調用請求
<p @click="_wechatPay(paytype, $route.query.video_id, info.token, info.points)" class="submit">發送支付請求</p>
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格式的數據,如下
<form name="punchout_form" method="post" action="https://openapi.alipay.com/gateway.do?charset=UTF-8&method=alipay.trade.wap.pay&sign=DEpMkI**********************eWUs6EW3QKlt9OHYv%2FqkporO8Sr5%2Bay5VA9dpx3pAbIiPPajQ2gEcWHvz5bm*******kxH8ZvHUXahQL9S69p9wKNXpXOxYadlsxE8QKGUc4cO5rrgGq08%2BpiOq%2FOz4fLogEBWANXILUMWXNzJn8YryNifZ416Pd%2BxkKgXs%2Fo%2FQDcqEUg*********VXXPRq7IGRGQg%2FpZkOhxCH%2Fq%2B9hnWEncAfQLlAXfPqjdcQTNJ0TJdVr1X1ENOdAr5LQkydWw2EQ8g%3D%3D&return_url=+https%3A%2F%2**********¬ify_url=+https%3A%2F%*********Fpub%2Fapi%2Fv1%2F********allback1&version=1.0&app_id=20********57&sign_type=R***×tamp=2019-0******55&alipay_sdk=al*******.49.ALL&format=json">
<input type="hidden" name="biz_content" value="{"body":"","enable_pay_channels":"balance,moneyFund,bankPay,debitCardExpress,creditCardExpress,creditCard,pcredit,pcreditpayInstallment,coupon,point,voucher,mdiscount,honeyPay","out_trade_no":"132ecf937ad84487aa6cbaeb2ec157fe","product_code":"13","subject":"SpringBoot 2.x微信支付在線教育網站項目實戰","timeout_express":"20m","total_amount":"98"}">
<input type="submit" value="立即支付" style="display:none" >
</form>
<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() // 執行後會喚起支付寶
})
}