前端在h5页面调起微信支付接口和支付宝接口（日常笔记）

jiezi

6 年前

微信支付

结合微信支付的 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**********&notify_url=+https%3A%2F%*********Fpub%2Fapi%2Fv1%2F********allback1&version=1.0&app_id=20********57&sign_type=R***&timestamp=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() // 执行后会唤起支付宝
})
}