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 ...
随机推荐
- 你好，C++（37）上车的人请买票！6.3.3 用虚函数实现多态
6.3.3 用虚函数实现多态 在理解了面向对象的继承机制之后,我们知道了在大多数情况下派生类是基类的“一种”,就像“学生”是“人”类中的一种一样.既然“学生”是“人”的一种,那么在使用“人”这个概念 ...
- CountDownLatch 和 CyclicBarrier 的运用及实现原理
I.CountDownLatch 和 CyclicBarrier 的运用 CountDownlatch: 定义: 其是一个线程同步的辅助工具,通过它可以做到使一条线程一直阻塞等待,直到其他线程完成其所 ...
- hdu 4631（最近点对，容器）
点击打开链接 题意: 给你一个平面,每次加入一个点,当点数>=2时,求最近点对距离的平方,最后输出所有的平方和. 给你a,b,c x[0]=0;x[i]=(x[i-1]*a+b)%c 如果按照平 ...
- Q我音乐
- (转载)最实用的清除浮动代码 css的文字过长裁剪后面跟着省略号
css: .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;} .clearfloat ...
- php中文件引入require
./ 表示当前层 ../表示向上一层 php中好像不能像asp那样,用 “/” 表示根目录,但可以用$_SERVER['DOCUMENT_ROOT'] 表示网站根目录 引用分为三种: 上级对下级的引用 ...
- php 4.X与5.x版本构造函数区别与类的继承
今天看ecshop源码的时候发现 构造函数是和类名一样,以前没接触过,一下子疑惑啦 HP4.x 版本: PHP 4.x 的构造函数名与类名相同. 注意:在子类里父类的构造函数不会自动执行 ...
- EclipsePHP Studio 常用设置笔记
工作需要,学习PHP使用EclipsePHP Studio开发工具, 习惯整理下常用的使用设置,分享一下吧: 1.窗口-首选项-常规-工作空间,把文本文件编码改为utf8,以后再新建文件就默认是utf ...
- jquery easy ui 学习 （6） basic validatebox
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Day6 反射、模块、正则表达式和算法
递归完成阶乘 def func(num): if num == 1: return 1 return num * func(num - 1) x = func(7) print(x) 反射 commo ...