Payment function implementation in vue project (WeChat payment and Alipay payment)

Common payment methods in projects
Alipay Payment
WeChat Pay

Common payment methods in projects

Alipay Payment
WeChat Pay
Balance payment (Allipay or WeChat top-up is also required)

Note: This article only explains from the front-end perspective

Alipay Payment

Project Difficulty:

The page is an h5 web page. To pay with Alipay, you must obtain Alipay authorization and call Alipay's API.

(For how to authorize, please refer to: Calling Alipay API)

The general process of Alipay payment is:

Call the order interface to obtain the order number, payment amount, etc.
Pass the order number and amount to the prepayment interface
The backend will return a form, and then submit the form to automatically jump to the Alipay payment page

Payment process:

The following figure is the interface document, payment interface

When we select Alipay, radio=1;
When we click the pay button, the pay() method executes
At this point we call the backend payment interface and pass in the fields required by the interface document, such as order number, amount, etc.
The backend sends us a {code:201,data:""};
At this point we inject the form into our page, submit the form, and jump to the 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, the only order number in the merchant website order system, required. The merchant side must be unique.
          Subject: "Mobile Website Payment Test", //Topic ProductCode: "QUICK_WAP_WAY",
          body: "Mobile website payment description information", //Product description, optional 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.innerHTML = form; //Here form is the data returned by the background document.body.appendChild(div);
            document.forms[0].submit();
            //return this.$router.push('/aliPay')
          } else {
            return alert(res.data.msg);
          }
     })
    },

WeChat Pay

step:
The WeChat payment backend programmer will return an address to you. First, we need to install qrcodejs2 to convert the address into a QR code. You need to npm install qrcodejs2 first.
Then you need a div to store the WeChat QR code. You can write the width and height styles in CSS. I also added a loading page here. You can add it yourself if you need it.

 <div id="wechatcode" v-loading="loading"
element-loading-text="Loading"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)">
</div>

Importing modules

 import QRCode from 'qrcodejs2' // Import qrcode

The following is the interface data acquisition and then operation 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 key 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 and pays, the backend staff can get the payment success result and return it to the frontend staff. Then the frontend staff can only keep calling the interface to check whether the payment has been made. Here we can use the life cycle to do polling, and it 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 `getOrderStatus() method here is to query the backend payment status. If you successfully jump to the payment page, just do an If else judgment

This is the end of this article about the implementation of payment functions in vue projects (WeChat payment and Alipay payment). For more relevant vue project payment content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

springboot+vue+docking Alipay interface+QR code scanning payment function (sandbox environment)
Pitfalls encountered in implementing WeChat payment function in Vue
Vue's H5 page invokes the Alipay payment function
Vue imitates Alipay payment function
Detailed explanation of the payment function code of the Vue project

<<: Pure CSS to achieve hover image pop-out pop-up effect example code

>>: How to align text boxes in multiple forms in HTML