How to implement H5 page payment with built-in browser in WeChat payment _ javascript skills

This article mainly introduces how to pay for the H5 page of the built-in browser. if you need more information, refer to the following, so I tried it. I just wanted to say it was really difficult, especially when debugging was inconvenient.

This is the official API documentation API

Payment preparation

Apply for a public account and apply for payment. this is very simple.
After the application is completed, configure the "payment authorization Directory", "test authorization Directory", and "test whitelist" on the "development configuration" Tab on the "payment" page of the public platform page"
Find "AppID (application ID)" and "AppSecret (Application key)" in the "Developer Center" on the public platform page )"
Find the merchant ID allocated for payment on the merchant platform, and configure a merchant's payment key.

Procedure

First, get the prepay_id for payment through the payment api. here we need to use the "AppID (application ID)" and "AppSecret (Application key)" mentioned above )", after "payment assigned merchant ID", "Merchant Payment key", and other parameters (see the development documentation for details) are encrypted with MD5 into a signature (first signature) to obtain prepay_id, use prepay_id and some other parameters (see the development documentation for details) to encrypt the data into a signature using MD5 (the second signature), and then use the js API provided by the built-in browser at the front end, WeixinJSBridge. invoke to call the payment pop-up page. the above second signature is used here

The code is as follows:

$. Get ('/xxx', function (data) {if (data & data! = "") {Var _ data = $. parseJSON (data) [0]; if (parseInt (_ data. userAgent) <5) {alert ('your version is earlier than 5.0, payment is not available! '); Return false;} WeixinJSBridge. invoke ('getbrandwcpayrequest', {'appid ': _ data. appId, 'timestamp': _ data. timeStamp, 'noncestr': _ data. nonceStr, 'Package': 'prepay _ id = '+ _ data. packageOne, 'signtype': _ data. signType, 'paysign': _ data. paySign}, function (res) {if (res. err_msg = 'get _ brand_wcpay_request: OK ') {alert ('payment successful, return to the order list! ');} Else if (res. err_msg = 'get _ brand_wcpay_request: cancel') {alert ('cancel payment! ');}});}});

Notes for several easy failures

The payment link does not match the link configured on the development platform

A total of two signatures are required, and the required parameters are different. the signature used in JS is the second signature. do not confuse the parameters that must be passed.

If the body contains Chinese characters and needs to be escaped, there are still some problems that have not been completely solved, that is, the location payment does not have a time to determine the expiration time. if it takes too long to stay on the payment pop-up layer, this order may have expired on our website, but it can still be paid successfully in the payment process. if someone knows how to solve this problem, I hope to tell the solution.