vue pc side web pages and micro-channel pay Alipay

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https://blog.csdn.net/qq_36710522/article/details/90480914

Business scenario description:

pc-side support micro-channel pay [Native to pay official API ] && Alipay [PC sites pay official API ]

Order generation logic: the rear end of the front end request to submit orders, and to the rear end of the micro channel or pay-line generating docking (docked subsequent payments are in the logic)

A, vue in the pc micro-channel pay how to play?

Here most of the work is the back end of things, from back-end to generate orders and Tencent docking, front-end only responsible to pay back to the back-end two-dimensional code (generated by the back-end, and in some cases you can also go to the front butt after the front end of their line generated by the two-dimensional code is generated, this is relatively small) appear for a user terminal to scan code:
1. the two-dimensional code presentation window

2. the rear end of the payment request dimensional code Interface

3. evoke two-dimensional code payment page

4. scan code to complete the payment, the payment is complete a subsequent item of the business logic. At this point the PC micro-channel payment has been completed, the front end of the workload is not small ~

Two, vue in the pc Alipay how to play?

The above-mentioned micro-channel pay so simple, empathy pc end Alipay payment is very simple, because Alipay business layer and make orders or interact with back-end processing, so the front of the workload is quite simple.
After a bearer page 1. It should be, to carry a rear end interacting with Alipay completed, the rear end of the request from the payment interface returns a form, it is responsible for only the front end presented to the user to scan code, to undertake the following page (for convenience ctrl here paste Code + c):

<template>
    <div v-html="html"></div>
</template>

<script>
  import { videoPay } from '@/api/pay.js'
  export default {
    data(){
      return{
        html:''
      }
    },
    methods:{
      fetchVideoPay(){
        let param={
          orderId: this.$route.query.orderId
        };
        videoPay(param).then( res => {
          this.html = res.data;
          this.$nextTick(() => {
            document.forms[0].submit()
          })
        })
      }
    },
    mounted(){
      this.fetchVideoPay()
    }
  }
</script>

Will be carried out after reaching the page 2. Alipay two-dimensional code page:

3. After the user scan code is completed, enter Alipay countdown page follow-up is business logic processing, and PC so far Alipay payment has been completed.

H5 end mobile payments (micro-channel + Alipay) Click to view