node+vue实现支付宝沙箱测试教程(附项目文件)

F_cy

已于 2023-07-06 09:01:11 修改

阅读量1.9k

点赞数 5

分类专栏：支付文章标签：前端 javascript vue.js

于 2022-07-20 11:11:40 首次发布

本文链接：https://blog.csdn.net/weixin_44510655/article/details/125886867

版权

支付专栏收录该内容

4 篇文章 1 订阅

订阅专栏

支付宝的沙箱测试需要前端做的并不多，只是调用一个后端定义的接口，将所需要的订单信息传输到后台，后台进行支付宝的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 /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;

      });

    },

  },

};

</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: '', // 应用id
  gateway: '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. 最后再终端输入命令：