簡單的記錄一次微信支付(v2)

NATIVE支付

一開始按照文檔來做NATIVE支付，沒有遇到問題。調用統一下單API，很順利的得到用於支付的url，前端拿到url通過QR轉成二維碼，用戶掃碼即可支付。

1、 整個對象

const unifiedOrderBody = {
  appid:'公衆賬號ID',
  mch_id: '商戶號',
  nonce_str: '隨機字符串',
  sign_type:'簽名類型',
  body: `商品描述`,
  out_trade_no: `商戶訂單號（長度不能超過32，筆者建議生成的訂單號不要超過25，可以在訂單號後加_NATIVE\_JSAPI等標識來避免出現重複訂單的問題）`,
  total_fee: 訂單金額（分）,
  spbill_create_ip: '終端IP',
  notify_url: '通知地址，完成支付後微信將調用這個接口',
  trade_type: 'NATIVE',
};

2、按規矩生成簽名

const raw = (args) => {
    let keys = Object.keys(args);
    keys = keys.sort();
    const newArgs = {};
    keys.forEach(function(key) {
        newArgs[key] = args[key];
    });
    let string = '';
    for (const k in newArgs) {
      string += '&' + k + '=' + newArgs[k];
    }
    string = string.substr(1);
    return string;
  };
let stringA = raw(unifiedOrderBody)
stringA = stringA +  '&key=' + '你的密鑰'
const sign = crypto.createHash('簽名類型').update(combineStr).digest('hex')

3、按規矩將unifiedOrderBody以及剛生成的sign弄成xml的格式，調用微信的統一下單接口。

  const obj2xml = (obj) => {
    return new Promise(function(resolve, reject) {
      const builder = new xml2js.Builder({
        cdata: true,
        rootName: 'xml',
      });
      try {
        const xmlStr = builder.buildObject(obj);
        resolve(xmlStr);
      } catch (err) {
        reject(err);
      }
    });
  }

// 發請求就不寫啦，得到的數據也是xml的，需要轉化一下才好用。

  const xml2obj = (xmlStr) {
    return new Promise(function(resolve, reject) {
      const parseString = xml2js.parseString;
      parseString(xmlStr, function(err, result) {
        if (err) {
          reject(err);
        } else {
          const data = result['xml'];
          const newData = {};
          Object.keys(data).forEach(function(key, idx) {
            if (data[key].length > 0)
              newData[key] = data[key][0];
          });
          resolve(newData);
        }
      });
    });
  }

4、最後拿到code_url返回給前端就行了。

JSAPI支付

openid

由於是在微信瀏覽器內做支付，統一下單接口需要用戶的openid，獲取openid之前，需要前端訪問

`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${APPID}&redirect_uri=${encodeURIComponent(window.location.href)}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`

由於這裏只做簡單的獲取openid所以scopen=snsapi_base。
當成功拿到拿到code後，會自動跳轉到redirect_uri，並在連接後拼上code=你的code，之後前端再拿着這個code，訪問自家後端獲取openid的接口。
後端的做法則是訪問微信提供的接口，由於涉及到appsecret，所以這一步放在後端執行：

`https://api.weixin.qq.com/sns/oauth2/access_token?appid=${APPID}&secret=${APP_SECRET}&code=${code}&grant_type=authorization_code`

之後將這個返回給前端，就可以得到openid了。

支付

拿到openid之後就可以開始做微信支付了，帶上order和openid調用後端提供的下單接口：

1、和NATIVE支付幾乎一摸一樣，整個對象

const JSAPIUnifiedOrderBody = {
      ...unifiedOrderBody,
      trade_type: 'JSAPI',
      openid: openid,

2、按規矩生成簽名 (同NATIVE)

3、按規矩將unifiedOrderBody以及剛生成的sign弄成xml的格式，調用微信的統一下單接口。(同NATIVE)

4、調用微信的統一下單接口之後，根據文檔需要重新生成sign。

    const wxResponse = await 調用微信統一下單()
    const timestamp = parseInt(String(new Date().getTime() / 1000)) + '';
    const signBody = {
          appId: '你的APPID', // 一定
          timeStamp: timestamp, // 要注意
          nonceStr: Math.random().toString(36).substr(2, 15), // key的
          package: `prepay_id=${wxResponse.prepay_id}`, //  大小寫！！！
          signType: 'MD5', // 用你自己的定的加密方式
    };
    let combineStr =raw(signBody);
    combineStr = combineStr + '&key=' + '你的key';
    const sign = crypto.createHash('md5').update(combineStr).digest('hex');
    signBody.sign = sign.toUpperCase();
    return {...signBody}

---

這裏最要主的是signBody裏每個key的大小寫，你可能有用一些別人提供的SDK或者之前自己寫的raw函數，這些方法在執行的時候可能執行了key.toLowerCase()將所有的key的大小寫給忽略的，但是這個JSAPI的簽名是對大小寫敏感的，和微信的別的接口有區別。

所以最好是在拼寫combineStr的時候將值打印出來，看是不是大小寫正確

---

5、前端拿到signBody裏的數據後

        window.WeixinJSBridge.invoke(
          'getBrandWCPayRequest', {
            "appId": APPID,
            "timeStamp": signBody.timeStamp,
            "nonceStr": signBody.nonceStr,
            "package": signBody.package,
            "signType": signBody.signType,
            "paySign": signBody.sign,
          },
          function (res) {
            if (res.err_msg == "get_brand_wcpay_request:ok") {
            } else {
            }
          });

完事。

如有錯誤，還請指出，歡迎批評。