1. Add payment js reference
<script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
2. The specific implementation process:
1. First get the payment order number
2. Obtain payment parameters according to the payment order number
3. Call the getBrandWCPayRequest interface through JavaScript to initiate a WeChat payment request, and the user enters the payment process
4. After the user successfully pays and clicks the Finish button, the merchant's front end will receive a JavaScript return value. Merchants can directly jump to the static page where payment is successful for display.
5. The merchant's back office receives the payment success callback notification from the WeChat open platform, marking the successful payment of the order.
3. Payment example
// Assuming user recharge
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);
}
});
},
