200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > Mui框架支持微信支付宝支付源代码

Mui框架支持微信支付宝支付源代码

时间:2022-11-21 17:12:11

相关推荐

Mui框架支持微信支付宝支付源代码

独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>支付</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link rel="stylesheet" href="css/mui.min.css" /> <script type="text/javascript" src="js/mui.min.js"></script> <script type="text/javascript" charset="utf-8">mui.init();</script><style type="text/css"> .mui-content{text-align: center;margin-top: 40px;margin-bottom: 40px;}.top { margin-top: 40px; } .weixin { width: 200px; height: 50px; background: url(img/icon-weixin.png) 10px center no-repeat;background-size: 20%;padding: 30px;border-radius: 8px;padding-left: 30px;margin-bottom: 20px!important; } .zhifubao { width: 200px; height: 50px; background: url(img/alipay.jpg) 10px center no-repeat; background-size: 20%; padding-left: 30px; } #jine{ -webkit-user-select:text; text-align:right; padding:0 1em; border: 0px; border-bottom:1px solid #ECB100; border-radius: 0; font-size:16px; width:30%; outline:none; text-align:center; } </style> </head> <body> <hrader class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">第三方支付</h1> </hrader> <div class="mui-content mui-content"> 捐赠金额:<input id="jine" type="number" value="0.01" /> 元 <div class="top oauth-area" id="testLogin" > <input type="button" id="wxpay" class="weixin pay" value="微信支付" /> <input type="button" id="alipay" class="zhifubao pay" value="支付宝支付" /> </div> </div> <ul class="mui-table-view"><li class="mui-table-view-cell">支付方式: <span id="channel"></span></li><li class="mui-table-view-cell">订单号: <span id="bill_no"></span></li><li class="mui-table-view-cell">支付金额: <span id="total_fee"></span></li><li class="mui-table-view-cell">支付状态:<span id="status"></span></li><textarea name="" id="status_msg" cols="20" rows="5"></textarea></ul><script type="text/javascript" src="js/beecloud.js"></script><script> mui.init({ swipeBack:true //启用右滑关闭功能 }); mui('.mui-content').on('tap', '.pay', function() { // 获取 点击效果微信还是支付平台var channel_id = null;switch (this.id) { case 'alipay':channel_id = 'ALI_APP';break;case 'wxpay':channel_id = 'WX_APP';break;default:break;}beecloudPay(channel_id); document.getElementById("channel").innerHTML = channel_id;document.getElementById("total_fee").innerHTML = document.getElementById('jine').value;document.getElementById("bill_no").innerHTML = beecloud.genBillNo();}) function beecloudPay(bcChannel) {//因DCloud尚未申请银联账号,故支付宝、微信使用的是DCloud的appid,银联暂时使用BeeCloud的appid,开发者这里无需判断,直接写一个appid即可;var _appid = bcChannel == "UN_WEB" ? "c37d661d-7e61-49ea-96a5-68c34e83db3b":"44f01a13-965f-4b27-ba9f-da678b47f3f5"/** 构建支付参数* * app_id: BeeCloud控制台上创建的APP的appid,必填 * title: 订单标题,32个字节,最长支持16个汉字;必填* total_fee: 支付金额,以分为单位,大于0的整数,必填* bill_no: 订单号,8~32位数字和/或字母组合,确保在商户系统中唯一,必填* optional: 扩展参数,可以传入任意数量的key/value对来补充对业务逻辑的需求;此参数会在webhook回调中返回; 选填* bill_timeout: 订单失效时间,必须为非零正整数,单位为秒,必须大于360。选填 */var payData = {app_id: _appid,channel: bcChannel,title: "DCloud项目捐赠",total_fee: document.getElementById('jine').value * 100,bill_no: beecloud.genBillNo(),optional: {'uerId': 'beecloud','phone': '4006280728'},bill_timeout: 360,return_url: "http://www.dcloud.io/demo/pay" //wap支付成功后的回跳地址};/** 发起支付* payData: 支付参数* cbsuccess: 支付成功回调* cberror: 支付失败回调*/beecloud.payReq(payData, function(result) {document.getElementById("status").innerHTML = 'success';document.getElementById("status").style.color = 'green'document.getElementById("status_msg").innerHTML = "-------- 支付成功 --------" + "\n感谢您的支持,我们会继续努力完善产品";console.log(result);}, function(e) {document.getElementById("status").innerHTML = 'failed';document.getElementById("status").style.color = 'red'document.getElementById("status_msg").innerHTML = "-------- 支付失败 --------\n" + "错误码:" + e.code + '\n' + e.message;});}</script> </body> </html>

