首页 > 移动平台 > 详细

手机网页支付

时间:2015-07-13 18:05:42      阅读:517      评论:0      收藏:0      [点我收藏+]

1、支付宝支付

   支付宝支付只需要根据api参数列表列全必须的参数后进行签名,再拼接支付的url就差不多了

   官方手机网页支付demo

/*代码一*/
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)); }

 

2、微信支付

(1)、公众号支付配置

       技术分享

 

   技术分享

(2)、支付 http://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html

    a、用户同意授权,获取code

     https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

     若提示“该链接无法访问”,请检查参数是否填写错误,是否拥有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

手机网页支付

原文:http://www.cnblogs.com/zhanqun/p/4643086.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!