vue3前端實現微信支付詳細步驟

更新時間：2023年11月06日 16:47:07 作者：一雙

這篇文章主要給大家介紹了vue3前端實現微信支付的詳細步驟,隨著移動端的普及和互聯網購買需求的增加,微信支付在電商領域中發(fā)揮著越來越重要的作用,文中給出了詳細的代碼示例,需要的朋友可以參考下

要在Vue3前端實現微信支付，你需要按照以下步驟進行操作：

在微信支付官網上注冊一個商戶號，并下載微信支付SDK。
在你的Vue3項目中安裝微信支付的npm包，例如：npm install weixin-js-sdk --save。
在Vue3項目中創(chuàng)建一個js文件，在其中編寫支付相關的代碼，如下所示：

import wx from 'weixin-js-sdk'

export default {
  // 獲取微信支付SDK的簽名
  getWxPaySign (params) {
    return new Promise((resolve) => {
      // 發(fā)起請求獲取簽名
      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()
          })
        }
      })
    })
  },

  // 發(fā)起微信支付
  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.在Vue3項目中的支付頁面中引入該js文件，并按照以下步驟進行操作：

(1) 在頁面中定義支付金額、用戶id等相關參數

(2) 在Vue3的mounted生命周期中，調用getWxPaySign方法獲取微信支付SDK的簽名

(3) 在resolve回調函數中調用wxPay方法發(fā)起微信支付

示例代碼如下：

<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(() => {
      // 配置成功后發(fā)起微信支付
      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前端實現微信支付的文章就介紹到這了,更多相關vue3前端微信支付內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: