微信小程序支付demo 微信小程序支付的钱到哪里去

小编 09-15 8

微信小程序支付是微信小程序中的一个重要功能,它允许开发者在自己的小程序中集成微信支付,从而实现商品或服务的在线交易,以下是一个简单的微信小程序支付demo的实现步骤,包括前端和后端的基本代码示例。

微信小程序支付demo 微信小程序支付的钱到哪里去

前提条件

1、已经注册了微信小程序,并获取了AppID。

2、开通了微信支付,获取了微信支付的商户号(MCHID)和API密钥(API Key)。

步骤一:小程序端代码

1. 引入微信支付JS库

在小程序的app.js文件中,引入微信支付的JS库:

// 引入微信支付库
wx.miniProgram.getEnv((res) => {
  if (res.miniprogram) {
    wx.requestPayment({
      // 此处为调用微信支付的参数,后文会详细说明
    })
  }
})

2. 调用支付接口

在需要支付的页面(例如index.js),调用支付接口:

Page({
  pay: function() {
    let that = this;
    // 调用后端接口获取支付参数
    wx.request({
      url: 'https://your-backend.com/api/pay', // 后端支付接口地址
      method: 'POST',
      data: {
        totalFee: 1, // 支付金额,单位是分
        orderId: '123456', // 订单号,由后端生成
      },
      success: function(res) {
        if (res.data.code == 200) {
          // 调用微信的支付接口
          wx.requestPayment({
            timeStamp: res.data.data.timeStamp,
            nonceStr: res.data.data.nonceStr,
            package: res.data.data.package,
            signType: 'MD5',
            paySign: res.data.data.paySign,
            success: function (res) {
              // 支付成功
              console.log('支付成功', res);
            },
            fail: function (res) {
              // 支付失败
              console.log('支付失败', res);
            }
          });
        } else {
          wx.showToast({
            title: '支付参数获取失败',
            icon: 'none'
          });
        }
      }
    });
  }
});

步骤二:后端代码

1. 生成支付参数

在后端(例如使用Node.js),生成支付参数并返回给小程序端:

const express = require('express');
const app = express();
const md5 = require('md5');
const axios = require('axios');
const { getNonceStr } = require('./utils'); // 自定义工具函数,用于生成随机字符串
// 微信支付配置
const wxpay = {
  appid: '你的AppID',
  mch_id: '你的商户号',
  apiKey: '你的API密钥',
};
// 生成支付参数
app.post('/api/pay', async (req, res) => {
  const { totalFee, orderId } = req.body;
  try {
    const timeStamp = Math.round(+new Date() / 1000).toString();
    const nonceStr = getNonceStr();
    const prepayId = await getPrepayId(totalFee, orderId, timeStamp, nonceStr);
    const sign = createSign(prepayId, timeStamp, nonceStr);
    
    res.json({
      code: 200,
      data: {
        timeStamp,
        nonceStr,
        package: prepay_id=${prepayId},
        paySign: sign,
      }
    });
  } catch (error) {
    res.json({
      code: 500,
      message: '生成支付参数失败',
    });
  }
});
// 调用微信统一下单接口获取prepay_id
async function getPrepayId(totalFee, orderId, timeStamp, nonceStr) {
  const url = 'https://api.mch.weixin.qq.com/pay/unifiedorder';
  const data = {
    appid: wxpay.appid,
    mch_id: wxpay.mch_id,
    nonce_str: nonceStr,
    body: '商品描述',
    out_trade_no: orderId,
    total_fee: totalFee,
    spbill_create_ip: '用户IP',
    notify_url: '你的支付回调地址',
    trade_type: 'JSAPI',
  };
  const params = Object.keys(data).map(key => ${key}=${data[key]}).join('&') + &key=${wxpay.apiKey};
  const sign = md5(params).toUpperCase();
  
  const response = await axios.post(url, params, {
    params: {
      appid: wxpay.appid,
      mch_id: wxpay.mch_id,
      nonce_str: nonceStr,
      sign,
    }
  });
  
  return response.data.prepay_id;
}
// 创建签名
function createSign(prepayId, timeStamp, nonceStr) {
  const params = appid=${wxpay.appid}&noncestr=${nonceStr}&package=prepay_id=${prepayId}&sign_type=MD5&timestamp=${timeStamp}&key=${wxpay.apiKey};
  return md5(params).toUpperCase();
}
app.listen(3000, () => {
  console.log('Server running on port 3000');
});

注意事项

1、确保所有的请求都在HTTPS环境下进行,以保证数据传输的安全性。

2、支付参数中的totalFee单位是分,即1元=100分。

3、回调地址notify_url是微信支付完成后,微信服务器会向该地址发送支付结果通知,需要在后端进行监听并处理。

4、签名sign的生成需要按照微信支付的要求,将所有参数按照ASCII码表的顺序排序后拼接,然后进行MD5加密。

这个demo仅供参考,实际开发中需要根据具体的业务需求和微信官方文档进行调整和完善。

The End
微信