前提：前两天有个需求，想要写一个支付页面，此页面可以在微信环境打开，可以在支付宝环境打开，可以在浏览器环境打开，然后进行支付。一脸懵，二脸懵，三脸懵。
经过漫长的查文档之路，总结一下我开发的时候的坑，避免大家和我遇到一样的问题而浪费时间，总结了一些点
微信环境：
直接上文档先看看：pay.weixin.qq.com/wiki/doc/ap…
从上面看有好几种方式这次咱们只要看h5支付和jsAPI支付
jsapi支付（微信app内部打开）
1. 接入前的准备操作还是有必要确认一下的（特别是pay.weixin.qq.com/wiki/doc/ap…里面的：基础支付-jsiap-接入钱准备-5配置应用：设置支付域名配置以及设置授权域名，很多情况都是到了最后一步了一直支付不成功）
支付域名配置是：支付的时候要有此配置，否则支付不成功
授权域名的配置是：调用微信支付的时候前提条件是需要授权，否则授权不成功
（虽然以上不是咱们web人员所做的操作，但是需要确认，否则后续会带来不必要的麻烦）
2. 以下问题经常会遇到，可以对比一下进行排查，是否和自己的错误有类似的情况
3. 拉起支付（pay.weixin.qq.com/wiki/doc/ap…）这个的前提是授权，下一个叙述的是授权的操作，授权之后就可以支付了
function onBridgeReady(){
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId":"xxxx", //公众号ID，由商户传入
"timeStamp":"xxxxx", //时间戳，自1970年以来的秒数
"nonceStr":"xxxxxx", //随机串
"package":"prepay_id=xxxxx",
"signType":"MD5", //微信签名方式：
"paySign":"xxxxxxx" //微信签名
},
function(res){
if(res.err_msg == "get_brand_wcpay_request:ok" ){
// 使用以上方式判断前端返回,微信团队郑重提示：
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
}
});
}
if (typeof WeixinJSBridge == "undefined"){
if( document.addEventListener ){
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
}else if (document.attachEvent){
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
}
}else{
onBridgeReady();
}
注意：WeixinJSBridge内置对象在其他浏览器中无效。
3.1 这里有一些别的支付时候的报错也是可以对比一下自己的问题的pay.weixin.qq.com/wiki/doc/ap…
3.2 微信支付的结果（可以知道的三种状态）
4. 授权操作（这个是个重点，需要认真看看的）(developers.weixin.qq.com/doc/offiacc…)
4.1引导用户打开授权页面：
location.href='https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect'
4.2 点击上面的链接，只要将自己的配置信息添加完成，微信会根据配置的重定向的链接跳转一个新的页面（redirect_uri）并且在链接后面会拼接code以及state参数（有这两个参数，表示你授权成功了）
h5支付（浏览器打开微信，此方法不可以再微信app内部进行使用，无效操作）
1. 接入前的准备操作还是有必要确认一下的（****特别是pay.weixin.qq.com/wiki/doc/ap…里面的：基础支付-jsiap-接入钱准备-5配置应用：设置支付域名配置以及设置授权域名，很多情况都是到了最后一步了一直支付不成功）
支付域名配置是：支付的时候要有此配置，否则支付不成功
2. https://pay.weixin.qq.com/wiki/doc/apiv3/apis/chapter3_3_4.shtml
h5支付的流程对于web来说相对简单一点，因为都是服务端的一些操作，web这边只需要接收后端返回的一个url即可
支付宝环境
支付宝支付呢也是有前提条件的，这次只需要配置支付的域名权限就可以，支付宝没有授权的权限，所以这个不用配置授权的域名
支付宝支付使用的sdk （只能支付宝的app内部使用）
这个有回调的方法 myjsapi.alipay.com/alipayjsapi…
支付宝订单字符串唤起支付<script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.inc.min.js"></script>
<button id="J_btn" class="btn btn-default">支付</button>
<script>
var btn = document.querySelector('#J_btn');
btn.addEventListener('click', function(){
ap.tradePay({
orderStr: 'timestamp=2016-12-27%2018%3A00%3A00&method=alipay.trade.app.pay&app_id=2014073000007292......'
}, function(res){
ap.alert(res.resultCode);
});
});
</script>
注意：支付宝回调的函数里面的类型是字符串的
h5支付（此方法浏览器和app内部均可以使用）
（https://opendocs.alipay.com/open/02ivbs?scene=21）
没有回调方法，无法监听支付完成的操作
location.href = `https://openapi.alipay.com/gateway.do?xxxxx`;
xxxx指的是后端接口下单的时候返回的有关阿里支付的一些主要参数
链接里面有例子
以上是我进行的总结，如果总结的有什么问题，可以随时提出
