node.js+vue實現支付寶支付(沙箱)完整版,親測可用

有寫到,記錄下支付寶支付

demo 請狠狠的戳這裏 ¥ https://download.lllomh.com/cliect/#/product/J302659722615829

沙箱環境 (Beta) 是協助開發者進行接口功能開發及主要功能聯調的輔助環境，模擬了開放平臺部分產品的主要功能和主要邏輯。可用於在產品上線前瞭解環境、組合和調試各類接口。

沙箱環境配置

打開 支付寶開發者中心 並登陸，點擊 => 進入個人控制檯（也可能登陸以後自動進入）， 不須要企業帳戶,我的的也能夠

​

在開發者中心中點擊開發服務下的研發服務，就進入沙箱環境頁面了，

​

在沙箱應用能夠看到基本配置。

​

密鑰配置

點擊 RSA2(SHA256)密鑰 設置，

​

點擊 支付寶密鑰生成器，下載對應版本的工具，下載完成後將工具安裝在不包含空格的目錄中，

​

而後點打開，點擊生成密鑰，便可生成商戶應用私鑰與商戶應用公鑰。而後點擊複製公鑰。

​

回到沙箱界面，選擇公鑰，並把剛剛複製的公鑰粘貼進去；

​

而後就能夠獲得支付寶公鑰了，代碼中會用到。

​

1,封裝配置

alipayUtil.js

​

const AlipaySdk = require('alipay-sdk').default; // 引入 SDK
const alipaySdk =  new  AlipaySdk({
  appId: '2021000117615613', // 開放平臺上建立應用時生成的 appId
  signType: 'RSA2', // 簽名算法,默認 RSA2
  gateway: 'https://openapi.alipaydev.com/gateway.do', // 支付寶網關地址 ，沙箱環境下使用時須要修改
  alipayPublicKey: '', // 支付寶公鑰，須要對結果驗籤時候必填
  privateKey: '', // 應用私鑰字符串
});
module.exports = alipaySdk;

//正式環境只要把上述換成正式的就能夠了

2,接口定義

建立支付寶須要的表單表

const formData = new AlipayFormData();
    formData.setMethod('get');

把 通知加進去(如須要的話)

formData.addField('notifyUrl', 'https://www.baidu.com'); // 支付成功回調地址，必須爲能夠直接訪問的地址，不能帶參數

而後就是須要的訂單參數

formData.addField('bizContent', {
        outTradeNo: orderId, // 商戶訂單號,64個字符之內、可包含字母、數字、下劃線,且不能重複
        productCode: 'FAST_INSTANT_TRADE_PAY', // 銷售產品碼，與支付寶簽約的產品碼名稱,僅支持FAST_INSTANT_TRADE_PAY
        totalAmount: '0.01', // 訂單總金額，單位爲元，精確到小數點後兩位
        subject: '商品', // 訂單標題
        body: '商品詳情', // 訂單描述

    });

後就是 成功回調: 這裏我被坑了好久:

formData.addField('returnUrl', 'https://opendocs.alipay.com');//加在這裏纔有效果,不是加在bizContent 裏面

最後提交官方,用官網文檔的寫法:

const result =  alipaySdk.exec(  // result 爲能夠跳轉到支付連接的 url
        'alipay.trade.page.pay', // 統一收單下單並支付頁面接口
        {}, // api 請求的參數（包含「公共請求參數」和「業務參數」）
        { formData: formData },
    );

訂單查詢(可用可不用):

/**
 * 添加購物車提交訂單支付寶支付後查詢訂單狀態是否成功 */
router.post('/api/member/queryOrderAlipay', (req, res) => {
  let orderId=req.body.orderId
  const formData = new AlipayFormData();
  formData.setMethod('get');
  formData.addField('bizContent', {
    orderId
  });
  // 經過該接口主動查詢訂單狀態
  const result = alipaySdk.exec(
    'alipay.trade.query',
    {},
    { formData: formData },
  );
  axios({
    method: 'GET',
    url: result
  })
    .then(data => {
      let r = data.data.alipay_trade_query_response;
      if(r.code === '10000') { // 接口調用成功
        switch(r.trade_status) {
          case 'WAIT_BUYER_PAY':
            res.send(
              {
                "success": true,
                "message": "success",
                "code": 200,
                "timestamp": (new Date()).getTime(),
                "result": {
                  "status":0,
                  "massage":'交易建立，等待買家付款'
                }
              }
            )
            break;
          case 'TRADE_CLOSED':
            res.send(
              {
                "success": true,
                "message": "success",
                "code": 200,
                "timestamp": (new Date()).getTime(),
                "result": {
                  "status":1,
                  "massage":'未付款交易超時關閉，或支付完成後全額退款'
                }
              }
            )
            break;
          case 'TRADE_SUCCESS':
            res.send(
              {
                "success": true,
                "message": "success",
                "code": 200,
                "timestamp": (new Date()).getTime(),
                "result": {
                  "status":2,
                  "massage":'交易支付成功'
                }
              }
            )
            break;
          case 'TRADE_FINISHED':
            res.send(
              {
                "success": true,
                "message": "success",
                "code": 200,
                "timestamp": (new Date()).getTime(),
                "result": {
                  "status":3,
                  "massage":'交易結束，不可退款'
                }
              }
            )
            break;
        }
      } else if(r.code === '40004') {
        res.send('交易不存在');
      }
    })
    .catch(err => {
      res.json({
        msg: '查詢失敗',
        err
      });
    });

})

到這裏就完成了,成功返回 支付支付的該地址前端只要拿到跳到這裏地址去支付就能夠了,成功後跳到回調成功頁面

​

接口演示

前端直接請求 而後拿到地址:

goPay() {
            let data = {
                orderId: 't454545212121' //隨機生成惟一的就好了這個 本身找吧
            }
            var instance = this.$axios.create({headers: {'content-type': 'application/x-www-form-urlencoded'}});
             // 代理到  http://localhost:3000/api/pcpay
            instance.post(`http://localhost:3000/api/pcpay`, this.$qs.stringify(data)).then(res =>{
                this.data=res;
                window.open(res.data.result)
            });

        }

最後用沙箱版本app掃碼付款能夠看到效果

​

結果demo​​​​​

但願多多支持,你的評論點贊都是個人動力,有問題能夠留言,謝謝網友