Vue3 front-end implements WeChat payment

To implement WeChat payment on the front end of Vue3, you need to follow the steps below:

Register a merchant account on the WeChat Pay official website and download the WeChat Pay SDK.
Install the npm package of WeChat Pay in your Vue3 project, for example: npm install weixin-js-sdk --save.
Create a js file in the Vue3 project, and write payment-related code in it, as follows:

import wx from 'weixin-js-sdk'

export default {
  // 获取微信支付SDK的签名
  getWxPaySign (params) {
    return new Promise((resolve) => {
      // 发起请求获取签名
      axios.post('/api/pay/get-wx-pay-sign', params).then((data) => {
        if (data.code === 200) {
          // 配置微信JS SDK
          wx.config({
            debug: false,
            appId: '你的appId',
            timestamp: data.timestamp,
            nonceStr: data.nonceStr,
            signature: data.signature,
            jsApiList: [
              'chooseWXPay'
            ]
          })
          // 配置完成后返回一个resolve
          wx.ready(() => {
            resolve()
          })
        }
      })
    })
  },

  // 发起微信支付
  wxPay (params) {
    return new Promise((resolve, reject) => {
      // 调用微信支付
      wx.chooseWXPay({
        timestamp: params.timestamp,  
        nonceStr: params.nonceStr,  
        package: params.package,  
        signType: params.signType,  
        paySign: params.paySign,  
        success: (res) => {
          // 支付成功时返回resolve
          resolve(res)
        },
        fail: (err) => {
          // 支付失败时返回reject
          reject(err)
        }
      })
    })
  }
}

4. Import the js file into the payment page in the Vue3 project, and follow the steps below:

(1) Define payment amount, user id and other related parameters on the page

(2) In the mounted life cycle of Vue3, call the getWxPaySign method to obtain the signature of the WeChat payment SDK

(3) Call the wxPay method in the resolve callback function to initiate WeChat payment

The sample code is as follows:

<template>
  <div class="pay-page">
    <div class="price">{
   
   { price }}元</div>
    <button class="pay-btn" @click="goPay">去支付</button>
  </div>
</template>

<script>
import wxPay from './wxPay'

export default {
  data () {
    return {
      price: 0,
      userId: ''
    }
  },
  mounted () {
    // 获取微信支付SDK的签名
    wxPay.getWxPaySign({
      price: this.price,
      userId: this.userId
    }).then(() => {
      // 配置成功后发起微信支付
      this.goPay()
    })
  },
  methods: {
    // 去支付
    goPay () {
      wxPay.wxPay({
        timestamp: this.timestamp,  
        nonceStr: this.nonceStr,  
        package: this.package,  
        signType: this.signType,  
        paySign: this.paySign
      }).then((res) => {
        // 支付成功
        console.log(res)
      }).catch((err) => {
        // 支付失败
        console.log(err)
      })
    }
  }
}
</script>

<style>
.pay-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.price, .pay-btn {
  margin-bottom: 20px;
  font-size: 24px;
}

.pay-btn {
  width: 100px;
  height: 50px;
  background-color: #4caf50;
  border: none;
  border-radius: 5px;
  color: #fff;
}
</style>

Vue3 front-end implements WeChat payment

Guess you like