前面給大家講過一個藉助小程序雲開發實現微信支付的,但是那個操作稍微有點繁瑣,並且還會經常出現問題,今天就給大家講一個簡單的,並且藉助官方支付api實現小程序支付功能。
老規矩,先看本節效果圖
我們實現這個支付功能完全是藉助小程序雲開發實現的,不用搭建自己的服務器,不用買域名,不用備案域名,不用支持https。只需要一個簡單的雲函數,就可以輕鬆的實現微信小程序支付功能。
核心代碼就下面這些
一,創建一個雲開發小程序
關於如何創建雲開發小程序,這裏我就不再做具體講解。不知道怎麼創建雲開發小程序的同學,可以去翻看我之前的文章,或者看下我錄製的視頻:https://edu.csdn.net/course/play/9604/204528
創建雲開發小程序有幾點注意的
1,一定不要忘記在app.js裏初始化雲開發環境。
2,創建完雲函數後,一定要記得上傳
二, 創建支付的雲函數
1,創建雲函數pay
三,引入三方依賴tenpay
我們這裏引入三方依賴的目的,是創建我們支付時需要的一些參數。我們安裝依賴是使用裏npm 而npm必須安裝node,關於如何安裝node,我這裏不做講解,百度一下,網上一大堆。
1,首先右鍵pay,然後選擇在終端中打開
2,我們使用npm來安裝這個依賴。
在命令行裏執行 npm i tenpay
安裝完成後,我們的pay雲函數會多出一個package.json 文件
到這裏我們的tenpay依賴就安裝好了。
四,編寫雲函數pay
完整代碼如下
//雲開發實現支付
const cloud = require('wx-server-sdk')
cloud.init()
//1,引入支付的三方依賴
const tenpay = require('tenpay');
//2,配置支付信息
const config = {
appid: '你的小程序appid',
mchid: '你的微信商戶號',
partnerKey: '微信支付安全密鑰',
notify_url: '支付回調網址,這裏可以先隨意填一個網址',
spbill_create_ip: '127.0.0.1' //這裏填這個就可以
};
exports.main = async(event, context) => {
const wxContext = cloud.getWXContext()
let {
orderid,
money
} = event;
//3,初始化支付
const api = tenpay.init(config);
let result = await api.getPayParams({
out_trade_no: orderid,
body: '商品簡單描述',
total_fee: money, //訂單金額(分),
openid: wxContext.OPENID //付款用戶的openid
});
return result;
}
一定要注意把appid,mchid,partnerKey換成你自己的。
到這裏我們獲取小程序支付所需參數的雲函數代碼就編寫完成了。
不要忘記上傳這個雲函數。
出現下圖就代表上傳成功
五,寫一個簡單的頁面,用來提交訂單,調用pay雲函數。
這個頁面很簡單,
1,自己隨便編寫一個訂單號(這個訂單號要大於6位)
2,自己隨便填寫一個訂單價(單位是分)
3,點擊按鈕,調用pay雲函數。獲取支付所需參數。
下圖是官方支付api所需要的一些必須參數。
下圖是我們調用pay雲函數獲取的參數,和上圖所需要的是不是一樣。
六,調用wx.requestPayment實現支付
下圖是官方的示例代碼
這裏不在做具體講解了,把完整代碼給大家貼出來
// pages/pay/pay.js
Page({
//提交訂單
formSubmit: function(e) {
let that = this;
let formData = e.detail.value
console.log('form發生了submit事件,攜帶數據爲:', formData)
wx.cloud.callFunction({
name: "pay",
data: {
orderid: "" + formData.orderid,
money: formData.money
},
success(res) {
console.log("提交成功", res.result)
that.pay(res.result)
},
fail(res) {
console.log("提交失敗", res)
}
})
},
//實現小程序支付
pay(payData) {
//官方標準的支付方法
wx.requestPayment({
timeStamp: payData.timeStamp,
nonceStr: payData.nonceStr,
package: payData.package, //統一下單接口返回的 prepay_id 格式如:prepay_id=***
signType: 'MD5',
paySign: payData.paySign, //簽名
success(res) {
console.log("支付成功", res)
},
fail(res) {
console.log("支付失敗", res)
},
complete(res) {
console.log("支付完成", res)
}
})
}
})
到這裏,雲開發實現小程序支付的功能就完整實現了。
實現效果
1,調起支付鍵盤
2,支付完成
3,log日誌,可以看出不同支付狀態的回調
上圖是支付成功的回調,我們可以在支付成功回調時,改變訂單支付狀態。
下圖是支付失敗的回調,
下圖是支付完成的狀態。
到這裏我們就輕鬆的實現了微信小程序的支付功能了。是不是很簡單啊。
如果感覺圖文不是很好理解,我後面會錄製視頻講解。
源碼地址:
https://github.com/qiushi123/xiaochengxu_demos
014雲開發實現小程序支付,就是我們的源碼,如果你導入源碼或者學習過程中有任何問題,都可以加我微信2501902696(備註小程序)