Node实现支付宝网页支付流程(沙箱环境)

不念不忘少年蓝@ 2023-07-02 10:27 79阅读 0赞

> **支付宝PC端支付接口流程**
> 
>     1、前端点击支付按钮，向后端发起一个ajax请求（get请求，带order\_id）
> 
>     2、后端收到order\_id，根据支付宝的规则生成支付的url,返回前端
> 
>     3、ajax收到成功的响应，从响应中取出url,并向这个url发起请求
> 
>     4、支付宝的服务器收到请求，返回一个支付页面
> 
>     5、买家登录账号或扫码进行支付
> 
>     6、支付宝回调前端的success页面（访问前端的http://127.0.0.1:8080/success?xxx=xx&yy=yy），
> 
> 这时请求中会携带本次支付结果的相关信息
> 
>     7、这个success页面获取请求中携带的参数，同时采用ajax的方式向后端发起get请求，携带获取的参数
> 
>     8、后端验证支付结果，修改订单状态，返回success页面需要的data数据
> 
>     9、success页面加载数据，展示支付结果
> 
>     10、为了防止用户在支付之后将页面关掉，支付宝服务器会再隔一段时间向后端发送一个携带支付结果的post请求，
> 
> 以保证后端能拿到结果，修改订单状态。

### 一、登录[支付宝开放平台][Link 1]，并进入沙箱环境 ###

1.登录

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70][]

2.进入我的控制台

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 1][]

3.进入开发者中心

![20200129104002979.png][]

4.点击研发服务，进入沙箱环境

> **PS：若您只是用于个人项目演示，千万不要选择“我的应用”里的“创建应用”，创建完成后（并且审核通过后），产品签约是需要营业执照的，并且应用一旦上线，是无法删除的；**
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 2][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 5][]

### 二、创建Node项目 ###

> 这里使用的是Egg.js
> 
> 直接使用脚手架，即可快速生成项目

$ mkdir egg-example && cd egg-example
    $ npm init egg --type=simple
    $ npm i

### 三、Coding ###

**（1） 设置RSA2密钥**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 6][]

1.1 下载[支付宝密钥生成器][Link 2]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 7][]

1.2 选择密钥格式和长度后，生成密钥

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 8][]

1.3 将生成的公钥填入到沙箱环境的RSA2中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 9][]

1.4 保存后点击查看，**支付宝公钥**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 10][]

**（2）Coding**

2.1  创建app/controller/alipay.js 和 config/pem/

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 11][]

> config/pem/alipay\_public\_key.pem : 支付宝公钥
> 
> config/pem/public\_key.pem : 应用公钥
> 
> config/pem/private\_key.pem : 应用私钥
> 
> --------------------
> 
> ![20200129112556855.png][]
> 
> 【注意】将支付宝公钥 alipay\_public\_key.pem，将上述生成的字符串添加到该文件，并且字符串前后加上秘钥所需描述：“-----BEGIN PUBLIC KEY-----”、“-----END PUBLIC KEY-----”

2.2 router.js

"use strict";
    
    /**
     * @param {Egg.Application} app - egg application
     */
    module.exports = app => {
      const { router, controller } = app;
      router.get("/", controller.home.index);
      router.get("/alipay", controller.alipay.index);
    };

2.3 alipay.js

"use strict";
    
    const fs = require("fs");
    const path = require("path");
    
    const AlipaySDK = require("alipay-sdk").default;
    const AlipayFormData = require("alipay-sdk/lib/form").default;
    
    const Controller = require("egg").Controller;
    
    class AlipayController extends Controller {
      async index() {
        const { ctx } = this;
    
        const alipaySdk = new AlipaySDK({
          appId: "2**********9", // 你自己的沙箱黄环境的appId
          privateKey: fs.readFileSync(
            path.join(__dirname, "../../config/pem/app_private_key.pem"),
            "ascii"
          ), // 私钥
          signType: "RSA2", // 签名类型
          alipayPublicKey: fs.readFileSync(
            path.join(__dirname, "../../config/pem/alipay_public_key.pem"),
            "ascii"
          ), // 支付宝公钥（不是应用公钥）
          gateway: "https://openapi.alipaydev.com/gateway.do", // 网关地址
          timeout: 5000, // 网关超时时间
          camelcase: true // 是否把网关返回的下划线 key 转换为驼峰写法
        });
        /**
         * 返回支付链接（PC支付接口）
         */
        const formData = new AlipayFormData();
        formData.setMethod("get");
        formData.addField("appId", "2**************9");
        formData.addField("charset", "utf-8");
        formData.addField("signType", "RSA2");
        formData.addField("bizContent", {
          outTradeNo: "1569380127322",// 【必选】商户订单号：64个字符内，包含数字，字母，下划线；需要保证在商户端不重复
          productCode: "FAST_INSTANT_TRADE_PAY",// 【必选】销售产品码，目前仅支持FAST_INSTANT_TRADE_PAY
          totalAmount: "0.01",// 【必选】订单总金额，精确到小数点后两位
          subject: "test",// 【必选】 订单标题
          body: "test" // 【可选】订单描述
        });
        /**
         * exec对应参数：
         * method（调用支付宝api）
         * params（api请求的参数（包含“公共请求参数”和“业务参数”））
         * options（validateSign，formData，log）
         */
    
        const result = await alipaySdk.exec(
          "alipay.trade.page.pay",
          {},
          { formData }
        );
        console.log(result); // result为可以跳转到支付连接的url
        ctx.body = result;
      }
    }
    
    module.exports = AlipayController;

> [业务参数][Link 3]

2.4 运行项目

npm run dev

打开 [http://127.0.0.1:7001/alipay][http_127.0.0.1_7001_alipay] ，将 **result **的结果的链接打开，就可以支付喽

> PS：下载沙箱环境里的[沙箱版支付宝][Link 4]，登录买家账号，进行支付

--------------------

[Vue node.js实现支付宝支付(沙箱测试)][Vue node.js]

[蚂蚁金服开放平台 node sdk][node sdk]

[Link 1]: https://open.alipay.com/platform/home.htm
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200129103625445.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200129103834834.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1,size_16,color_FFFFFF,t_70
[20200129104002979.png]: https://img-blog.csdnimg.cn/20200129104002979.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200129104802264.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200129104846842.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2020012910415333.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/2020012910532288.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200129105957613.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1,size_16,color_FFFFFF,t_70
[Link 2]: https://ideservice.alipay.com/ide/getPluginUrl.htm?clientType=assistant&platform=win&channelType=WEB
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200129110137960.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200129110325925.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200129110533647.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20200129110735202.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20200129111116100.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1,size_16,color_FFFFFF,t_70
[20200129112556855.png]: https://img-blog.csdnimg.cn/20200129112556855.png
[Link 3]: https://www.yuque.com/chenqiu/alipay-node-sdk/with_biz_content
[http_127.0.0.1_7001_alipay]: http://127.0.0.1:7001/alipay
[Link 4]: https://sandbox.alipaydev.com/user/downloadApp.htm
[Vue node.js]: https://blog.csdn.net/weixin_42512937/article/details/101108086
[node sdk]: https://www.yuque.com/chenqiu/alipay-node-sdk/guide