微擎支付返回商户单号_微信小程序支付流程

微信支付之小程序支付

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

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

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

准备工作

1、申请微信小程序账号

申请成功可拿到 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()的二次封装

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

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

// 支付签名参数

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

"use strict"

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"

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

const

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

注意事项

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

此文转载自：千锋HTML5学院

原文链接：微信小程序支付流程

Eric：开发Web应用为啥要使用TypeScript?zhuanlan.zhihu.com

Eric：如何讲清楚Promise?zhuanlan.zhihu.com