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, ...
随机推荐
- Android 显示系统：OpenGL简介和Gralloc代码分析
一.OpenGL ES与EGL Android的GUI系统是基于OpenGL/EGL来实现的. 由于OpenGL是通用函数库,在不同平台系统上需要被“本土化”——把它与具体平台的窗口系统建立起关联,F ...
- Android中利用jsoup解析html页面
学习jsoup :jsoup学习网站 Android 中使用: 添加依赖 implementation 'org.jsoup:jsoup:1.10.1' 直接上代码: package com.load ...
- double，float，BigDecimal类型数值的操作
float四舍五入保留两位小数 /** * float四舍五入保留两位小数 * */ public static float formatDecimal(float n) { return (Math ...
- .net断点续传
IE的自带下载功能中没有断点续传功能,要实现断点续传功能,需要用到HTTP协议中鲜为人知的几个响应头和请求头. 一. 两个必要响应头Accept-Ranges.ETag 客户端每次提交下载请求时,服务 ...
- 如何不让Excel图表随源数据改变而改变
如何不让Excel图表随源数据改变而改变 一般我们在用Excel时,经常会碰到一些问题,比如,如何才能不让Excel图表随源数据改变而改变呢,下面就谈一下,一般在默认情况下,Excel的图表在一个区域 ...
- Flutter 的一些小技巧
1. 获取状态栏高度 import 'dart:ui'; MediaQueryData.fromWindow(window).padding.top 2. 设置AppBar的高度 Scaffold( ...
- Flutter 异步Future与FutureBuilder实用技巧
什么是Future? Future表示在接下来的某个时间的值或错误,借助Future我们可以在Flutter实现异步操作.它类似于ES6中的Promise,提供then和catchError的链式调用 ...
- grafana的metric的计算语句
1.磁盘使用率 .other:((node_filesystem_size_bytes{fstype=~ .my: ((node_filesystem_size_bytes{fstype=~ 2.se ...
- 1-2-K Game
题目链接:https://vjudge.net/contest/330119#problem/E 题目大意可以理解为: 1.给出n个物品以及k,Alice与Bob轮流拿1个,或2个,或k个物品,Ali ...
- 《你必须知道的495个C语言问题》读书笔记之第4-7章：指针
1. Q:为什么我不能对void *指针进行算术运算? A:因为编译器不知道所值对象的大小,而指针的算法运算总是基于所指对象的大小的. 2. Q:C语言可以“按引用传参”吗? A:不可以.严格来说,C ...