Shulou(Shulou.com)06/03 Report--

This article mainly introduces the example analysis of H5 payment developed by Wechat. The article is very detailed and has certain reference value. Interested friends must finish reading it!

I. introduction

H5 payment is a non-Wechat browser payment method developed on the basis of official account (you need to apply for payment authority separately), which can meet the needs of WeChat Pay on the mobile H5 page outside Wechat.

Test address

Http://wxpay.weixin.qq.com/pub_v2/pay/wap.v2.php

Http://wxpay.weixin.qq.com/mch/pay/h6.v2.php

Effect picture

Flow chart

II. Preparation of commodity information

The main purpose is to define the name and price of the commodity, as well as the transaction number. The code is as follows.

Include_once (".. / WxPayPubHelper/WxPayPubHelper.php"); / / use the unified payment interface $unifiedOrder = new UnifiedOrder_pub () / / set unified payment interface parameters / / set required parameters / / appid has been filled, merchants do not need to repeat / / mch_id has been filled, merchants do not need to repeat / / noncestr has been filled, merchants do not need to repeat / / spbill_create_ip has been filled in, merchants do not need to repeat / / sign has been filled, merchants do not need to repeat $unifiedOrder- > setParameter ("body", "H5 payment Test") / / Product description $timeStamp = time (); $out_trade_no = WxPayConf_pub::APPID. "$timeStamp"; $unifiedOrder- > setParameter ("out_trade_no", "$out_trade_no"); / / merchant order number $unifiedOrder- > setParameter ("total_fee", "1"); / / Total amount / / $unifiedOrder- > setParameter ("notify_url", WxPayConf_pub::NOTIFY_URL); / / Notification address $unifiedOrder- > setParameter ("trade_type", "WAP") / / transaction type / / optional parameter. Merchants can choose $unifiedOrder- > setParameter ("device_info", "100001") according to the actual situation; / / device number

The above parameters are finally encapsulated into parameters similar to XML as follows

1 / / 100001 1237905502 2. Invoke a unified payment request

Send the above XML to the unified payment interface

Https://api.mch.weixin.qq.com/pay/unifiedorder

Get the following XML data

So you get a prepayid.

II. DeepLink

The merchant server calls the unified order issuing API to request an order. For api, please see Public api [Unified order issuing] (trade_type needs to be defined as WAP in the API). Wechat will return to the merchant prepayid, and the merchant will generate deeplink in a fixed format. Users can click deeplink to call up WeChat Pay.

Deeplink format:

Weixin://wap/pay?appid%3Dwxf5b5e87a6a0fde94%26noncestr%3D123%26package%3D123%26prepayid%3Dwx20141203201153d7bac0d2e10889028866%26sign%3D6AF4B69CCC30926F85770F900D098D64%26timestamp%3D1417511263

The steps to generate deeplink are as follows:

Step 1: assemble the parameters in URL format, and encode the $value part with URL to generate string1:

String1: key1=Urlencode ($value1) & key2=Urlencode ($value2, &...

Step 2: Urlencode the string1 as a whole to generate string2:

String2=Urlencode (string1)

Step 3: concatenate the prefix to generate the final deeplink

Examples are as follows:

String1:

Appid=wxf5b5e87a6a0fde94&noncestr=123&package=WAP&prepayid=wx201412101630480281750c890475924233&sign=53D411FB74FE0B0C79CC94F2AB0E2333×tamp=1417511263

URLEncode the whole string1 again.

String2:

Appid%3Dwxf5b5e87a6a0fde94%26noncestr%3D123%26package%3DWAP%26prepayid%3Dwx201412101630480281750c890475924233%26sign%3D53D411FB74FE0B0C79CC94F2AB0E2333%26timestamp%3D1417511263

Plus the protocol header weixin://wap/pay? Get the final deeplink

Weixin://wap/pay?appid%3Dwxf5b5e87a6a0fde94%26noncestr%3D123%26package%3DWAP%26prepayid%3Dwx201412101630480281750c890475924233%26sign%3D53D411FB74FE0B0C79CC94F2AB0E2333%26timestamp%3D1417511263 field name variable name required type sample value description Public account IDappid is String (32) wx8888888888888888 Wechat assigned public account ID random string noncestr is String (32) 5K8264ILTKCH16CQ2502SI8ZNMTM67VS random string, no longer than 32 bits. Recommended random number generation algorithm order details extension string package is the String (32) WAP extension field, fixed fill in WAP prepaid transaction session ID prepayid is the prepaid reply ID returned by String (64) wx201410272009395522657a690389285100 Wechat unified order issuance API, used in subsequent API calls, this value is valid for 2 hours signature sign is String (32) C380BEC2BFD727A4B6845133519F3AD6 signature, see signature generation algorithm timestamp timestamp is String (32) 14561699

For the current time, see timestamp rules for other details.

Development documentation: https://pay.weixin.qq.com/wiki/doc/api/wap.php?chapter=15_1

III. New version of process

1. The user completes and places the order on the merchant side and uses WeChat Pay to make payment.

2. The merchant backend initiates an order request to WeChat Pay (call the unified order issuing API) Note: transaction type trade_type=MWEB

3. WeChat Pay verifies the authority of merchants

4. The unified API for issuing orders returns payment-related parameters to the merchant backend, such as payment jump url (parameter name "mweb_url", that is, the Wechat transfer page address in the flowchart).

5. The merchant backend receives the return parameters of the unified order issuing API, and returns the mweb_url to the front end.

6. Merchants visit the Wechat transit page mweb_url through the front-end page (this step WeChat Pay will verify the refer to determine whether the source of the request is legitimate)

7. WeChat Pay's cashier is actively aroused by the transit page mweb_url.

8. WeChat Pay's cashier is aroused and closes the mweb_url transfer page at the same time.

9. The user completes the payment at WeChat Pay's cashier.

The above is all the contents of this article "sample Analysis of H5 payments developed by Wechat". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.