- 微信
- 微信瀏覽器
在微信中打開h5頁面付款時纸兔，使用JSAPI接口調(diào)起支付模塊坑质。微信瀏覽器提供了一個內(nèi)置對象 WeixinJSBridge，實際是調(diào)用該對象的方法谴麦。其他瀏覽器中無此對象听哭。參考文檔
// 微信JSAPI支付
async wechatJSPay() {
let body = {
id: this.orderId,
aggregatePayment: '101',
paymentChannel: '1002',
tradeType: 1,
openid: getCookie('payOpenId')
}
let { paymentParams } = await this.getPaymentParams(body)
// 喚起微信支付
WeixinJSBridge.invoke( // eslint-disable-line
'getBrandWCPayRequest',
{
appId: paymentParams.appId,
timeStamp: paymentParams.timestamp,
nonceStr: paymentParams.nonceStr,
package: paymentParams.package,
signType: paymentParams.signType,
paySign: paymentParams.paySign
},
res => {
if (res.err_msg === 'get_brand_wcpay_request:ok') {
// 支付成功
this.$router.replace('/payment/payDone')
} else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
this.$toast('支付取消')
} else {
this.$toast('支付失敗')
}
}
)
},
- 非微信瀏覽器
具體形式就是：在瀏覽器中調(diào)起微信APP慢洋，并喚醒微信支付控件。前提是已有H5商城網(wǎng)站陆盘，并ICP備案普筹。參考文檔
// 微信H5支付
async wechatH5Pay() {
let returnUrl = process.env.VUE_APP_MEURL + '/payment/payConfirm'
let body = {
id: this.orderId,
aggregatePayment: '101',
paymentChannel: '1002',
tradeType: 3,
returnUrl
}
let { paymentParams } = await this.getPaymentParams(body)
window.location.replace(paymentParams.url)
},
- 小程序
小程序本身已經(jīng)封裝好了相關 api。首先后端調(diào)用微信支付下單接口隘马，返回參數(shù)簽名太防，和其他參數(shù)一起返給前端。前端使用后端返回的5個支付參數(shù)調(diào)用api酸员，喚醒微信支付蜒车。參考文檔
wx.requestPayment(
{
'timeStamp': '',
'nonceStr': '',
'package': '',
'signType': 'MD5',
'paySign': '',
'success':function(res){},
'fail':function(res){},
'complete':function(res){}
})
- 支付寶
支付寶官方提供一個支付中間頁讳嘱，在這個中間頁進行選擇瀏覽器支付還是支付寶 APP 支付。參考文檔
// 支付寶支付醇王，調(diào)用后臺接口呢燥，后臺返回的是一個 form 表單字符串，需要前端創(chuàng)建節(jié)點并提交就可以喚起支付支付了
getAlipay() {
http.get('/alipay', params).then(res => {
const div = document.createElement('div')
div.innerHTML = res.data // 這里的 res.data 就是后臺返回接收到的數(shù)據(jù)
document.body.appendChild(div)
document.forms[0].setAttribute('target', '_blank') // 新開窗口跳轉(zhuǎn)
document.forms[0].submit()
})
}
（了解下移動端的基本思路寓娩，以備不時之需）
