为什么叫js支付？

首先这个本来是公众号支付，但是也叫js支付，而且这个名字更准确，更本质。为什么呢？因为微信唤起密码控件，是基于js代码来实现，具体来说是微信app(相当于是微信浏览器)自己的js代码，你用它的代码，并且必须在微信app内才能执行微信js代码(其实就是微信自己封装的js对象)。说白了，就是必须在微信app内才能支付。

架构图

核心步骤就两个，

1.  预支付

即先支付，创建订单

2.  唤起密码框

刚才第一步支付的时候，会创建订单，并且同步返回一个预支付订单id。

这个预支付订单id先返回给支付系统(后台代码)，支付系统后台代码再返回给支付系统前端代码(运行在微信app里面)，前端代码有了这个预支付id就可以唤起密码框，用户输入密码真正支付。

这里要注意的一点是，第二步是用户和微信通信，不经过支付系统，即用户——》微信。而第一步，是用户——》支付系统——》微信。为什么呢？为什么第二步不经过支付系统呢？因为不需要啊，而且密码是微信密码，和支付系统无关，也不可能把密码给支付系统。

支付

接口文档

pay.weixin.qq.com/wiki/doc/ap…

入参

商户号

订单号

金额

---

示例

{
	"mchid": "1900006XXX", //商户号：哪个商家收钱/收款人是谁
	"out_trade_no": "1217752501201407033233368318",
	"appid": "wxdace645e0bc2cXXX", //公众号id
	"description": "Image形象店-深圳腾大-QQ公仔",
	"notify_url": "https://www.weixin.qq.com/wxpay/pay.php",
	"amount": {
		"total": 1, //金额：支付多少钱
		"currency": "CNY"
	},
	"payer": { //付款人
		"openid": "o4GgauInH_RCEdvrrNGrntXDuXXX" //付款人id/微信id
	}
}

出参

预支付id

示例

{
	"prepay_id": "wx26112221580621e9b071c00d9e093b0000" //给接下来唤起密码框使用：相当于唯一标记哪一笔订单
}

源码

1、入参

代码里的入参其实就是接口文档里的入参

2、  出参

代码里的返回数据就是出参：预支付id

唤起密码框

主要作用？

用户输入密码！！！

---

接口文档

pay.weixin.qq.com/wiki/doc/ap…

入参

主要是：

预支付id

签名

---

示例

function onBridgeReady() {
    WeixinJSBridge.invoke('getBrandWCPayRequest', {
        "appId": "wx2421b1c4370ec43b",     //公众号ID，由商户传入     
        "timeStamp": "1395712654",     //时间戳，自1970年以来的秒数     
        "nonceStr": "e61463f8efa94090b1f366cccfbbb444",      //随机串     
        "package": "prepay_id=wx21201855730335ac86f8c43d1889123400", //预支付id
        "signType": "RSA",     //微信签名方式：     
        "paySign": "oR9d8PuhnIc+YZ8cBHFCwfgpaK9gd7vaRvkYD7rthRAZ/X+QBhcCYL21N7cHCTUxbQ+EAt6Uy+lwSN22f5YZvI45MLko8Pfso0jm46v5hqcVwrk6uddkGuT+Cdvu4WBqDzaDjnNa5UK3GfE1Wfl2gHxIIY5lLdUgWFts17D4WuolLLkiFZV+JSHMvH7eaLdT9N5GBovBwu5yYKUR7skR8Fu+LozcSqQixnlEZUfyE55feLOQTUYzLmR9pNtPbPsu6WVhbNHMS3Ss2+AehHvz+n64GDmXxbX++IOBvm2olHu3PsOUGRwhudhVf7UcGcunXt8cqNjKNqZLhLw4jq/xDg==" //微信签名 
    },
    function(res) {
        if (res.err_msg == "get_brand_wcpay_request:ok") {
            // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
        }
    });
}
if (typeof WeixinJSBridge == "undefined") {
    if (document.addEventListener) {
        document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
    } else if (document.attachEvent) {
        document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
        document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
    }
} else {
    onBridgeReady();
}

出参

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

js回调函数的入参的值，如果是get_brand_wcpay_request:ok，那么就是支付成功。

源码

function onBridgeReady() {
    WeixinJSBridge.invoke('getBrandWCPayRequest', {
        "appId": "wx2421b1c4370ec43b",     //公众号ID，由商户传入     
        "timeStamp": "1395712654",     //时间戳，自1970年以来的秒数     
        "nonceStr": "e61463f8efa94090b1f366cccfbbb444",      //随机串     
        "package": "prepay_id=wx21201855730335ac86f8c43d1889123400", //预支付id
        "signType": "RSA",     //微信签名方式：     
        "paySign": "oR9d8PuhnIc+YZ8cBHFCwfgpaK9gd7vaRvkYD7rthRAZ/X+QBhcCYL21N7cHCTUxbQ+EAt6Uy+lwSN22f5YZvI45MLko8Pfso0jm46v5hqcVwrk6uddkGuT+Cdvu4WBqDzaDjnNa5UK3GfE1Wfl2gHxIIY5lLdUgWFts17D4WuolLLkiFZV+JSHMvH7eaLdT9N5GBovBwu5yYKUR7skR8Fu+LozcSqQixnlEZUfyE55feLOQTUYzLmR9pNtPbPsu6WVhbNHMS3Ss2+AehHvz+n64GDmXxbX++IOBvm2olHu3PsOUGRwhudhVf7UcGcunXt8cqNjKNqZLhLw4jq/xDg==" //微信签名 
    },
    function(res) {
        if (res.err_msg == "get_brand_wcpay_request:ok") {
            // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
        }
    });
}
if (typeof WeixinJSBridge == "undefined") {
    if (document.addEventListener) {
        document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
    } else if (document.attachEvent) {
        document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
        document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
    }
} else {
    onBridgeReady();
}