首先在uni-app中主要有支付寶支付、微信支付、蘋果應用內支付這幾種(剩余的支付方式不是主流,我也就不講啦,嘻嘻>-<),接下來我就分開給大家講一講這幾種支付方式。
(一)開發前准備
首先如果你想使用者三種支付方式必須要去相應的開放平台注冊並申請支付功能
(1)支付寶支付能力申請:
首先登陸支付寶賬號然后創建應用用來獲取支付寶應用的appid以便在uni-app的manifest.json中進行配置,接下來開通app支付功能,開通的步驟比較繁瑣,會有支付寶的工作人員進行審核,如果是公司項目的話應該會會順利,我就不在這里啰嗦了,第三步配置密鑰用來獲取公鑰和私鑰這是需要后台進行處理的。
(2)微信支付能力申請:
首先到 微信開放平台 申請移動應用並開通支付功能,申請應用后可以獲取 AppID 和 AppSecret 值,然后將應用接入 微信商戶平台,選擇 App 支付,最后開通支付功能后可獲取支付業務服務器配置數據:PARTNER(財付通商戶號)、PARTNER_KEY(財付通密鑰)、PAYSIGNKEY(支付簽名密鑰),最后一步也是后台進行處理的,不用我們操心啦。
(3)蘋果應用內支付:
因為我們的項目沒用過蘋果應用支付所以我就先不多說這部分了,等以后我踩完坑了再給大家補上哈。
(4)manifest.json配置
打開manifest.json文件找到app SDK配置,然后找到支付的部分進行相關配置就好了,都是圖形界面配置比較容易,我就一帶而過了。
(二)開發支付模塊
首先通過uni.getProvider方法獲取到用戶手機里的服務商,service選擇payment,共有4種方式alipay(支付寶支付)、wxpay(微信支付)、baidu(百度收銀台支付)、appleiap(蘋果應用內支付)。代碼如下:
uni.getProvider({
service: 'payment',
success: function (res) {
//在這里進行業務邏輯處理
}
});
然后通過后台獲取訂單信息:
uni.request({
url: addUrl() + '/api/recharge/pay',
method: 'POST',
header: {
referer: ''
},
data: {
//請求接口的參數
},
success: (res) => {
//獲得訂單信息
}
})
第三步調起微信/支付寶支付
//支付寶支付
uni.requestPayment({
provider: 'alipay',
orderInfo: orderInfo, //訂單數據
success: function(res) {
//處理業務邏輯
},
fail: function(err) {
console.log('fail:' + JSON.stringify(err));
uni.showToast({
icon: 'none',
title: '支付失敗'
});
}
});
//微信支付
uni.requestPayment({
provider: 'wxpay',
orderInfo: orderInfo, //訂單數據
success: function(res) {
//處理業務邏輯
},
fail: function(err) {
console.log('fail:' + JSON.stringify(err));
uni.showToast({
icon: 'none',
title: '支付失敗'
});
}
});