The official documentation

WeChat pay

Pay.weixin.qq.com/wiki/doc/ap…

Wechat authorization to obtain the code

Developers.weixin.qq.com/doc/offiacc…

The preparatory work

  • Wechat public platform enterprise account
  • Merchants,
  • Open JSAPI payment permission
  • Set the page authorization domain name, and is your site’s domain name address
  • Basic interface permissions, especially JSSDK part of the permissions, to ensure that as far as possible open
  • Pay.weixin.qq.com/wiki/doc/ap…

1. Obtain the code and send it to the background

1.1 Obtained the Code

// get code getOpendId(appId) {const code = this.getQueryString(const code = this.getQueryString)'code')
  this.code = code
  const url = encodeURIComponent(window.location.href)
  if(! code) { window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${url}&response_type=code&scope=snsapi_base&state=0#wechat_redirect`
  } else} this.wxscope () {this.wxscope ()}}Copy the code

Parameters that

instructions

  • The method in my code does not pop up the authorization page, directly jump, can only get the user OpenID
  • If you want to pop up the authorization page, set the scope value in the connection to snsapi_userinfo, and obtain the nickname, gender, and location through openID. And, even in the absence of attention, as long as the user’s authorization, can also access their information

1.2 Sending the Code to the Background

// wechat authorized login interfacewxScope() {const code2 = {code: this.code // background needed code} qryWebAccessToken(code2). Then (res => {if(res.openid) {this.openid = res.openid // Get user's openID}else {
      console.log('wechat login failed - Authorization')
      this.fail = true
      this.wx = true
      Toast('Wechat login failed')
      return}})},Copy the code

2. Wechat Pay – JSSDK Payment

2.1 The process of introducing jS-Weixin module is as follows:

Import modules — generate signatures (required by wx.config) — return parameters with interfaces — invoke WxPay.

2.1.1 Package installation (Weixin-js-SDK), module introduction

npm i (weixin-js-sdk)

import wx from 'weixin-js-sdk'

2.1.2 Generating Signatures (Required by wx.config)

This is a file I’ll call common.js, which I’ll use later when I wake up to pay

import wx from 'weixin-js-sdk
var AppId = ''
var Timestamp = ''
var Signature = ''
var Noncestr = ''function GetSignature (the callback) {/ / this is called the background for signature qryWxSignature interface qryWxSignature ({url: window. The location. The href. Split ('# ') [0]
  }).then((data) => {
    AppId = data.appId
    Timestamp = data.timestamp
    Signature = data.signature
    Noncestr = data.nonceStr
    wx.config({
      beta: true,
      debug: false, appId: AppId, timestamp: Timestamp, nonceStr: Noncestr, signature: JsApiList: [jsApiList: [jsApiList: [jsApiList: [jsApiList: [jsApiList: [jsApiList: ['checkJsApi'.'onMenuShareTimeline'.'onMenuShareAppMessage'.'onMenuShareQQ'.'onMenuShareWeibo'.'hideMenuItems'.'showMenuItems'.'hideAllNonBaseMenuItem'.'showAllNonBaseMenuItem'.'translateVoice'.'startRecord'.'stopRecord'.'onRecordEnd'.'playVoice'.'pauseVoice'.'stopVoice'.'uploadVoice'.'downloadVoice'.'chooseImage'.'previewImage'.'uploadImage'.'downloadImage'.'getNetworkType'.'openLocation'.'getLocation'.'hideOptionMenu'.'showOptionMenu'.'closeWindow'.'scanQRCode'.'chooseWXPay'.'openProductSpecificView'.'addCard'.'chooseCard'.'openCard'.'openWXDeviceLib'.'closeWXDeviceLib'.'configWXDeviceWiFi'.'getWXDeviceInfos'.'sendDataToWXDevice'.'startScanWXDevice'.'stopScanWXDevice'.'connectWXDevice'.'disconnectWXDevice'.'getWXDeviceTicket'.'WeixinJSBridgeReady'.'onWXDeviceBindStateChange'.'onWXDeviceStateChange'.'onScanWXDeviceResult'.'onReceiveDataFromWXDevice'.'onWXDeviceBluetoothStateChange'
      ]
    })
    wx.ready(function () {
      console.log(callback, 'callback')
      if (callback) callback()
    })
  })
}
export {
  GetSignature
}
Copy the code

2.1.3 Return parameters with interface — invoke WXPay

Reference address: developers.weixin.qq.com/doc/offiacc…

// Import {GetSignature} from'.. /.. /.. /.. /static/common'
import wx from 'weixin-js-sdk'
Copy the code
// Click paypayNowGetSignature(() => {// wxpayPreOrder is the background wechat payment interface WxpayPreOrder (this.paymsg).then(res => {wx.choosewxPay ({// pay the signature timestamp, note that all uses timestamp fields in wechat JSSDK are lowercase. TimeStamp: res.timeStamp, // Payment signature random string, no longer than 32 bits nonceStr: res.nonceStr, package: Res.package, // The prepay_id parameter returned by the unified payment interface. The submission format is as follows: prepay_id=\*\*\*) signType: res.signtype, // Signature mode. The default value is'SHA1'To use the new version of the payment needs to be passed in'MD5'PaySign: res.paySign, // Pay signature success:function(res) {// Callback function after successful payment}, fail:function(res) {
              console.log('Payment failure')
            },
            complete: function(res) {
              console.log(res, 'complete')}})})})}Copy the code