A: the difference between scanning code payment, H5 payment, and JSAPI payment?

1: scan code payment, suitable for PC end. After getting the link returned by the background interface, the front end can use the QrCODEJs2 plug-in to generate the QR code scanning code as follows

<div class="pay_wrap">
    <div ref="qrCodeUrl" class="qrcode"></div>
</div>
Copy the code

1: (1): generated two-dimensional code encountered pit? Because WHAT I encountered was that the switching conditions would generate different TWO-DIMENSIONAL codes, so every time the page switched to show the latest two-dimensional code, the solution is to use native JS to hide all the time when switching, and then show the last code as follows

this.$refs.qrCodeUrl.childNodes.forEach(item => { item.style.display='none' }); this.$refs.qrCodeUrl.lastChild.style.display='block'

1:(2) how does the front end get the interface of wechat Payment and then jump to the corresponding page? It needs to write an interface to query the results of wechat payment in the background. But now there is a problem? When has the front end ever been called? Check wechat pay official website documents, only use the timer round to call the interface code is as follows: write their own business logic according to the data returned by the background interface

getCheckResult(orderNo) { this.num = setInterval(async()=>{ let data = await this.checkResult({ orderNo }) if ( data == 1) {this._close() // jump to list page if (this.type! == 'index') { this._success() this.isShowPaySuccess = true }else { this.isShowPaySuccess = true // this.$emit('success') }}else if(data == 2) {showMessage({type: 'error', message: 'pay failed'}) clearInterval(this.num); SetTimeout (function () {clearInterval(this.num); clearInterval(this.num); ShowMessage ({type: 'error', message: 'failed to pay'})}, 300000)},Copy the code

Note that vue’s hook function destroyed code is shown below to remove the timer when the page is closed

destroyed() { if (this.num) { clearInterval(this.num); }},Copy the code

2. Jsapi payment: H5 payment and JSAPI payment are easy to be confused. I developed two sets of payment at that time. At that time, I thought the payment in wechat official account was H5 payment, and then I read the document for development. When I called the interface, I found that please open the connection outside wechat, and then I carefully read the document to find that jSAPI payment should be developed, and JSAPI payment can only be opened with wechat browser

2: (1): JSAPI payment requires wechat authorization to get the code. There are many pages in my development project that need wechat payment, so I send the address of the current page, and the link returned by the background interface will redirect my page for authorization and the code will be splicted behind the link. To get code. 2:(2): encountered the pit? If I jump to the connection on the current page, I will not get the code, and it will cause bad user experience, because a long scroll bar will appear when I jump to the current page for authorization. So do the authorization on the previous page, as follows

let url = await this.getCode({ uri: `${process.env.VUE_APP_THIRD_PARTY_HOST}/wechat/nurse-profile-pay? serviceType=2&type=index` }) window.location.href = urlCopy the code

2:(3): const code = this.$route.query.code = this.

OnBridgeReady () {/ / the following parameters are returned by the backend to const that window. = this WeixinJSBridge. Invoke (' getBrandWCPayRequest ', {appId: enclosing dataInvoke appId, / / the public name, by the merchants to timeStamp: enclosing dataInvoke. The timeStamp, / / timeStamp, Since 1970 the number of seconds nonceStr: enclosing dataInvoke. NonceStr, / / random string package: ` prepay_id = ${this. DataInvoke. PrepayId} `, signType: 'MD5, // wechat signature: PaySign: enclosing dataInvoke paySign}, function (res) {if (res) err_msg = = 'get_brand_wcpay_request: ok') {Toast (' pay success); setTimeout(()=>{ console.log(that.$route.query.serviceType); if (that.$route.query.serviceType == 3) { that.$router.push({name: 'NurseMedicalServices'}) }else if (that.$route.query.serviceType == 2&&that.$route.query.type == 'index'){ that.$router.push({name: 'userMedicalServices'}) }else { that.$router.push({name: 'serviceRegistration'})}},500)} else {Toast(' Cancel payment '); setTimeout(()=>{ if (that.$route.query.serviceType == 3) { that.$router.push({name: 'ProfileProlong'}) }else if (that.$route.query.serviceType == 2&&that.$route.query.type == 'index'){ that.$router.push({name: 'userMedicalServices'}) }else { that.$router.push({name: 'serviceRegistration'}) } },500) } } ); },Copy the code

3: h5 payment, our usage scenario is send text messages to mobile phones, click on the link to a page of h5, to pay, the paid for the front end is relatively easy and direct links to callback interface to get the background of jump straight to raise WeChat payment, to note is mainly used for touch screen version of the mobile browser requests WeChat scenario. Wechat pay can be easily invoked from an external browser.

4: To sum up, jSAPI payment debugging is troublesome, because its callback address must be a domain name, and it needs to configure the domain name in the wechat public account, local debugging cannot be debuggable, need to be sent to the company’s test address for debugging. You can also carry out local Intranet penetration to get a domain name configuration, with this domain name authorization to get code, debugging development.

Write in the last

If there are any errors in this article, please correct them in the comments section. If this article helped you, please like it and follow 😊

This article was first published in nuggets. Reprint is prohibited without permission 💌