微信支付之小程序支付

微信的支付方式有以下几种，不同的支付方式适用于不同的支付场景，而今天要给大家讲的就是 小程序支付 方式

说到支付功能就要涉及到金钱交易，必定是有比较严格的规范及流程，如要求小程序必须具备企业性质，必须拥有微信支付商户平台的账号

PS：申请微信支付商户平台需要一个微信小程序或公众号等，建议按照以下流程进行操作

准备工作

申请微信小程序账号
- 申请成功可拿到 AppID（小程序 id）和 AppSecret（小程序密钥）
- 申请类型为企业性质，否则无法接入微信支付
微信小程序认证

通过认证的小程序才能接入微信支付和绑定商户平台
申请商户平台账号
- 需要第一步申请的 AppID
- 申请成功可拿到 MchID（商户 id）和 MchKey（商户密钥）
微信小程序关联商户号

微信和商户都认证成功后，在微信后台微信支付菜单中进行关联
接入微信支付

在微信后台微信支付菜单中进行接入

小程序支付流程

简要支付流程如下：

用户发起支付请求
后端调用统一下单接口得到 prepay_id
把支付所需参数返回前端
前端调用支付接口进行支付操作
支付结果通知
前端根据不同的支付结果给用户不同的提示

PS：难点在第 2、3、5 步，一定要仔细查看相关接口文档，否则容易出错，接下来我们按照以上 6 个步骤详细讲解在微信小程序中的支付流程

支付前的操作

因为严格意义上来说这不属于支付流程中的步骤，但支付过程中需要用到用户唯一标识openid，所以建议在用户进入小程序时就进行这一步的操作

调用wx.login()接口获取 code，并把code传到服务器
后端服务器拿到 code 后调用code2Session 接口获取 openid 和 session_key

建议把openid存入数据库，方便随时获取，下面的步骤也会用到
后端服务器保好 appid, secret, mch_id, mch_key（这些数据分别在小程序后台和商户平台中获得，我是把它们做成 commonjs 模块并保存在config/wx.js文件中以方便调用）

PS：开发者需要自行维护用户登录状态（用户登录状态的维护本文不做展开，请自行查阅相关资料）

1、小程序端：用户向商户服务器发起支付请求

这步没什么好说的，当用户点击支付按钮时，给我们自己的后端接口发起一个请求，携带必要的参数（如：body,total_fee 等），接口地址需要自行编写，如我的接口地址为/payment/order

// http对象为wx.request()的二次封装
import http from "../utils";

// 向后端发请请求
const res = await http.post("/payment/order", {
  body: "腾讯QQ-购买会员", // 商品描述
  total_fee: 998, // 总金额，单位为分
});
if (res.status === 200) {
  try {
    // 得到接口返回的数据，向微信发起支付
    const result = await wx.requestPayment({
      ...res.data,
    });
    wx.showToast({
      title: "支付成功",
    });
    console.log("支付结果：", result);
  } catch (err) {
    wx.showToast({
      title: "支付失败",
    });
  }
}

PS：可能会有小伙伴产生疑惑，为什么不直接通过wx.requestPayment()在小程序端发起请求而要先请求商户自己的服务器呢？原因很简单，安全性问题，wx.requestPayment()需要 2 个重要参数paySign和package，需要 appid,secret,openid,mch_key 等私密数据，这些私密的数据不应该在前端暴露出来，而是放在自己的服务器中更安全，所以需要向自己的服务器发起这个请求拿到这些参数，下一步才能真正发起支付。接下来我们来看看后端是如果操作的

2、商户后端服务器：签名+生成预支付标识

后端代码使用 egg 框架（基于 NodeJS+Koa）实现，文中涉及到 egg 用法和 koa 的用法不再额外说明，请自行查阅相关资料

调用统一下单接口获取 预支付会话标识 prepay_id

注意：该接口需要发送 xml 格式参数，同时返回 xml 格式数据，需自行转换（我使用的是xml-js第三方模块）

