微信小程序开发支付教程全解析

在当今数字化时代，微信小程序以其便捷性和广泛的用户基础，成为众多开发者青睐的开发平台，而支付功能作为小程序商业闭环的关键一环，对于实现交易转化至关重要，本文将为大家详细介绍微信小程序开发支付的教程，助你轻松开启小程序支付之旅😃。

准备工作

1. 注册小程序账号 你需要前往微信公众平台（mp.weixin.qq.com）注册小程序账号，按照提示填写相关信息,完成账号创建。
2. 开通微信支付商户号 登录微信支付商户平台（pay.weixin.qq.com），进行商户号的注册和开通，提交企业相关资料，完成审核后即可拥有自己的微信支付商户号，这是进行小程序支付的基础，务必认真填写准确信息🧐。
3. 下载开发工具 微信官方提供了小程序开发工具，你可以从微信公众平台下载并安装，安装完成后,使用注册的小程序账号登录开发工具。

小程序端开发

1. 创建支付按钮 在小程序的页面 WXML 文件中添加支付按钮，

   <button bindtap="handlePay">立即支付</button>

2. 编写支付逻辑 在对应的页面 JS 文件中编写支付逻辑函数，获取订单信息（这里假设你已经通过接口获取到了订单的详细信息，包括订单号、金额等）。

   Page({
     data: {
       orderId: '',
       totalFee: 0
     },
     handlePay() {
       const orderId = this.data.orderId;
       const totalFee = this.data.totalFee;
       // 调用微信支付 API
       wx.requestPayment({
         timeStamp: '',
         nonceStr: '',
         package: '',
         signType: 'MD5',
         paySign: '',
         // 以下参数需要根据实际情况替换
         appId: '你的小程序 appId',
         partnerId: '你的微信支付商户号',
         prepayId: '',
         tradeType: 'JSAPI'
       })
      .then(res => {
         console.log('支付成功', res);
         // 处理支付成功后的逻辑，如跳转到支付成功页面等
       })
      .catch(err => {
         console.error('支付失败', err);
         // 处理支付失败后的逻辑，如提示用户重新支付等
       });
     }
   });

   这里的 wx.requestPayment 是微信小程序的支付 API，其中的参数 timeStamp、nonceStr、package、signType、paySign 等需要通过服务器端获取并填充。

服务器端开发

1. 统一下单接口调用 服务器端需要调用微信支付的统一下单接口，获取预支付交易会话标识（prepay_id），以常见的 Node.js 为例，使用 request 库来发送 HTTP 请求：

   const request = require('request');
   const wxConfig = {
     appId: '你的小程序 appId',
     mchId: '你的微信支付商户号',
     key: '你的商户支付密钥',
     notifyUrl: '支付结果通知回调地址'
   };
   function unifiedOrder(orderId, totalFee) {
     const data = {
       appid: wxConfig.appId,
       mch_id: wxConfig.mchId,
       nonce_str: Math.random().toString(36).substr(2, 15),
       body: '商品描述',
       out_trade_no: orderId,
       total_fee: totalFee,
       spbill_create_ip: '客户端 IP',
       notify_url: wxConfig.notifyUrl,
       trade_type: 'JSAPI',
       openid: '用户 openid'
     };
     data.sign = generateSign(data, wxConfig.key);
     request({
       url: 'https://api.mch.weixin.qq.com/pay/unifiedorder',
       method: 'POST',
       body: data,
       headers: {
         'Content-Type': 'application/xml'
       }
     }, (error, response, body) => {
       if (!error && response.statusCode === 200) {
         const prepayId = parsePrepayId(body);
         // 将 prepayId 返回给小程序端
       } else {
         console.error('统一下单失败', error);
       }
     });
   }
   function generateSign(data, key) {
     const stringA = Object.keys(data)
      .sort()
      .map(key => `${key}=${data[key]}`)
      .join('&');
     const stringSignTemp = `${stringA}&key=${key}`;
     return md5(stringSignTemp).toUpperCase();
   }
   function parsePrepayId(xml) {
     const $ = cheerio.load(xml);
     return $('prepay_id').text();
   }

   这里的 generateSign 函数用于生成签名，parsePrepayId 函数用于从统一下单接口返回的 XML 数据中解析出 prepay_id。

2. 返回支付参数给小程序 服务器端获取到 prepay_id 后，将其与其他必要参数（如 timeStamp、nonceStr、package、signType、paySign 等）按照一定格式返回给小程序端，小程序端使用这些参数填充 wx.requestPayment 中的相应字段,完成支付操作。

支付结果通知

1. 设置回调地址 在服务器端统一下单时，设置好支付结果通知回调地址（notifyUrl），微信支付会在支付成功或失败时向该地址发送 POST 请求。

2. 处理回调 服务器端接收到回调请求后，需要验证签名的正确性，并根据支付结果进行相应的业务处理，如更新订单状态、发送通知等。

   const express = require('express');
   const app = express();
   app.use(express.raw({ type: 'application/xml' }));
   app.post('/wxpay/notify', (req, res) => {
     const xmlData = req.body.toString();
     const sign = req.headers['sign'];
     if (verifySign(xmlData, sign)) {
       const $ = cheerio.load(xmlData);
       const resultCode = $('result_code').text();
       const tradeState = $('trade_state').text();
       if (resultCode === 'SUCCESS' && tradeState === 'SUCCESS') {
         const outTradeNo = $('out_trade_no').text();
         // 更新订单状态等业务逻辑
         res.send('<xml><return_code><![CDATA[SUCCESS]]></return_code><return_msg><![CDATA[OK]]></return_msg></xml>');
       } else {
         res.send('<xml><return_code><![CDATA[FAIL]]></return_code><return_msg><![CDATA[支付结果异常]]></return_msg></xml>');
       }
     } else {
       res.send('<xml><return_code><![CDATA[FAIL]]></return_code><return_msg><![CDATA[签名验证失败]]></return_msg></xml>');
     }
   });
   function verifySign(xmlData, sign) {
     // 验证签名逻辑，与生成签名逻辑类似
   }
   app.listen(3000, () => {
     console.log('支付结果通知服务启动');
   });

   这里通过 Express 框架搭建了一个简单的支付结果通知服务,接收到回调请求后验证签名并返回处理结果。

通过以上详细的微信小程序开发支付教程，你可以顺利地在小程序中集成支付功能，为用户提供便捷的支付体验，实现小程序商业价值的最大化💪，希望这篇教程对你有所帮助，祝你开发顺利！