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

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

准备事情

1、申请微信小程序账号

php获取prepayid微信小法式付出流程 JavaScript

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

2、微信小程序认证

通过认证的小程序才能接入微信支付和绑定商户平台

3、申请商户平台账号

须要第一步申请的 AppID申请成功可拿到 MchID（商户 id）和 MchKey（商户密钥）

4、信小程序关联商户号

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

5、接入微信支付

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

小程序支付流程

简要支付流程如下：

用户发起支付要求后端调用统一下单接口得到 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后，接着便是把参数返回前端 // =>为了更清晰，我把这里的代码写不才一步 // ... } }3、给前端返回支付参数+署名

// 支付署名参数 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.com/miniprogram/dev/api/open-api/payment/wx.requestPayment.html统一下单接口：https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_1支付结果关照接口：https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_7&index=8署名算法：https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=4_3

[mp] https://mp.weixin.qq.com

[pay] https://pay.weixin.qq.com

[payment] https://developers.weixin.qq.com/miniprogram/dev/api/open-api/payment/wx.requestPayment.html

[notify] https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_7&index=8

[login] https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html

[unifiedorder] https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_1

[code2session] https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/login/auth.code2Session.html

[sign] https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=4_3