微信内调起h5支付例子

微信支付已经成为了我们日常生活中非常常用的一种支付方式，其方便快捷的特点备受用户欢迎。但是，在某些场景下，我们需要使用移动端网页进行支付，这时就需要使用到微信的H5支付功能了。本文将介绍在微信内如何调起H5支付的实现过程。

在使用微信内调起H5支付时，首先需要开通微信商户，并填写相关的信息，包括H5支付域名、售卖产品/使用场景的描述、所售卖产品对应的官方网站域名或详情页网址等。同时，还需要提交一份域名证书和域名授权书。

在微信商户平台中，进入【产品中心->产品大全->我的产品->H5支付】可以查看H5支付的开通状态。如果还没有开通，点击申请开通页面，填写相关的信息即可。审核通过后，就可以进行支付了。

在Web端开发时，需要在请求的url后面添加以下参数：

openid=xxxxxx       //用户的openid
total_fee=100              //支付金额（单位：分）
out_trade_no=xxxx    //商户订单号
mch_id=xxxx                 //商户号
notify_url=xxxxxxx      //回调地址
trade_type=MWEB        //标记使用H5支付

其中，openid是用户的唯一标识，total_fee是支付金额，out_trade_no是商户订单号，mch_id是商户号，notify_url是回调地址，trade_type标记使用H5支付。

接着，在后端需要进行一些处理：

1.组装请求参数并签名

2.发送请求

3.处理回调结果

具体实现方式可参考微信支付官方文档。

在前端，我们可以使用JSAPI的方式调起微信支付功能。首先，需要在页面中引入微信支付的JS库：

然后，在页面中，我们需要先进行微信的授权，并获取用户的openid：

wx.config({
      debug: false,
      appId: '',
      timestamp: '',
      nonceStr: '',
      signature: '',
      jsApiList: []
    });

其中，appId是服务号的AppID，timestamp是当前的时间戳，nonceStr是随机字符串，signature是签名。JSAPI的列表中需要添加“chooseWXPay”函数。

接着，在页面中添加一个支付按钮，点击按钮后调起支付：

function wxpay() {
      $.ajax({
          url: "/pay.php",//调取后端相关接口
          data: {
              openid: wxOpenid,
              total_fee: order_price * 100,
              out_trade_no: order_sn,
              mch_id: '',
              notify_url: '',
              trade_type: 'JSAPI'
          },
          dataType: "json",
          type: 'POST',//请求方式
          success: function(res) {
              if (res.code == 0) {
                  wx.chooseWXPay({
                      timestamp: parseInt(res.info.timeStamp),
                      nonceStr: res.info.nonceStr,
                      package: res.info.package,
                      signType: res.info.signType,
                      paySign: res.info.paySign,
                      success: function(res) {
                          alert("支付成功!");
                      },
                      cancel: function(res) {
                          alert("支付取消!");
                      },
                      fail: function(res) {
                          console.log(res);
                      }
                  });
              } else {
                  alert(res.msg);
              }
          },
          error: function() {
              alert('支付接口错误');
          }
      });
}

在JS代码中，我们通过AJAX调用后端接口，获取支付的相关参数，并通过chooseWXPay函数直接调用微信支付功能。

总之，微信的H5支付功能相当的方便快捷，可以帮助我们在移动端完成支付。当然，在使用过程中，也需要注意一些安全问题，保护用户的隐私和资金安全。