Shulou(Shulou.com)06/02 Report--

How to realize the payment function in the vue project (WeChat Pay and Alipay). Aiming at this problem, this article introduces the corresponding analysis and answer in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

Common payment methods in projects

Alipay

WeChat Pay

Balance payment (also need Alipay or Wechat to recharge)

Note: the following is only explained from the front-end point of view.

Alipay

Project difficulties:

The page is an H6 web page, using Alipay to pay must be authorized by Alipay and call Alipay's api.

(please refer to: call Alipay api for authorization)

The general process of Alipay payment is:

Call the order interface to get the order number, payment amount, etc.

Pass the order number, the amount to the prepaid interface

The backend will return a form, and then submit a form to automatically jump to the Alipay page.

Payment process:

The following picture shows the interface document and payment interface.

When we choose Alipay, radio=1

When we click the pay button, the pay () method executes

At this point, we call the backend payment API and pass in the required field of API document, order number, amount, and so on.

The backstage sends us a {code:201,data: ""}

At this point, we inject form into our page, let the form form submit, and jump to Alipay page.

Topay () {switch (this.radio) {case'3: this.yuer (); break; case'1: this.zhifubao (); case'0: this.getWechatCode () }}, zhifubao () {payByZhifubao ({OutTradeNo:'Oct20200909095646265303127',// merchant order number, unique order number in the merchant website order system, required. Need to ensure that the merchant side is unique. Subject: "Mobile website payment Test", / / topic ProductCode: "QUICK_WAP_WAY", body: "Mobile website payment description Information", / / Product description, but empty TotalAmount: 20 / / payment amount, required}) .then (res= > {console.log (res)) If (res.code = 201) {/ / save data in vuex / / this.$store.dispatch ('addAliFrom', res.data.data) this.html = res.data; var form = res.data; const div = document.createElement ("div"); div [XSS _ clean] = form / / here form is the data received returned by the backend document.body.appendChild (div); document.forms [0] .submit (); / / return this.$router.push ('/ aliPay')} else {return alert (res.data.msg);}}, WeChat Pay

Steps:

WeChat Pay background programmer will give you an address. First, we need to install qrcodejs2 to convert the address into a QR code. We need to npm install qrcodejs2 first.

Then you need a div to store the Wechat QR code. You can write the width and height style in css. I also added a loading here, and you can also add it yourself if you need it.

Import module

Import QRCode from 'qrcodejs2' / / introduce qrcode

The following is the interface data acquisition and then manipulate the QR code

GetWechatCode () {Models .getModel ("wechatpay") .get ({orderId:this.orderId}) .then (res = > {if (res.data.code = = 200) { This.wechatPayUrl = res.data.resultData if (! this.flag) {/ / the point is here The rest is for my switching business logic and interface let wechatcode = new QRCode ('wechatcode', {width: 200, height: 200, text: this.wechatPayUrl / / QR code address colorDark: "# 000", colorLight: "# fff" })} this.flag = true this.loading = false this.isWechatCodeShow = true}})}

After Wechat scans the payment, the backend staff can get the successful payment result and return it to the front desk staff, then the front end staff can only constantly call the API to check whether the payment has been made. Here, we can use the life cycle to do polling, which needs to be destroyed after jumping out.

Mounted () {this.getWechatCode () / / implement polling this.interval = window.setInterval (() = > {setTimeout (this.getOrderStatus (), 0);}, 3000);}, beforeDestroy () {/ / clear polling clearInterval (this.interval) this.interval = null}

The `payment () method here is used to query the background payment status. If you successfully jump to the payment page, you can make an If else judgment.

This is the answer to the question about how to realize the payment function in the vue project (WeChat Pay and Alipay). I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.