当前位置：首页 > VUE

vue 实现扫码支付

2026-01-20 07:27:08VUE

实现扫码支付的基本流程

在Vue中实现扫码支付功能，通常需要调用第三方支付平台的API（如支付宝、微信支付等）。以下是通用的实现步骤：

前端部分实现

创建支付页面组件，用于展示支付二维码和处理用户交互：

<template>
  <div>
    <img :src="qrCodeUrl" v-if="qrCodeUrl" />
    <p v-if="errorMessage">{{ errorMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      qrCodeUrl: '',
      errorMessage: '',
      timer: null
    }
  },
  methods: {
    async generateQRCode() {
      try {
        const response = await axios.post('/api/generate-qrcode', {
          amount: this.amount,
          orderId: this.orderId
        })
        this.qrCodeUrl = response.data.qrCodeUrl
        this.startPolling(response.data.orderId)
      } catch (error) {
        this.errorMessage = '生成二维码失败'
      }
    },
    startPolling(orderId) {
      this.timer = setInterval(async () => {
        const response = await axios.get(`/api/check-payment/${orderId}`)
        if (response.data.paid) {
          clearInterval(this.timer)
          this.$router.push('/payment-success')
        }
      }, 3000)
    }
  },
  mounted() {
    this.generateQRCode()
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}
</script>

后端接口实现

后端需要对接支付平台API，以下是Node.js示例：

const axios = require('axios')
const express = require('express')
const router = express.Router()

router.post('/generate-qrcode', async (req, res) => {
  const { amount, orderId } = req.body

  try {
    // 调用支付平台API生成二维码
    const paymentResponse = await axios.post('https://payment-platform.com/api/qrcode', {
      amount,
      order_id: orderId,
      callback_url: 'https://yourdomain.com/payment-callback'
    })

    res.json({
      qrCodeUrl: paymentResponse.data.qrcode_url,
      orderId
    })
  } catch (error) {
    res.status(500).json({ error: '生成二维码失败' })
  }
})

router.get('/check-payment/:orderId', async (req, res) => {
  const { orderId } = req.params

  try {
    // 查询支付状态
    const statusResponse = await axios.get(`https://payment-platform.com/api/check-payment/${orderId}`)

    res.json({
      paid: statusResponse.data.status === 'SUCCESS'
    })
  } catch (error) {
    res.status(500).json({ error: '查询支付状态失败' })
  }
})

module.exports = router

支付平台API对接

对接具体支付平台时，需要参考官方文档。以微信支付为例：

申请商户账号并获取API密钥
调用统一下单API获取支付二维码链接
实现支付结果通知回调接口
提供订单查询接口

微信支付统一下单API示例参数：

{
  "appid": "wx1234567890abcdef",
  "mch_id": "123456789",
  "nonce_str": "5K8264ILTKCH16CQ2502SI8ZNMTM67VS",
  "body": "测试商品",
  "out_trade_no": "20150806125346",
  "total_fee": 1,
  "spbill_create_ip": "123.12.12.123",
  "notify_url": "https://yourdomain.com/wechat-pay/notify",
  "trade_type": "NATIVE",
  "product_id": "1234567890"
}

安全注意事项

所有支付请求必须通过后端处理，避免在前端暴露API密钥
支付结果应以服务器异步通知为准，不能仅依赖前端轮询
重要参数如金额、订单号等需要做签名验证
实现防重复支付机制
支付回调接口做好幂等性处理

测试与调试

使用支付平台提供的沙箱环境进行测试
检查各种边界情况：网络中断、支付超时、重复支付等
确保回调接口能正确处理各种通知
记录完整的支付日志便于排查问题

支付完成后的处理

支付成功后通常需要：

vue 实现扫码支付

更新订单状态
发送支付成功通知
记录支付日志
跳转到支付成功页面

// 支付成功回调处理示例
router.post('/payment-callback', async (req, res) => {
  // 验证签名
  if (!verifySignature(req.body)) {
    return res.status(400).send('Invalid signature')
  }

  // 处理订单
  await Order.updateOne(
    { orderId: req.body.out_trade_no },
    { status: 'paid', paymentTime: new Date() }
  )

  // 记录支付日志
  await PaymentLog.create({
    orderId: req.body.out_trade_no,
    amount: req.body.total_fee,
    transactionId: req.body.transaction_id,
    paymentMethod: 'wechat'
  })

  res.send('SUCCESS')
})

以上实现方案可根据具体业务需求和使用的支付平台进行调整。不同支付平台的API接口和参数会有所差异，需要参考对应平台的官方文档。

标签: vue