前言
此文章仅供学习参考,这里我们对接的环境是Vue。我在项目Demo使用到的一个支付环境,若出现一些差错还需要到alipay-sdk官方GitHub查询相关配置。
提示:以下是本篇文章正文内容,下面案例可供参考
一、支付宝沙箱环境是什么?
支付宝沙箱环境是一种应用于Web APP开发服务的支付环境,用于模拟实现支付宝支付功能
二、安装所需要的环境
1.引入环境以及工具
具体有:我这里安装了全局的express所以直接执行以下命令
npm install express-generator -g
npm install axios
npm install cors
npm install alipay-sdk
这里需要下载支付宝开放平台助手
下载地址:支付宝开放平台助手
2.安装Express框架
找到我们中意的磁盘,运行命令行窗口,执行命令
express --view=ejs server
cd 到项目目录中
npm install 安装运行所需要的依赖
npm start 即可开启我们的express服务器(我们的默认端口是3000)
前端则为Vue创建一个项目,由于新版本的Vue没有了vue.config,js文件,所以我们在项目src同级下创建该文件,在这个文件中我们要配置相关代理。
const path = require('path')
module.exports = {
// 代理
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: {
'^/api': '/api'
}
}
}
},
configureWebpack: (config) => {
config.resolve = {
extensions: ['.js', '.json', '.vue'],
alias: {
'@': path.resolve(__dirname, './src')
}
}
}
}
接下来我们对Vue项目创建一个点击事件,用于触发我们的后端接口.
实力代码如下:
goPayment() {
var data = {
orderId: 'w20211345452'
}
axios({
url: '/api/payment',
method: 'POST',
headers: {
dataType: 'JSONP',
'content-type': 'application/x-www/form'
},
data: qs.stringify(data)
}).then(res => {
console.log(res)
window.location.href = res.data.result
})
}
3.对接支付宝沙箱环境
首先:我们需要登录到支付宝开放平台找到沙箱环境,
下载好开放平台助手后,我们根据自己的需求选用JAVA或者非JAVA,由于我使用的是Vue开发,这里我们选择后者,密码长度我们选择RSA2。
点击生成密钥即可。点击后,该工具会在窗口生成我们需要的密钥。复制应用公钥到我们的沙箱环境中,填入即可
切回到们的服务器中,进行相关的配置:在项目根目录下创建一个utils文件夹下的alipayutil.js文件,这里我们进行相关配置
const AlipaySdk = require('alipay-sdk').default;
const alipaySdk = new AlipaySdk({
appId: '', // 应用id
gateway: '', // 支付宝网关
signType: '', // 编码格式
alipayPublicKey: '', // 支付宝公钥
privateKey: '' // 应用私钥
})
//最后我们默认导出即可
module.exports = alipaySdk
到route文件夹下的index.js写我们的 /api/payment 接口
具体实例代码如下:
var express = require('express')
var router = express.Router()
const alipaySdk = require('../db/alipayUtil')
const AlipayFormData = require('alipay-sdk/lib/form').default
const axios = require('axios')
const cors = require('cors') //解决跨域请求问题
router.use(cors())
router.use(express.urlencoded({ extended: true }))
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' })
})
router.post('/api/payment', function(req, res, next) {
const orderId = req.body.orderId;
// 对接支付宝
const formData = new AlipayFormData();
formData.setMethod('get');
formData.addField('returnUrl', 'http://localhost:8080/paysuccess');
// 商单信息
formData.addField('bizContent', {
out_trade_no: "21245956656"+Math.random(1,400)+"1128",
product_code: "FAST_INSTANT_TRADE_PAY",
subject: "门票",
body: "商品详情",
// timeout_express: "90m", 超时
total_amount: '80.01'
});
let result = alipaySdk.exec(
'alipay.trade.page.pay',
{},
{ formData: formData }
);
result.then((resp) => {
res.send({
success: 'true',
code: 200,
result: resp
});
});
});
module.exports = router;
之后我们就可以用命令 npm start启动服务器 可以完成沙箱支付
总结
文章略显粗糙,若有帮助,自然是很开心的。