有寫到,記錄下支付寶支付的實現
demo 請狠狠的戳這里 ¥ https://download.lllomh.com/cliect/#/product/J302659722615829
微信支付請看這里 https://www.cnblogs.com/lllomh/p/14523711.html
沙箱環境 (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
希望多多支持,你的評論點贊都是我的動力,有問題可以留言,謝謝網友