本文详解微信支付 JS API 接口(getBrandWCPayRequest)的调用规则、参数配置及返回值处理。文章提供了完整的 PHP 后端签名生成代码与前端 JavaScript 调用示例,涵盖从参数准备到支付流程实现的完整步骤,帮助开发者在微信内置浏览器中成功集成支付功能。
JS API 支付接口(getBrandWCPayRequest)
一、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 支付实现
以下代码为微信官方提供的 JS API 支付演示代码。
<?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 相关资料的整理,希望能对各位有所帮助,感谢支持!