This is the 8th day of my participation in the August More Text Challenge. For details, see:August is more challenging

This episode brings the front end development of wechat JSAPI Payment (i.e., wechat pay in browser or wechat Pay in public account)

The information related to the payment in this article, including but not limited to the payment ID, wechat signature and official ID, has been incorrectly handled.

More articles on my Github and personal public number [Whole cliff Road], welcome to watch [front knowledge points], if there is benefit, don’t pay, little hands point a Star

Read this article

  • Wechat Pay permission has been opened
  • How to deal with the front end of wechat Payment
  • Issues related to wechat Pay have been resolved

The early stage of the work

Wechat Pay permission has been opened

  • Wechat application for payment authorization
  • Note that JSAPI payment is enabled, not H5 payment
  • Attached is the official opening authorization document, please fill in the relevant information correctly.

Photo – Wechat Pay permission opened (photo source: wechat official)

Wechat public platform configuration information

  • Set up payment directory (please fill in relevant information correctly)
    • Configuration path: Merchant platform -> Product Center -> Development configuration

Figure – wechat JSAPI payment – Payment directory configuration (image source: wechat official)
  • Configure the domain name for authorization payment
    • Configure the domain name in addition to the wechat public platform for configuration, but also need to wechat key file provided in the root directory of the configuration domain name, that is, the root directory of the server, in the browser access can be directly accessed.

Figure – Wechat webpage authorized domain name setting (photo source: wechat official)

The development of

Wechat payment process

  • Technical process

    • The front-end wechat authorization => submit the order to the backend => The backend generates the order ID => The front-end receives the order parameter including the order ID => Calls the wechat JDK => Sends relevant parameters to wechat => calls the wechat pay => wechat pay callback => End of the front-end => The user succeeds in payment and the back end receives the wechat payment callback (the wechat payment successful callback of the front end and the back end may not be synchronized at the same time)

  • Business process sequence diagram (picture from wechat official)

Front-end wechat authorization

  • Front end wechat authorization see my article

The front end initiates the order generation request

  • The front end initiates from the back endTo generate ordersrequest
  • After successfully creating an order and obtaining the order ID of the same order interface on wechat, adjust wechat Pay

The front end of wechat pay

  • Wechat Pay transmission

    • appId : "Wx2421b1c4370ec12a ", // the name of the public account, passed in by the merchant
    • timeStamp : "1395712654", // timestamp, number of seconds since 1970
    • nonceStr : "E61463f8efa94090b1f366cccfbbb555", / / a random string
    • package : "Prepay_id = u802345jGFJsDDgsDG888 ", // pass the parameter, prepay_id is the wechat order ID
    • signType : "MD5", // Wechat signature mode
    • paySign : "70 ea570631e4bb79628fbca99534c63ff7fadd89" / / WeChat signature

  • Adjust wechat Pay

invokeWxPay(wxPayData) { let self = this WeixinJSBridge.invoke('getBrandWCPayRequest', JSON.parse(wxPayData), Function (res){if(res.err_msg == "get_brand_wcpay_request: OK "){if(res.err_msg == "get_brand_wcpay_request: OK ") // Res.err_msg will return OK after the user paid successfully, but it is not guaranteed to be infallible. } else if (res.err_msg == "get_brand_wcpay_request:cancel") {else {// payment failure callback}})},Copy the code

Set the front-end payment callback

  • If the payment is successful, it is suggested to jump to the common order status page. Under normal circumstances, the successful confirmation of the order given by wechat to the back end will be very quick. However, exceptions inevitably exist, so it is suggested to add the order status confirmation page to confirm the order.

Q&A

response_typeParameter error

  • The reason:vue hashThe pattern will have a#If the callback address contains#If there is no escape, an error will be reported during authorization
  • Solution:redirect_uriuseencodeURIComponent()For transcoding

Payment failure missing parameter

  • Cause: If it is true that the parameters are complete, it is the problem of the pass-parameter format, and wechat adjusts the paymentWeixinJSBridge.invokePass the parameters in JSON format
  • Solution: Put the backendresponseParsed and passed in

Wechat login invalid, no scope permission

  • Cause: The service number is not authenticated orAPPIDFill in error or wechat Pay authentication expired
  • Solution: Re-authenticate the service number and checkAPPIDCheck whether the login authorization mode is changed

The current page URL is not registered

  • Cause: Payment directory or payment domain name is not set on wechat open platform
  • Solution: Configure the corresponding payment directory on the merchant platform for the merchant number used by the single interface

Write in the last

If you find this article helpful, please like it and share it with more people who need it!

Welcome to pay attention to [Quanzhendaolu] and wechat public account [Quanzhendaolu], to get more good articles and free books!
There is a need [Baidu] & [bytedance] & [JD] & [ape counselling] within the push, please leave a message oh, you will enjoy the VIP level extreme speed within the push service ~

Past oliver

Create a personalized Github profile

The interviewer asks you<img>What elements do you say

Special JS floating point number storage and calculation

Long [word] baidu and good interview after containing the answer | the nuggets technology essay in the future

Front end practical regular expression & tips, all throw you 🏆 nuggets all technical essay | double festival special articles

HTML Tabindex

A few lines of code to teach you to solve wechat poster and TWO-DIMENSIONAL code generation

Vue3.0 Responsive data principle: ES6 Proxy

Read on to make your interviewer fall in love with you

How to draw a fine line gracefully

Front-end performance optimization -HTML, CSS, JS parts

Front-end performance optimization – Page loading speed optimization

Front-end performance optimization – Network transport layer optimization