[WeChat mini program series: 3] Front-end implementation of WeChat payment and withholding signing

1. Preface

WeChat payment is a relatively common function. Here we mainly talk about some aspects of the front-end implementation in the entire process. In fact, the official documents are also very detailed. You can directly read the official documents. If you think the document is more complicated, you can directly read what I wrote ~ jump to the official document.

2. General payment process

WeChat payment: It is most important to clarify the process. Take purchasing an item A as an example. Mainly explains the process that the front end is responsible for.

1. You must register a mini program, and then go to the official website where the mini program has WeChat payment access to apply for a merchant account. I won’t go into details about this business configuration.
2. The front end uses wx.login() in the mini program to obtain the user login credential code and passes it to the back end. The backend can exchange code for openid, etc.
3. The front-end passes the ID of product A to the back-end. As for what this ID is, it is to ensure that the product is unique. This ID is distinguished by the back-end creating a custom table and attribute storage in the database.
4. The backend creates an order, calls the prepaid order interface provided by WeChat, obtains the payment parameters, and passes the payment parameters to the frontend after obtaining them.
5. The front end obtains the payment parameters passed from the back end and saves them. It calls the wx.requestPayment payment method provided by WeChat and fills in the payment parameters. After execution, the password input payment screen process can be carried out.
6. After the user completes the payment, the WeChat backend will actively call the content of the callback interface written by the backend, in which the backend can write the status logic of changing the product order, etc.

For the official flow chart, please refer to:

3. Payment front-end code part

Once you understand the process, the front-end operation is actually very simple.

1. To get the code, just pass the code, product ID, etc. to the backend through a customized interface.

  wx.login({
    
    
          success: function(res) {
    
    
            console.log(res.code)  
            let code=res.code;
          }
        });

2. After passing it to the backend in step 1, the return parameters should be the parameters required for payment. Save them first. The following are probably the most common ones:

     "timeStamp":'',
     "signType":'',
     "package":'',
     "paySign":'',
     "nonceStr":'',
     "appId":'',

Official Document

3. Call wx.requestPayment on the front end, pass in the input parameters, and the payment will be activated when executed: Official Document

   wx.requestPayment({
    
    
    "timeStamp":'',
     "signType":'',
     "package":'',
     "paySign":'',
     "nonceStr":'',
     "appId":'',
     success(res) {
    
     
        // 支付成功后这里写进行对应操作
       console.log('支付成功!',res)
     },
     fail(res) {
    
    
       console.log('支付失败!',res)
     }
  })

4. Signing process and code:

In addition to payment, signing contracts in WeChat mini programs is also very common. Signing is similar to authorizing the activation of password-free payment or automatic deduction services or withholding. For example, it can be used in scenarios such as automatic deduction of fares by swiping the code while taking a ride. First, you need to activate the entrusted withholding service on the official website. Let’s talk about the code implementation process on the front end. The front-end implementation is actually very simple. It is recommended to read the official documents to make it clear: Signing Official Documents

Just simply call the following method directly for deduction:

wx.navigateToMiniProgram({
    
    
    appId:'wxbd687630cd02ce1d', // 固定
    path:'pages/index/index', // 固定
    extraData:{
    
      // extraData是需要后端返回的
        appid:'wx426a3015555a46be',
        contract_code:'122',
        contract_display_account:'张三',
        mch_id:'1223816102',
        notify_url:'https://www.qq.com/test/papay',
        plan_id:'106',
        request_serial:123,
        timestamp:1414488825,
        sign:'FF1A406564EE701064450CA2149E2514'
    },
success(res) {
    
    
    // 成功跳转到签约小程序 
},
fail(res) {
    
    
    // 未成功跳转到签约小程序 
}
})

Conclusion

There is a documentary that tells the story of Faxian's "Buddha Kingdom". It's quite interesting.

My Bilibili Space
Gitee warehouse address: All special effects source code
Other articles:
~Follow me to see more simple creative special effects:
text smoke effect html+css+js
surround reflection loading special effect html+css
bubble floating background special effect html+css
simple Clock special effect html+css+js
cyberpunk style button html+css
imitation NetEase Cloud official website carousel image html+css+js
water wave loading animation html+css
navigation bar scrolling gradient effect html+css+js
book page turning html+css
3D Three-dimensional photo album html+css
neon drawing board effect html+css+js
note some css attribute summary (1)
Sass summary note
... Wait and
go to my homepage to see more~