支付文档
<p>[TOC]</p>
<h2>1.扫码支付</h2>
<h3>适用场景</h3>
<p>PC网页中应用</p>
<h3>示例演示</h3>
<h4>1.支付宝演示</h4>
<p>截图演示</p>
<h4>2.微信演示</h4>
<p>截图演示</p>
<h3>支付流程概述</h3>
<p>1.创建订单；
2.获得返回的订单信息；
3.调起弹窗，弹窗中通过iFrame的形式加载对应的收银台地址（这个地址在返回的订单信息中）；
4.向收银台页面注入对应订单信息（数据在返回的订单信息中），这个涉及到到iFrame页面之间的通信（跨域的用messager解决）；
5.收银台页面生成对应的二维码（支付宝或者微信）；
6.扫描支付成功后，收银台页面会跳转至对应的设置的成功支付的页面，这个页面通过iFrame与当前页面通信，告知当前页面支付成功；
7.若支付失败，则跳转至失败页面，同样的通过iFrame通信告知当前页面；</p>
<h3>代码示例</h3>
<p>主页面订单信息代码</p>
<pre><code class="language-javascript">var orderObj = {
//收银台页面用来获取二维码的地址；
orderUrl: this.GLOBAL.data.payUrl,
// orderStr:订单信息示例 'app_id=100&order_no=order_nostring&out_order_no=out_order_nostring&return_url=www.baidu.com&notify_url=notify_urlstring&trade_header_data=trade_header_datastring&trade_method_data=trade_method_datastring&version=2&sign=singstring'
orderStr: this.GLOBAL.data.OrderForm
};
//收银台页面地址
this.payUrl = this.GLOBAL.data.baseUrl + '/order';
//收银台页面被加载完之后，主动询问父级页面，获取需要的订单信息；
window.getPayInfo = function() {
return orderObj;
};</code></pre>
<p>收银台页面代码：</p>
<pre><code class="language-html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>order</title>
</head>
<body>
<!-- <div class="sbtn">submit</div> -->
<div class="mt20" style="font-size:12px;padding-top:20px;text-align:center;">正在跳转到收银台，请勿刷新... </div>
<form name="paygate" id="paygate" action="" method="post">
</form>
<script src="//static.tcy365.com/cdn/jquery/2.1.0/jquery.js"></script>
<script>
//设置网址，追加input；
var payInfoObj = parent.getPayInfo();
$("#paygate").attr('action', payInfoObj.orderUrl);
var orderStr = payInfoObj.orderStr;
var arr = orderStr.split('&');
for (var i = 0; i < arr.length; i++) {
var tempStr = arr[i];
var tempArr = tempStr.split('=');
var htmlCodes = '<input type="hidden" name="' + tempArr[0] + '" value="' + tempArr[1] + '" />';
$("#paygate").append(htmlCodes);
};
$("#paygate").submit();
</script>
</body>
</html></code></pre>
<p>支付成功页面代码：</p>
<pre><code class="language-html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>success</title>
</head>
<body style="text-align:center;">
支付成功!
<script>
setTimeout(function() {
// body...
console.log('pay success');
parent.closePayDialog();
},2000);
</script>
</body>
</html></code></pre>
<h2>2.APP支付</h2>
<h3>适用场景</h3>
<p>页面在同城APP中运行，通过同城游APP调起支付宝或者微信APP来进行支付的情况</p>
<h3>示例演示</h3>
<h4>1.支付宝演示</h4>
<p>截图演示</p>
<h4>2.微信演示</h4>
<p>截图演示</p>
<h3>支付流程概述</h3>
<p>1.创建订单；
2.获得返回的订单信息；</p>
<h2>3.H5支付</h2>
<h3>适用场景</h3>
<p>页面在手机浏览器上运行，需要支付的情况；</p>
<h3>示例演示</h3>
<h4>1.支付宝演示</h4>
<p>截图演示</p>
<h4>2.微信演示</h4>
<p>截图演示</p>
<h3>支付流程概述</h3>
<p>1.创建订单；
2.获得返回的订单信息；
2.获得返回的订单信息；
3.如果是支付宝支付，则通过跳转链接的方式，实现H5支付，具体的链接地址需要拼接订单中的相关参数；</p>
<h2>4.公众号支付（微信）</h2>
<h3>适用场景</h3>
<p>用户在微信内进入商家H5页面，处在微信浏览器内的支付</p>
<h3>示例演示</h3>
<h4>1.支付宝演示</h4>
<p>截图演示</p>
<h4>2.微信演示</h4>
<p>截图演示</p>
<h3>支付流程概述</h3>
<p>1.创建订单；
2.获得返回的订单信息；
3.如果是支付宝支付，则通过跳转链接的方式，实现H5支付，具体的链接地址需要拼接订单中的相关参数；
Demo</p>
<pre><code class="language-javascript">var targetUrl = res.Data.PayInfo.Url + "?" + res.Data.PayInfo.OrderForm;
Topi.Data.targetUrl = targetUrl;
// targetUrl = 'https://openapi.alipay.com/gateway.do?biz_content=%7B%22body%22%3A%22%E5%AF%B9%E4%B8%80%E7%AC%94%E4%BA%A4%E6%98%93%E7%9A%84%E5%85%B7%E4%BD%93%E6%8F%8F%E8%BF%B0%E4%BF%A1%E6%81%AF%E3%80%82%E5%A6%82%E6%9E%9C%E6%98%AF%E5%A4%9A%E7%A7%8D%E5%95%86%E5%93%81%EF%BC%8C%E8%AF%B7%E5%B0%86%E5%95%86%E5%93%81%E6%8F%8F%E8%BF%B0%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%B4%AF%E5%8A%A0%E4%BC%A0%E7%BB%99body%E3%80%82%22%2C%22out_trade_no%22%3A%2270501111111S001111119%22%2C%22product_code%22%3A%22QUICK_WAP_PAY%22%2C%22quit_url%22%3A%22http%3A%2F%2Fwww.taobao.com%2Fproduct%2F113714.html%22%2C%22seller_id%22%3A%222088102147948060%22%2C%22subject%22%3A%22%E5%A4%A7%E4%B9%90%E9%80%8F%22%2C%22time_expire%22%3A%222017-10-19+21%3A05%22%2C%22timeout_express%22%3A%2290m%22%2C%22total_amount%22%3A9.00%7D&sign=OQm1I810NgyEk9Ir1GohH9a3o9EhfzS7FI9p%2BlsOLKfoQHjOZ80l%2FSvTJcXxCpbL0LRswZUT6YydDHW7qCiT%2FvncvR1VGjs6e9KITshA4oBDT13XArut6h0LTe5Osy0rIxxSp7o1mm%2FJKDFBYYHfVD117jq0twX%2BQB60kzyW7ms%3D&timestamp=2017-10-19+19%3A55%3A24&sign_type=RSA&charset=UTF-8&app_id=2014060600164699&method=alipay.trade.wap.pay&version=1.0';</code></pre>
<p>4.如果是微信支付，则可以通过以下两种方式，调用微信的专属公众号内的支付。调起支付的相关参数可以从返回的订单信息中解析获取。</p>
<h3>微信支付调用方式</h3>
<p>公众号内调起支付有两种形式：</p>
<h4>1.基于JS-SDK调用</h4>
<p>注意：使用前要求完成JS-SDK的配置；</p>
<pre><code class="language-javascript">wx.chooseWXPay({
timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: '', // 支付签名随机串，不长于 32 位
package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
signType: '', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
paySign: '', // 支付签名
success: function (res) {
// 支付成功后的回调函数
}
});</code></pre>
<h4>2.基于WeixinJSBridge内置对象调用</h4>
<pre><code class="language-javascript">function onBridgeReady(){
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId":"wx2421b1c4370ec43b", //公众号名称，由商户传入
"timeStamp":"1395712654", //时间戳，自1970年以来的秒数
"nonceStr":"e61463f8efa94090b1f366cccfbbb444", //随机串
"package":"prepay_id=u802345jgfjsdfgsdg888",
"signType":"MD5", //微信签名方式：
"paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名
},
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();
}</code></pre>
<p>区别：
回调方式不同；</p>
<p>前端注意：
所需数据均由后端再输出订单信息时提供，前端调用即可；</p>
<p>后端注意：
<a href="https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_3">https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_3</a></p>
<hr />
<p>支付场景
支付流程</p>
<p>前端汇集购买数据-----提交服务端获取订单信息-----调起支付-----获取支付回调</p>
<p>区别在于调起支付的方式不同</p>
<p>扫码支付------PC网页中应用
APP支付------APP客户端（前提是已经安装）
H5支付-------手机浏览器中支付</p>
<p>基本流程，异常情况，不同手机上的表现情况；</p>
<ol>
<li>基本样式；</li>
<li>前端操作相关</li>
<li>后端操作相关；</li>
</ol>