Next.js 项目中如何接入微信支付-JavaScript中文网-JavaScript教程资源分享门户

前言

微信支付是一种常用的移动支付方式，对于一些需要在线支付的项目来说，接入微信支付可以提高用户支付的便捷性和安全性。本文将介绍如何在 Next.js 项目中接入微信支付。

准备工作

在接入微信支付之前，需要先申请微信支付的相关权限和配置，包括：

微信支付账号：需要在微信支付官网注册账号并完成实名认证。
商户号：在微信支付官网注册账号后，可以在商户平台中申请商户号。
API 密钥：商户号申请成功后，需要在商户平台中设置 API 密钥，用于生成签名和验证数据的安全性。
SSL 证书：为了保证支付过程的安全性，在接入微信支付时需要使用 SSL 证书。

接入流程

接下来，我们将按照以下步骤来接入微信支付：

安装依赖：使用 npm 或 yarn 安装 wechat-pay 包。
配置参数：根据微信支付的要求，设置相关参数，包括商户号、API 密钥、证书路径等。
创建订单：根据业务需求创建订单，生成订单号和订单金额等参数。
生成签名：使用商户的 API 密钥和订单参数生成签名。
发起支付请求：将订单参数和签名等信息发送给微信支付服务器，发起支付请求。
处理支付结果：在支付完成后，微信支付服务器将返回支付结果信息，需要对返回结果进行验证和处理。

安装依赖

在 Next.js 项目中，可以使用 npm 或 yarn 安装 wechat-pay 包：

npm install wechat-pay --save

或者：

yarn add wechat-pay

配置参数

在接入微信支付时，需要按照微信支付的要求设置相关参数，包括商户号、API 密钥、证书路径等。在 Next.js 项目中，可以将这些参数保存在配置文件中，并在需要使用时引入。

// config.js
module.exports = {
  mch_id: '商户号',
  mch_key: 'API 密钥',
  cert_path: 'SSL 证书路径',
  key_path: 'SSL 证书密钥路径',
  notify_url: '支付结果回调地址',
};

创建订单

根据业务需求，创建订单并生成订单号和订单金额等参数。在 Next.js 项目中，可以将订单信息保存在数据库中，并在需要使用时从数据库中读取。

// order.js
module.exports = {
  createOrder: async function (params) {
    // 生成订单号和订单金额等参数
    const order_no = ...
    const total_fee = ...
    // 将订单信息保存在数据库中
    ...
    return { order_no, total_fee };
  },
};

生成签名

使用商户的 API 密钥和订单参数生成签名。在 Next.js 项目中，可以使用 wechat-pay 包提供的 API：

const WechatPay = require('wechat-pay');
const config = require('./config');

const wechatPay = new WechatPay({
  appid: '公众号或小程序的 appid',
  mch_id: config.mch_id,
  partner_key: config.mch_key,
  pfx: fs.readFileSync(config.cert_path),
});

const order = await order.createOrder(params);
const unifiedOrder = {
  body: '商品描述',
  out_trade_no: order.order_no,
  total_fee: order.total_fee,
  spbill_create_ip: '用户 IP 地址',
  notify_url: config.notify_url,
  trade_type: 'JSAPI',
  openid: '用户的 openid',
};
const result = await wechatPay.createUnifiedOrder(unifiedOrder);
const { prepay_id } = result;
const payParams = wechatPay.getPayParams({
  timeStamp: parseInt(Date.now() / 1000),
  nonceStr: wechatPay._generateNonceStr(),
  package: `prepay_id=${prepay_id}`,
  signType: 'MD5',
});
const sign = wechatPay._getSign(payParams);
payParams.paySign = sign;

发起支付请求

将订单参数和签名等信息发送给微信支付服务器，发起支付请求。在 Next.js 项目中，可以使用 wechat-pay 包提供的 API：

const WechatPay = require('wechat-pay');
const config = require('./config');

const wechatPay = new WechatPay({
  appid: '公众号或小程序的 appid',
  mch_id: config.mch_id,
  partner_key: config.mch_key,
  pfx: fs.readFileSync(config.cert_path),
});

const order = await order.createOrder(params);
const unifiedOrder = {
  body: '商品描述',
  out_trade_no: order.order_no,
  total_fee: order.total_fee,
  spbill_create_ip: '用户 IP 地址',
  notify_url: config.notify_url,
  trade_type: 'JSAPI',
  openid: '用户的 openid',
};
const result = await wechatPay.createUnifiedOrder(unifiedOrder);
const { prepay_id } = result;
const payParams = wechatPay.getPayParams({
  timeStamp: parseInt(Date.now() / 1000),
  nonceStr: wechatPay._generateNonceStr(),
  package: `prepay_id=${prepay_id}`,
  signType: 'MD5',
});
const sign = wechatPay._getSign(payParams);
payParams.paySign = sign;

// 发起支付请求
const payment = {
  appId: payParams.appId,
  timeStamp: payParams.timeStamp,
  nonceStr: payParams.nonceStr,
  package: payParams.package,
  signType: payParams.signType,
  paySign: payParams.paySign,
};
wx.requestPayment({
  ...payment,
  success: function (res) {
    // 支付成功处理
  },
  fail: function (res) {
    // 支付失败处理
  },
});

处理支付结果

在支付完成后，微信支付服务器将返回支付结果信息，需要对返回结果进行验证和处理。在 Next.js 项目中，可以使用 wechat-pay 包提供的 API：

const WechatPay = require('wechat-pay');
const config = require('./config');

const wechatPay = new WechatPay({
  appid: '公众号或小程序的 appid',
  mch_id: config.mch_id,
  partner_key: config.mch_key,
  pfx: fs.readFileSync(config.cert_path),
});

// 处理支付结果
app.post('/notify', wechatPay.middleware(async (message, ctx) => {
  // 验证签名
  const result = wechatPay.verifySign(message);
  if (!result) {
    return 'FAIL';
  }
  // 处理支付结果
  const order_no = message.out_trade_no;
  const transaction_id = message.transaction_id;
  const total_fee = message.total_fee;
  const time_end = message.time_end;
  ...
  return 'SUCCESS';
}));

总结

本文介绍了在 Next.js 项目中接入微信支付的流程，包括安装依赖、配置参数、创建订单、生成签名、发起支付请求和处理支付结果等步骤。接入微信支付可以提高用户支付的便捷性和安全性，对于需要在线支付的项目来说是必不可少的功能。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/658d71a9eb4cecbf2d3664fd