node+vue实现支付宝沙箱测试教程

支付宝的沙箱测试需要前端做的并不多，只是调用一个后端定义的接口，将所需要的订单信息传输到后台，后台进行支付宝的sdk封装，然后返回前端一个链接地址跳转到支付宝的支付页面进行付款即可。

一、前端的实现需要构建一个vue项目，然后点击触发事件执行接口调用即可，代码附上：

<template><div class="home"><button @click="goPayment">发起支付</button></div></template><script>import axios from "axios";import qs from "qs";// @ is an alias to /srcexport 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;});},},};</script>

注意安装 qs 和axios 依赖。命令：

前端的代码可以直接复用的哈，不需要进行修改的。

二、后端主要是通过node实现

1. 首先需要新建一个文件夹payment,然后cd到该目录文件下，新建一个serve.js文件，在项目文件夹下进行项目初始化：

npm init -y

2. 其次依赖项目中所需要使用到的插件：

npm install alipay-sdk --s
npm install axios --s
npm install cors --s
npm install express

3. 然后在项目的根目录下新建一个untils文件夹，在文件下新建一个工具文件alipayuntils.js,代码：

const AlipaySdk = require('alipay-sdk').default;
const alipaySdk = new AlipaySdk({appId: '', // 应用idgateway: 'https://openapi.alipaydev.com/gateway.do', // 支付宝网关signType: 'RSA2', // 编码格式alipayPublicKey: '', // 支付宝公钥privateKey: '' // 应用私钥
})
//最后我们默认导出即可
module.exports = alipaySdk

此处需要配置appid，支付宝公钥和应用私钥，其余两个是固定的，这些配置需要再支付宝开放平台中的控制台进行处理吗，：https://open.alipay.com/develop/manage

3.1. 进入开发平台，选择沙箱工具

3.2. 查看appid 和网关地址

3.3. 配置自定义密钥

配置自定义密钥需要下载支付宝开发平台开发助手：异步验签｜开放平台

然后根据要求在支付宝开放平台中的沙箱应用中进行自定义密钥配置即可

加签完成后将生成的支付宝公钥和应用私钥填入，appid，支付宝网关和编码格式配置在untils/alipayuntils.js文件中，此工具包的配置就完成了。非常重要！！！

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;

5. 到此准备工作就做完了，随后进入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");
});

6. 最后再终端输入命令：

node serve.js

即可启动后端服务，看到此提示就能知晓服务是否启动成功了

7. 前端启动，点击进行转账测试，跳转到支付宝支付页面

注意，此处的支付账号和密码是沙箱测试的

最后转账成功：