HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 应用推荐 HTML5应用 查看内容

AppCan应用开发之插件实践篇-支付插件

2016-7-20 09:55| 发布者: admin| 查看: 5256| 评论: 1

摘要: 电商O2O无疑是目前最受用户欢迎的APP类型,而在这类APP中必不可少的就是在线支付功能了。在AppCan平台开发这类应用时,官方封装了微信支付、支付宝、银联等多种支付SDK,更接入了多家聚合支付平台,以满足开发者需求 ...

  电商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应用中实现微信和支付宝支付。详细示例代码可移步到《AppCan文档中心—案例详解—支付插件实例》,点击“阅读原文”即可获取。

更多

鲜花

握手

雷人

路过

鸡蛋

相关阅读

发表评论

最新评论

引用 linedd963 2017-4-7 02:52
性,既然是藝術,懂點藝術的普遍原理,于其大有脾益。譬如書法和篆刻,書法講究飽蘸和飛白,有時還用壹點類似國畫的皺法,既要酣暢,又要留有余韻,緣此,方顯翰墨春光!正如篆刻的“寬可走馬,密不容針,男人尋樂秘密基地+籟:dd963

查看全部评论(1)

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-6-25 11:43

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部