微信支付 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 相关文章推荐
在多个页面使用同一个HTML片段的代码
Mar 04 Javascript
js 判断checkbox是否选中的操作方法
Nov 09 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
Dec 07 Javascript
jQuery中get()方法用法实例
Dec 27 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
Aug 11 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
Aug 21 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
Jul 15 Javascript
js实现增加数字显示的环形进度条效果
Feb 05 Javascript
webpack4 CSS Tree Shaking的使用
Sep 03 Javascript
使用RxJS更优雅地进行定时请求详析
Jun 02 Javascript
vue2的 router在使用过程中遇到的一些问题
Apr 13 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
php中文验证码实现示例分享
2014/01/12 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
php使用MySQL保存session会话的方法
2015/06/26 PHP
Smarty3配置及入门语法
2017/02/22 PHP
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
用javascript实现分割提取页面所需内容
2007/05/09 Javascript
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2010/06/11 Javascript
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
关于JS数组追加数组采用push.apply的问题
2014/06/09 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
2014/12/19 Javascript
Google Maps基础及实例解析
2016/08/06 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
CSS+jQuery实现简单的折叠菜单
2016/12/20 Javascript
ES6数组的扩展详解
2017/04/25 Javascript
webpack2.0配置postcss-loader的方法
2017/08/17 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
node+vue实现文件上传功能
2020/05/28 Javascript
解决vuex数据页面刷新后初始化操作
2020/07/26 Javascript
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
python实现汉诺塔递归算法经典案例
2021/03/01 Python
更换Django默认的模板引擎为jinja2的实现方法
2018/05/28 Python
Python实现统计英文文章词频的方法分析
2019/01/28 Python
Django实现celery定时任务过程解析
2020/04/21 Python
Python类型转换的魔术方法详解
2020/12/23 Python
美国最流行的男士时尚网站:Touch of Modern
2018/02/05 全球购物
小学生演讲稿
2014/01/12 职场文书
银行见习期自我鉴定
2014/01/29 职场文书
初三班主任寄语大全
2014/04/04 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
2014年施工员工作总结
2014/11/18 职场文书
2015年幼儿园元旦亲子活动方案
2014/12/09 职场文书
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js
浅谈Web Storage API的使用
2021/06/23 Javascript