h5移動(dòng)端調(diào)用支付寶、微信支付的實(shí)現(xiàn)
發(fā)布時(shí)間：2020-06-08 16:31:05 作者：yfsir 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了h5移動(dòng)端調(diào)用支付寶、微信支付的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
公司項(xiàng)目之前已有支付寶支付，現(xiàn)要求增加微信支付，第一次做，摸著石頭過河！結(jié)果是滿意的。
廢話就不說了直接上代碼：
var aliChannel = null;
var wxChannel = null;
// 定義支付方式切換
var state_type = 1;
// 選擇支付方式 默認(rèn)為支付寶樣式
$(".zfb").find("i").css("background-Image","url(../img/pl_8.png)");
$(".pay").on("singleTap",".pay_c",function(){
$(this).find("i").css("background-Image","url(../img/pl_8.png)");
$(this).siblings().find("i").css("background-Image","url(../img/pl_9.png)");
if($(this).find("span").text().trim() == "支付寶"){
state_type = 1;
}else if($(this).find("span").text().trim() == "微信"){
state_type = 2;
}
})
// 點(diǎn)擊支付
$('.pay_btn').unbind();
$('.pay_btn').singleTap(function () {
if(state_type == 1){
// 支付寶通道
mui.plusReady(function () { // 獲取支付通道
plus.payment.getChannels(function (channels) {
for (var i in channels) {
if (channels[i].id == "wxpay") {
wxChannel = channels[i];
} else {
aliChannel = channels[i];
}
}
}, function (e) {
alert("獲取支付通道失敗：" + e.message);
});
})
mui.post('此處填寫支付接口', {
'此處填寫所需參數(shù)'
},
function (data) {
console.log(JSON.stringify(data));
if (data) {
data = data.data.payStr;
plus.payment.request(aliChannel, data, function (result) {
// 支付成功處理
}, function (e) {
floatRemind("付費(fèi)失敗，用戶已取消");
});
} else {
plus.nativeUI.alert("支付失敗");
}
});
}else if(state_type == 2){
// 微信通道
mui.plusReady(function () { // 獲取支付通道
plus.payment.getChannels(function (channels) {
for (var i in channels) {
if (channels[i].id == "wxpay") {
wxChannel = channels[i];
} else {
aliChannel = channels[i];
}
}
}, function (e) {
alert("獲取支付通道失?。?quot; + e.message);
});
})
mui.post('此處填寫支付接口', {
'此處填寫所需參數(shù)'
},
function (data) {
data = JSON.stringify(data.data);
if (data) {
plus.payment.request(wxChannel, data, function (result) {
// 支付成功處理
}, function (msg) {
// JSON.stringify(msg.message)
floatRemind('支付失敗');
});
} else {
plus.nativeUI.alert("支付失敗");
}
});
}
})
自己已經(jīng)用過了，沒有問題，支付寶可以真機(jī)調(diào)試，微信必須打包下載測(cè)試。
測(cè)試過程中有過報(bào)錯(cuò)-100，百度各種解決方法，后來發(fā)現(xiàn)不是前端問題，有人說打包必須選自有證書，自己試過了不需要，公用證書就可以的。
代碼就是這些，可以直接拿去用，測(cè)試如果OK，請(qǐng)給點(diǎn)鼓勵(lì)，謝謝！第一次寫博客，寫的不好請(qǐng)見諒！
到此這篇關(guān)于h5移動(dòng)端調(diào)用支付寶、微信支付的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)h5移動(dòng)端支付寶微信支付內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
基于HTML5+tracking.js實(shí)現(xiàn)刷臉支付功能
這篇文章主要介紹了基于HTML5+tracking.js實(shí)現(xiàn)刷臉支付功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-04-16- 這篇文章主要介紹了詳解Html5微信支付爬坑之路的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-24
本文通過實(shí)例代碼給大家介紹了html5仿支付寶密碼框效果，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-09-06
