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 ...
随机推荐
- 4位bcd数转换为2进制数
DATA SEGMENTBUF DW 1234HBUF1 DW ? ;2进制数放到buf1内存单元DATA ENDSCODE SEGMENTASSUME CS:CODE ...
- 错误:Duplicate interface definition for class
错误: Duplicate interface definition for class "类名称" 原因:在工程中有相同的文件或相同的 @interface 类名称 解决办法: ...
- [转]Python中的with…as…
先说明一个常见问题,文件打开: 1 2 3 4 5 6 7 try: f = open('xxx') do something except: do something fin ...
- 使用Intellij IDEA构建spark开发环境
近期开始研究学习spark,开发环境有多种,由于习惯使用STS的maven项目,但是按照许多资料的方法尝试以后并没有成功,也可能是我环境问题:也可以是用scala中自带的eclipse,但是不太习惯, ...
- Spark Executor Driver资源调度小结【转】
一.引子 在Worker Actor中,每次LaunchExecutor会创建一个CoarseGrainedExecutorBackend进程,Executor和CoarseGrainedExecut ...
- Excel--java POi
import java.io.File; import java.io.FileOutputStream; import org.apache.commons.io.FileUtils; import ...
- How to use PhotoshopApplication in maxscript
未完待续 ps_app= createOLEObject "Photoshop.Application" ps_app.Load "d:\\test\\aaa.tga&q ...
- 不通用版（从SVN取版本，通过MAVEN生成JAVA包，通过SALTSTACK传送到远程服务器并自动重启TOMCAT服务）PYTHON代码
从昨晚写到今天啊, 第一版测试成功了. PHP和JAVA的更新相对来说,PHP的自动化更新是简单多啦~~ 当然,这只是运维工作当中的一环~~ #!/usr/bin/env python # -*- c ...
- 更改新建Asp.net WebForm的模板 的方法
C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\IDE\ItemTemplates\CSharp\Web\2052\WebFor ...
- LD1-K(求差值最小的生成树)
题目链接 /* *题目大意: *一个简单图,n个点,m条边; *要求一颗生成树,使得其最大边与最小边的差值是所有生成树中最小的,输出最小的那个差值; *算法分析: *枚举最小边,用kruskal求生成 ...