電商O2O無疑是目前最受用戶歡迎的APP類型，而在這類APP中必不可少的就是在線支付功能了。在AppCan平台開發這類應用時，官方封裝了微信支付、支付寶、銀聯等多種支付SDK，更接入了多家聚合支付平台，以滿足開發者的各種需求。本文將通過實際案例的講解，為大家介紹如何在項目中實現支付寶和微信支付功能。
頁面效果圖
頁面UI
首先編寫UI界面布局。新建一個AppCan頁面，命名為waitpay.html，同時IDE會自動根據waitpay.html頁面生成一個浮動窗口waitpay_content.html頁面。
在waitpay.html主窗口和waitpay_content.html浮動窗口分別編寫UI布局代碼，這里不做詳解。
支付功能
1.主窗口
（1）在waitpay.html頁面js腳本區內編寫javaScript代碼，用於實現獲取微信支付結果的回調函數。
uexWeiXin.cbStartPay = function(data) {
if(JSON.parse(data).errCode==0){
uexWindow.evaluatePopoverScript("myorder", "content", "show()");
uexWindow.evaluatePopoverScript("paylist", "content", "show()");
appcan.window.close(-1);
}else if(JSON.parse(data).errCode==-2){
uexWindow.toast("0", "5","取消支付", "2000");
}else{
uexWindow.toast("0", "5","支付失敗", "2000");
}
效果如下：
（2）然后接着在js腳本區域編寫javaScript代碼，用於實現當點擊頁面返回按鈕時返回上一級頁面並清除當前窗口的訂單信息。代碼如下：
appcan.button(".nav-btn", "btn-act", function() {
appcan.locStorage.remove("country");
appcan.locStorage.remove("orderId");
appcan.locStorage.remove('goodsArr');
appcan.locStorage.remove('length');
appcan.window.close(-1);
})
效果如下：
2.浮動窗口
在waitpay_content.html頁面js腳本區內編寫JavaScript代碼，用於實現當前頁面的支付寶支付功能和當前頁面的微信支付功能，以及當前頁面的數據獲取功能。
（1） 首先定義從支付寶官網申請得到的簽約商戶信息，其次是定義當前頁面的幣種、匯率、積分以及買家賬戶余額的信息。其中設置簽約商戶信息代碼如下：
var partner = "208845648165561"; //合作者身份IDs
var seller = "48652321@qq.com"; //賣家支付寶賬號
var rsaPrivate= "MIICdwIBADANBgkn4E3TszcjB+Kf7CGVQ/nsvyywjA+i+0vmaftUzoOdIcWnI8UEr9I="; //合作者私鑰
var rsaPublic = "MIGfMA0GCSqGSIb3DQEBAQUAVsW8Ol75p6/B5KsiNG9zpgmLCUYuLkxpLQIDAQAB"; //支付寶公鑰
（2）在頁面預加載函數內編寫查詢當用登錄用戶積分和余額的代碼，支付寶支付狀態的監聽函數以及微信支付狀態和生成預支付訂單的回調函數，部分代碼如下：
uexAliPay.onStatus = function(status, des) {
if (status == 0) {
uexWindow.evaluatePopoverScript("myorder", "content", "show()");
uexWindow.evaluatePopoverScript("paylist", "content", "show()");
uexWindow.evaluateScript('waitpay', '0', 'appcan.window.close(-1)');
} else if (status == 4) {
uexWindow.toast("0", "5", "取消支付", "2000");
} else {
uexWindow.toast("0", "5", "支付失敗", "2000");
}
}
uexWeiXin.cbStartPay = function(data) {
if (JSON.parse(data).errCode == 0) {
uexWindow.evaluatePopoverScript("myorder", "content", "show()");
uexWindow.evaluatePopoverScript("paylist", "content", "show()");
appcan.window.close(-1);
} else if (JSON.parse(data).errCode == -2) {
uexWindow.toast("0", "5", "取消支付", "2000");
} else {
uexWindow.toast("0", "5", "支付失敗", "2000");
}
}
//微信授權回調
uexWeiXin.cbRegisterApp = function(opCode, dataType, data) {
if (data == 0) {
uexWeiXin.isSupportPay();
}
};
uexWeiXin.cbIsSupportPay = function(opCode, dataType, data) {
if (data == 0) {
getPrepayId();
}
}
uexWeiXin.cbGetPrepayId = function(data) {
var pay = JSON.parse(data);
var date = new Date();
var timestamp = date.getTime().toString().substring(0, 10);
if (JSON.parse(data).result_code == "SUCCESS") {
var json = {
appid : "wxf14d58cec986585b", //(必選)微信分配的AppID
partnerid : "1234567890", //(必選)微信支付分配的商戶號
prepayid : "wx201506031538433160984eee0861221810", //(必選)微信返回的支付交易會話ID
"package" : "Sign=WXPay", //(必選)暫填寫固定值Sign=WXPay
noncestr :"weradfdgdvccfexs", //(必選)隨機字符串
timestamp : "1412000000", //(必選)時間戳
sign :"8FC5935C38628F44B924C838D760E33E"//(必選)簽名}
}
var strrrr="appid=wxf14d58cec986585b&noncestr="+weradfdgdvccfexs+ "&package=Sign=WXPay&partnerid=1234567890&prepayid="+wx201506031538433160984eee0861221810+ "×tamp=" + 1412000000 + "&key=0e857460d1b309130b9b1d2530ac094d";
json.sign = hex_md5(strrrr).toUpperCase();
uexWeiXin.startPay(JSON.stringify(json));
}
}
});
（3）編寫微信授權函數和微信生成預支付訂單函數，當點擊微信支付Logo時打開支付界面。具體代碼如下：
function weixinpay() {
uexWeiXin.registerApp('wxd930ea5d5a258f4f');
}
function getPrepayId() {
var money;
var userCouponId;
if ($("#choose1").hasClass("true")) {
} else {
points = 0;
}
if ($("#choose2").hasClass("true")) {
money = showBalance;
} else {
money = 0;
}
if ($('#coupon').html() == '滿99元可以使用10元優惠券') {
userCouponId = 'X';
} else {
userCouponId = userCoupon;
}
var date = new Date();
var timestamp = date.getTime().toString().substring(0, 10);
originAmount = money + last + couponPrice;
alert("money:" + money + "last:" + last + "couponPrice:" + couponPrice);
alert(originAmount);
var param1 = {
appid : "wxd930ea5d5a258f4f",
mch_id : "1234567890",
nonce_str : "weradfdgdvccfexs1",
body : "海外購",
detail : "detail",
attach : orderId + "_" + originAmount + "_" + payRate + "_" + priceCode + "_" + money + "_" + points + "_" + userCouponId + "_" + "1",
out_trade_no : timestamp,
fee_type : "CNY",
total_fee : 1, //last*100
spbill_create_ip : "127.0.0.1",
notify_url : api + "/api/trans/wxpay",
trade_type : "APP",
sign : "8FC5935C38628F44B924C838D760E33E"
};
Var stringSign="appid=wxd930ea5d5a258f4f&attach="+param1.attach+"&body="+param1.body+ "&detail="+param1.detail+"&fee_type=CNY&mch_id=1234567890&nonce_str=weradfdgdvccfexs1¬ify_url="+param1.notify_url+"&out_trade_no="+param1.out_trade_no+&spbill_create_ip=127.0.0.1&total_fee=" + param1.total_fee + "&trade_type=APP&key=0e857460d1b309130b9b1d2530ac094d";
var md = hex_md5(stringSign).toUpperCase();
alert(param1.attach);
param1.sign = md;
var data1 = JSON.stringify(param1);
uexWeiXin.getPrepayId(data1);
}
效果如下：
（4）編寫支付寶設置商戶信息函數以及支付功能函數，當點擊支付寶Logo時打開支付界面。具體代碼如下：
function setInfo() {
var money = 0;
if ($("#choose2").hasClass("true")) {
money = Number(showBalance);
}
if ($('#coupon').html() == '滿99元可以使用10元優惠券') {
var userCouponId = '';
} else {
var userCouponId = userCoupon;
}
originAmount = money + last + couponPrice;
alert("money:" + money + "last:" + last + "couponPrice:" + couponPrice);
alert(originAmount);
notifyUrl = api + "/api/trans/alipay?orderId=" + orderId + "&originAmount=" + originAmount + "&priceCode=" + priceCode + "&rate=" + payRate + "&score=" + points + "&money=" + money + "&userCouponId=" + userCouponId + "&action=1" + "&total_fee=" + last;
alert(notifyUrl);
uexAliPay.setPayInfo(partner, seller, rsaPrivate, rsaPublic, notifyUrl);
}
function Alipay() {
setInfo();
var subject = "海外購" + num;
var body = "訂單內容";
var fee = 0.01;
uexAliPay.pay(num, subject, body, fee);
}
效果如下：
按照上述方法，即可在AppCan應用中實現微信和支付寶支付。