手機網頁支付

時間  2019-11-17
標籤 手機 網頁 支付 欄目 HTML 简体版
原文   原文鏈接

一、支付寶支付javascript

   支付寶支付只須要根據api參數列表列全必須的參數後進行簽名，再拼接支付的url就差很少了php

   官方手機網頁支付demohtml

/*代碼一*/
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實現的功能就是爲了實現該部分）java

<!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>

 

二、微信支付web

（1）、公衆號支付配置ajax

      

 

  

（2）、支付 http://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.htmlapi

    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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程