mui实现支付宝支付功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="css/mui.min.css">
<link href="css/mui.picker.css" rel="stylesheet" />
<link href="css/mui.poppicker.css" rel="stylesheet" />
<style>
.mui-btn {
font-size: 20px;
padding: 8px;
margin: 3px;
}
h5.mui-content-padded {
margin-left: 3px;
margin-top: 20px !important;
}
h5.mui-content-padded:first-child {
margin-top: 12px !important;
}
.ui-alert {
text-align: center;
padding: 20px 10px;
font-size: 16px;
}
*{
font-family: "微软雅黑";
font-size: 17px;
}
.mui-input-row label{
font-family: "微软雅黑";
font-size: 17px;
}
</style>
</head>
<body>
<header 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>
</header>
<div class="mui-content">
<br />
<center>充值金额</center>
<form class="mui-input-group"style="margin-top:10px;">
<div class="mui-input-row mui-radio">
<label>30元</label>
<input name="rad" value="30" type="radio" onclick="setoff()">
</div>
<div class="mui-input-row mui-radio">
<label>50元</label>
<input name="rad" value="50" type="radio" onclick="setoff()">
</div>
<div class="mui-input-row mui-radio">
<label>100元</label>
<input name="rad" value="100" type="radio" onclick="setoff()">
</div>
<div class="mui-input-row mui-radio">
<label>200元</label>
<input name="rad" value="200" type="radio" onclick="setoff()">
</div>
<div class="mui-input-row mui-radio">
<label>其他金额</label>
<input name="rad" value="other" type="radio" onclick="seton()">
</div>
<div class="mui-input-row" id="o" style="display:none;">
<input id="mon" type="text" style="width:60%;" class="mui-input-clear" placeholder="请输入其他金额">
</div>
</form>
<br/>
<button id="ali_pay" class="mui-btn mui-btn-green mui-btn-success mui-btn-block">支付宝支付</button>
<button id="wx_pay" class="mui-btn mui-btn-green mui-btn-success mui-btn-block">微信支付</button>
</div>
</body>
<script src="js/mui.min.js"></script>
<script src="js/mui.zoom.js"></script>
<script src="js/mui.previewimage.js"></script>
<script src="js/mui.picker.js"></script>
<script src="js/mui.poppicker.js"></script>
<script src="js/pub.js"></script>
<script>
function seton() {
var o = document.getElementById("o");
o.style.display = "block"; }
function setoff(){
var o = document.getElementById("o");
o.style.display = "none";
}
function getValue() {
var radio = document.getElementsByName("rad");
var result;
for(var i = 0; i < radio.length; i++) {
if(radio[i].checked) {
result = radio[i].value;
}
}
if(result == "other") {
var mon = document.getElementById("mon");
var value = mon.value;
return value;
} else {
return result;
}
}
</script>
<script type="text/javascript" charset="utf-8">
(function(mui,doc){
mui.init({
swipeBack: true //启用右滑关闭功能
});
var url = OCS.getUrl();
var wxChannel = null; // 微信支付
var aliChannel=null;//支付宝支付
var channel=null;
var w = null;
mui.plusReady(function(){
plus.payment.getChannels(function(channels){
aliChannel=channels[0];
wxChannel=channels[1];
},function(e){
alert("获取支付通道失败:"+e.message);
});
document.getElementById("ali_pay").addEventListener('tap',function(){
console.log("支付宝");
pay("alipay");
});
document.getElementById("wx_pay").addEventListener('tap',function(){
console.log("微信");
pay("wxpay");
});
});
function pay(id) {
if(w) {
return;
}
else if(id=='alipay'){
channel=aliChannel;
}
else if(id='wxpay'){
channel=wxChannel;
}
else {
plus.nativeUI.alert("不支持此支付通道！", null, "充值");
return;
}
var amount = getValue();
mui.post(url+'MAP', {
psncode: window.localStorage.getItem(OCS.token.TOKEN_USER),
total: amount,
token: window.localStorage.getItem(OCS.token.TOKEN_TOKEN)
}, function(data) {
var str ='partner="' + data.resultData.partner + '"&' + 'seller_id="' + data.resultData.seller_id;
str += '"&' + 'out_trade_no="' + data.resultData.out_trade_no + '"&' + 'subject="' + data.resultData.subject;
str += '"&' + 'body="' + data.resultData.body + '"&' + 'total_fee="'+amount;
str += '"&' + 'notify_url="' + "http://notify.msp.hk/notify.htm";
str += '"&' + 'service="' + data.resultData.service;
str += '"&' + 'payment_type="' + data.resultData.payment_type+ '"&' + '_input_charset="' + data.resultData.input_charset;
str += '"&' + 'it_b_pay="' + data.resultData.it_b_pay+ '"&' + 'return_url="' + data.resultData.return_url;
str += '"&' + 'sign="' + data.resultData.sign + '"&' + 'sign_type="' + data.resultData.sign_type + '"';
//alert(str);
window.localStorage.setItem(OCS.token.orderMseeage, data.resultData.out_trade_no);
if(data.success + "" == "true") {
plus.payment.request(channel, str, function(result) {
plus.nativeUI.alert("支付成功", function() {
notify();
}, "充值成功！");
}, function(error) {
mui.alert(error.message);
plus.nativeUI.alert(error.message, null, "支付失败：" + error.code);
});
}
}, 'json');
}
function notify() {
mui.post(url+"MAPS", {
out_trade_no: window.localStorage.getItem(OCS.token.orderMseeage),
token: window.localStorage.getItem(OCS.token.TOKEN_TOKEN)
}, function(data) {
if(data.success+''=="true"){
mui.alert('您已充值成功');
}
}, 'json');
}
})(mui, document);
</script>
</html>
mui实现支付宝支付功能的更多相关文章
- laravel实现支付宝支付功能
起因 前段时间因为项目中需要实现支付宝手机网站支付功能,所以写下这篇文章以作记录,不足之处,欢迎指教. 后端框架:Laravel 5.5 业务功能 适用于商家在移动端网页应用中集成支付宝支付功能.商家 ...
- django中使用事务以及接入支付宝支付功能
之前一直想记录一下在项目中使用到的事务以及支付宝支付功能,自己一直犯懒没有完,趁今天有点兴致,在这记录一下. 商城项目必备的就是支付订单的功能,所以就会涉及到订单的保存以及支付接口的引入.先来看看订单 ...
- 支付宝支付功能（使用支付宝sdk）
1.准备参数 新建一个公共参数配置类NewAlipayconfig (可将参数存放到config配置文件中读取) public class NewAlipayconfi ...
- SSM 实现支付宝支付功能（图文详解+完整代码）
阅读本文大概需要 4 分钟. 前言 本教程详细介绍了如何使用ssm框架实现支付宝支付功能.本文章分为两大部分,分别是「支付宝测试环境代码测试」和「将支付宝支付整合到ssm框架」,详细的代码和图文解释, ...
- ThinkPHP接入支付宝支付功能
最近做系统,需要实现在线支付功能,毫不犹豫,选择的是支付宝的接口支付功能.这里我用的是即时到帐的接口,具体实现的步骤如下: 一.下载支付宝接口包 下载地址:https://b.alipay.com/o ...
- ThinkPHP5.0 实现 app支付宝支付功能
前几天做项目,要求要用到支付宝接口,第一次做,弄了好几天 各种坑啊,简单写一下我做支付宝支付的过程,希望对也是第一次做支付宝支付的童鞋有帮助, 不懂的可以先去支付平台看一下支付宝支付的文档,我是下的d ...
- Django——支付宝支付功能
前期准备 首先我们需要获得支付宝提供的权限与接口,在蚂蚁开放平台进行相关申请:https://openhome.alipay.com/platform/appDaily.htm?tab=info 申请 ...
- cocos2d-x C++ iOS工程集成第三方支付宝支付功能
一.在支付宝开放平台下载支付宝SDK(https://doc.open.alipay.com/doc2/detail.htm?spm=a219a.7629140.0.0.WWgVz8&tr ...
- 使用PHP实现手机端APP支付宝的支付功能
最近应业务需求,做了支付宝支付和微信支付,今天分享一下手机端app支付宝支付对接流程,实际开发过程是前后端分离,前端调用后端API接口,实现功能返回数据,我所用的跨挤啊为TP5,大致可以分为四步: 1 ...
随机推荐
- 将CSS CLIP属性应用在：扩展覆盖效果
我们想要展示如何利用CSS3 clip属性制作一种简单而整洁的扩展效果,当点击一个box元素时实现平稳过渡.这个想法是为了实现某种叠加效果,好像它实际上在各个元素的下面.点击其中一个元素将创建一个切断 ...
- winform批量查询单号剔除重复
//查询分单函数 private string GetQueryInSubbillNo() { string strSubbillNO = " ...
- JS 日常
判断一个字符串是否在另一个字符串里面 var str = 'bblText'; if(str.indexOf("Text") > 0) alert("包含了Tex ...
- php 随机显示据今天30天内的任意一天
function randomDate() { //echo date( "Y-m-d H:m:s", $newtime); //echo date("Y-m-d H:m ...
- CLR via C#可空值类型
我们知道,一个值类型的变量永远不可能为null.它总是包含值类型本身.遗憾的是,这在某些情况下会成为问题.例如,设计一个数据库时,可将一个列定义成为一个32位的整数,并映射到FCL的Int32数据类型 ...
- [Python笔记]第十一篇:面向对象
以上就是本节对于面向对象初级知识的介绍,总结如下: 面向对象是一种编程方式,此编程方式的实现是基于对 类 和 对象 的使用 类 是一个模板,模板中包装了多个“函数”供使用 对象,根据模板创建的实例(即 ...
- LightOJ 1317 第六周比赛A题
A - A Time Limit:2000MS Memory Limit:32768KB 64bit IO Format:%lld & %llu Description Y ...
- Linux_hadoop_install
1. Build Linux env my env is VM RedHat Linux 6.5 64bit set fixed IP vim /etc/sys ...
- [转]解读ASP.NET 5 & MVC6系列（7）：依赖注入
本文转自:http://www.cnblogs.com/TomXu/p/4496440.html 在前面的章节(Middleware章节)中,我们提到了依赖注入功能(Dependency Inject ...
- 在安装包运行时指定Component的安装路径
Basic MSI工程类型中如果实现动态指定安装路径的功能,下面介绍的方法也适用于InstallScript MSI工程. 1. 在Setup Design中找到相对应的Component. 2. 点 ...