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

一、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 资料的整理，希望能帮到大家，谢谢支持！

赞 (0)

相关推荐

  • 微信支付java版本之JSAPI支付+发送模板消息

    微信支付java版本之JSAPI支付+发送模板消息

    本文为大家分享了java版本之JSAPI支付+发送模板消息的相关资料,供大家参考,具体内容如下 1.工具类 工具类见:微信支付JAVA版本之Native付款 2.公众账号设置 3.代码实现 openId:openId为用户与该公众账号之间代表用户的唯一标示  以下类中涉及到生成token,关闭订单接口调用,获取配置文件信息,和工具类,在其他文章中有具体代码实现 package com.zhrd.bussinss.platform.controller.rest; import java.io.F

  • 最详细的ASP.NET微信JS-SDK支付代码

    本文实例为大家分享了微信JS SDK支付的具体代码,供大家参考,具体内容如下 模型层实体类: public class JsEntities { /// <summary> /// 公众号id /// </summary> public string appId { get; set; } /// <summary> /// 时间戳 /// </summary> public string timeStamp { get; set; } /// <su

  • js微信分享API

    本文为大家分享了js微信分享实现代码,供大家参考,具体内容如下 微信分享Js API 功能: 1.分享到微信朋友圈 2.分享给微信好友 3.分享到腾讯微博 4.隐藏/显示右上角的菜单入口 5.隐藏/显示底部浏览器工具栏 6.获取当前的网络状态 7.调起微信客户端的图片播放组件 8.关闭公众平台Web页面 /**! * 微信内置浏览器的Javascript API,功能包括: * * 1.分享到微信朋友圈 * 2.分享给微信好友 * 3.分享到腾讯微博 * 4.隐藏/显示右上角的菜单入口 * 5.

  • JS通过调用微信API实现微信支付功能的方法示例

    JS通过调用微信API实现微信支付功能的方法示例

    本文实例讲述了JS通过调用微信API实现微信支付功能的方法.分享给大家供大家参考,具体如下: 最近在做微信公众号开发,在微信支付上遇到一些问题,困惑了3天,今天终于搞定.期间要感谢一些大神的帮助,趁热下面分享一下我的经验. 在实现微信支付之前,需要到微信开发平台认证,这些认证和配置信息我就不多说了,这里主要从代码层面实现支付. function onBridgeReady(){ WeixinJSBridge.invoke( 'getBrandWCPayRequest', { "appId&quo

  • 微信JSAPI支付操作需要注意的细节

    首先介绍一下我在调用微信支付接口使用的是 weixin.senparc SDK,非常方便好用开源的一个微信开发SDK. weixin.senparc SDK 官网:http://weixin.senparc.com/ 先去下载下来Senparc.Weixin SDK. 在调起支付接口之前,需要先要调用统一下单接口,商户系统先调用该接口在微信支付服务后台生成预支付交易单,返回正确的预支付交易回话标识后再在APP里面调起支付. 微信 JsApi支付 在这个目录下 Senparc.Weixin.MP.

  • Java通过JsApi方式实现微信支付

    要使用JsApi进行微信支付,首先要从微信获得一个prepay_id,然后通过调用微信的jsapi完成支付,JS API的返回结果get_brand_wcpay_request:ok仅在用户成功完成支付时返回.由于前端交互复杂,get_brand_wcpay_request:cancel或者get_brand_wcpay_request:fail可以统一处理为用户遇到错误或者主动放弃,不必细化区分. 示例代码如下: function onBridgeReady(){ WeixinJSBridge

  • nodejs微信公众号支付开发

    odeJs 微信公众号功能开发,移动端 H5页面调用微信的支付功能.这几天根据公司的需要使用 node 和 h5页面调用微信的支付功能完成支付需求.现在把开发过程重新捋一遍,以帮助更多的开发者顺利的完成微信支付功能的开发.(微信暂时还没有提供 node 的支付功能) 一.请求CODE 请求 code 的目的就是获取用户的 openid(用户相对于当前公众号的唯一标识) 和access_token,请求的API:https://open.weixin.qq.com/connect/oauth2/a

  • 微信小程序通过api接口将json数据展现到小程序示例

    微信小程序通过api接口将json数据展现到小程序示例

    实现知乎客户端的一个重要知识前提就是,要知道怎么通过知乎新闻的接口,来把数据展示到微信小程序端上. 那么我们这一就先学习一下,如何将接口获取到的数据展示到微信小程序上. 1.用到的知识点 <1> wx.request 请求接口资源(微信小程序api中的发起请求部分) <2>swiper 实现轮播图的组件 <3>wx:for 循环语句 <4>微信小程序的基础知识 2.实现原理 首先,先看一下这个请求函数 wx.request({ url: '******',

  • 微信公众号支付之坑：调用支付jsapi缺少参数 timeStamp等错误解决方法

    微信公众号支付之坑：调用支付jsapi缺少参数 timeStamp等错误解决方法

    这段时间一直比较忙,一忙起来真感觉自己就只是一台挣钱的机器了(说的好像能挣到多少钱似的,呵呵):这会儿难得有点儿空闲时间,想把前段时间开发微信公众号支付遇到问题及解决方法跟大家分享下,这些"暗坑"能不掉就不掉吧,要不然关键时刻出问题,真是让人急的焦头烂额. 双12客户的商城活动正在蓄势进行中,却有用户频频反馈说:支付不了,有问题,并截图如下: 当时问题感觉很奇怪,自己测试多次都ok啊,问题来了都赶紧解决吧,最终找到解决办法: 原因是程序中一个字符串变量被错误的设置为数字类型,解决方法很

  • javascript使用call调用微信API

    代码很简单,只是给大家一个思路的,这里就不多废话了,奉上源码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>微信Js API Demo</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="dns-prefet

  • 微信WeixinJSBridge API使用实例

    注意:请在微信中测试 <!DOCTYPE html> <html> <head> <title>微信WeixinJSBridge API</title> <meta charset="utf-8" /> <script type="text/javascript"> (function(){ var a=document.getElementsByTagName("html

  • 前端微信支付js代码

    本文实例为大家分享了前端微信支付js代码,供大家参考,具体内容如下 $('.Save_Patient_Msg').click(function(){ $('.Save_Patient_Msg').off('click'); var hrdfId = getOrderId(); var txnAmt = $('.sum_pay.font-red').html(); var data = {orderId: hrdfId, txnAmt: "0.01", prodDesc: "远

随机推荐