手机网页支付

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参数对应的授权作用域权限。

参数说明

设置参数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_1c.https://res.wx.qq.com/paymchres/zh_CN/htmledition/download/bussiness-course2/wxm-payment-biz-api1eec8d.zip