1、支付js引用添加
<script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
2、具体的实现流程:
1.首先获取到支付订单号
2.根据支付订单号获取支付参数
3.通过JavaScript调用getBrandWCPayRequest接口,发起微信支付请求,用户进入支付流程
4.用户成功支付点击完成按钮后,商户的前端会收到JavaScript的返回值。商户可直接跳转到支付成功的静态页面进行展示。
5.商户后台收到来自微信开放平台的支付成功回调通知,标志该笔订单支付成功。
3、支付实例
//假设用户进行充值
async chargeClick() {
if (!this.validaPhone()) return;
if (!this.userName) {
this.$toast('请输入会员姓名');
return;
}
if (!this.cashMoney || isNaN(this.cashMoney) || this.cashMoney <= 0) {
this.$toast('请输入正确金额');
return;
}
if ((this.cashMoney + '').split('.')[1] && (this.cashMoney + '').split('.')[1].length > 2) {
this.$toast('金额最多输入两位小数');
return;
}
let data = {
ShopNo: this.shopId, // 门店编号,
Name: this.userName, //会员姓名,
Phone: this.userPhone, //手机号,
RechargeMoney: +this.cashMoney //充值金额
};
let res = await customerRecharge(data);
if (res.IsSuccess) {
this.getPayParams(res.Result.OuterMiJiRechargeOrderNo);
}
},
//通过支付订单号获取支付参数
async getPayParams(orderNo) {
const params = {
M: false,
OrderNo: orderNo
};
let res = await getwxjsapiparam(params);
if (res.IsSuccess) {
this.appParams = res.Result;
this.initPay();
}
},
//获取到支付参数后调用微信支付api 进行支付
initPay() {
if (typeof WeixinJSBridge == 'undefined') {
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);
}
} else {
this.onBridgeReady();
}
},
onBridgeReady() {
const that = this;
WeixinJSBridge.invoke('getBrandWCPayRequest', this.appParams, function(res) {
var msg = res.err_msg.split(':')[1];
if (msg === 'ok') {
// that.$toast('支付成功');
that.$router.replace('/recharge/rechargeSuccess');
} else if (msg === 'cancel') {
that.$toast('用户取消支付');
} else {
that.$toast(msg);
}
});
},