宜宾网站建设公司

微信开发之H5支付的示例分析-创新互联

这篇文章主要介绍微信开发之H5支付的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

目前创新互联已为上千多家的企业提供了网站建设、域名、雅安服务器托管、网站托管、企业网站设计、藁城网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

一、介绍

H5支付是基于公众号基础开发的一种非微信内浏览器支付方式（需要单独申请支付权限），可以满足在微信外的手机H5页面进行微信支付的需求。。

测试地址

http://wxpay.weixin.qq.com/pub_v2/pay/wap.v2.php

http://wxpay.weixin.qq.com/mch/pay/h6.v2.php

效果图

微信开发之H5支付的示例分析微信开发之H5支付的示例分析

流程图

微信开发之H5支付的示例分析

二、商品信息准备

主要是先定义商品的名称及价格，以及交易号。代码如下。

    include_once("../WxPayPubHelper/WxPayPubHelper.php");    //使用统一支付接口
    $unifiedOrder = new UnifiedOrder_pub();    
    //设置统一支付接口参数
    //设置必填参数
    //appid已填,商户无需重复填写
    //mch_id已填,商户无需重复填写
    //noncestr已填,商户无需重复填写
    //spbill_create_ip已填,商户无需重复填写
    //sign已填,商户无需重复填写
    $unifiedOrder->setParameter("body","H5支付测试");//商品描述
    $timeStamp = time();    $out_trade_no = WxPayConf_pub::APPID."$timeStamp";    $unifiedOrder->setParameter("out_trade_no","$out_trade_no");//商户订单号 
    $unifiedOrder->setParameter("total_fee","1");//总金额
    //$unifiedOrder->setParameter("notify_url",WxPayConf_pub::NOTIFY_URL);//通知地址 
    $unifiedOrder->setParameter("trade_type","WAP");//交易类型
    //非必填参数，商户可根据实际情况选填
    $unifiedOrder->setParameter("device_info","100001");//设备号

上述参数最终封装成如下类似XML参数


  
  
  1
  //
  
  100001
  
  1237905502
  
  
  

2. 调用统一支付请求

将上述XML发送给统一支付接口

https://api.mch.weixin.qq.com/pay/unifiedorder

得到如下XML数据


    
    
    
    
    
    
    
    
    
    

这样就得到一个prepayid

二、DeepLink

商户server调用统一下单接口请求订单，api参见公共api【统一下单】（接口中trade_type需定义为WAP），微信会返回给商户prepayid，商户按固定格式生成deeplink，通过用户点击deeplink来调起微信支付。
deeplink格式：

weixin://wap/pay?appid%3Dwxf5b5e87a6a0fde94%26noncestr%3D123%26package%3D123%26prepayid%3Dwx20141203201153d7bac0d2e10889028866%26sign%3D6AF4B69CCC30926F85770F900D098D64%26timestamp%3D1417511263

生成deeplink 的步骤如下：
步骤1：按URL 格式组装参数, $value 部分进行URL 编码，生成string1：
string1 ： key1=Urlencode($value1)&key2=Urlencode($value2、&...
步骤2：对string1 作整体的Urlencode，生成string2：
String2=Urlencode(string1);
步骤3：拼接前缀，生成最终deeplink
举例如下：
String1：

appid=wxf5b5e87a6a0fde94&noncestr=123&package=WAP&prepayid=wx201412101630480281750c890475924233&sign=53D411FB74FE0B0C79CC94F2AB0E2333×tamp=1417511263

再对整个string1 做一次URLEncode
string2：

appid%3Dwxf5b5e87a6a0fde94%26noncestr%3D123%26package%3DWAP%26prepayid%3Dwx201412101630480281750c890475924233%26sign%3D53D411FB74FE0B0C79CC94F2AB0E2333%26timestamp%3D1417511263

再加上协议头weixin：//wap/pay? 得到最后的deeplink

weixin://wap/pay?appid%3Dwxf5b5e87a6a0fde94%26noncestr%3D123%26package%3DWAP%26prepayid%3Dwx201412101630480281750c890475924233%26sign%3D53D411FB74FE0B0C79CC94F2AB0E2333%26timestamp%3D1417511263
字段名变量名必填类型示例值描述
公众账号IDappid是String(32)wx8888888888888888微信分配的公众账号ID
随机字符串noncestr是String(32)5K8264ILTKCH16CQ2502SI8ZNMTM67VS随机字符串，不长于32位。推荐随机数生成算法
订单详情扩展字符串package是String(32)WAP扩展字段，固定填写WAP
预支付交易会话标识prepayid是String(64)wx201410272009395522657a690389285100微信统一下单接口返回的预支付回话标识，用于后续接口调用中使用，该值有效期为2小时
签名sign是String(32)C380BEC2BFD727A4B6845133519F3AD6签名，详见签名生成算法
时间戳timestamp是String(32)1414561699

当前的时间，其他详见时间戳规则

开发文档：https://pay.weixin.qq.com/wiki/doc/api/wap.php?chapter=15_1

三、新版流程

微信开发之H5支付的示例分析

1、用户在商户侧完成下单，使用微信支付进行支付

2、由商户后台向微信支付发起下单请求（调用统一下单接口）注：交易类型trade_type=MWEB

3、微信支付校验商户权限

4、统一下单接口返回支付相关参数给商户后台，如支付跳转url（参数名“mweb_url”，即流程图中的微信中转页面地址）

5、商户后台收到统一下单接口返回参数，将mweb_url返回给前端

6、商户通过前端页面访问微信中转页面mweb_url（此步骤微信支付会校验refer，以判断请求来源是否合法）

7、由中转页面mweb_url主动唤起微信支付收银台

8、微信支付收银台被唤起同时关闭mweb_url中转页面

9、用户在微信支付收银台完成支付

以上是“微信开发之H5支付的示例分析”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！


当前名称：微信开发之H5支付的示例分析-创新互联
分享链接：http://ybzwz.com/article/cssdee.html

其他资讯