使用Node实现Vue移动端网页支付宝沙箱模拟支付

在许多项目中都会涉及到支付功能，而一些朋友呢目前并不具备申请商家好上线项目的能力，尤其是一些大学生只是用作练习来开发这样的项目，而支付宝为开发者提供了一个模拟支付宝功能的平台——沙箱环境，使得我们可以用一个虚拟的账号来模拟我们项目中所需要的支付功能。

沙箱配置

要用到支付宝沙箱环境呢首先需要到登录支付宝开发平台,登录之后进入管理中心

点击管理中心中的研发服务，就能进入到沙箱环境页面

在沙箱界面进行密钥设置

选择公钥，点击密钥生成器下载支付宝提供的密钥生成工具

打开支付宝开发平台开发助手，选择RSA2和PKCS1，点击生成密钥

将生成的应用公钥粘贴进沙箱的配置中

将应用私钥和支付宝公钥保存到项目的文件夹中，alipay_public_key.pem支付宝公钥，app_private_key.pem应用私钥，app_public_key.pem应用公钥。

sdk的使用

1.安装sdk

npm install alipay-sdk -S

支付宝平台给出了TypeScript的sdk使用文档，使用JavaScript类似。

2.引入sdk
由于我们需要从文件夹里读取私钥，除了引入sdk的包之外还需要引入文件操作的包,我们调起支付宝是通过后端返回给前端一个form表单，前端通过这个form表单来实现支付宝的调起，所以还需要引入AlipayFormData。

const AlipaySdk = require('alipay-sdk').default;;
const fs = require("fs");
const AlipayFormData = require("alipay-sdk/lib/form").default;

3.sdk的配置

const alipaySdk = new AlipaySdk({
  appId: '2016********673', // 开放平台上创建应用时生成的 appId
  privateKey: fs.readFileSync('./config/pem/app_private_key.pem', 'ascii'),
  gateway: 'https://openapi.alipaydev.com/gateway.do',// 支付宝网关地址 ，沙箱环境下使用时需要修改
  alipayPublicKey: fs.readFileSync('./config/pem/alipay_public_key.pem', 'ascii'),
  signType: 'RSA2' // 签名算法,默认 RSA2
});

4.sdk的调用

支付宝开发平台有详细的请求参数，可以根据自己的需求进行添加。特别注意的是outTradeNo参数的内容必须是唯一，否则调用会出错，这个地方利用时间戳来设置outTradeNo参数，完整后端代码如下：

async (req, res) => {
  console.log(req.body);
  var no=new Date().getTime();
  var time = encodeURIComponent(req.body.time);
  var money = req.body.money?req.body.money:0;
  const formData = new AlipayFormData();

  formData.addField('returnUrl', 'http://192.168.3.27:8081/home/notify');//支付成功之后跳转的页面
  formData.addField('quitUrl', 'http://192.168.3.27:8081/home/cancel');//退出支付后跳转的页面
  formData.addField('bizContent', {
  outTradeNo: req.body.time+'_'+no+"_"+money,
  productCode: 'FAST_INSTANT_TRADE_PAY',
  totalAmount: req.body.price+'.00',
  subject: req.body.subject,
  passbackParams:time,
  body: '商品详情',
  });

 const result = await alipaySdk.exec(
   'alipay.trade.wap.pay',
   {},
   { formData: formData },
 );

  // result 为 form 表单
  console.log(result);

  // result 为 form 表单
  // console.log(result);
  res.send(result)
},

前端代码

//html
<div v-html="alipayWap" ref="alipayWap"></div>


//js
this.axios.post("/alipay/pay",{
  price:248.00,
  subject:"缴费",
})
.then(res=>{
  console.log(res.data);
  this.alipayWap = res.data;
  this.$nextTick(() => {
    this.$refs.alipayWap.children[0].submit();
  })
})
.catch(err=>{
  console.log(err);
})

调用结果

成功调用后会弹起下面的页面，你可以选择使用网页支付或者app内支付

如果使用浏览器支付需要使支付宝沙箱中提供的买家账号来进行登录以及支付

如果使用app支付，需要下载支付宝的沙箱版

然后就可以成功调起支付宝进行支付了

关于支付结果的通知，参考支付宝的参考文档