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

This article mainly introduces how Wechat to achieve JSAPI payment, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Recently received new demand, need to introduce WeChat Pay in the official account. WeChat Pay has used Native face-to-face and H5 payment before. Native payment has two disadvantages:

First, Navicat payment will eventually generate a Wechat link in the format: weixin://xxx. There is nothing wrong with us for Wechat to visit the link directly, but there is no problem with opening the payment interface successfully, but an error occurred at the time of payment: the current transaction does not support launching by clicking on the message link.

Second: convert the payment link into a QR code to scan the payment. The second drawback is to save the picture locally and scan the local QR code by Wechat: selecting a QR code from the album is not supported.

What are the disadvantages of H5 payment? H5 payment is normally used in an external browser and will jump directly from the external browser to Wechat to complete the payment. In the H5 project, we have been using H5 WeChat Pay normally. When we receive the official account payment, the first reaction is to use H5 payment directly, so that users can use WeChat Pay to open it with a browser. But when we pay for access, we find the disadvantages of H5 payment: we can only use H5 payment in external browsers, but we can't use WeChat Pay in Wechat. So the most appropriate payment method at this time is JSAPI payment.

Since I have no contact with the official account developer, the first reaction is to take a look at the payment documents first:

Https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_1

To develop directly according to the document, first go to the Wechat merchant platform to set up the payment directory:

The official account needs to set an authorized domain name:

Let's take a look at the JSAPI payment business process:

The server actually creates the order and then invokes the unified order issuing API. Here, let's take a look at the document of unified order issuing API:

Https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1

There is a parameter openid in the document. The interpretation of this parameter document is: when trade_type=JSAPI (that is, JSAPI payment), this parameter must be passed. This parameter is the unique identity of Wechat users under the corresponding appid.

So we can sort out the overall logic:

1. When the front end jumps to the authorization interface, the user successfully obtains the code and then adjusts the API to get the user openid. two。 The server saves the user's prepaid order. 3. The server invokes the unified order issuing interface and returns the parameters to the client. 4. The client adjusts the payment, and the payment executes the payment callback successfully.

The frontend jumps to the authorization interface. The parameters of the jump require us to take a look at:

What you need to pay attention to here is the redirect_uri parameter. A successful user authorization will jump to redirect_uri, and the code parameter will be concatenated later. Redirect_uri must be the address under the authorized domain name of the official account we just set up, and it needs to go through urlEncode.

After clicking authorization, call the API to exchange code for user openid. Post the key code:

We can successfully obtain the user's openid through this API. We can test it:

You can see that the user openid has been successfully obtained. Then we create a prepaid order for the user, and only the key code is posted here:

The product data is saved successfully. Call the unified order issuing API to obtain the parameter information returned by the unified order issuing API:

We can print the returned parameter information:

There is only one last step left for the client to initiate payment. Let's take a look at the document in Wechat where H5 adjusts payment:

First, encrypt the parameters according to the signature encryption rules to generate a signature paySign. The encryption algorithm rules are as follows:

First, implement the following signature generation algorithm:

When the user clicks the WeChat Pay button, call the server API to create a prepaid order and return the unified order issuing API parameters to the client:

Then the client adjusts the payment, and the WeixinJSBridge built-in object will only take effect in Wechat browser, so an error will be reported when it is opened in other browsers. Post the key code:

We can test whether we can adjust the payment interface:

When we complete the payment, the Wechat server will asynchronously execute the callback method set by our unified order API. The callback method needs to pay special attention to the xml format of the Wechat callback to Wechat:

When our payment is completed, Wechat will return get_brand_wcpay_request:ok to the client. The client can directly jump to the specified interface when the payment is completed, where the JSAPI payment is successfully completed:

Thank you for reading this article carefully. I hope the article "how to achieve JSAPI payment by Wechat" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.