Detailed explanation of the payment function code of the Vue project

1. Alipay method:

Alipay method: Click Alipay to pay, call the backend interface (with the order number), and the backend returns a form (HTML string structure).

Submit the form to call Alipay payment

Code:

// alipayWap: form fragment returned by the background interface <div v-html="alipayWap" ref="alipayWap"></div>
methods: {
	toAlipay() {
		this.$axios.get('xxx').then(res = > {
			this.alipayWap = res;
             // Wait for DOM to update, and then the form will appear on the page this.$nextTick(() => {
            	this.$refs.alipayWap.children[0].submit()
          	})
		})
	}
}

2. WeChat Pay

Most of the workload is done by the backend. The order generation is done by the backend and connected to Tencent. The frontend is only responsible for displaying the payment QR code returned by the backend (generated by the backend. In some cases, the frontend can also connect to the order generation and then generate the QR code by itself, but this situation is relatively rare) on the terminal for users to scan.

You need to generate a QR code page based on the URL returned by the background, as shown in the figure

QR code display code:

Request the payment QR code interface of the backend

Finally, scan the QR code and pay.

This is the end of this article about the payment function of the vue project. For more relevant vue payment function content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!