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

微信小程序是一种基于微信平台的轻量级应用，可以提供丰富的交互体验和功能。其中，微信支付和小程序支付是小程序中常见的支付方式之一。本文将详细介绍如何为微信小程序添加微信支付和小程序支付功能，并提供相关代码案例。

内容大纲：

1. 准备工作 1.1 创建小程序 1.2 注册开发者账号 1.3 登录微信支付商户平台

2. 配置微信支付 2.1 获取商户号及密钥 2.2 在小程序后台配置支付信息

3. 实现微信支付功能 3.1 引入支付相关的API 3.2 创建支付订单 3.3 处理支付结果

4. 实现小程序支付功能 4.1 获取用户授权信息 4.2 创建订单并生成支付链接 4.3 处理支付结果

5. 准备工作 在开始添加支付功能之前，我们需要进行一些准备工作。首先，我们需要创建一个微信小程序，并注册一个开发者账号。然后，我们需要登录到微信支付商户平台，申请商户号和密钥。

1.1 创建小程序 首先，在微信公众平台上登录，并进入“小程序管理后台”。点击“添加小程序”按钮，按照提示填写相关信息，包括小程序名称、小程序 ID、小程序密钥等。完成后，我们就可以获得一个小程序的 AppID，后续使用该 AppID 进行开发和配置。

1.2 注册开发者账号 在添加支付功能之前，我们还需要注册一个微信支付开发者账号。登录微信支付开发者平台，按照提示填写相关信息进行注册。完成注册后，我们会得到一个商户号（MCHID）和一个密钥（KEY），这些将在后续的配置中用到。

1.3 登录微信支付商户平台 使用商户号和密钥登录微信支付商户平台，配置相关信息。具体步骤如下：

• 进入微信支付商户平台，点击“产品中心”，选择“开通产品”。
• 在产品列表中，选择“小程序支付”，点击“开通”按钮。
• 填写相关信息，包括小程序 AppID、商户号、密钥等。完成后，点击“提交”按钮。

1. 配置微信支付 在前面的准备工作中，我们已经获得了商户号（MCHID）和密钥（KEY），现在我们需要将这些信息配置到小程序中。

2.1 获取商户号及密钥 商户号（MCHID）和密钥（KEY）可以在微信支付商户平台的“账户中心”中找到。登录微信支付商户平台，进入“账户中心”，获取商户号（MCHID）和密钥（KEY）。

2.2 在小程序后台配置支付信息 登录微信小程序后台，进入“开发 - 开发设置”。在“开发设置”页面中，找到“支付”模块，点击“设置”按钮。填写商户号（MCHID）及密钥（KEY），并保存配置。

1. 实现微信支付功能 在小程序中实现微信支付功能，需分为以下几个步骤：引入支付相关的API、创建支付订单、处理支付结果。

3.1 引入支付相关的API 在小程序的根目录中，创建一个名为 utils 的文件夹。在 utils 文件夹中，创建一个名为 pay.js 的文件。在 pay.js 文件中，引入微信支付相关的API：

// utils/pay.js

// 引入支付相关的API
const {
  requestPayment
} = require('../vendor/wechat-weapp-payment/index.js');

3.2 创建支付订单 在小程序中，支付订单是由客户端生成并传递给服务端的。服务端接收到支付订单后，调用微信支付相关的接口进行支付。

在客户端，我们可以调用 wx.request() 方法，向服务端发送请求，并传递支付相关的参数。服务端接收到请求后，根据参数生成支付订单，并返回给客户端。

以下是客户端生成支付订单的示例代码：

// pages/order.js

Page({
  // 点击支付按钮
  pay: function () {
    wx.request({
      url: 'https://example.com/pay',
      method: 'POST',
      data: {
        total_fee: 1, // 支付金额，单位为分
        openid: wx.getStorageSync('openid') // 用户的 openid
      },
      success: function (res) {
        // 生成支付订单成功
        const { timeStamp, nonceStr, package, signType, paySign } = res.data;
        
        // 调用微信支付接口
        requestPayment({
          timeStamp,
          nonceStr,
          package,
          signType,
          paySign,
          success: function (res) {
            // 支付成功
            console.log('支付成功', res);
          },
          fail: function (res) {
            // 支付失败
            console.log('支付失败', res);
          }
        });
      },
      fail: function (res) {
        // 生成支付订单失败
        console.log('生成支付订单失败', res);
      }
    });
  }
});

以上代码中，wx.request() 方法向服务端发送请求，并传递支付相关的参数 total_fee 和 openid。服务端根据这些参数生成支付订单，并将订单相关信息返回给客户端。客户端接收到订单信息后，调用微信支付接口进行支付。

3.3 处理支付结果 在支付完成后，微信会把支付结果返回给商户服务器。商户服务器需要验签支付结果，并根据支付结果进行相应的处理。

以下是服务端处理支付结果的示例代码：

// routes/pay.js

// 引入支付相关的库
const crypto = require('crypto');
const { parse } = require('xml2js');

// 引入商户密钥
const key = '商户密钥';

// 支付结果通知接口
router.post('/notify', async (req, res) => {
  // 获取请求体数据
  const xmlData = await new Promise((resolve, reject) => {
    let data = '';
    req.on('data', chunk => {
      data += chunk;
    });
    req.on('end', () => {
      resolve(data);
    });
  });

  // 解析请求体数据
  const result = await new Promise((resolve, reject) => {
    parse(xmlData, (err, result) => {
      if (err) {
        reject(err);
      } else {
        resolve(result);
      }
    });
  });

  // 验签支付结果
  const sign = result.sign[0];
  delete result.sign;
  const sortedKeys = Object.keys(result).sort();
  const signStr = sortedKeys.map(key => `${key}=${result[key][0]}`).join('&') + `&key=${key}`;
  const signSha1 = crypto.createHash('sha1').update(signStr).digest('hex').toUpperCase();

  if (sign === signSha1) {
    // 验签通过，处理支付结果
    console.log('支付成功', result);

    // 返回支付结果给微信
    res.set('Content-Type', 'application/xml');
    res.send('<xml><return_code><![CDATA[SUCCESS]]></return_code><return_msg><![CDATA[OK]]></return_msg></xml>');
  } else {
    // 验签失败，返回错误信息
    console.log('验证签名失败', result);

    res.set('Content-Type', 'application/xml');
    res.send('<xml><return_code><![CDATA[FAIL]]></return_code><return_msg><![CDATA[签名错误]]></return_msg></xml>');
  }
});

以上代码中，首先我们获取到支付结果通知的请求体数据，然后解析请求体数据，并验签支付结果。如果验签通过，说明支付成功，我们可以根据具体的业务逻辑进行相应的处理。如果验签失败，说明支付失败，我们可以返回错误信息给用户。

1. 实现小程序支付功能 在小程序中，我们可以使用小程序支付功能实现一种类似于微信