在这个共享经济时代，万物皆可共享，这其中包括了共享单车、共享充电宝、共享雨伞等服务。所有这些共享经济产品的背后，都用到了扫码支付相关的技术。
作为个人 DIY 玩家，有没有办法在自己的作品上增加扫码支付相关的功能呢？比如通过扫码支付控制设备实现不同的功能呢。想法虽然美好，但现实却是残酷的，因为大多数支付接口并不针对个人开放，个人想要实现扫码支付效果，一般只能通过第三方服务实现。本教程中，我将介绍一种第三方服务，它是一个独立开发者个人即时到账收款平台，可以通过监测手机通知从而验证支付状态，验证支付成功之后，我们就可以 DIY 各种扫码付费项目啦。
本教程中，我给大家制作了一个掌上 POS 机为大家演示扫码收款功能，演示视频地址如下：
在这个项目中，我们实现了类似 POS 机的效果，不仅可以设置收款金额，而且还可以选择收款方式，比如支付宝、微信、QQ等，用户扫码后就可以实现支付。
预期目标及功能
- 触摸键盘功能；
- 支付图标显示；
- 支付方式选择；
- 二维码生成；
- 网络状态反馈；
- 触摸震动反馈；
所用硬件
- M5Core2 模块
M5Core2 具有如下特点：
- 基于 ESP32 开发，支持 WiFi，蓝牙；
- 16M 闪存，8M PSRAM；
- 内置扬声器，电源指示灯，震动马达，RTC，I2S 功放，电容式触摸屏，电源键，复位键；
- TF 卡插槽（支持最大 16GB）；
- 内置锂电池，配备电源管理芯片；
- 独立小板内置 6 轴 IMU，PDM 麦克风；
- M-Bus 总线插座。
程序设计
下面开始详细讲解程序设计过程。
开发环境
我们使用 Arduino IDE 来编写本项目的程序，上传程序时开发板选择 M5Stack-Core2，编程过程中需要用到的软件及库，将会打包作为附件给大家下载，详见文末下载说明。
程序思路
为了实现项目的所有功能，我们先根据预期的目标绘制思维导图，再根据思维导图逐步实现自制 POS 结算终端机的功能。
下面我们将具体讨论自制结算终端的各个子功能是如何实现的。
触摸按键测试程序
我们想要使用触摸屏实现金额的输入以及支付方式的选择，离不开设计触摸按键。M5Core2 为我们提供了成熟的解决方案，我们能够轻易地绘制一个按键，并且设置指定的区域，触摸按键的使用示例如下：
其中：
ButtonColors on_clrs = {YELLOW, WHITE, WHITE}ButtonColors off_clrs = {BLACK, WHITE, WHITE}Button tl(0, 0, 0, 0, false , "Button", off_clrs, on_clrs, MC_DATUM)doButtons()eventDisplay(Event& e)M5Core2.h触摸按键效果测试
上传上面的测试程序，打开串口监视器，点击 M5Core2 屏幕上的触摸按键可看到下图所示内容：
可以看到：
- 当点击程序定义的触摸按键时，串口会返回按键的标签字符串 Button 以及按下的持续时间以及坐标区域；
- 当点击未被程序设置的区域时，返回的字符串是 background；
- 当点击触摸屏上的另外三个默认触摸按键时，返回 BtnA，BtnB 或 BtnC。
e.typeName()e.objName()E_RELEASE主界面 UI 设计
M5.Lcd.drawRoundRect()图标显示
M5.Lcd.drawXBitmap()M5.Lcd.drawBitmap()对于单色图标，可以通过取模软件 Image2Lcd 取模。在 Image2Lcd 软件中，选择需要取模的图片，根据自己的屏幕类型，调整取模方式、取模大小、亮度，最后导出取模数据。设置如下：
对于货币符号 ¥ 我们使用 Mixly 软件中的取模工具获取字模，取模设置如下：
对于彩色图片，可以使用 ImageConverter 软件获取彩色图片取模数据，其界面如下，选择需要取模的图片并调整其大小，最后导出为 C 语言取模数据即可：
按键功能以及 UI 设计
Input_data在上面的程序当中，我们还应该考虑输入字符串的特殊情况例如，首位不能是小数点，首位不能连续两个 0 等情况，其他情况请自行分析，此处省略了取模数据，上传该程序效果如下：
WiFi 连接反馈
当没有连接网络时，网络应当自动连接并且反馈当前的连接状态，实现代码如下：
使用此方式连接网络比直接初始化连接网络更好，其主函数不会受网络状况的影响且能够自动连接网络，在以后使用 ESP 系列连接网络都建议使用此种方式。加上连网反馈后效果如下：
发起支付请求
完成上面的程序后，当我们输入金额并确认支付方式时，按下 CON 确认键会发出订单请求，生成订单号并显示支付二维码。
这里我们用到了第三方服务奇迹码支付（http://pay.qj61.cn/login），进入官网，按提示注册以及上传自己的收款二维码，并下载安装其软件监听通知，按提示进行设置，并保证监听软件与收款账号为同一个手机。微信可以开启店员功能，则无需保证同一手机，监听软件必须保证不被后台清除。完成上面步骤后，再来简单了解下其 API 的构成，我们重点查看其订单生成与支付状态验证。
订单生成
通过对文档分析可以得到订单生成的 API 为：
http://pay.qj61.cn/createOrder?mid=<mid>&payId=<payId>&type=<type>&price=<price>&sign=<sign>¶m=<param>&isHtml=0
其中 sign 为订单信息与密钥的 MD5 加密信息，MD5 是一种加密技术，可以通过百度获取其加密原理，在这里我们可以通过 MD5 在线加密获取这个加密信息，替换参数就能生成这个订单。上面的例子中给我们演示了 MD5 加密和加密后的情况，在这里我们通过 MD5 加密库文件对原数据进行加密，加密程序如下：
md5_string()订单返回数据
等我们成功生成订单并返回数据后，我们需要对返回的 JSON 数据进行分析，从而得到我们想要的数据。在反馈的数据当中，我们希望获取的是云端订单号，我们将通过查询该订单号来获取是否支付成功，在这里我们通过 ArduinoJson 库对返回的数据进行分析，我们可以通过 ArduinoJson 助手（https://arduinojson.org/v6/assistant/）在线反序列 JSON 数据得到想要的结果。此处获得解析结果的代码如下：
我们对以上结果进行分析，删除无关数据后处理结果如下：
订单状态验证
通过对文档的分析可得到查询订单状态的 API 为：
同理我们用 ArduinoJson 助手解析返回的数据，可以得到当返回的订单状态 state，当 state 大于 0 那么就认为支付成功。
发送 API 请求
ESP32 发送 get 请求方法如下：
显示二维码
通过对上面文档的分析和 ESP32 发送 get 请求的案例，我们已经能够生成订单并且获取订单支付结果了。当订单生成后，我们需要将订单转换成二维码。
订单验证
显示完二维码以后，我们给定一个超时时间，例如 60 秒：
- 若 60 秒内完成付款，应当显示付款成功的提示图标，并停留一段时间后返回主界面；
- 若超时限定时间，则显示付款失败提示图标，并停留一段时间后返回主界面。
M5.update()震动反馈
M5Core2 内置了一个振动马达，在这里我们按下定义的按键以及显示二维码时，可以让振动马达发出震动，增强作品的体感效果，控制振动马达的主要程序如下：
语音提示
为了增加作品的趣味性，我们可以在收款成功后播放语音提示，ESP32 的 i2s 能够让我们直接播放简短音频，可以利用 M5Core2 的扬声器播放零钱到账的声音，程序如下：
在上面的程序当中，M5Core2 将每隔一秒播放一次音频，这里我们省略了音频数据，获取音频数据方法如下，先准备一段 WAV 的简短音频，通过软件 HxDSetup 打开该音频，并按下图所示导出：
该程序及软件的完整例子请查看附录文件。
代码组合
最后，按照上述功能之间的逻辑关系，将代码组合在一起即可。由于篇幅限制，这里就不放完整的代码了，文中的所有案例以及完整程序大家可以通过下载附件进行查看。
小结
本项目中，我们以近乎零成本的方式实现了二维码支付的问题，你甚至可以仅通过 1 块 ESP8266 开发板而不需要屏幕来完成本项目。支付方式取决于你使用的第三方服务，在这里仅支持了主流的微信支付与支付宝，在最新一代的第三方服务当中你甚至可以不需要监听软件就可以实现本项目，但他们可能需要少许的费用。
本项目以体验为主，让大家以最低成本去实现属于你自己的共享经济项目。以本项目为基础可以扩展很多共享经济作品，比如自动贩卖机，或者你也可以制作一个笑话售卖机，一分钱看一则笑话。你的脑洞决定了你的作品，让我们一起脑洞大开吧！
