微信支付开发(7) H5支付

简介: 关键字:微信支付 微信支付v3 H5支付 wap支付 prepay_id 作者:方倍工作室原文: http://www.cnblogs.com/txw1958/p/wxpayv3_h5.html    本文介绍微信支付下的H5支付实现流程。

关键字:微信支付 微信支付v3 H5支付 wap支付 prepay_id 
作者:方倍工作室
原文: http://www.cnblogs.com/txw1958/p/wxpayv3_h5.html 

 

本文介绍微信支付下的H5支付实现流程。

 

 

一、介绍

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

测试地址 

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

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

http://wxpay.wxutil.com/pub_v2/pay/wap.v2.php

http://wxpay.wxutil.com/mch/pay/h5.v2.php

效果图

 

流程图

 

二、商品信息准备

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

    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参数

<xml>
  <body><![CDATA[H5支付测试]]></body>
  <out_trade_no><![CDATA[100001_1433009089]]></out_trade_no>
  <total_fee>1</total_fee>
  //<notify_url><![CDATA[http://www.doucube.com/weixin/demo/notify_url.php]]></notify_url>
  <trade_type><![CDATA[WAP]]></trade_type>
  <device_info>100001</device_info>
  <appid><![CDATA[wx1d065b0628e21103]]></appid>
  <mch_id>1237905502</mch_id>
  <spbill_create_ip><![CDATA[61.129.47.79]]></spbill_create_ip>
  <nonce_str><![CDATA[gwpdlnn0zlfih21gipjj5z53i7vea8e8]]></nonce_str>
  <sign><![CDATA[C5A1E210F9B4402D8254F731882F41AC]]></sign>
</xml>

2. 调用统一支付请求

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

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

得到如下XML数据

<xml>
  <return_code><![CDATA[SUCCESS]]></return_code>  
  <return_msg><![CDATA[OK]]></return_msg>  
  <appid><![CDATA[wx1d065b0628e21103]]></appid>  
  <mch_id><![CDATA[1237905502]]></mch_id>  
  <device_info><![CDATA[100001]]></device_info>  
  <nonce_str><![CDATA[6u8ovTtFupTagsiY]]></nonce_str>  
  <sign><![CDATA[E84D8BC2331766DD685591F908367FF1]]></sign>  
  <result_code><![CDATA[SUCCESS]]></result_code>  
  <prepay_id><![CDATA[wx20150531020450bb586eb2f70717331240]]></prepay_id>  
  <trade_type><![CDATA[WAP]]></trade_type>  
</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&timestamp=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
字段名 变量名 必填 类型 示例值 描述
公众账号ID appid 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

 

三、新版流程

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支付

发邮件到weixinpay@tencent.com

申请条件:微信支付月平均支付笔数超过3W笔,日平台支付笔数超过1K笔

 

相关文章
|
13天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
13天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
13天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。
|
2天前
|
数据采集 存储 人工智能
【Python+微信】【企业微信开发入坑指北】4. 企业微信接入GPT,只需一个URL,自动获取文章总结
【Python+微信】【企业微信开发入坑指北】4. 企业微信接入GPT,只需一个URL,自动获取文章总结
13 0
|
2天前
|
人工智能 机器人 API
【Python+微信】【企业微信开发入坑指北】3. 如何利用企业微信API给微信群推送消息
【Python+微信】【企业微信开发入坑指北】3. 如何利用企业微信API给微信群推送消息
6 0
|
2天前
|
缓存 人工智能 API
【Python+微信】【企业微信开发入坑指北】2. 如何利用企业微信API主动给用户发应用消息
【Python+微信】【企业微信开发入坑指北】2. 如何利用企业微信API主动给用户发应用消息
6 0
|
13天前
|
SQL 安全 小程序
探索微信小程序全栈开发的安全性问题
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的安全性问题,包括数据安全、接口安全、隐私保护和代码安全。为解决这些问题,建议采取数据加密、使用HTTPS协议、身份认证与授权、输入验证、安全审计及漏洞扫描以及安全培训等措施。通过这些方法,开发者可提升小程序安全性,保护用户隐私和数据。
|
13天前
|
JavaScript 前端开发 小程序
微信小程序全栈开发之性能优化策略
【4月更文挑战第12天】本文探讨了微信小程序全栈开发的性能优化策略,包括前端的资源和渲染优化,如图片压缩、虚拟DOM、代码分割;后端的数据库和API优化,如索引创建、缓存使用、RESTful API设计;以及服务器的负载均衡和CDN加速。通过这些方法,开发者可提升小程序性能,优化用户体验,增强商业价值。
|
1月前
|
小程序 前端开发 程序员
微信小程序开发入门教程-小程序账号注册及开通
微信小程序开发入门教程-小程序账号注册及开通
|
1月前
|
小程序 JavaScript
在使用微信小程序开发中用vant2框架中的Uploader 文件上传wx.uploadFile无反应和使用多图上传
网上有的说是bind:after-read="afterRead"的命名问题不支持-,但是我这儿执行了console.log("file",file);证明函数运行了。后来发现是multiple="true"原因开启了多图上传,如果是多图上传的话file就是数组了
33 2

热门文章

最新文章