微信H5支付
微信解读
使用场景
商户已有H5商城网站,用户通过消息或扫描二维码在微信内打开网页时,可以调用微信支付完成下单购买的流程。步骤
- 商户下发图文消息或者通过自定义菜单吸引用户点击进入商户网页。
- 进入商户网页,用户选择购买,完成选购流程。
简述
微信的H5页面支付只需在商家的付款页面上调用wechat的API即可,调用时需要提供一些指定参数,所以,前端页面代码只需复制微信官方提供的页面方法即可;而后端需要做的,就是将支付所需参数生成正确并传递到页面即可。
网页端调起支付API所需参数
详见微信官方文档 wechat link
在微信浏览器里面打开H5网页中执行JS调起支付。接口输入输出数据格式为JSON。
注意:WeixinJSBridge内置对象在其他浏览器中无效。列表中参数名区分大小,大小写错误签名验证会失败。
网页端接口参数列表:
| 名称 |变量名|必填|类型|示例|描述|
| 公众号id | appId | 是 | String(16) | wx8888888888888888 | 公众号名称,由商户传入,商户注册具有支付权限的公众号成功后即可获得 |
| 时间戳 | timeStamp | 是 | String(32) | 1414561699 | 当前的时间,自1970年以来的秒数,其他详见时间戳规则 |
| 随机字符串 | nonceStr | 是 | String(32) | 5K8264ILTKCH16CQ2502SI8ZNMTM67VS | 随机字符串,不长于32位。|
|订单详情扩展字符串|package|是|String(128)|prepay_id=123456789|统一下单接口返回的参数值,提交格式必须如示例所示|
|签名方式| type | 是 | String(32) | MD5 |签名算法|
| 时间戳 | timeStamp | 是 | String(64) | C380BEC2BFD727A4B6845133519F3AD6 |签名|
网页内支付接口err_msg返回结果值说明:
|返回值|描述|
|ok|支付成功,仅在用户成功完成支付时返回|
|cancel|支付过程中,用户取消(可以统一处理为用户遇到错误或者主动放弃,不必细化区分)|
|fail|支付失败(可以统一处理为用户遇到错误或者主动放弃,不必细化区分)|
网页端调起支付API示例代码
1 | function onBridgeReady(){ |
后端代码剖析
与支付H5页面交互类
其中notify_url与设置详见下图
支付授权目录:
xzl.gxcm.com.cn/#/为iOS路径
xzl.gxcm.com.cn/#/course/为android路径
支付授权目录.png?nolink
微信支付设置:需要为测试人员设置白名单,否则无法支付
开发配置.png?nolink
1 | import com.*.CommonUtil; |
交互所需参数生成工具类
CommonUtil
HttpClientUtil
MD5SignUtil
MD5Util
MapKeyComparatorUtil
PayUtil
CommonUtil.java
1 | import java.util.*; |
HttpClientUtil.java
1 | import org.apache.commons.httpclient.methods.PostMethod; |
MD5SignUtil.java
1 | public class MD5SignUtil { |
MD5Util.java
1 | import java.security.MessageDigest; |
MapKeyComparatorUtil.java
1 | import java.util.Comparator; |
PayUtil.java
1 | import org.apache.commons.httpclient.HttpClient; |
支付成功发送模版消息
1 | // wechat shopping receipt |