详解基于Koa2开发微信二维码扫码支付相关流程

让我来详细讲解“详解基于Koa2开发微信二维码扫码支付相关流程”的完整攻略。

1. 前置知识

在阅读本攻略之前，你需要掌握以下技术：

• Node.js
• Koa2框架
• 微信支付API

如果你还不了解这些基础知识，请先学习它们。

2. 开始开发

2.1 创建 Koa2 项目

首先，你需要创建一个 Koa2 项目并安装必要的依赖。可以使用 npm 或者 yarn 进行安装：

npm init
yarn add koa koa-router koa-bodyparser koa-logger

2.2 微信支付 API

微信支付 API 包括两部分：支付的前端页面和后台的支付接口。在本攻略中，我们主要讲解后台的支付接口。

请参考微信支付官方文档，在微信商户平台上创建商户账号，获取商户号和 API 密钥等 necessary 信息。

在装备好了 necessary 信息后，你需要将其配置到你的项目中，以便调用微信支付 API。主要配置包括以下几个信息：

const WXPay = require('weixin-pay');
const wxpay = WXPay({
    appid: '',
    mch_id: '',
    partner_key: '',
});

2.3 支付流程

在获取了商户号和 API 密钥等必要信息后，我们将开始进入支付流程。

2.3.1 创建订单

首先，我们需要在后台创建一个订单。该订单包含必要信息，如订单号、金额等，以便后续调用微信支付 API 时使用。以下是一个示例订单对象：

const order = {
  body: '订单描述信息',
  detail: '订单详细信息',
  out_trade_no: '商户订单号',
  total_fee: '订单金额',
  spbill_create_ip: '客户端ip地址',
  notify_url: '微信服务器异步通知接口',
  trade_type: 'NATIVE',
  product_id: '商品ID',
};

其中，trade_type 的取值包括 JSAPI（公众号支付）、NATIVE（扫码支付）、APP（APP支付）等。

2.3.2 调用微信支付 API

在创建订单后，我们需要调用微信支付 API 进行支付操作。以下是一个调用示例：

const payParams = await wxpay.createUnifiedOrder({
  body: order.body,
  detail: order.detail,
  out_trade_no: order.out_trade_no,
  total_fee: order.total_fee,
  spbill_create_ip: order.spbill_create_ip,
  notify_url: order.notify_url,
  trade_type: order.trade_type,
  product_id: order.product_id,
});

调用完 createUnifiedOrder 方法后，我们将会得到一个包含二维码信息的 payParams 对象，包括以下属性：

• code_url: 用于生成二维码图片的 URL
• out_trade_no: 商户订单号
• prepay_id: 预支付订单号
• result_code: 支付结果码
• return_code: 支付返回码
• ...

2.3.3 生成二维码

拿到 payParams 对象后，我们使用第三方库生成二维码。以下是一个示例：

const qr = require('qr-image');
const code_url = payParams.code_url;
const img = qr.imageSync(code_url, { type: 'png' });

使用 qr-image 模块生成二维码后，我们可以将其渲染到页面中，供用户扫码进行支付。

以上就是实现微信二维码扫码支付的完整流程，你可以根据需要做出修改和调整。

3. 示例

3.1 扫码支付示例

以下是一个使用 Koa2 实现微信扫码支付的完整示例：

const Koa = require('koa');
const Router = require('koa-router');
const BodyParser = require('koa-bodyparser');
const Logger = require('koa-logger');
const WXPay = require('weixin-pay');
const qr = require('qr-image');
const fs = require('fs');

const app = new Koa();
const router = new Router();
const wxpay = WXPay({
    appid: '',
    mch_id: '',
    partner_key: '',
});

// 创建订单
router.post('/createOrder', async (ctx) => {
  const body = ctx.request.body;
  const total_fee = (parseFloat(body.total_fee) * 100).toFixed(0);

  const order = {
    body: body.title,
    out_trade_no: body.out_trade_no,
    total_fee: total_fee,
    spbill_create_ip: ctx.request.ip.replace(/^.*:/, ''),
    notify_url: 'https://www.example.com/weixinpay/notify',
    trade_type: 'NATIVE',
    product_id: body.product_id,
  };

  const payParams = await wxpay.createUnifiedOrder(order);
  const img = qr.imageSync(payParams.code_url, { type: 'png' });

  ctx.type = 'image/png';
  ctx.body = img;
});

