如何为微信小程序添加微信支付和小程序支付功能

在移动互联网时代，支付功能已经成为许多应用不可或缺的一部分。对于微信小程序而言，微信支付不仅提供了便捷的支付手段，还加强了用户与小程序之间的黏性。本文将详细介绍如何在微信小程序中集成微信支付功能，并给出详细的代码示例和实施步骤。

基本概念

微信支付

微信支付是腾讯公司推出的一项在线支付服务，允许用户通过微信钱包完成线上和线下的支付交易。微信支付支持多种支付场景，如公众号支付、扫码支付、H5支付、小程序支付等。

小程序支付

小程序支付是指在微信小程序内部完成支付流程的一种支付方式。它利用微信内置的支付接口，无需跳转到外部页面即可完成支付过程。

统一下单接口

在微信支付中，统一下单接口用于生成预支付交易单，返回给前端小程序一个预支付ID（prepay_id），这是后续发起支付请求的基础。

示例一：配置微信支付

在开始集成微信支付之前，需要在微信公众平台注册并配置好相关的支付信息。具体步骤如下：

1. 登录微信公众平台，进入“支付中心”-“商户管理”-“商户号管理”，获取商户号（appid）和商户密钥（partnerkey）。
2. 在小程序后台，配置合法域名，包括api接口域名、上传文件接口域名等。

配置小程序合法域名

{
   
  "networkTimeout": {
   
    "request": 60000,
    "downloadFile": 60000
  },
  "debug": false,
  "domain": [
    "https://your-pay-api.com",
    "https://your-backend.com"
  ]
}

示例二：后端生成预支付订单

后端服务器需要调用微信支付的统一下单接口来创建预支付订单。以下是一个简单的Node.js后端示例，用于生成预支付订单：

const WXPay = require('wxpay');

// 配置微信支付参数
const config = {
   
  appid: 'your-appid',
  mch_id: 'your-mch-id',
  partner_key: 'your-partner-key',
  notify_url: 'http://your-domain.com/notify',
};

// 创建微信支付实例
const wxPay = new WXPay(config);

// 生成预支付订单
async function createPrepayOrder(outTradeNo, totalFee, body) {
   
  const order = await wxPay.unifiedOrder({
   
    body: body, // 商品描述
    out_trade_no: outTradeNo, // 商户系统内部订单号
    total_fee: totalFee, // 标价金额
    spbill_create_ip: '127.0.0.1', // 终端IP
    notify_url: config.notify_url, // 异步通知地址
    trade_type: 'JSAPI', // 交易类型
    openid: 'your-user-openid', // 用户标识
  });

  return order;
}

// 调用函数创建预支付订单
createPrepayOrder('1234567890', 1, '测试商品')
  .then((order) => {
   
    console.log('预支付订单:', order);
  })
  .catch((err) => {
   
    console.error('创建预支付订单失败:'