在公司的项目中，使用了微信支付，支付实际项目里面的支付流程和之前做原生app的时候是一样的。只是现在使用H5开发。
Hbuild是支持微信支付和支付宝支付的，虽说项目里只使用了微信支付，但是还是要研究一下支付宝支付的。
以前写《【iOS】集成支付宝支付/银联支付/微信支付》
那个时候遇见了很多坑，但是趟过去了，后面就好了。
看文档
在接触一个新的事物时，先看看官方的文档。
《支付插件配置》
这是配置支付环境。
《payment》
这是HTML5+的支付部分接口文档。
《支付错误码》
对着错误码可以方便我们调试。
《微信、支付宝支付那点事》
这个是网友写的经验，值得看看。
而我
我就是站在这些巨人的肩膀上面做了微信支付和支付宝支付，当然后台部分不是我做的。下面的代码也只能是Demo.
代码
<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 rel="stylesheet" href="../css/mui.css" />
<link rel="stylesheet" href="../css/app.css" />
<!--App自定义的css-->
<style type="text/css">
.head {
margin-top: 10px;
}
.head img{
width: 120px;
height: 120px;
margin-left: calc(50% - 60px);
}
.top {
margin-top: 40px;
}
.weixin {
width: 60px;
height: 60px;
margin-left: calc(50% - 30px);
background: url(../images/icon-weixin.png);
}
.zhifubao {
width: 60px;
height: 60px;
margin-left: calc(50% - 30px);
background: url(../images/alipay.jpg);
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav white">
<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">
<div class="top" id="testLogin">
<input type="button" class="weixin" id="weixin"/>
<input type="button" class="zhifubao" id="zhifubao"/>
</div>
</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/tools.js" ></script>
<script>
var wxChannel = null; // 微信支付
var aliChannel = null; // 支付宝支付
var channel = null;
mui.init({
swipeBack:true //启用右滑关闭功能
});
mui.plusReady(function() {
// 获取支付通道
plus.payment.getChannels(function(channels){
aliChannel=channels[0];
wxChannel=channels[1];
},function(e){
alert("获取支付通道失败："+e.message);
});
})
document.getElementById('weixin').addEventListener('tap',function() {
console.log("微信");
pay('wxpay');
})
document.getElementById('zhifubao').addEventListener('tap',function() {
console.log("zhifubao");
pay('alipay');
})
var ALIPAYSERVER='http://demo.dcloud.net.cn/helloh5/payment/alipay.php?total=';
var WXPAYSERVER='http://demo.dcloud.net.cn/helloh5/payment/wxpay.php?total=';
// 2. 发起支付请求
function pay(id){
// 从服务器请求支付订单
var PAYSERVER='';
if(id=='alipay'){
PAYSERVER=ALIPAYSERVER;
channel = aliChannel;
}else if(id=='wxpay'){
PAYSERVER=WXPAYSERVER;
channel = wxChannel;
}else{
plus.nativeUI.alert("不支持此支付通道！",null,"捐赠");
return;
}
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
switch(xhr.readyState){
case 4:
if(xhr.status==200){
plus.payment.request(channel,xhr.responseText,function(result){
plus.nativeUI.alert("支付成功！",function(){
back();
});
},function(error){
plus.nativeUI.alert("支付失败：" + error.code);
});
}else{
alert("获取订单信息失败！");
}
break;
default:
break;
}
}
xhr.open('GET',PAYSERVER);
xhr.send();
}
</script>
</html>有不明白的可以直接多看看文档，代码的注释官方文档都有了。
最后
原生和H5的也做了一些东西了，感觉这些涉及到第三方的东西，一定要多看文档和Demo，疏通流程就好了。
代码下载地址：请点击我！