非微信浏览器微信h5支付（前端）

有时候会遇到在外部浏览器做微信支付的需求，网上搜了一堆坑，在此做下简单记录。在线可用地址：https://sandbox.sixapp.cn/wxWebPay/wxH5Pay.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf8"/>
<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;" />
<title>【微信支付V2.0】MWEB支付实例</title>
<!--
/****************************************
本文件是【微信支付V2.0】JSAPI支付实例
需要用授权接口进入页面
****************************************/
-->
<style type="text/css">
/* 重置 [[*/
body,p,ul,li,h1,h2,form,input{margin:0;padding:0;}
h1,h2{font-size:100%;}
ul{list-style:none;}
body{-webkit-user-select:none;-webkit-text-size-adjust:none;font-family:Helvetica;background:#ECECEC;}
html,body{height:100%;}
a,button,input,img{-webkit-touch-callout:none;outline:none;}
a{text-decoration:none;}
/* 重置 ]]*/
/* 功能 [[*/
.hide{display:none!important;}
.cf:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
/* 功能 ]]*/
/* 按钮 [[*/
a[class*="btn"]{display:block;height:42px;line-height:42px;color:#FFFFFF;text-align:center;border-radius:5px;}
.btn-blue{background:#3D87C3;border:1px solid #1C5E93;}
.btn-green{background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #43C750), color-stop(1, #31AB40));border:1px solid #2E993C;box-shadow:0 1px 0 0 #69D273 inset;}
/* 按钮 [[*/
/* 充值页 [[*/
.charge{font-family:Helvetica;padding-bottom:10px;-webkit-user-select:none;}
.charge h1{height:44px;line-height:44px;color:#FFFFFF;background:#3D87C3;text-align:center;font-size:20px;-webkit-box-sizing:border-box;box-sizing:border-box;}
.charge h2{font-size:14px;color:#777777;margin:5px 0;text-align:center;}
.charge .content{padding:10px 12px;}
.charge .select li{position:relative;display:block;float:left;width:100%;margin-right:2%;height:150px;line-height:150px;text-align:center;border:1px solid #BBBBBB;color:#666666;font-size:16px;margin-bottom:5px;border-radius:3px;background-color:#FFFFFF;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;}
.charge .price{border-bottom:1px dashed #C9C9C9;padding:10px 10px 15px;margin-bottom:20px;color:#666666;font-size:12px;}
.charge .price strong{font-weight:normal;color:#EE6209;font-size:26px;font-family:Helvetica;}
.charge .showaddr{border:1px dashed #C9C9C9;padding:10px 10px 15px;margin-bottom:20px;color:#666666;font-size:12px;text-align:center;}
.charge .showaddr strong{font-weight:normal;color:#9900FF;font-size:26px;font-family:Helvetica;}
.charge .copy-right{margin:5px 0; font-size:12px;color:#848484;text-align:center;}
/* 充值页 ]]*/
</style>
</head>
<body>
    <article class="charge">
        <h1>微信支付-H5-demo</h1>
        <section class="content">
                <h2>商品：测试商品。</h2>       
          <ul class="select cf">
                    <li><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3523617831,1288544462&fm=27&gp=0.jpg" style="width:150px;height:150px"></li>
                </ul>
                <p class="copy-right">亲，此商品不提供退款和发货服务哦</p>
                <div class="price">微信价：<strong>￥0.01元</strong></div>
                <div class="operation"><a class="btn-green" id="getBrandWCPayRequest" href="#">立即购买</a></div>
                <p class="copy-right">微信支付demo 由腾讯微信提供</p>
        </section>
    </article>
</body>
 <script type="text/javascript" src="jquery-1.10.1.min.js"></script>
    <script type="text/javascript">
       $('#getBrandWCPayRequest').click(function(){
         let orderno = Math.floor(Math.random () * 900) + 100;
         var data=JSON.stringify({
              wxapp: "a_xcx003",
              orderno: orderno,
              pay_amt: 0.01,
              title: "测试商品001",
              trade_type: "MWEB",
              scene_info: {
                h5_info: {
                  type: "Wap",
                  wap_url: "https://sandbox.sixapp.cn/quantum/h5",
                  wap_name: "just-for-test"
                }
              }
            });
         $.ajax({
            type: 'POST',
            url: "https://sandbox.sixapp.cn/wxgate/wxmoney/pay/init/a_xcx003",
            data: data,
            dataType: "json",
            contentType:"application/json;charset=utf-8",
            success: function(res){
              console.log(res)
              location.href = res.result.mweb_url
            }
          });
       })
    </script>

</html>
最后编辑于：2019.04.18 09:42:42