// 支付回调
router.post('/notify', async (ctx) => {
  const result = wxpay.validate(ctx.request.body);

  if (result === true) {
    // 支付成功
    ctx.response.body = {
      return_code: 'SUCCESS',
      return_msg: 'OK',
    };
  } else {
    // 支付失败
    ctx.response.body = {
      return_code: 'FAIL',
      return_msg: '',
    };
  }
});

// 生成支付二维码
router.get('/qrCode', async (ctx) => {
  const img = fs.readFileSync('./public/qr.png');
  ctx.type = 'image/png';
  ctx.body = img;
});

app.use(BodyParser());
app.use(Logger());
app.use(router.routes());

app.listen(3000);

运行以上示例代码，访问 http://localhost:3000/createOrder 接口，即可在浏览器上生成支付二维码。当用户完成支付后，微信服务器将会异步通知你的服务器进行支付结果的处理。

3.2 其他支付方式示例

如果你需要实现其他支付方式，比如APP支付、公众号支付等，请参考微信支付官方文档进行实现。

以下是一个使用 Koa2 实现微信 APP 支付的完整示例：

const Koa = require('koa');
const Router = require('koa-router');
const BodyParser = require('koa-bodyparser');
const WXPay = require('weixin-pay');

const app = new Koa();
const router = new Router();
const wxpay = WXPay({
  appid: 'your appid',
  mch_id: 'your mch_id',
  partner_key: 'your partner_key',
  pfx: fs.readFileSync('path/to/apiclient_cert.p12'), //微信商户平台证书
});

// 用户下单生成对应的预支付订单
router.post('/getOrder', async (ctx, next) => {
  const notify_url = 'https://yourserver.com/payCallback';
  const body = ctx.request.body;
  const out_trade_no = body.out_trade_no;  //商户订单号，这里应该使用你自己的订单生成方式生成
  const total_fee = body.total_fee;    //订单金额，单位为分，这里应该使用你自己的金额生成方式生成
  const spbill_create_ip = ctx.request.ip.replace(/^.*:/, '');    //用户的IP地址

  const order = {
    body: '支付测试',
    out_trade_no: out_trade_no,     //商户订单号
    total_fee: total_fee,       //订单金额，单位为分，这里应该使用你自己的金额生成方式生成
    spbill_create_ip: spbill_create_ip,
    appid: 'your appid',
    mch_id: 'your mch_id',
    notify_url: notify_url,
    openid: 'your openid',    //这里应该使用你自己的方法获取openid
    trade_type: 'APP'
  };

  const data = await wxpay.createUnifiedOrder(order);
  const prepay_id = data.prepay_id;



  // 返回给APP端的参数列表
  const params = {
    appid: 'your appid',
    partnerid: 'your mch_id',
    prepayid: prepay_id,
    package: 'Sign=WXPay',
    noncestr: wxpay.buildNonceStr(),
    timestamp: Math.floor(Date.now() / 1000),
  };

  // 生成APP端支付签名
  const paySign = wxpay.buildAppPaySign(params);

  params.sign = paySign;

  ctx.body = params;
});


// 支付成功的回调
router.post('/payCallback', async (ctx) => {
  const result = wxpay.validate(ctx.request.body);
  if (result) {
    // 如果支付成功，修改订单状态等其他操作
    console.log('payCallback: ',ctx.request.body)
    ctx.response.body = {
      returnCode: "SUCCESS",
      returnMsg: "OK"
    };
  } else {
    ctx.response.body = {
      returnCode: "FAIL",
      returnMsg: "签名失败"
    };
  }
});


app.use(BodyParser());
app.use(router.routes());

app.listen(3000);

说明

以上是一个使用 Koa2 实现微信APP支付重点代码的完整示例。将代码部署至服务器后，客户端调用 /getOrder 接口即可完成 APP 支付。支付成功后，微信服务器将会回调 /payCallback 接口，告知你支付结果。

结语

在本文中，我们详细讲解了基于 Koa2 框架开发微信二维码扫码支付相关流程的攻略，并提供了两个完整的示例进行演示。如果你有什么问题和建议，欢迎在评论区留言，我们将会积极回复。