该接口必填参数：appid，mch_id，nonce_str，sign_type，body，out_trade_no，total_fee，spbill_create_ip，notify_url，trade_type，sign，其中 sign 为前面所有参数加密后的字符

  async order(ctx) {
      // egg框架写法
      const { service, request } = ctx;

      // 获取前端传入参数
      const { userid, total_fee, body } = request.body;

      // 引入微信配置参数（上面准备工作中保存的config/wx.js文件，包含小程序id，密钥，商户id，商户密钥）
      const { config } = require("../../config/wx");

      // 生成订单号（保证唯一性：我采用时间戳拼6位随机数的方式）
      const tradeNo = Date.now() + '' + randomCode(100000, 999999);

      // 统一下单签名参数
      const orderParams = {
          appid: config.appid, // 小程序id
          mch_id: config.mch_id, // 商户id
          nonce_str: service.wx.randomStr(), // 自定义生成随机字符方法
          sign_type: "MD5", // 加密类型
          body, // 商品简单描述，有格式要求
          out_trade_no: tradeNo, // 订单号
          total_fee, // 单位：分
          spbill_create_ip: "121.34.253.98", // 服务器ip
          notify_url: "https://你的服务器域名/payment/wxnotify", // 支付成功通知地址
          trade_type: "JSAPI", // 支付方式（小程序支付选JSAPI）
          openid: user.openid, // 用户openid，步骤0保存的数据
      };

      // 签名：对上面所有参数加密（签名算法请查看接口文档，下同）
      const orderSign = service.wx.sign(orderParams);

      // json->xml
      const xmlData = convert.js2xml(
          { xml: { ...orderParams, sign: orderSign } },
          { compact: true }
      );

      // 调用统一下单接口（接口没说明，但必须为post请求）
      const { data } = await ctx.curl(
          "https://api.mch.weixin.qq.com/pay/unifiedorder",
          {
          method: "post",
          data: xmlData,
          }
      );

      // xml->js
      const result = convert.xml2js(data, { compact: true });

      if (result.prepay_id) {
          // 此处可以把订单信息保存到数据库

          // 返回prepay_id后，接着就是把参数返回前端
          // =>为了更清晰，我把这里的代码写在下一步
          // ...
      }
  }

给前端返回支付参数+签名

  // 支付签名参数
  const payParams = {
    appId: config.appid, // 商户 id
    timeStamp: Date.now(), // 时间戳
    nonceStr: this.randomStr(), // 随机字符
    package: "prepay_id=" + result.prepay_id, //预支付会话标识（格式为：prepay_id=统一下单接口返回数据）
    signType: "MD5", //签名类型（必须与上面的统一下单接口一致）
  };
  // 签名
  const paySign = service.wx.sign(payParams);

  // 把参数+签名返回给前端
  ctx.body = formatData({
    data: {
      timeStamp: payParams.timeStamp,
      nonceStr: payParams.nonceStr,
      package: payParams.package,
      signType: payParams.signType,
      paySign,
    },
  });

附上封装好的签名方法sign()和生成随机字符串的方法randomStr()，我写在service/wx.js

  "use strict";
  const { Service } = require("egg");
  const crypto = require("crypto");
  // 微信基本配置
  const { weapp } = require("../../config/wx");
  class wxService extends Service {
    randomStr(len = 24) {
      const str =
        "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
      let result = "";
      for (let i = 0; i < len; i++) {
        result += str[Math.floor(Math.random() * str.length)];
      }
      return result;
    }
    sign(data, signType = "MD5") {
      const keys = [];
      for (const key in data) {
        if (data[key] !== undefined) {
          keys.push(key);
        }
      }
      // 字典排序=>key=value
      const stringA = keys
        .sort()
        .map((key) => `${key}=${decodeURIComponent(data[key])}`)
        .join("&");
      // 拼接商户key
      const stringSignTemp = stringA + "&key=" + weapp.mch_key;
      console.log("stringSignTemp", stringSignTemp);
      // 加密
      let hash;
      if (signType === "MD5") {
        hash = crypto.createHash("md5");
      } else {
        hash = crypto.createHmac("sha256", "laoxie");
      }
      hash.update(stringSignTemp);
      const paySign = hash.digest("hex").toUpperCase();
      return paySign;
    }
  }
  module.exports = wxService;

4、小程序端：向微信服务器发起请求

第 1 步的数据返回后，向微信服务器接口wx.requestPayment()发请求，唤起支付界面，请查看第一步 try...catch 中的代码

5、微信服务器：支付结果通知

在第 2 步向统一下单接口发起请求时附带了一个notify_url，此地址一定要是可外网访问的接口地址（商户自行编写），由微信服务器调用该接口，不管支付成功与否，此接口都会调用，并返回相应数据（查看接口数据），所以商户可以在此接口中编写相关业务逻辑、如支付成功后写入数据库等操作

