MUI 支付案例（支付宝/微信）
首先说明一下，本文借鉴了多位博主的文章，所以会看到很多一样的代码。
写这篇博客主要目的是为了便于后期查看（不好之处，敬请留言吐槽），案例经本人测试，是可以使用的。
先上效果图
前端HTML代码：
<!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" />
<link rel="stylesheet" href="css/pay.css" />
</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">
支付金额：
<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>
</body>
</html>
<script type="text/javascript" src="js/mui.min.js"></script>
<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>
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) {
channels = s; // 支付跳转授权第三方成功回调信息
}, function(e) {
console.log("获取支付渠道信权限失败:" + e.message);
});
});
//
function getRandomHost() {
var hosts = ['https://apibj.beecloud.cn',
'https://apihz.beecloud.cn',
'https://apisz.beecloud.cn',
'https://apiqd.beecloud.cn'
];
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);
}
//mui.toast("paySrc:" + paySrc);
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;
var bcError = {};
bcError.code = -1;
bcError.message = errorType + ":" + xhr.responseText;;
cberror(bcError);
}
});
}
pay.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:;
font-size: 16px;
width: 30%;
outline: none;
text-align: center;
}
MUI 支付案例（支付宝/微信）的更多相关文章
- JavaWEB后端支付银联,支付宝,微信对接
注:本文来源于:< JavaWEB后端支付银联,支付宝,微信对接 > JavaWEB后端支付银联,支付宝,微信对接 标签(空格分隔): java 项目概述 最近项目需要后端打通支付,所 ...
- 移动支付--银联,支付宝,微信(android)
在这个移动互联网快速发展的时代,手机已经成为人们生活或者出行之中必不可少的设备了,如今非常多城市的商户都能够採用支付宝,微信支付了.人们出门仅仅须要随身携带带手机.不用带大量现金就能够放心购物了.如今 ...
- iOS开发集成支付宝支付、支付宝&微信支付
支付宝支付: 参考链接:https://www.jianshu.com/p/60175e525c0e https://blog.csdn.net/zhonggaorong/article/detail ...
- apicloud含有微信支付。支付宝支付和苹果内购的代码
apicloud含有微信支付.支付宝支付和苹果内购的代码 <!DOCTYPE html> <html> <head> <meta charset=" ...
- 重学 Java 设计模式：实战桥接模式(多支付渠道「微信、支付宝」与多支付模式「刷脸、指纹」场景)
作者:小傅哥 博客:https://bugstack.cn - 编写系列原创专题文章 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 为什么你的代码那么多ifelse 同类的业务.同样的功能, ...
- iOS----支付（微信支付、支付宝支付、银联支付控件集成支付）（转）
资料 支付宝 //文档idk都包含了安卓.iOS版 银 联 银联官网资料 Demo Demo给了一个订单号,做测试使用,若出现支付失败什么的,可能是已经被别人给支付了,或者是服务器订单过期了 ~ 一. ...
- iOS 支付(含支付宝、银联、微信)
资料 支付宝 //文档idk都包含了安卓.iOS版 银 联 银联官网资料 Demo Demo给了一个订单号,做测试使用,若出现支付失败什么的,可能是已经被别人给支付了,或者是服务器订单过期了 ~ 一. ...
- 微信APP支付，支付宝APP支付demo
最近公司新开发的APP中,需要集成微信支付和支付宝支付,2个平台申请的都是APP支付.这是个人第一次单独的,完整的做完2个平台的支付. 这里我主要用到了2个接口:支付接口,订单查询接口,虽然2个平台的 ...
- APIcloud制作APP 微信支付与支付宝支付
首先要在云端绑定相应模块如alipay和wxpay其次编写代码. 配置区域 var cfg = { webName:'',//APP名字 payDebug:true, isUseWxPay:true, ...
随机推荐
- 11Flutter页面布局 Stack层叠组件 Stack与Align Stack与Positioned实现定位布局
/* Flutter 页面布局 Stack层叠组件: Stack与Align Stack与Positioned实现定位布局: Flutter Stack组件: Stack表示堆得意思,我们可以用Sta ...
- mfc判断当前程序是否正在运行
HANDLE hMutex = CreateMutex(NULL,TRUE,_T("appName")); if(hMutex) { if(ERROR_ALREADY_EXISTS ...
- Redis的各项功能解决了哪些问题？(转)
http://www.cnblogs.com/linianhui/p/what-problem-does-redis-solve.html 先看一下Redis是一个什么东西.官方简介解释到:Redis ...
- array_splice 在数组某位置插入数据
$arr=array('a','b','c','d','e','f','g');//目标数组 $i_arr=array(');//要插入的数组 $n=;//插入的位置 array_splice($ar ...
- vim复制粘贴导致多行出现#号解决办法
在vim内复制多行假如复制的行带有#号会导致其他不带#号的行自动加# 解决办法,输入一下命令再粘贴即可 :set paste
- Centos7系统下以RPM方式如何安装mysql-5.7
检查系统是否装有mariadb rpm -qa | grep mariadb 卸载mariadb 强制卸载mariadb rpm -e --nodeps mariadb-libs-5.5.35-3.e ...
- python-数据库-优化
数据库的优化? 1. 优化硬件:采用SSD(固态驱动器,俗称固态硬盘),使用磁盘队列技术(RAID0,RAID1,RDID5)等: 2. 进行架构级别的缓存,静态化和分布式:(数据库-->渲染页 ...
- 用cmd命令加密文件夹
比如新建一个叫“大学财务”的文件夹,我希望这个文件夹下的内容是加密隐藏的. 查看的时候需要点击“大学财务.bat”这个文件,然后输入设置的密码即可. Cls @ECHO OFF title Folde ...
- 2019Java常见面试下
1.集合的作用是什么? 数据的传送增.删.改.查.constainsAll,可以存放不同类型的对象. 2.集合的通用方法有那些?通用方法是什么?(操作) 集合List的遍历方法有: Iterator: ...
- C#操作Memcached帮助类
在VS中安装Memcached,直接在NuGet下搜索Memcached,选择第一个进行安装: 服务端资源下载地址:https://pan.baidu.com/s/1gf3tupl 接下来开始写程序, ...