微信支付 JS API支付接口详解


Posted in Javascript onJuly 11, 2016

一、JS API支付接口(getBrandWCPayRequest)

微信JS API只能在微信内置浏览器中使用,其他浏览器调用无效。微信提供getBrandWCPayRequest接口供商户前端网页调用,调用之前微信会鉴定商户支付权限,若商户具有调起支付的权限,则将开始支付流程。这里主要介绍支付前的接口调用规则,支付状态消息通知机制请参加下文。接口需要注意:所有传入参数都是字符串类型!

getBrandWCPayRequest参数如下图所示。

参数 名称 必填 格式 说明
appId 公众号id 字符串类型 商户注册具有支付权限的公众号成功后即可获得;
timeStamp 时间戳 字符串类型,32个字节以下 商户生成,从1970年1月1日00:00:00至今的秒数,即当前的时间,且最终需要转换为字符串形式;
nonceStr 随机字符串 字符串类型,32个字节以下 商户生成的随机字符串;
package 订单详情扩展字符串 字符串类型,4096个字节以下 商户将订单信息组成该字符串,具体组成方案参见接口使用说明中package组包帮劣;由商户按照规范拼接后传入;
signType 签名方式 字符串类型,参数取值"SHA1" 按照文档中所示填入,目前仅支持SHA1;
paySign 签名 字符串类型 商户将接口列表中的参数按照指定方式?行签名,签名方式使用signType中标示的签名方式,具体签名方案参见接口使用说明中签名帮劣;由商户按照规范签名后传入;

    getBrandWCPayRequest返回值如下表所示。

返回值 说明
err_msg get_brand_wcpay_request:ok  支付成功 get_brand_wcpay_request:cancel 支付过程中用户取消 get_brand_wcpay_request:fail 支付失败

JS API的返回结果 get_brand_wcpay_request:ok 仅在用户成功完成支付时返回。由于前端交互复杂,get_brand_wcpay_request:cancel 或者 get_brand_wcpay_request:fail 可以统一处理为用户遇到错误或者主动放弃,不必细化区分。

二、JS API支付实现

下面代码是微信官方提供的JS API支付demo

<?php
include_once("WxPayHelper.php");
$commonUtil = new CommonUtil();
$wxPayHelper = new WxPayHelper();
$wxPayHelper->setParameter("bank_type", "WX");
$wxPayHelper->setParameter("body", "test");
$wxPayHelper->setParameter("partner", "1900000109");
$wxPayHelper->setParameter("out_trade_no", $commonUtil->create_noncestr());
$wxPayHelper->setParameter("total_fee", "1");
$wxPayHelper->setParameter("fee_type", "1");
$wxPayHelper->setParameter("notify_url", "htttp://www.baidu.com");
$wxPayHelper->setParameter("spbill_create_ip", "127.0.0.1");
$wxPayHelper->setParameter("input_charset", "GBK");
?>
<html>
<script language="javascript">
function callpay()
{
 WeixinJSBridge.invoke('getBrandWCPayRequest',<?php echo $wxPayHelper->create_biz_package(); ?>,function(res){
 WeixinJSBridge.log(res.err_msg);
 alert(res.err_code+res.err_desc+res.err_msg);
 });
}
</script>
<body>
<button type="button" onclick="callpay()">wx pay test</button>
</body>
</html>

将其中的微信支付参数修改成自己所申请得到的,然后将网页上传到微信支付目录下,给测试账号回复该网页地址。用户就可以实现一次JS API支付。

三、效果演示

下面是官方DEMO修改后,发起支付的页面图。

微信支付 JS API支付接口详解

确认交易:

微信支付 JS API支付接口详解

输入支付密码:

微信支付 JS API支付接口详解

交易成功:

微信支付 JS API支付接口详解

       以上就是对微信支付JS API 资料的整理,希望能帮到大家,谢谢支持!

Javascript 相关文章推荐
Extjs4 GridPanel 的几种样式使用介绍
Apr 18 Javascript
JS验证邮箱格式是否正确的代码
Dec 05 Javascript
JSONP跨域的原理解析及其实现介绍
Mar 22 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
Dec 10 Javascript
vuex 的简单使用
Mar 22 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
Mar 26 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
通过图带你深入了解vue的响应式原理
Jun 21 Javascript
es6函数之rest参数用法实例分析
Apr 18 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 Javascript
JS highcharts动态柱状图原理及实现
Oct 16 Javascript
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
判断输入的字符串是否是日期格式的简单方法
Jul 11 #Javascript
JS判断日期格式是否合法的简单实例
Jul 11 #Javascript
深入浅析JavaScript中的scrollTop
Jul 11 #Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
Jul 11 #Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
Jul 11 #Javascript
Bootstrap3制作搜索框样式的方法
Jul 11 #Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 #Javascript
You might like
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
PHP用FTP类上传文件视频等的简单实现方法
2016/09/23 PHP
PHP Laravel中的Trait使用方法
2019/01/20 PHP
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
YUI模块开发原理详解
2013/11/18 Javascript
JS与C#编码解码
2013/12/03 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
2018/05/04 Javascript
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
详解webpack+ES6+Sass搭建多页面应用
2018/11/05 Javascript
原生JavaScript实现幻灯片效果
2021/02/19 Javascript
[12:21]VICI vs TNC (BO3)
2018/06/07 DOTA
在Python中操作文件之read()方法的使用教程
2015/05/24 Python
python基础_文件操作实现全文或单行替换的方法
2017/09/04 Python
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
Python延时操作实现方法示例
2018/08/14 Python
python编写计算器功能
2019/10/25 Python
wxPython实现文本框基础组件
2019/11/18 Python
python不相等的两个字符串的 if 条件判断为True详解
2020/03/12 Python
python如何调用php文件中的函数详解
2020/12/29 Python
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
2020/08/24 HTML / CSS
伦敦时尚生活的缩影:LN-CC
2017/01/24 全球购物
巴西男士个人护理产品商店:SHOP4MEN
2017/08/07 全球购物
Spotahome意大利:公寓和房间出租
2020/02/21 全球购物
Herschel美国官网:背包、手提袋及配件
2020/03/10 全球购物
《一个小村庄的故事》教学反思
2014/04/13 职场文书
工作目标责任书
2014/07/23 职场文书
2014年秋季开学典礼主持词
2014/08/02 职场文书
党政领导班子群众路线对照检查材料
2014/10/26 职场文书
银行竞聘报告范文
2014/11/06 职场文书
2015年施工员工作总结范文
2015/04/20 职场文书
企业版Windows 11有哪些新功能? Win11适用于企业的功能介绍
2021/11/21 数码科技