作為個人 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.drawXBitp()M5.Lcd.drawBitp()

對于單色圖標，可以通過取模軟件 Ige2Lcd 取模。在 Ige2Lcd 軟件中，選擇需要取模的圖片，根據自己的屏幕類型，調整取模方式、取模大小、亮度，最后導出取模數據。設置如下：

對于貨幣符號 ￥ 我們使用 Mixly 軟件中的取模工具獲取字模，取模設置如下：

對于彩色圖片，可以使用 IgeConverter 軟件獲取彩色圖片取模數據，其界面如下，選擇需要取模的圖片并調整其大小，最后導出為 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>&param=<param>&isHtml=0

其中 sign 為訂單信息與密鑰的 MD5 加密信息，MD5 是一種加密技術，可以通過百度獲取其加密原理，在這里我們可以通過 MD5 在線加密獲取這個加密信息，替換參數就能生成這個訂單。上面的例子中給我們演示了 MD5 加密和加密后的問題，在這里我們通過 MD5 加密庫文件對原數據進行加密，加密程序如下：

DIY掌上POS機（POS機做手腳）
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 將每隔一秒播放一次音頻，這里我們省略了音頻數據，獲取音頻數據方式如下，先準備一段 W 的簡短音頻，通過軟件 HxDSetup 打開該音頻，并按下圖所示導出：

該程序及軟件的完整例子請查看附錄文件。

代碼組合

最后，按照上述功能之間的邏輯關系，將代碼組合在一起即可。由于篇幅限制，這里就不放完整的代碼了，文中的所有案例以及完整程序大家可以通過下載附件進行查看。

小結

本項目中，我們以近乎零成本的方式實現了二維碼支付的問題，你甚至可以僅通過 1 塊 ESP8266 開發板而不需要屏幕來完成本項目。支付方式取決于你使用的第三方服務，在這里僅支持了主流的微信支付與支付寶，在最新一代的第三方服務當中你甚至可以不需要監聽軟件就可以實現本項目，但他們可能需要少許的費用。

本項目以體驗為主，讓大家以最低成本去實現屬于你自己的共享經ji項目。以本項目為基礎可以擴展很多共享經ji作品，比如自動販賣機，或者你也可以制作一個笑話售賣機，一分錢看一則笑話。你的腦洞決定了你的作品，讓我們一起腦洞大開吧！