Wechat applet access wechat payment process

One 、 Basic introduction

1、 Payment scenario ： Click the payment button to invoke the wechat payment pop-up , Complete the payment after entering the correct password .
2、 The basic flow ： Click the pay button to generate an order first , Then call wechat on the back end api Interface to place unified orders , Send the data returned by the interface back to the front end to pull up the payment operation , Then asynchronously notify the payment result .

Two 、 Configuration information

1、 Wechat public platform configuration

Click on the function – Wechat payment , Connect with the registered wechat merchant platform

1、 Wechat merchant platform configuration

（1） Set up certificates and keys
Log in to wechat merchant platform , Click on the account center – API Security , Set the certificate and two keys （ Here, the two keys are set to the same .
（2） apply JSAPI payment
① Click on Product Center – My product , Click Apply JSAPI payment .
② Fill in the payment authorization directory
The payment authorization directory needs to be filled in the development configuration （ Backend server domain name ）

3、 ... and 、 coded

1、 Get the user's openId

There must be wechat users openid To wake up the payment function .openid Provided by wechat official account , It is the only user ID generated by wechat for consumers .
Access method ：https://blog.csdn.net/m0_46613429/article/details/125868514

2、 obtain prepay_id And payment signature verification paySign

Merchants first call the interface in the applet to generate a pre payment transaction order in the background of wechat payment service , Return the correct prepaid transaction and raise the payment .
（1） Call the interface to generate an advance payment order and get the order id

orderInsert(data).then(res => {
    
  if (res.data.code === 1) {
    
     this.getPayInfo(res.data.data.id)
   } else {
    
     wx.showToast({
    
       title: res.data.msg,
       icon: 'none'
     })
   }
})

（2） By order id Call the interface to get the parameters required for user payment

getPayInfo(id) {
    
  unifiedOrder({
    id}).then(res => {
    
		if(res.data.code === 1) {
    
			this.payMoney(res.data.data)
		} else {
    
      wx.showToast({
    
         title: res.data.msg,
         icon: "error"
       })
     }
  }
}

（3） adopt wx.requestPayment Method calls the start payment function

payMoney(moneyData) {
    
	wx.requestPayment({
    
      timeStamp: moneyData.timeStamp,
      nonceStr: moneyData.nonceStr,
      package: moneyData.packageValue,
      signType: moneyData.signType,
      paySign: moneyData.paySign,
      success(res) {
    
        
      },
      fail(res) {
    
        wx.showToast({
    
          title: " Failure to pay ！",
          icon: "error"
        })
      }
   })
}

Four 、 Process summary

（1） Applet get wechat openId And the order number is sent to the backstage
（2） Backstage basis openId Sign with the order number post Wechat unified single interface
（3） Get the information returned by wechat in the background xml The string parses the secondary signature and returns it to the front end
（4） Front end micro channel payment API