### JSAPI 接口
* * *
JSAPI 接口使用前，請在后臺設置支付目錄
JSAPI 接口請求步驟：
1. 參照《獲取 OPENID》章節，獲得 OPENID
2. 通過該 api 構造訂單參數獲取 jsapi 支付參數
3. 通過 jssdk 或 WeixinJsBridge 方式自行發起支付
4. 服務端接收異步通知
* * *
請求地址：[https://mch.xiaoweijufu.com/wxpay/jsapi](https://mch.xiaoweijufu.com/wxpay/jsapi)
請求參數：
| 字段名稱 | 字段類型 | 必填參數 | 說明 |
| --- | --- | --- | --- |
| mchid | string(16) | Y | 商戶號 |
| total\_fee | int(16) | Y | 金額。單位：分 |
| out\_trade\_no | string(32) | Y | 用戶端自主生成的訂單號，在用戶端要保證唯一性 |
| body | string(128) | N | 訂單內容 |
| title | string(32) | N | 訂單標題，非必填 |
| attach | string(127) | N | 用戶自定義數據，在notify的時候會原樣返回 |
| notify\_url | string(255) | N | 接收微信支付異步通知的回調地址。必須為可直接訪問的URL，不能帶參數、session驗證、csrf驗證。留空則不通知 |
| openid | string(32) | Y | 用戶openid |
| access\_key | string(32) | Y | 用戶對應access\_key |
| sign | string(32) | Y | 數據簽名 詳見[簽名算法](http://help.xiaoweijufu.com/1368912) |
請求返回：
| 字段名稱 | 字段類型 | 必填參數 | 說明 |
| --- | --- | --- | --- |
| order\_no | string(16) | Y | 小微聚付 平臺訂單號 |
| out\_trade\_no | string(16) | Y | 用戶生成的訂單號原樣返回 |
| jsapi\_parameters | string(255) | N | 用于發起支付的支付參數 |
* * *
JSAPI 請求 DEMO:
~~~
<?php
class PayapiHelper {
private $url = 'https://mch.xiaoweijufu.com/wxpay/jsapi';
private $access_key = 'xxxxxx'; // 填寫通信Key
private $secret_key = 'xxxxxx'; // 填寫通信secret
public function __construct($data=null) {
$this->data = $data;
}
public function pay(){
$data = $this->data;
$data['access_key'] = $this->access_key;
$data['sign'] = $this->sign($data);
return $this->post($data, $this->url);
}
public function post($data, $url) {
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
$rst = curl_exec($ch);
curl_close($ch);
return $rst;
}
// 簽名方法
private function sign(array $attributes) {
ksort($attributes);
$sign = strtoupper(md5(urldecode(http_build_query($attributes)).'&key='.$this->secret_key));
return $sign;
}
}
$order = [
'mchid' => 'xxxxx', //商戶號
'total_fee' => 120,
'out_trade_no' => time(),
'body' => 'test', // 訂單說明
'openid' => 'xxxxxxxxxxx', // 通過openid接口獲取到的openid
];
$payapi = new PayapiHelper( $order );
$re = $payapi->pay();
// 返回結果中包含`jsapi\_parameters`字段，該字段的值即是前端發起時所需的6個支付參數
print_r($re);
~~~
前端發起支付演示代碼:
~~~
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
</head>
<body style="padding:20px;">
<a href="javascript:;" class="weui-btn weui-btn_primary" id="payBtn">微信支付</a>
</body>
<script>
if (typeof WeixinJSBridge == "undefined") {
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
}
}
function onBridgeReady() {
WeixinJSBridge.call('hideOptionMenu');
}
$('#payBtn').on('click', function () {
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
// 以下6個支付參數通過payjs的jsapi接口獲取
// **************************
"appId": "wxc5205a653b0259ac",
"timeStamp": "15100000000",
"nonceStr": "9cJEu27X6KehHGM8",
"package": "prepay_id=wx162234040923141245861167",
"signType": "MD5",
"paySign": "D64EF3ADBCA224E435D321619710C008"
// **************************
},
function (res) {
if (res.err_msg == "get_brand_wcpay_request:ok") {
WeixinJSBridge.call('closeWindow');
}
}
);
});
</script>
~~~