/**引入js/beecloud.js**/var beecloud = {}; //定义一个beecloud对象var channels = null; var w = null;/*** 定义一个支付通道payReq * data 回调参数* cbsuccess 成功回调返回的函数信息* cberror 失败返回的信息* */beecloud.payReq = function(data, cbsuccess, cberror) {doPay(data, cbsuccess, cberror);};// 定义一个随机函数 对象的商品信息订单号beecloud.genBillNo = function() {var d = new Date();var vYear = d.getFullYear();var vMon = d.getMonth() + 1;var vDay = d.getDate();var h = d.getHours();var m = d.getMinutes();var se = d.getSeconds();var ms = d.getMilliseconds();var rnadom = Math.floor(Math.random() * 100000000 + 10000000).toString();billno = "" + vYear + (vMon < 10 ? "0" + vMon : vMon) + (vDay < 10 ? "0" + vDay : vDay) + (h < 10 ? "0" + h : h) + (m < 10 ? "0" + m : m) + (se < 10 ? "0" + se : se) + ms;return billno+rnadom;};mui.plusReady(function() {//配置业务支持的支付通道,支付需要服务端支持,在BeeCloud上支持支付宝支付和微信支付; var support_channel = ['alipay', 'wxpay']; plus.payment.getChannels(function(s) {console.log("s",s)channels = s; // 支付跳转授权第三方成功回调信息}, function(e) {console.log("获取支付渠道信权限失败:" + e.message);});});// function getRandomHost() {var hosts = ['','','',''];return "" + hosts[parseInt(3 * Math.random())] + "/2/rest/app/bill";}/*** 获取支付通道* */function getPayChannel(bc_channel) {var dc_channel_id = '';switch (bc_channel) {case 'ALI_APP':dc_channel_id = 'alipay';break;case 'WX_APP':dc_channel_id = 'wxpay';break;default:break;} for (var i in channels) {if (channels[i].id == dc_channel_id) {return channels[i];}}return null;}/***** 支付回调函数* **/function doPay(payData, cbsuccess, cberror) {if (w) return; w = plus.nativeUI.showWaiting();mui.ajax(getRandomHost(), {data: JSON.stringify(payData),type: 'post',dataType: 'json',contentType: "application/json",success: function(data) {w.close();w = null;var paySrc = '';if (data.result_code == 0) {var payChannel = getPayChannel(payData.channel);if (payChannel) {if (payChannel.id === 'alipay') {paySrc = data.order_string;} else if (payChannel.id === 'wxpay') {var statement = {};statement.appid = data.app_id;statement.noncestr = data.nonce_str;statement.package = data.package;statement.partnerid = data.partner_id;statement.prepayid = data.prepay_id;statement.timestamp = parseInt(data.timestamp);statement.sign = data.pay_sign;paySrc = JSON.stringify(statement);}plus.payment.request(payChannel, paySrc, cbsuccess, cberror);} else if (payData.channel == 'UN_WEB') {//银联在线支付var web = plus.webview.create('', "beecloudPay");//注入JS,解决银联界面返回的问题web.setJsFile('_www/js/95516.js');web.addEventListener('loaded', function() {if (!web.isVisible()) {web.show();}});web.loadData(data.html);}} else {var bcError = {};bcError.code = data.result_code;bcError.message = data.result_msg + ":" + data.err_detail;cberror(bcError);}},error: function(xhr, errorType, error) {w.close();w = null;cberror(error);}});}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。