Vue+Koa or Node测试支付宝支付(沙箱环境)

797 阅读2分钟

一、打开支付宝开放平台

openhome.alipay.com/platform/ho…

image.png

image.png

image.png

image.png

二、快速生成公钥

miniu.alipay.com/keytool/cre…

image.png

image.png

三、Koa API or Node API 配置

若使用Node API 可以查看源文章 juejin.cn/post/687336…

首先安装 Alipay SDK:

npm install alipay-sdk -S
 sdk 配置语法
alipaySdk.exec(method, params, options);
复制代码
  • method:字符串类型,调用的 Api,比如 alipay.trade.page.pay ;
  • params:可选参数,对象结构,Api 的请求参数;
  • options:包含
  • validateSign:布尔值,是否对返回值验签,需要依赖支付宝公钥;
  • formData:对象结构,文件上传类接口的请求参数;
  • log:对象结构,存在时会调用 info、error 方法写日志。

由于每次调用 AlipaySdk 的 API 都是同一个对象,所以该对象只需要实例化一次:

// alipay.js 这里单独存放一个文件中,需要时引入即可
const AlipaySdk = require('alipay-sdk').default; // 引入 SDK
const alipaySdk = new AlipaySdk({
    appId: 'appId', // 开放平台上创建应用时生成的 appId
    signType: 'RSA2', // 签名算法,默认 RSA2
    gateway: 'https://openapi.alipaydev.com/gateway.do', // 支付宝网关地址 ,沙箱环境下使用时需要修改
    alipayPublicKey: 'public_key', // 支付宝公钥,需要对结果验签时候必填
    privateKey: 'private_key', // 应用私钥字符串
});
module.exports = alipaySdk;

要完成支付,需要以下几个步骤,

  • 服务器端需要调用支付 API alipay.trade.page.pay 来获取支付页面的地址;
  • 服务器端需要调用支付 API alipay.trade.page.pay 来获取支付页面的地址;

先来看看服务端接口的实现:

const alipaySdk = require('../utils/alipay');
const AlipayFormData = require('alipay-sdk/lib/form').default; // alipay.trade.page.pay 返回的内容为 Form 表单
router.post('/pcpay', async (ctx) =>{
      const formData = new AlipayFormData();
        formData.setMethod('get');
        // 通过 addField 增加参数
        // 在用户支付完成之后,支付宝服务器会根据传入的 notify_url,以 POST 请求的形式将支付结果作为参数通知到商户系统。
        formData.addField('notifyUrl', 'http://www.com/notify'); // 支付成功回调地址,必须为可以直接访问的地址,不能带参数
        formData.addField('bizContent', {
            outTradeNo: ctx.request.body.outTradeNo, // 商户订单号,64个字符以内、可包含字母、数字、下划线,且不能重复
            productCode: 'FAST_INSTANT_TRADE_PAY', // 销售产品码,与支付宝签约的产品码名称,仅支持FAST_INSTANT_TRADE_PAY
            totalAmount: '0.01', // 订单总金额,单位为元,精确到小数点后两位
            subject: '商品', // 订单标题
            body: '商品详情', // 订单描述
        });        // 如果需要支付后跳转到商户界面,可以增加属性"returnUrl"
        const result = await alipaySdk.exec(
            'alipay.trade.page.pay', // 统一收单下单并支付页面接口
            {}, // api 请求的参数(包含“公共请求参数”和“业务参数”)
            {formData: formData},);        // result 为可以跳转到支付链接的 url
        ctx.body={url: result}
});

然后就是前端页面,这个比较简单,就是点击支付按钮,向服务器发起请求,拿到返回的支付页面地址后进行跳转:

$.ajax({
    method: 'POST',
    url: '/alipay/pcpay',
    data: {
        outTradeNo // 商户订单号,必须保证唯一,生成方法有很多,可以去看我的代码    }}).done(function(res) {
        window.open(res.url, '_blank');
}).
fail(function (err) {
    console.log(err);
});

image.png

image.png

image.png