微信小程序支付防止订单在同一时间多次被调用

在开发微信小程序支付功能时，一个常见的问题是防止用户在短时间内多次点击支付按钮，导致同一个订单被多次调用支付接口。这不仅会导致重复扣款，还可能引发一系列后续问题。
本文将介绍如何通过前端和后端的双重保护机制来防止这种问题的发生。

一、问题分析

订单在同一时间被多次调用可能会导致以下问题：
用户重复支付：如果用户在短时间内多次点击支付按钮，可能会导致重复支付，给用户带来经济损失。
库存混乱：对于涉及库存的业务，多次调用订单可能会导致库存不准确，影响后续的销售和发货。
数据不一致：可能会导致订单状态、支付记录等数据不一致，给业务管理带来困难。

二、解决

（1）前端解决

• 禁用支付按钮

// pages/pay/pay.js
Page({
   
  data: {
   
    isPaying: false
  },

  onPayClick: function() {
   
    if (this.data.isPaying) {
   
      wx.showToast({
   
        title: '正在支付中，请稍候',
        icon: 'none'
      });
      return;
    }

    this.setData({
   
      isPaying: true
    });

    // 调用支付接口
    this.invokePayment();
  },

  invokePayment: function() {
   
    wx.request({
   
      url: 'https://your-backend-api.com/pay',
      method: 'POST',
      data: {
   
        orderId: '123456'
      },
      success: (res) => {
   
        if (res.data.code === 0) {
   
          // 支付成功
          wx.showToast({
   
            title: '支付成功',
            icon: 'success'
          });
        } else {
   
          // 支付失败
          wx.showToast({
   
            title: '支付失败',
            icon: 'none'
          });
        }
      },
      complete: () => {
   
        // 无论成功还是失败，都重新启用支付按钮
        this.setData({
   
          isPaying: false
        });
      }
    });
  }
});

• 设置计时器

// pages/pay/pay.js
Page({
   
  data: {
   
    isPaying: false,
    payLock: false
  },

  onPayClick: function() {
   
    if