H5中的微信支付、支付宝支付

微信支付的申请：

公众号支付、扫码支付等在微信公众平台。移动端的申请在微信开放平台

公众号支付流程：申请微信公众号（服务号并完成微信认证）——申请微信支付商户号（申请微信支付，资料审核通过以后，请前往商户平台的账号验证）——在线签署协议（开启资金结算功能）

扫码支付流程：申请微信公众号（服务号并完成微信认证）——申请微信支付商户号（申请微信支付，资料审核通过以后，请前往商户平台的账号验证）——在线签署协议（开启资金结算功能）

配置：（https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_3）

1）设置支付目录

2）设置授权域名

开发公众号支付时，在统一下单接口中要求必传用户openid，而获取openid则需要您在公众平台设置获取openid的域名，只有被设置过的域名才是一个有效的获取openid的域名，否则将获取失败

3）唤起支付

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();
}

　

表7.1 网页端接口参数列表

名称	变量名	必填	类型	示例值	描述
公众号id	appId	是	String(16)	wx8888888888888888	商户注册具有支付权限的公众号成功后即可获得
时间戳	timeStamp	是	String(32)	1414561699	当前的时间，其他详见时间戳规则
随机字符串	nonceStr	是	String(32)	5K8264ILTKCH16CQ2502SI8ZNMTM67VS	随机字符串，不长于32位。推荐随机数生成算法
订单详情扩展字符串	package	是	String(128)	prepay_id=123456789	统一下单接口返回的prepay_id参数值，提交格式如：prepay_id=***
签名方式	signType	是	String(32)	MD5	签名算法，暂支持MD5
签名	paySign	是	String(64)	C380BEC2BFD727A4B6845133519F3AD6	签名，详见签名生成算法

表7.2 网页内支付接口err_msg返回结果值说明

返回值	描述
get_brand_wcpay_request:ok	支付成功
get_brand_wcpay_request:cancel	支付过程中用户取消
get_brand_wcpay_request:fail	支付失败

　

注：JS API的返回结果get_brand_wcpay_request:ok仅在用户成功完成支付时返回。由于前端交互复杂，get_brand_wcpay_request:cancel或者get_brand_wcpay_request:fail可以统一处理为用户遇到错误或者主动放弃，不必细化区分。

一、微信支付

扫码支付（通过订单号，请求接口，后台会返回一个codeURL,通过codeURL绘成二维码，用户通过扫码支付）

<div id="code"></div>

$(document).ready(function(){
            var options={};
            options.url=codeUrl; //二维码的链接
            options.dom="#code";//二维码生成的位置
            options.image=$('#img-buffer');//图片id
           // options.render="canvas";//设置生成的二维码是canvas格式，也有image、div格式
            options.render="image";//设置生成的二维码是canvas格式，也有image、div格式
            xyqrcode(options);
        });

　　

//生成微信二维码
function xyqrcode(options) {
    var settings = {
        dom:'',
        render: 'canvas',   //生成二维码的格式还有image、div
        ecLevel:"H",
        text:"",
        background:"#ffffff",
        fill:"#333333", //二维码纹路的颜色
        fontcolor:"#ff9818",
        fontname:"Ubuntu",
        image:{},
        label:"",
        mPosX:0.5,   //图片在X轴的位置
        mPosY:0.5,    //图片在X轴的位置
        mSize:0.27,   //图片大小
        minVersion:10,
        mode:4,
        quiet:1,
        radius:1,
        size:400
    };
    if (options) {
        $.extend(settings, options);//options对象跟settings比较，相同的就替换，没有的就添加

    }
    if(settings.dom.length==0){
        window.console.log("Error: dom empty!");
        return;
    }
    if(settings.url.length==0){
        window.console.log("Error: url empty!");
        return;
    }
    settings.text=settings.url; //在qrcode生成二维码的地址是text。这里就把url赋值给text
    $(settings.dom).qrcode(settings);

}

　　

　扫码支付

var redirect_uri=encodeURI('http://hd.fashionyuan.com/V1/pay/index.html?orderID='+orderID);

 window.location.href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx45fc30c3eb7a9ed8&redirect_uri="+redirect_uri+"&response_type=code&scope=snsapi_base&state=123#wechat_redirect"
// window.location.href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx45fc30c3eb7a9ed8&redirect_uri="+redirect_uri+"&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";

　

 //微信浏览器支付
     if(code){
         $.ajax({
             type: 'GET',
             url: preURL + 'Pay/GetWXPayInfo?orderID='+orderID+"&type=2&code="+code,
             headers: headers,
             data:"",
             dataType: 'json',
             success: function (data){
                 $(".loading").css("display","none");
                 var _data=data.data;

                 function onBridgeReady(){
                     WeixinJSBridge.invoke(
                             'getBrandWCPayRequest', {
                                 "appId":_data.appId,     //公众号名称，由商户传入
                                 "timeStamp":_data.timestamp,         //时间戳，自1970年以来的秒数
                                 "nonceStr":_data.nonceStr, //随机串
                                 "package":_data.package,
                                 "signType":"MD5",         //微信签名方式：
                                 "paySign":_data.paySign //微信签名
                             },
                             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();
                 }

             },
             error: function(XMLHttpRequest, textStatus, errorThrown) {
                 console.log(XMLHttpRequest.status);
                 console.log(XMLHttpRequest.readyState);
                 console.log(textStatus);
             }

         })
     }

　　

支付宝支付

 var zfbURL=preURL + 'Pay/GetAliPayInfo?orderID='+orderID+"&usageScenarioEnum="+usageScenarioEnum;
 window.location.href=zfbURL;