支付宝的沙箱测试需要前端做的并不多，只是调用一个后端定义的接口，将所需要的订单信息传输到后台，后台进行支付宝的sdk封装，然后返回前端一个链接地址跳转到支付宝的支付页面进行付款即可。
一、 前端的实现需要构建一个vue项目，然后点击触发事件执行接口调用即可，代码附上：
<div class="home">
<button @click="goPayment">发起支付</button>
</div>
import axios from "axios";
import qs from "qs";
// @ is an alias to /src
export default {
name: "HomeView",
components: {},
methods: {
goPayment() {
var data = {
orderId: "w20211345452",//订单编号，看后台需要什么
};
axios({
url: "http://localhost:8085/pay/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;
});
},
},
};
注意安装 qs 和axios 依赖 。命令： npm i qs npm i axios
- 首先需要新建一个文件夹payment,然后cd到该目录文件下，新建一个serve.js文件，在项目文件夹下进行项目初始化：
npm init -y
- 其次依赖项目中所需要使用到的插件：
npm install alipay-sdk --s
npm install axios --s
npm install cors --s
npm install express
- 然后在项目的根目录下新建一个nutils文件夹，在文件下新建一个工具文件alipayuntils.js,代码：
const AlipaySdk = require('alipay-sdk').default;
const alipaySdk = new AlipaySdk({
appId: '', // 应用id
gateway: 'https://openapi.alipaydev.com/gateway.do', // 支付宝网关
signType: 'RSA2', // 编码格式
alipayPublicKey: '', // 支付宝公钥
privateKey: '' // 应用私钥
})
//最后我们默认导出即可
module.exports = alipaySdk
此处需要配置appid，支付宝公钥和应用私钥，其余两个是固定的，这些配置需要再支付宝开放平台中的控制台进行处理吗，：open.alipay.com/develop/man… 3.1. 进入开发平台，选择沙箱工具
3.2. 查看appid 和 网关地址
3.3. 配置自定义密钥
配置自定义密钥需要下载支付宝开发平台开发助手：异步验签 ｜ 开放平台
然后根据要求 配置即可
3.4. 加签完成后将生成的支付宝公钥和应用私钥填入，这个工具文件就大功告成了。
- 随后再新建一个路由文件夹router，内新建路由文件index.js,代码如下：
var express = require('express')
var router = express.Router()
const alipaySdk = require('../untils/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.send('index')
})
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/'); //回调地址
// 商单信息
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: '1'
});
let result = alipaySdk.exec(
'alipay.trade.page.pay',
{},
{ formData: formData }
);
result.then((resp) => {
console.log(resp)
res.send({
success: 'true',
code: 200,
result: resp
});
});
});
module.exports = router;
- 到此准备工作就做完了，随后进入node的入口文件配置， serve.js 文件代码：
const express = require("express");
const router = require("./router/index.js"); // 引入路由
var app = express();
app.all("*", function (req, res, next) { //配置预检请求
console.log(req.method);
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Content-type");
res.header("Access-Control-Allow-Methods", "POST,GET,OPTIONS");
res.header("Access-Control-Max-Age", 1728000); //预请求缓存20天
next();
});
app.use(`/pay`, router);
app.listen("8085", () => {//端口监听
console.log("8085 port is start");
});
- 最后再终端输入命令 ：
node serve.js
即可启动后端服务，看到此提示就能知晓服务是否启动成功了
- 前端启动，点击进行转账测试，
- 注意，此处的支付账号和密码是沙箱测试的
最后转账成功：
