手机网页支付
1、支付宝支付
支付宝支付只需要根据api参数列表列全必须的参数后进行签名，再拼接支付的url就差不多了
/*代码一*/
function alipay(baseUrl, tradeno, order) { this.baseUrl = baseUrl; this.params = { partner: '208881172042****', seller_id: '208881172042****', _input_charset: 'utf-8', service: 'alipay.wap.create.direct.pay.by.user', payment_type: '1',//支付类型 notify_url: baseUrl + '/api/alipayCallback/order',//服务器异步通知页面路径 return_url: baseUrl + '/follow/success.html',//页面跳转同步通知页面路径 out_trade_no: tradeno,//商品订单号 subject: '****',//订单名称 total_fee: order.totalFee,//付款金额, show_url: baseUrl + '/follow/success.html',//商品展示地址 body: '所跟单号-' + order.orderno//订单描述 }; } alipay.prototype.submit = function () { var pay = this;
/*将支付参数提交到后台进行签名*/ $.post('/api/follow/sign', pay.params, function (data) { var sign = data.data; pay.params.sign = sign; pay.params.sign_type = 'RSA' pay.submitToPay('https://mapi.alipay.com/gateway.do?', pay.params, 'get'); }); } alipay.prototype.submitToPay = function (url, param, method) { var f = $('<form action="' + url + '" method="' + method + '"></form>'); for (var key in param) $('<input type="hidden" name="' + key + '" />').val(param[key]).appendTo(f); f.appendTo(document.body).submit(); document.body.removeChild(f.get(0)); }
类似如下，在input标签内填入参数，以及对应的sign后，点击确定后跳转到支付宝网页支付界面（实际上上述的javascript实现的功能就是为了实现该部分）
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui">--> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <title>支付宝支付</title> </head> <body> <form id='alipaysubmit' name='alipaysubmit' action='https://mapi.alipay.com/gateway.do?_input_charset=utf-8' method='get'> <table> <tr><td>_input_charset</td><td><input type='text' name='_input_charset' value='utf-8' /></td></tr> <tr><td>body</td><td><input type='text' name='body' value='所跟单号-201507011709535177' /></td></tr> <tr><td>notify_url</td><td><input type='text' name='notify_url' value='http://**********/follow/success.html' /></td></tr> <tr><td>out_trade_no</td><td><input type='text' name='out_trade_no' value='2088811720422661' /></td></tr> <tr><td>partner</td><td><input type='text' name='partner' value='2088811720422661' /></td></tr> <tr><td>payment_type</td><td><input type='text' name='payment_type' value='1' /></td></tr> <tr><td>return_url</td><td><input type='text' name='return_url' value='http://***********/follow/success.html' /></td></tr> <tr><td>seller_id</td><td><input type='text' name='seller_id' value='2088811720422661' /></td></tr> <tr><td>service</td><td><input type='text' name='service' value='alipay.wap.create.direct.pay.by.user' /></td></tr> <tr><td>show_url</td><td><input type='text' name='show_url' value='http://**********/follow/success.html' /></td></tr> <tr><td>subject</td><td><input type='text' name='subject' value='*****跟单' /></td></tr> <tr><td>total_fee</td><td><input type='text' name='total_fee' value='0.01' /></td></tr> <tr><td>sign</td><td><input type='text' name='sign' value='PL+tBPfvsVErLzbxcLz1jpq237NZbAG1icXY6+VWXotxYK0Wc/bUGwnqrdyYphBZBQ5LpmxwmLg1SAqibqavCdHnil4/nc+P7ei0ibwpbIElWv6gkEzfFFS6X1+/V+VGBmJBl/2Z4fHGsDClxFxUYYDJpR23vVrUY98BBjEeT+4=' /></td></tr> <tr><td>sign_type</td><td><input type='text' name='sign_type' value='RSA' /></td></tr> </table> <input type='submit' value='确认'> </form> </body> </html>
2、微信支付
（1）、公众号支付配置
（2）、支付 http://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html
a、用户同意授权，获取code
若提示“该链接无法访问”，请检查参数是否填写错误，是否拥有scope参数对应的授权作用域权限。
参数说明
| 参数 | 是否必须 | 说明 |
|---|---|---|
| appid | 是 | 公众号的唯一标识 |
| redirect_uri | 是 | 授权后重定向的回调链接地址，请使用urlencode对链接进行处理 |
| response_type | 是 | 返回类型，请填写code |
| scope | 是 | 应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且，即使在未关注的情况下，只要用户授权，也能获取其信息） |
| state | 否 | 重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节 |
| #wechat_redirect | 是 | 无论直接打开还是做页面302重定向时候，必须带此参数 |
设置参数redirect_uri指向的页面为以下（代码二）内容（redirect_uri中必须使用域名，并且已经设置为微信支付目录）；
b、在微信客户端打开上面的链接，微信将返回code信息，并提交code到服务端（后台）来获取openid（用户唯一标识）
【获取openid的微信地址为https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code，无法通过ajax跨域进行访问，所以交到后台进行处理】
c、统一下单
将订单数据提交到后台进行处理，后台根据api参数列表进行组装和签名后提交，并将返回的结果来返回给前台（返回给前台的数据为进行过处理的预支付信息）
d、公众号支付
调用微信支付接口进行支付
/*代码二*/
<ul class="list-group"> <li class="list-group-item wxpay-item"> <div class="wxpay-item-label">商品描述：</div> <div class="body">****-微信支付</div> </li> <li class="list-group-item wxpay-item"> <div class="wxpay-item-label">订单号：</div> <div class="orderno"></div> </li> <li class="list-group-item wxpay-item"> <div class="wxpay-item-label">总价格：</div> <div class="totalfee">0.01</div>元 </li> </ul> <div class="wxpay-btn"> <div class="submitToPay">确认支付</div> </div> <script> var wxOrder; var params; $(function () { loadCss('wxpay'); var code = pdatas.code; if (!code) { alert('无效Code...'); return; } var state = JSON.parse(unescape(pdatas.state)); var order = { uid: state.uid, tradeno: state.tradeno, totalFee: state.totalFee }; wxOrder = { orderno: order.tradeno }; wxOrder.totalFee = state.totalFee; wxOrder.body = '****'; $('.orderno').html(order.tradeno); $('.totalfee').html(parseFloat(wxOrder.totalFee).toFixed(2)); $('.body').html(wxOrder.body); /*根据微信返回的code，并提交到后台来获取openid*/ $.get('/api/follow/grant', { code: code }, function (dat) { if (dat.code == 0) wxOrder.openId = dat.data; else alert('获取参数异常，无法支付...'); }); /*确定提交订单并完成支付*/ $('.submitToPay').click(function () { if (!wxOrder.openId) { alert('参数异常，无法进行支付...'); return; }
/*提交订单数据到后台，由后台进行统一下单操作，并返回预付款信息*/ $.post('/api/follow/unifiedorder', wxOrder, function (prepay) { if (prepay.code == 0)
/*调用微信支付接口进行支付*/ jsApiPay(prepay.data); else alert(prepay.message); }); }); }); function jsApiPay(dat) { params = {}; $.extend(params, dat, { 'package': 'prepay_id=' + dat.prepayId }); callpay(); } function jsApiCall() { WeixinJSBridge.invoke('getBrandWCPayRequest', params, function (res) { if (res.err_msg != 'get_brand_wcpay_request:ok') location = './follow/failure.html'; }); } function callpay() { if (typeof WeixinJSBridge == "undefined") { if (document.addEventListener) { document.addEventListener('WeixinJSBridgeReady', jsApiCall, false); } else if (document.attachEvent) { document.attachEvent('WeixinJSBridgeReady', jsApiCall); document.attachEvent('onWeixinJSBridgeReady', jsApiCall); } } else { jsApiCall(); } } </script>
（3）、资源（微信的demo比较混乱 到处都是demo）
a.支付开发教程（微信商户平台版） https://mp.weixin.qq.com/paymch/readtemplate?t=mp/business/course3_tmpl&lang=zh_CN
b.https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=11_1
c.https://res.wx.qq.com/paymchres/zh_CN/htmledition/download/bussiness-course2/wxm-payment-biz-api1eec8d.zip
