Wechat applet wechat payment overview

One 、 Preparation before development

Register a wechat merchant number 、 Wechat applet opens wechat payment , Get and record your merchant number 、 Applet appid、 Applet AppSecret、APIv3 secret key , Download the certificate on the platform , And record Certificate serial number
To be specific, see Official documents

Two 、 client

（1） Get the user's openid And store , You can see me Previous posts Or official documents

（2） Send a request to the background to generate an advance payment transaction order , And adjust wechat payment

  // Submit purchase 
  submitOrder(){
    
    let openid=app.globalData.openid;
    // Unified order 
    // Create purchase advance order 
    let self=this;
    wx.showLoading({
    
      title: ' Loading ',
    })
    let data={
    
    // According to need 
      order_number: this.data.order_number,
      openid,
      user_id: app.globalData.userInfo.id,
      //...
    }
    wx.request({
    
      url: app.globalData.requestUrl+'/wx/prepay', 
      data,
      method:'POST',
      header: {
    
        'content-type': 'application/x-www-form-urlencoded' 
      },
      success (res) {
    
        wx.hideLoading()
        if(res.data.status===0){
    
          // I'm going to pay WeChat 
          wx.requestPayment(
            {
    
            timeStamp: res.data.data.timestamp,// Time stamp 
            nonceStr: String(res.data.data.nonceStr),// Random string 
            package: res.data.data.package,// Order details extension string 
            signType: res.data.data.signType,// Signature method 
            paySign: res.data.data.paySign,// Signature 
            success:function(res){
    
              wx.showToast({
    
                icon:'none',
                title: ' Successful payment ',
                mask:true,
                duration:2000
              })
            },
            fail:function(res){
    
              
            },
            })
        }else{
    
          wx.showToast({
    
          icon:'none',
          title: res.data.msg
        })
        }
      }
    })
  },

3、 ... and 、 backstage

The background operation is complicated , More need to see Official document

1、 Build and configure the development environment , Use the official development library , Encapsulates signature generation 、 Signature verification 、 Sensitive information plus / Decrypt 、 Media file upload and other basic functions
• wechatpay-apache-httpclient, Suitable for use Apache HttpClient Handle HTTP Of Java developer
• wechatpay-php（ recommend ）、wechatpay-guzzle-middleware, Apply to PHP developer
• wechatpay-go, Apply to Go developer

2、 Create and load merchant private key 、 Load platform certificate 、 initialization httpClient The general method of （ See the official documents for details , Or look at the development library above GitHub The following usage introduction ）

3、 Small program orders
（1） Using the official interface , Official interface document

POST
‘https://api.mch.weixin.qq.com/v3/pay/transactions/jsapi’, // request URL

Must pass parameters ：
appid ： application ID
mchid ： Direct merchant number
description ： Commodity Description
out_trade_no ： Merchant order number
notify_url ： Notice address
amount：{
total： Total sum
}
payer：{
openid ： User ID
}

Get parameters prepay_id // Prepaid transaction session ID

（2） Generate signature ：paySign Generate rules 、 Please refer to The app starts paying API Interface document （ Use the official development library , Conduct rsa encryption ）
（3） Return... To the client
timeStamp: Time stamp
nonceStr: Random string
package: The applet orders the interface to return prepay_id Parameter values , The submission format is as follows ：prepay_id=***
signType: The interface V3 Version only supports RSA
paySign: Signature （ The signature generated above ）

4、 In the above notify_url Notice address Receive notification of wechat payment results , And then operate the database