Call Payment in H5 within Wechat

Update Time：2025.01.07

Open a H5 webpage in the WeChat browser and execute JS to call a payment. API input and output data is in JSON format.

Tips：

WeixinJSBridge built-in objects are invalid in other browsers.

Parameter names in the list are case sensitive. Signature verification will fail if the case is incorrect.

1. API intro

Applicable object： Common mode Institutional mode

2. API definition

This API has no backend interface interaction, and the data in the list needs to be signed.

Name	Variable Name	Type	Required	Description
Official Account ID	appId	string[1,16]	Yes	The merchant can get it after registering an official account with the payment permission. Example: wx8888888888888888
Timestamp	timeStamp	string[1,32]	Yes	The current time. For details, see timestamp rules. Example: 1414561699
Random string	nonceStr	string[1,32]	Yes	Random string, not longer than 32 digits. It is recommended to use the random number generation algorithm. Example: 5K8264ILTKCH16CQ2502SI8ZNMTM67VS
An extension string for order details	package	string[1,128]	Yes	The value of the prepay_id parameter returned by the unified order placement API, in the format of prepay_id=*** Example: prepay_id=123456789
Signature method	signType	string[1,32]	Yes	Signature type. Default is RSA. This parameter is not used in the signature. Example: RSA
Signature	paySign	string[1,64]	Yes	Signature. For more information, see the paySign generation rules. Example: C380BEC2BFD727A4B6845133519F3AD6

Description of return result values

Return value	Description
get_brand_wcpay_request:ok	Payment successful
get_brand_wcpay_request:cancel	User cancellation during payment
get_brand_wcpay_request:fail	Payment failure

3. paySign generation rules

3.1.Construct a signature string

There are four lines in the signature string, and each line is a parameter. Each line ends with \n (Newline character; the ASCII code value is 0x0A), and even the last line shall ends with \n. If the parameter itself ends with \n, an additional \n is also required

Signature fields and formats:

1   Official Account ID 
2   Timestamp
3   Random string
4   An extension string for order details

Example of a string to be signed：

1   wx8888888888888888
2   1414561699
3   5K8264ILTKch16CQ2502SI8ZNMTM67VS
4   prepay_id=123456789

3.2. Calculating signature value：

The signature functions provided by most programming languages support signing signature data. It is strongly recommended that merchants call such functions, use the merchant's private key to sign the signature string with SHA256 with RSA, and perform Base64 encoding on the signature result to obtain the signature value.

Here we use command lines to demonstrate how to generate a signature.

1$ echo -n -e \
2"wx8888888888888888\n1414561699\n5K8264ILTKCH16CQ2502SI8ZNMTM67VS\nprepay_id=wx201410272009395522657a690389285100\n" \
3  | openssl dgst -sha256 -sign apiclient_key.pem \
4  | openssl base64 -A
5  uOVRnA4qG/MNnYzdQxJanN+zU+lTgIcnU9BxGw5dKjK+VdEUz2FeIoC+D5sB/LN+nGzX3hfZg6r5wT1pl2ZobmIc6p0ldN7J6yDgUzbX8Uk3sD4a4eZVPTBvqNDoUqcYMlZ9uuDdCvNv4TM3c1WzsXUrExwVkI1XO5jCNbgDJ25nkT/c1gIFvqoogl7MdSFGc4W4xZsqCItnqbypR3RuGIlR9h9vlRsy7zJR9PBI83X8alLDIfR1ukt1P7tMnmogZ0cuDY8cZsd8ZlCgLadmvej58SLsIkVxFJ8XyUgx9FmutKSYTmYtWBZ0+tNvfGmbXU7cob8H/4nLBiCwIUFluw==

Notice

The signType parameter does not participate in signing, but needs to be passed, and its default value is "RSA". The generated signature needs to be passed through the paySign field.

The sample code is as follows:

Example

1function onBridgeReady() {
2	WeixinJSBridge.invoke(
3		'getBrandWCPayRequest', {
4			"appId": "wx2421b1c4370ec43b", //Official Account name, passed by the merchant 
5			"timeStamp": "1395712654", //Timestamp, number of seconds since 1970 
6			"nonceStr": "e61463f8efa94090b1f366cccfbbb444", //Random string 
7			"package": "prepay_id=u802345jgfjsdfgsdg888",
8			"signType": "RSA", //WeChat signature method:
9			"paySign": "70EA570631E4BB79628FBCA90534C63FF7FADD89" //WeChat signature
10		},
11		function(res) {
12			if (res.err_msg == "get_brand_wcpay_request:ok") {} // The above method can be used to judge the value returned from the frontend. WeChat team reminds you that res.err_msg will return OK after users make payment successfully, but this value is not guaranteed to be absolute reliable.
13		}
14	);
15}
16if (typeof WeixinJSBridge == "undefined") {
17	if (document.addEventListener) {
18		document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
19	} else if (document.attachEvent) {
20		document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
21		document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
22	}
23} else {
24	onBridgeReady();
25}