WeChat payment development process

Record the WeChat JSAPI payment process

1. It is judged that the WeChat browser directly requests the link authorized by WeChat, which needs to be passed to the page redirected by WeChat, and the order id

// WeChat browser calls directlyif (this.isWeixin) {let redirectUri = 'http://192.168.1.6/weChat'window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxe0701b98700ac86e&redirect_uri='+ encodeURI(redirectUri) + '&response_type=code&scope=snsapi_base&state=' + this.order.orderId + '#wechat_redirect'}

2. After obtaining authorization in the previous step, you will get the code and the passed order id, which will be spelled on the redirected route in the form of a query, and then request the background to obtain the code and order id through the obtained code and order id.Pay the corresponding required parameters and return in the background.

created() {let _query = this.$route.queryif (Object.keys(_query).length > 0 && _query.code) {wxChatPublicPayApi({code: _query.code,orderId: _query.state}).then(res => {this.params = res.dataif (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()}})}}

3. After getting the parameters returned by the background, you can directly call the WeChat api

onBridgeReady() {let _this = thisWeixinJSBridge.invoke('getBrandWCPayRequest', _this.params, function (res) {if (res.err_msg === 'get_brand_wcpay_request:ok') {// Use the above method to judge the front-end return, the WeChat team solemnly reminds:// res.err_msg will return ok after the user pays successfully, but it is not guaranteed to be absolutely reliable._this.checkPayStatus()} else {_this.$message({message: res.err_msg + 'Payment failed',type: 'error'})_this.$router.push('/orderDetail/' + _this.$route.query.state)}})},

For detailed parameters, please refer to the following WeChat payment official documents: https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6