天天看點

借助雲開發,10行代碼實作小程式支付功能!丨實戰

前面給大家講過一個借助小程式雲開發實作微信支付的,但是那個操作稍微有點繁瑣,并且還會經常出現問題,今天就給大家講一個簡單的,并且借助官方支付api實作小程式支付功能。

傳送門:

借助小程式雲開發實作小程式支付功能

老規矩,先看本節效果圖

借助雲開發,10行代碼實作小程式支付功能!丨實戰

我們實作這個支付功能完全是借助小程式雲開發實作的,不用搭建自己的伺服器,不用買域名,不用備案域名,不用支援https。隻需要一個簡單的雲函數,就可以輕松的實作微信小程式支付功能。

核心代碼就下面這些:

借助雲開發,10行代碼實作小程式支付功能!丨實戰

關于如何建立雲開發小程式,這裡我就不再做具體講解。不知道怎麼建立雲開發小程式的同學,可以去翻看騰訊雲雲開發公衆号内菜單【技術交流-視訊教程】中的教學視訊。

1.一定不要忘記在app.js裡初始化雲開發環境。

借助雲開發,10行代碼實作小程式支付功能!丨實戰

2.建立完雲函數後,一定要記得上傳

1.建立雲函數pay

借助雲開發,10行代碼實作小程式支付功能!丨實戰
借助雲開發,10行代碼實作小程式支付功能!丨實戰

我們這裡引入三方依賴的目的,是建立我們支付時需要的一些參數。我們安裝依賴是使用裡npm 而npm必須安裝node,關于如何安裝node,我這裡不做講解,百度一下,網上一大堆。

借助雲開發,10行代碼實作小程式支付功能!丨實戰

在指令行裡執行 npm i tenpay

借助雲開發,10行代碼實作小程式支付功能!丨實戰
借助雲開發,10行代碼實作小程式支付功能!丨實戰
借助雲開發,10行代碼實作小程式支付功能!丨實戰

安裝完成後,我們的pay雲函數會多出一個package.json 檔案

借助雲開發,10行代碼實作小程式支付功能!丨實戰

到這裡我們的tenpay依賴就安裝好了。

借助雲開發,10行代碼實作小程式支付功能!丨實戰

完整代碼如下

到這裡我們擷取小程式支付所需參數的雲函數代碼就編寫完成了。

不要忘記上傳這個雲函數。

借助雲開發,10行代碼實作小程式支付功能!丨實戰

出現下圖就代表上傳成功

借助雲開發,10行代碼實作小程式支付功能!丨實戰
借助雲開發,10行代碼實作小程式支付功能!丨實戰

這個頁面很簡單:

1.自己随便編寫一個訂單号(這個訂單号要大于6位)

2.自己随便填寫一個訂單價(機關是分)

3.點選按鈕,調用pay雲函數。擷取支付所需參數。

下圖是官方支付api所需要的一些必須參數。

借助雲開發,10行代碼實作小程式支付功能!丨實戰

下圖是我們調用pay雲函數擷取的參數,和上圖所需要的是不是一樣。

借助雲開發,10行代碼實作小程式支付功能!丨實戰

下圖是官方的示例代碼:

借助雲開發,10行代碼實作小程式支付功能!丨實戰

這裡不在做具體講解了,把完整代碼給大家貼出來

到這裡,雲開發實作小程式支付的功能就完整實作了。

借助雲開發,10行代碼實作小程式支付功能!丨實戰
借助雲開發,10行代碼實作小程式支付功能!丨實戰
借助雲開發,10行代碼實作小程式支付功能!丨實戰

上圖是支付成功的回調,我們可以在支付成功回調時,改變訂單支付狀态。

下圖是支付失敗的回調:

借助雲開發,10行代碼實作小程式支付功能!丨實戰

下圖是支付完成的狀态:

借助雲開發,10行代碼實作小程式支付功能!丨實戰

到這裡我們就輕松的實作了微信小程式的支付功能了,是不是很簡單啊。

https://github.com/TencentCloudBase/Good-practice-tutorial-recommended

雲開發(CloudBase)是一款雲端一體化的産品方案 ,采用 serverless 架構,免環境搭建等運維事務 ,支援一雲多端,助力快速建構小程式、Web應用、移動應用。

技術文檔:https://www.cloudbase.net/

如果你有關于使用雲開發CloudBase相關的技術故事/技術實戰經驗想要跟大家分享,歡迎留言聯系我們哦~比心!

借助雲開發,10行代碼實作小程式支付功能!丨實戰

繼續閱讀