Vue is separated before and after to adjust WeChat payment

This article shares the specific code of Vue to separate and adjust WeChat payment before and after, for your reference. The specific content is as follows

@ VUE adjusts WeChat Pay

VUE separates and transfers WeChat payments

Payment is very simple, but every time it is used directly on the Internet, and the elderly remember it, so they record it by themselves to facilitate quick pasting and copying in the future;

first step:VUE requires installation of WeChat payment module

// npm install weixin-js-sdk
import wx from "weixin-js-sdk";

Step 2:Packaging WeChat Payment Method

wexinPay(data, cb, errorCb) {
  //Get the data passed in the background  let appId = ;
  let timestamp = ;
  let nonceStr = ;
  let signature = ;
  let packages = ;
  let paySign = ;
  let signType = ;
  ('Initiate WeChat Pay')
  //WeChat payment is launched below  ({
   debug: false, // Turn on debug mode, the return values of all APIs called will be alerted on the client. To view the passed parameters, you can open them on the PC side. The parameter information will be printed through the log and will only be printed on the PC side.   appId: appId, // Required, unique identification of the official account   timestamp: timestamp, // Required to generate a signature time stamp   nonceStr: nonceStr, // Required to generate a random string of signatures   signature: signature, // Required, signature, see Appendix 1   jsApiList: ['chooseWXPay'] // Required, a list of JS interfaces that need to be used, and the list of all JS interfaces is shown in Appendix 2  });
  (function () {
   ({
    timestamp: timestamp, // Pay the signature timestamp, note that all timestamp fields used in WeChat jssdk are lowercase.  However, the latest version of the payment background uses the timeStamp field name to generate signatures to capitalize the S character in it    nonceStr: nonceStr, // Payment signature random string, no longer than 32 digits    package: packages, // The prepay_id parameter value returned by the unified payment interface, the submission format is such as: prepay_id=***)    signType: signType, // Signature method, default is 'SHA1', and payment must be passed in 'MD5' when using the new version    paySign: paySign, // Payment signature    success: function (res) {
     // Callback function after successful payment     cb(res);
    },
    fail: function (res) {
     //Failed callback function     errorCb(res);
    }
   });
  });
  (function (res) {
   // If the config information verification fails, an error function will be executed. If the signature expires, the verification will fail. For specific error messages, you can open the debug mode of config to view, or you can view it in the returned res parameter. For SPA, you can update the signature here.   /*alert("config information verification failed");*/
  });
 }

Step 3:Request data from the background successfully Obtain Transfer to WeChat Payment Method Recruiting WeChat Payment

 //Request the background interface to obtain data and prepare for WeChat payment  ("user/recommend", data).then(res =&gt; {
  //In the successful state  if () {
   //Storage WeChat payment data data   let data = ;
   ("WeChat Payment will be redirected to");
   //The function is packaged (that is, to call WeChat payment)   (
   {
    appId: ,
    nonceStr: ,
    package: ,
    paySign: ,
    signType: ,
    timeStamp: 
   },
   //Successful callback function   res =&gt; {
    that.$({ path: "/vip" });
   }
   );
  } 
  else {
   that.$();
 }
});

PS: Note that the data is in line with each other. Sometimes the backend may confuse withdrawal and payment to ensure the correctness of the data;

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.