1. JS API payment interface (getBrandWCPayRequest)
The WeChat JS API can only be used in the built-in WeChat browser, and other browser calls are invalid. WeChat provides the getBrandWCPayRequest interface for merchant front-end web page calls. Before calling, WeChat will verify the merchant’s payment permissions. If the merchant has the right to initiate payment, the payment process will begin. Here we mainly introduce the interface call rules before payment. Please participate in the payment status message notification mechanism below. Interface needs to be noted: All incoming parameters are string types!
The getBrandWCPayRequest parameter is shown in the figure below.
| parameter | name | Required | Format | illustrate |
|---|---|---|---|---|
| appId | Official account id | yes | String type | The merchant can obtain it after successfully registering a public account with payment permission; |
| timeStamp | Timestamp | yes | String type, less than 32 bytes | Merchant generation, from 00:00:00 to present on January 1, 1970, that is, the current time, and ultimately needs to be converted into a string form; |
| nonceStr | Random string | yes | String type, less than 32 bytes | Random string generated by merchants; |
| package | Order details extension string | yes | String type, below 4096 bytes | Merchants will form the order information into this string. For the specific composition plan, please refer to the package group package in the interface instructions; the merchant will splice it according to the specifications and then pass it in; |
| signType | Signature method | yes | String type, parameter value "SHA1" | Fill in as shown in the document, currently only SHA1 is supported; |
| paySign | sign | yes | String type | Merchants sign the parameters in the interface list according to the specified method, and use the signature method marked in signType. For the specific signature plan, please refer to the signature help in the interface usage instructions; the merchant signs according to the specifications and then passes in; |
getBrandWCPayRequest return value is shown in the following table.
| Return value | illustrate |
| err_msg | get_brand_wcpay_request:ok Payment successfully get_brand_wcpay_request:cancel User cancellation during payment process get_brand_wcpay_request:fail payment failed |
The return result of JS API get_brand_wcpay_request:ok is returned only when the user successfully completes payment. Due to the complex front-end interaction, get_brand_wcpay_request:cancel or get_brand_wcpay_request:fail can be handled uniformly as users encounter errors or actively give up, without having to refine the distinction.
2. JS API payment implementation
The following code is the JS API payment demo provided by WeChat.
<?phpinclude_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", "http://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>Modify the WeChat payment parameters into what you have applied for, then upload the web page to the WeChat payment directory and reply to the test account to the web page address. Users can implement a JS API payment.
3. Effect demonstration
Below is a page picture of the official DEMO initiated payment after it was modified.
Confirm transaction:
Enter the payment password:
Transaction successful:
The above is a compilation of WeChat Pay JS API information. I hope it can help everyone. Thank you for your support!