在公司的项目中，使用了微信支付，支付实际项目里面的支付流程和之前做原生app的时候是一样的。只是现在使用H5开发。 Hbuild是支持微信支付和支付宝支付的，虽说项目里只使用了微
在公司的项目中，使用了微信支付，支付实际项目里面的支付流程和之前做原生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，疏通流程就好了。
代码下载地址：请点击我！