注意：商户需要在此接口中做接收处理，并向微信服务器返回应答（按接口规范返回特定数据）。如果微信收到商户的应答不是成功或超时，微信会认为通知失败，微信会通过一定的策略定期重新发起通知，通知频率为：15s/15s/30s/3m/10m/20m/30m/30m/30m/60m/3h/3h/3h/6h/6h，但微信不保证通知最终一定能成功。

  "use strict";

  const Controller = require("egg").Controller;
  const getRawBody = require("raw-body");
  const contentType = require("content-type");
  const { formatData, randomCode, params, formatParams } = require("../utils");

  class PaymentController extends Controller {
    // 微信支付回调地址
    async notify(ctx) {
      const { req } = ctx;

      // 微信调用该接口时传入的数据为xml,所以先转换
      const data = await getRawBody(req, {
        length: req.headers["content-length"],
        limit: "1mb",
        encoding: contentType.parse(req).parameters.charset,
      });
      const result = params.xml2js(data);

      // 验签：微信传入的除sign外的所有数据进行签名，拒后与sign进行对比是否一致
      // 一致说明支付成功，否则支付失败
      // 并根据不同的结果通知微信服务器（响应不同的xml数据，如下）
      const resultSign = result.sign;
      delete result.sign;
      const mySign = ctx.service.wx.sign(result);
      console.log("sign:", resultSign, mySign);

      ctx.set("content-type", "text/plain");

      if (resultSign === mySign) {
        // 修改商户订单状态
        const {
          device_info,
          openid,
          trade_type,
          bank_type,
          total_fee,
          settlement_total_fee,
          fee_type,
          transaction_id,
          time_end,
          attach,
        } = result;

        // 格式化自定义参数
        let myattach = {};
        if (attach) {
          myattach = params.parse(attach);
        }

        // 格式化支付时间：20200423161017=>2020/04/23 16:10:17
        let pay_time = time_end.replace(
          /(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/,
          "$1/$2/$3 $4:$5:$6"
        );
        pay_time = new Date(pay_time);

        // 根据订单号更新数据库中的订单状态
        const newData = {
          device_info,
          openid,
          trade_type,
          bank_type,
          total_fee,
          settlement_total_fee,
          fee_type,
          transaction_id,
          pay_time,
          status: 1,
          ...myattach,
        };
        db.update(
          "purchase",
          {
            out_trade_no: result.out_trade_no,
          },
          {
            $set: newData,
          }
        );

        ctx.body = `<xml>
            <return_code><![CDATA[SUCCESS]]></return_code>
            <return_msg><![CDATA[OK]]></return_msg>
          </xml>`;
      } else {
        ctx.body = `<xml>
            <return_code><![CDATA[FAIL]]></return_code>
            <return_msg><![CDATA[ERROR]]></return_msg>
          </xml>`;
      }
    }
  }

  module.exports = PaymentController;

附上以上代码中会用的封装好的方法parse()、xml2js()、js2xml()，我写在utils/index.js中

  const params = {
    parse(queryString) {
      // 'a=1&b=2' => {a:1,b:2}
      return queryString.split("&").reduce((res, item) => {
        const arr = item.split("=");
        res[arr[0]] = arr[1];
        return res;
      }, {});
    },
    js2xml(data) {
      return convert.js2xml({ xml: data }, { compact: true });
    },
    xml2js(xml) {
      const result = convert.xml2js(xml, {
        compact: true,
        textKey: "value",
        cdataKey: "value",
      }).xml;
      const data = {};
      for (const key in result) {
        data[key] = result[key].value;
      }
      return data;
    },
  };
  module.exports = {
    params
  }

到此微信支付之小程序支付就完成了，过程比较繁杂，一定要一步步去实现，也许会踩坑，但相信我，这是每个程序员的必经这路，面对它，勇敢地走过去，你对能到达胜利的彼岸。

注意事项

appid、appsecret、mchid、mchkey、openid 为小程序或商户私密信息，应保存在服务端
注意参数大小写：每个接口大小写可能不同
签名算法：请查看接口文档
一定要注意看文档，根据我多冷踩坑的经历，90%以上的问题都是没有仔细看文档所致

参考网址与接口

微信支付商户平台：https://pay.weixin.qq.com
微信公众平台：https://mp.weixin.qq.com
微信支付接口：https://developers.weixin.qq....
统一下单接口：https://pay.weixin.qq.com/wik...
支付结果通知接口：https://pay.weixin.qq.com/wik...
签名算法：https://pay.weixin.qq.com/wik...

微信支付之小程序支付

准备工作

小程序支付流程

支付前的操作

1、小程序端：用户向商户服务器发起支付请求

2、商户后端服务器：签名+生成预支付标识

4、小程序端：向微信服务器发起请求

5、微信服务器：支付结果通知

注意事项

参考网址与接口

老谢

引用和评论

彻底搞懂并解决vue-cli4中图片显示的问题

uniapp自定义跨端标题头相关说明

微信公众号：以选择图片为例来描述如何使用JS-SDK

微信程序开发系列教程（二）微信订阅号+人工智能问答服务

微信开发系列之八 - 微信公众号的地图集成

微信小程序处理交易投诉管理，支持多小程序

基于微信/抖音的小程序源码打包下载（技术开发说明文档+代码编译架构）