首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >小程序的支付功能实现

小程序的支付功能实现

原创
作者头像
LucianaiB
发布2025-01-29 13:07:28
发布2025-01-29 13:07:28
66600
代码可运行
举报
文章被收录于专栏:AIAI
运行总次数:0
代码可运行

小程序的支付功能实现

一、引言

支付功能是小程序开发中最重要的功能之一,尤其在电商、外卖、在线教育等场景中广泛应用。微信小程序提供了 微信支付(WeChat Pay) 作为官方支付方案,使开发者能够集成安全、便捷的支付能力。本文将详细讲解小程序支付的实现流程,包括 支付流程、服务器端接口、前端调用支付API,并结合示例代码进行分析。


二、小程序支付的实现流程

微信支付在小程序中的实现一般涉及 小程序前端服务器端 两部分:

  1. 用户在小程序端发起支付请求,获取 prepay_id(预支付订单)。
  2. 服务器调用微信支付 API 生成支付订单,返回给小程序端。
  3. 小程序调用 wx.requestPayment 进行支付
  4. 支付成功后,微信服务器通知服务器端,完成订单更新。

三、申请微信支付权限

在使用微信支付前,开发者需要:

  1. 注册微信支付商户号(MCH ID)
  2. 获取商户密钥(API Key)
    • 在商户平台 API安全 选项下,生成 API 密钥。
  3. 在小程序后台配置支付权限
    • 登录 微信公众平台 → 开发管理 → 开发设置 → 服务器域名,配置支付相关域名。

四、支付功能的实现
4.1 后端生成预支付订单

后端需要调用 统一下单 API (https://api.mch.weixin.qq.com/pay/unifiedorder),生成 prepay_id,返回给小程序端。

示例(Node.js 后端)

代码语言:javascript
代码运行次数:0
运行
复制
const crypto = require('crypto');
const axios = require('axios');
const xml2js = require('xml2js');

const generateNonceStr = () => Math.random().toString(36).substr(2, 15);

const createSign = (params, key) => {
  let stringA = Object.keys(params).sort().map(k => `${k}=${params[k]}`).join('&');
  let stringSignTemp = `${stringA}&key=${key}`;
  return crypto.createHash('md5').update(stringSignTemp, 'utf8').digest('hex').toUpperCase();
};

async function createOrder(openid, total_fee) {
  const appid = '你的小程序AppID';
  const mch_id = '你的商户号';
  const key = '你的API密钥';
  const notify_url = 'https://你的服务器地址/notify';
  const nonce_str = generateNonceStr();
  
  const orderParams = {
    appid,
    mch_id,
    nonce_str,
    body: '商品描述',
    out_trade_no: '订单号' + Date.now(),
    total_fee, // 单位:分
    spbill_create_ip: '用户IP',
    notify_url,
    trade_type: 'JSAPI',
    openid
  };
  
  orderParams.sign = createSign(orderParams, key);
  
  const builder = new xml2js.Builder({ rootName: 'xml', headless: true });
  const xmlData = builder.buildObject(orderParams);

  const response = await axios.post('https://api.mch.weixin.qq.com/pay/unifiedorder', xmlData, {
    headers: { 'Content-Type': 'text/xml' }
  });

  const parser = new xml2js.Parser({ explicitArray: false, ignoreAttrs: true });
  const result = await parser.parseStringPromise(response.data);
  return result.xml.prepay_id;
}

module.exports = createOrder;

4.2 小程序端发起支付请求

前端拿到 prepay_id 后,使用 wx.requestPayment 调用支付功能。

示例(小程序端支付请求)

代码语言:javascript
代码运行次数:0
运行
复制
wx.login({
  success(loginRes) {
    wx.request({
      url: 'https://你的服务器地址/createOrder',
      method: 'POST',
      data: { openid: loginRes.code, total_fee: 100 }, // 金额单位:分
      success(res) {
        const prepay_id = res.data.prepay_id;
        wx.requestPayment({
          timeStamp: String(Date.now()),
          nonceStr: res.data.nonce_str,
          package: `prepay_id=${prepay_id}`,
          signType: 'MD5',
          paySign: res.data.sign,
          success() {
            wx.showToast({ title: '支付成功', icon: 'success' });
          },
          fail(err) {
            console.error('支付失败:', err);
          }
        });
      }
    });
  }
});

4.3 处理支付成功回调(服务器端)

微信支付成功后,会向后端 notify_url 发送支付结果通知。后端需要验证支付结果,并更新订单状态。

示例(Node.js 处理支付回调)

代码语言:javascript
代码运行次数:0
运行
复制
const express = require('express');
const xml2js = require('xml2js');

const app = express();
app.use(express.text({ type: 'text/xml' }));

app.post('/notify', async (req, res) => {
  const parser = new xml2js.Parser({ explicitArray: false, ignoreAttrs: true });
  const result = await parser.parseStringPromise(req.body);

  if (result.xml.return_code === 'SUCCESS' && result.xml.result_code === 'SUCCESS') {
    console.log('支付成功:', result.xml);
    // 更新数据库订单状态
    res.send(`<xml><return_code><![CDATA[SUCCESS]]></return_code></xml>`);
  } else {
    console.error('支付失败:', result.xml);
    res.send(`<xml><return_code><![CDATA[FAIL]]></return_code></xml>`);
  }
});

app.listen(3000, () => console.log('服务器运行中'));

五、支付优化与最佳实践
  1. 使用订单号确保支付唯一性:每次支付必须生成唯一的 out_trade_no,避免重复支付。
  2. 做好超时处理:如果用户未完成支付,应提供重新支付取消订单的功能。
  3. 安全处理
    • 在后端校验 total_fee,避免前端篡改支付金额。
    • 使用 HTTPS 确保数据传输安全。

六、推荐参考文章
  1. 微信官方支付文档
  2. Node.js + 小程序支付实践
  3. 支付成功回调处理

七、总结

本文介绍了 微信小程序支付功能的完整流程,包括:

  1. 如何申请微信支付权限
  2. 后端生成预支付订单
  3. 前端调用支付 API
  4. 后端处理支付回调
  5. 支付优化与最佳实践

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 小程序的支付功能实现
    • 一、引言
    • 二、小程序支付的实现流程
    • 三、申请微信支付权限
    • 四、支付功能的实现
      • 4.1 后端生成预支付订单
      • 4.2 小程序端发起支付请求
      • 4.3 处理支付成功回调(服务器端)
    • 五、支付优化与最佳实践
    • 六、推荐参考文章
    • 七、总结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档